From 77bf770c027b867debf73911d34c10e692db8f37 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 20 Jun 2021 16:59:43 +0100
Subject: [PATCH] :art: Refactor of stylesheets, making way for new changes

---
 src/styles/color-themes.scss  |  3 ++-
 src/styles/dimensions.scss    |  1 +
 src/styles/global-styles.scss | 29 +++++++++++++++++++++++++++++
 src/styles/style-helpers.scss | 18 ------------------
 4 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 990c296e..747f0458 100644
--- a/src/styles/color-themes.scss
+++ b/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; }}
diff --git a/src/styles/dimensions.scss b/src/styles/dimensions.scss
index cf02ad51..bdfc2c77 100644
--- a/src/styles/dimensions.scss
+++ b/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 */
diff --git a/src/styles/global-styles.scss b/src/styles/global-styles.scss
index 2a83e105..64d4bd0e 100644
--- a/src/styles/global-styles.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/styles/style-helpers.scss b/src/styles/style-helpers.scss
index 2aafd339..d5db94b0 100644
--- a/src/styles/style-helpers.scss
+++ b/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;
-}