From 4832b718daff9677b037cffb39b322f2f42e932f Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Wed, 13 Dec 2023 15:24:27 +0100
Subject: [PATCH] :bug: Fix problem with menu colors

---
 frontend/resources/styles/common/refactor/color-defs.scss     | 4 +++-
 frontend/resources/styles/common/refactor/design-tokens.scss  | 2 +-
 .../styles/common/refactor/themes/default-theme.scss          | 1 +
 .../resources/styles/common/refactor/themes/light-theme.scss  | 1 +
 frontend/src/app/main/ui/workspace/left_header.scss           | 4 +++-
 5 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss
index 17da351a1..b7438f76d 100644
--- a/frontend/resources/styles/common/refactor/color-defs.scss
+++ b/frontend/resources/styles/common/refactor/color-defs.scss
@@ -4,7 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
-@use "sass:color" as color;
+@use "sass:color";
 
 :root {
   // DARK
@@ -31,10 +31,12 @@
   --light-gray-1: #fff;
   --light-gray-2: #e8eaee;
   --light-gray-2-30: rgba(232, 234, 238, 0.3);
+  --light-gray-2-80: rgba(232, 234, 238, 0.8);
   --light-gray-3: #f3f4f6;
   --light-gray-4: #eef0f2;
   --black: #000;
   --off-black: #495e74;
+  --off-black-30: #{color.change(#495e74, $alpha: 0.3)};
   --purple: #6911d4;
   --purple-30: rgba(105, 17, 212, 0.2);
   --blue: #1345aa;
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index c68d1d650..c1d86f5ea 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -179,7 +179,7 @@
   --menu-shortcut-foreground-color: var(--color-foreground-secondary);
   --menu-shortcut-foreground-color-selected: var(--color-foreground-primary);
   --menu-shortcut-foreground-color-hover: var(--color-foreground-primary);
-  --menu-shadow-color: var(--color-background-subtle);
+  --menu-shadow-color: var(--shadow-color);
   --menu-background-color-disabled: var(--color-background-primary);
   --menu-foreground-color-disabled: var(--color-foreground-secondary);
   --menu-border-color-disabled: var(--color-background-quaternary);
diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss
index 3f98ae245..20b8067dd 100644
--- a/frontend/resources/styles/common/refactor/themes/default-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss
@@ -29,6 +29,7 @@
   --error-color: var(--dark-error-color);
   --canvas-color: var(--color-canvas);
 
+  --shadow-color: var(--dark-gray-2-30);
   --radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset;
 
   @include meta.load-css("hljs-dark-theme");
diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss
index 07dcdc94e..bbfc3337d 100644
--- a/frontend/resources/styles/common/refactor/themes/light-theme.scss
+++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss
@@ -29,6 +29,7 @@
   --error-color: var(--light-error-color);
   --canvas-color: var(--color-canvas);
 
+  --shadow-color: var(--off-black-30);
   --radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
 
   @include meta.load-css("hljs-light-theme");
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index b89a2c0e2..0e90f6ca4 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -93,7 +93,9 @@
       cursor: pointer;
     }
     .separator {
-      height: $s-12;
+      margin-top: $s-8;
+      height: $s-4;
+      border-top: 1px solid $db-secondary;
     }
     .shortcut {
       @extend .shortcut;