💄 Improve UI for material theme in Workspace view

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;

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);

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;