fix(styling): add menu shadow & increase contrast for Dark Mode

ghiscoding · Mar 3, 2024 · bff2da0 · bff2da0
1 parent aef0eca
commit bff2da0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 19 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -413,6 +413,7 @@ $slick-menu-title-font-weight:                              normal !default;
 $slick-menu-title-margin-bottom:                            6px !default;
 $slick-menu-title-margin-right:                             7px !default;
 $slick-menu-title-width:                                    100% !default;
+$slick-menu-box-shadow:                                     none !default;
 $slick-submenu-box-shadow:                                  0 1px 4px 1px rgba(146, 152, 163, 0.4) !default;
 $slick-submenu-min-width:                                   100px !default;
 
@@ -979,7 +980,7 @@ $slick-empty-data-warning-z-index:                          10 !default;
   // local common CSS vars for dark mode
   --primary-color:                                        #{lighten($primary-color, 15%)};
   --slick-base-dark-text-color:                           #cccccc;
-  --slick-base-dark-menu-bg-color:                        #212529;
+  --slick-base-dark-menu-bg-color:                        #252525;
   --slick-base-dark-menu-border:                          1px solid #505050;
   --slick-base-dark-menu-item-border:                     1px solid #5a5a5a;
   --slick-base-dark-menu-item-hover-color:                #363b40;
@@ -999,13 +1000,13 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-cell-even-background-color:                     #141618;
   --slick-cell-odd-background-color:                      #2c3034;
   --slick-cell-text-color:                                #cdcdcd;
-  --slick-cell-box-shadow:                                none;
   --slick-cell-border-top:                                1px solid #474747;
   --slick-column-picker-background-color:                 var(--slick-base-dark-menu-bg-color);
+  --slick-column-picker-box-shadow:                       0 0 2px #606060;
   --slick-column-picker-border:                           var(--slick-base-dark-menu-border);
   --slick-column-picker-checkbox-opacity:                 0.50;
   --slick-column-picker-checkbox-opacity-hover:           0.70;
-  --slick-column-picker-close-btn-bg-color:               #1c1c1c;
+  --slick-column-picker-close-btn-bg-color:               transparent;
   --slick-column-picker-item-hover-color:                 var(--slick-base-dark-menu-bg-color);
   --slick-column-picker-hr-bg-color:                      #434343;
   --slick-column-picker-hr-divider-border:                1px solid #525252;
@@ -1031,15 +1032,16 @@ $slick-empty-data-warning-z-index:                          10 !default;
   --slick-header-column-background-active:                #535353;
   --slick-slider-filter-input-bgcolor:                    var(--slick-base-dark-menu-bg-color);
   --slick-menu-bg-color:                                  var(--slick-base-dark-menu-bg-color);
+  --slick-menu-border:                                    var(--slick-base-dark-menu-border);
+  --slick-menu-box-shadow:                                0 0 2px #606060;
+  --slick-menu-close-btn-bg-color:                        #1c1c1c;
   --slick-menu-color:                                     #bbbbbb;
+  --slick-menu-divider-color:                             #606060;
   --slick-menu-item-hover-color:                          var(--slick-base-dark-menu-bg-color);
-  --slick-menu-title-color:                               #bababa;
   --slick-menu-item-hover-color:                          var(--slick-base-dark-menu-item-hover-color);
-  --slick-menu-close-btn-bg-color:                        #1c1c1c;
   --slick-menu-item-hover-border:                         var(--slick-base-dark-menu-item-border);
-  --slick-menu-border:                                    var(--slick-base-dark-menu-border);
-  --slick-menu-divider-color:                             #606060;
   --slick-menu-title-border-bottom:                       1px solid #525252;
+  --slick-menu-title-color:                               #bababa;
   --slick-slider-filter-border:                           var(--slick-base-dark-menu-item-border);
   --slick-slider-filter-thumb-color:                        #d0d0d0;
   --slick-font-color:                                     #d3d3d3;

diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -355,18 +355,18 @@
         width: 7px;
         right: 0;
         z-index: 1;
-      }
-      .slick-resizable-handle:hover {
-        border-bottom: var(--slick-header-resizable-hover-border-bottom, $slick-header-resizable-hover-border-bottom);
-        border-left: var(--slick-header-resizable-hover-border-left, $slick-header-resizable-hover-border-left);
-        border-right: var(--slick-header-resizable-hover-border-right, $slick-header-resizable-hover-border-right);
-        border-top: var(--slick-header-resizable-hover-border-top, $slick-header-resizable-hover-border-top);
-        width: var(--slick-header-resizable-hover-width, $slick-header-resizable-hover-width);
-        border-radius: var(--slick-header-resizable-hover-border-radius, $slick-header-resizable-hover-border-radius);
-        right: var(--slick-header-resizable-hover-right, $slick-header-resizable-hover-right);
-        height: var(--slick-header-resizable-hover-height, $slick-header-resizable-hover-height);
-        top: var(--slick-header-resizable-hover-top, $slick-header-resizable-hover-top);
-        opacity: var(--slick-header-resizable-hover-opacity, $slick-header-resizable-hover-opacity);
+        &:hover {
+          border-bottom: var(--slick-header-resizable-hover-border-bottom, $slick-header-resizable-hover-border-bottom);
+          border-left: var(--slick-header-resizable-hover-border-left, $slick-header-resizable-hover-border-left);
+          border-right: var(--slick-header-resizable-hover-border-right, $slick-header-resizable-hover-border-right);
+          border-top: var(--slick-header-resizable-hover-border-top, $slick-header-resizable-hover-border-top);
+          width: var(--slick-header-resizable-hover-width, $slick-header-resizable-hover-width);
+          border-radius: var(--slick-header-resizable-hover-border-radius, $slick-header-resizable-hover-border-radius);
+          right: var(--slick-header-resizable-hover-right, $slick-header-resizable-hover-right);
+          height: var(--slick-header-resizable-hover-height, $slick-header-resizable-hover-height);
+          top: var(--slick-header-resizable-hover-top, $slick-header-resizable-hover-top);
+          opacity: var(--slick-header-resizable-hover-opacity, $slick-header-resizable-hover-opacity);
+        }
       }
       &.unorderable {
         background-color: var(--slick-grid-header-unorderable-bg-color, $slick-grid-header-unorderable-bg-color);

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -231,6 +231,7 @@ li.hidden {
 // ----------------------------------------------
 
 .slick-cell-menu, .slick-context-menu, .slick-grid-menu, .slick-header-menu {
+  box-shadow: var(--slick-menu-box-shadow, $slick-menu-box-shadow);
   &.slick-submenu {
     box-shadow: var(--slick-submenu-box-shadow, $slick-submenu-box-shadow);
     min-width: var(--slick-submenu-min-width, $slick-submenu-min-width);