From 4f3e96c506fea922222bdb44dbefaa00865c6253 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 28 Aug 2021 13:43:45 +0100
Subject: [PATCH] :lipstick: Improve UI for material theme in Workspace view

---
 src/components/Workspace/SideBarItem.vue | 4 ++--
 src/styles/color-palette.scss            | 2 ++
 src/styles/color-themes.scss             | 6 +++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/Workspace/SideBarItem.vue b/src/components/Workspace/SideBarItem.vue
index a5a6f606..cfb81d7f 100644
--- a/src/components/Workspace/SideBarItem.vue
+++ b/src/components/Workspace/SideBarItem.vue
@@ -46,8 +46,8 @@ export default {
 <style lang="scss" scoped>
 
 div.side-bar-item {
-  color: var(--side-bar-color);
-  background: var(--side-bar-background);
+  color: var(--side-bar-item-color);
+  background: var(--side-bar-item-background);
   text-align: center;
   &.text-only {
     background: none;
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index caa860fa..39bf55be 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -73,6 +73,8 @@
   --side-bar-background: var(--background-darker);
   --side-bar-background-lighter: var(--background);
   --side-bar-color: var(--primary);
+  --side-bar-item-background: var(--side-bar-background);
+  --side-bar-item-color: var(--side-bar-color);
   // Minimal view
   --minimal-view-background-color: var(--background);
   --minimal-view-title-color: var(--primary);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 9b1ad553..fcd1701b 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -360,7 +360,7 @@ html[data-theme='material'], html[data-theme='material-dark'] {
     padding: 0;
   }
   /* Custom layout for medium and large icons */
-  .item:not(.size-small) {
+  .item-wrapper .item:not(.size-small) {
     display: flex;
     flex-direction: row-reverse;
     justify-content: flex-end;
@@ -510,6 +510,8 @@ html[data-theme='material'] {
   --context-menu-secondary-color: #f5f5f5;
   --transparent-white-50: #00000080;
   --status-check-tooltip-background: #fff;
+  --side-bar-background-lighter: #0c4eba;
+  --side-bar-item-background: #f5f5f5;
 
   --minimal-view-background-color: var(--background);
   --minimal-view-title-color: var(--background-darker);
@@ -603,6 +605,8 @@ html[data-theme='material-dark'] {
   --curve-factor: 2px;
   --curve-factor-navbar: 0;
   
+  --side-bar-background: #131a1f;
+
   --welcome-popup-background: #131a1f;
   --welcome-popup-text-color: var(--primary);
   --config-settings-background: #131a1f;