Improve visibility of column sort state adjust sliders

Highlight the ascending/descending arrow to improve the visibility of the column's current sort state. Slightly reduce the size of the slider handles. Closes #97, closes #98
georgetown-cset · Sep 26, 2023 · 00fe564 · 00fe564
1 parent 5d49f57
commit 00fe564
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/web/gui-v2/src/components/HeaderSlider.jsx b/web/gui-v2/src/components/HeaderSlider.jsx
@@ -4,8 +4,6 @@ import { Slider } from '@mui/material';
 
 import { debounce } from '../util';
 
-// import { LabelStyled } from '@eto/eto-ui-components';
-
 const styles = {
   wrapper: css`
     display: flex;
@@ -16,6 +14,11 @@ const styles = {
   slider: css`
     margin: 0 6px;
     width: calc(100% - 12px);
+
+    .MuiSlider-thumb {
+      height: 10px;
+      width: 10px;
+    }
   `,
 };
 

diff --git a/web/gui-v2/src/components/ListViewTable.jsx b/web/gui-v2/src/components/ListViewTable.jsx
@@ -81,6 +81,13 @@ const styles = {
         width: 100%;
       }
     }
+
+    svg.MuiSvgIcon-root.MuiTableSortLabel-icon {
+      background-color: var(--bright-blue);
+      color: white;
+      padding: 2px;
+      margin-left: 1rem;
+    }
   `,
   shortDropdown: css`
     .MuiPaper-root {