some more ui tweaks

AnglesHQ · Dec 3, 2023 · 2360107 · 2360107
1 parent 97bc82a
commit 2360107
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/src/components/pages/dashboard/DashboardPage.js b/src/components/pages/dashboard/DashboardPage.js
@@ -17,12 +17,11 @@ import {
   Dropdown,
   IconButton,
 } from 'rsuite';
-import { BsLockFill } from 'react-icons/bs';
+import { BsLockFill, BsFilterSquare } from 'react-icons/bs';
 import TableColumnIcon from '@rsuite/icons/TableColumn';
 import MenuIcon from '@rsuite/icons/Menu';
 import ReloadIcon from '@rsuite/icons/Reload';
 import RemindFillIcon from '@rsuite/icons/RemindFill';
-import FunnelIcon from '@rsuite/icons/Funnel';
 import WaitIcon from '@rsuite/icons/Wait';
 import ReviewPassIcon from '@rsuite/icons/ReviewPass';
 import DocPassIcon from '@rsuite/icons/DocPass';
@@ -74,16 +73,17 @@ const FilterMenu = function (props) {
     <MultiCascader
       style={{ width: 50 }}
       uncheckableItemValues={[1, 2]}
+      className="dashboard-filter-button"
       placeholder={(
         <span>
-          <FunnelIcon />
+          <BsFilterSquare className="funnel-icon" />
         </span>
       )}
       renderValue={(value, selectedItems) => (
         <span>
           <span style={{ color: '#575757' }}>
             <Badge content={selectedItems.length}>
-              <FunnelIcon />
+              <BsFilterSquare className="funnel-icon" />
             </Badge>
           </span>
         </span>

diff --git a/src/components/pages/dashboard/styles.less b/src/components/pages/dashboard/styles.less
@@ -21,6 +21,17 @@
     }
 }
 
+.top-menu-stack {
+
+    .dashboard-filter-button {
+
+        .funnel-icon {
+            font-size: 1.3em;
+            color: var(--link-color-1);
+        }
+    }
+}
+
 .dashboard-header {
     padding-top: 20px;
 

diff --git a/src/styles/index.less b/src/styles/index.less
@@ -89,6 +89,11 @@
     --button-deactived-background: var(--master-color-2);
     --button-deactivated-font-color: var(--master-font-color-3);
 
+    // select picker
+    --select-picker-background: var(--master-color-2);
+    --select-picker-font-color: var(--master-font-color-1);
+    --select-picker-label-color: var(--master-color-3);
+
     // result colors
     --pass-color: #5fad6f;
     --fail-color: #fc6571;
@@ -116,7 +121,7 @@
 
     --master-font-color-1: hsl(240, 9%, 96%);
     --master-font-color-2: hsl(0, 23%, 97%);
-    --master-font-color-3: hsl(0, 0%, 71%);
+    --master-font-color-3: hsl(0, 0%, 84%);
 
     --master-icon-color: hsl(210, 100%, 60%);
 
@@ -252,6 +257,22 @@ body {
 .rs-picker {
     padding-right: 5px;
 
+    .rs-picker-toggle, .rs-picker-toggle-active, .rs-picker-default {
+        background: var(--select-picker-background) !important;
+        color: var(--select-picker-font-color);
+        border: none;
+    }
+
+    .rs-picker-toggle:hover, .rs-picker-toggle:focus, .rs-picker-toggle:focus-visible {
+        background: var(--select-picker-background) !important;
+        color: var(--select-picker-font-color);
+        border: none;
+    }
+
+    .rs-picker-toggle-label {
+        color: var(--select-picker-label-color);
+    }
+
     .rs-badge-content {
         top: 9px;
         right: -4px;