Update color in quasar.variables.scss, remove white border on HTML elemnt modal, add box-shadow to modal with consideration of dark background

Author: Jaime de Venecia

src/components/right-sidebar/Tree.vue

@@ -282,10 +282,18 @@ watch(componentMap, () => (treeData.value = buildTree(componentMap.value)), {
   justify-content: center;
   // padding: 10em;
   border-radius: 5px;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
-    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
-    rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
-  border: 1px solid white;
+  // no border, box shadow for dark background
+  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
+    /* shadow ring 👇 */ 0 0 0 1px hsla(0, 0%, 0%, 0.05),
+    /* multiple soft shadows 👇 */ 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
+    0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
+
+  // old styling
+  // border: 1px solid white;
+  // box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
+  //   rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
+  //   rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
+
   position: relative;
 }
 

src/css/quasar.variables.scss

@@ -16,7 +16,8 @@ Tip: Use the "Theme Builder" on Quasar's documentation website.
 */
 
 $primary: #737578;
-$secondary: #61d18c;
+// $secondary: #61d18c; // old color
+$secondary: #34ab83;
 $accent: #a1ddc2;
 $subaccent: #0d0d0d;
 $subaccentbtn: #2c384d;