🎨 Refactor of stylesheets, making way for new changes

src/styles/color-themes.scss

@@ -26,6 +26,7 @@ html[data-theme='thebe'] {
 
 html[data-theme='dracula'] {
   --font-headings: 'Allerta Stencil', sans-serif;
+  --primary: #6272a4;
   --background: #44475a;
   --background-darker: #282a36;
   --item-group-background: #282a36;
@@ -34,7 +35,7 @@ html[data-theme='dracula'] {
   --item-shadow: none;
   --item-hover-shadow: none;
   --settings-text-color: #98ace9;
-  --primary: #6272a4;
+  --config-settings-color: #98ace9;
   .collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; color: #8be9fd; }}
   .collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; color: #50fa7b; }}
   .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; color: #ffb86c; }}

src/styles/dimensions.scss

@@ -4,6 +4,7 @@
   --outline-color: none;
   --curve-factor: 5px; // Border radius for most components
   --curve-factor-navbar: 16px; // Border radius for header
+  --curve-factor-small: 2px; // Subtle border radius for util components
   --dimming-factor: 0.7; // Opacity for semi-transparent components
 
   /* Basic Page Components */

src/styles/global-styles.scss

@@ -13,3 +13,32 @@ html {
     cursor: pointer;
   }
 }
+
+/* Overriding styles for the modal component */
+.vm--modal, .dashy-modal {
+  box-shadow: 0 40px 70px -2px hsl(0deg 0% 0% / 60%), 1px 1px 6px var(--primary) !important;
+  min-width: 300px;
+  min-height: 500px;
+}
+.vm--overlay {
+  background: #00000080;
+}
+
+/* Overiding styles for the global toast component */
+.toast-message {
+  background: var(--toast-background) !important;
+  color: var(--toast-color) !important;
+  border: 1px solid var(--toast-color) !important;
+  border-radius: var(--curve-factor) !important;
+  font-size: 1.25rem !important;
+}
+.toast-error {
+  background: var(--danger) !important;
+  color: var(--white) !important;
+  font-size: 1.25rem !important;
+}
+.toast-success {
+  background: var(--success) !important;
+  color: var(--white) !important;
+  font-size: 1.25rem !important;
+}

src/styles/style-helpers.scss

@@ -37,21 +37,3 @@
 .horizontal-center { margin: 0 auto; }
 .border-box { box-sizing: border-box; }
 
-/* Overiding styles for the global toast component */
-.toast-message {
-    background: var(--toast-background) !important;
-    color: var(--toast-color) !important;
-    border: 1px solid var(--toast-color) !important;
-    border-radius: var(--curve-factor) !important;
-    font-size: 1.25rem !important;
-}
-.toast-error {
-    background: var(--danger) !important;
-    color: var(--white) !important;
-    font-size: 1.25rem !important;
-}
-.toast-success {
-    background: var(--success) !important;
-    color: var(--white) !important;
-    font-size: 1.25rem !important;
-}