From 160f72e32a5e83e53fe080e815d1447d3c8d7f96 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Fri, 29 Oct 2021 23:03:58 +0100
Subject: [PATCH] :lipstick: Improved styling variables for config editor

---
 src/styles/color-palette.scss | 13 +++++++++----
 src/styles/color-themes.scss  | 10 +++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 5de5798d..71bcc2d5 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -48,18 +48,23 @@
   --item-group-outer-background: var(--primary);
   --item-group-heading-text-color: var(--item-group-background);
   --item-group-heading-text-color-hover: var(--background);
-  // Settings and config
-  --settings-background: var(--background);
+  // Homepage settings
   --settings-text-color: var(--primary);
-  --config-code-background: #fff;
-  --config-code-color: var(--background);
+  --settings-background: var(--background);
+  // Config menu
   --config-settings-color: var(--primary);
   --config-settings-background: var(--background-darker);
+  --config-code-color: var(--background);
+  --config-code-background: #fff;
   --code-editor-color: var(--black);
   --code-editor-background: var(--white);
+  // Interactive editor
   --interactive-editor-color: var(--primary);
   --interactive-editor-background: var(--background);
   --interactive-editor-background-darker: var(--background-darker);
+  // Cloud backup/ restore menu
+  --cloud-backup-color: var(--config-settings-color);
+  --cloud-backup-background: var(--config-settings-background);
   // Search bar (on homepage)
   --search-container-background: var(--background-darker);
   --search-field-background: var(--background);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index b593b40e..f535eba8 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -378,9 +378,6 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     margin: 0;
     padding: 0;
   }
-  .item-wrapper.add-new-item {
-    flex-grow: inherit;
-  }
   /* Custom layout for medium and large icons */
   .item-wrapper .item:not(.size-small) {
     display: flex;
@@ -416,6 +413,13 @@ html[data-theme='material'], html[data-theme='material-dark'] {
       }	
     }
   }
+  .item-wrapper.add-new-item {
+    flex-grow: inherit;
+  }
+  .add-new-item a {
+    flex-grow: inherit;
+    flex-basis: inherit;
+  }
   .tooltip.item-description-tooltip:not(.tooltip-is-small) {
     display: none !important;
   }