Add styling to most recent

METS-Programme · Aug 7, 2024 · 5eb45c5 · 5eb45c5
1 parent dfe3537
commit 5eb45c5
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/src/components/popover/modifier-panel.tsx b/src/components/popover/modifier-panel.tsx
@@ -8,7 +8,7 @@ type Props = {
 const ModifierComponent: React.FC<Props> = ({listItem,onChangeMostRecent}) => {
   return (
     <>
-      <div className={styles.selectedListItem}>
+      <div className={styles.mostRecentContainer}>
         <div> Most Recent #: <span className={styles.modifierLeft}>{listItem?.modifier}</span></div>
         <div>
           <Subtract className={`${styles.selectedListItemArrow} ${styles.modifier}`} onClick={() => onChangeMostRecent(listItem, "subtract")}/>

diff --git a/src/data-visualizer/data-visualizer.component.tsx b/src/data-visualizer/data-visualizer.component.tsx
@@ -848,12 +848,12 @@ const DataVisualizer: React.FC = () => {
                               {selectedParameters.map((parameter) => (
                                 <>
                                   <li
-                                    className={styles.rightListItem}
+                                    className={`${styles.rightListItem} ${parameter?.showModifierPanel ? styles.openRightListItem : ''} `}
                                     key={parameter.label}
                                     role="menuitem"
                                   >
                                     <div className={styles.selectedListItem}>
-                                      <div><ArrowLeft className={styles.selectedListItemArrow}
+                                      <div><ArrowLeft className={styles.itemChevronUpDown}
                                                       onClick={() => moveAllFromRightToLeft(parameter)}/></div>
                                       {parameter.label}
                                       {
@@ -863,9 +863,9 @@ const DataVisualizer: React.FC = () => {
                                               <div className={styles.modifierContainer}>
                                                 <div>
                                                   { parameter?.showModifierPanel ?
-                                                    <ChevronUp className={styles.selectedListItemArrow} onClick={() => showModifierPanel(parameter)}/>
+                                                    <ChevronUp className={styles.itemChevronUpDown} onClick={() => showModifierPanel(parameter)}/>
                                                     :
-                                                    <ChevronDown className={styles.selectedListItemArrow}
+                                                    <ChevronDown className={styles.itemChevronUpDown}
                                                                  onClick={() => showModifierPanel(parameter)}/>
                                                   }
                                                 </div>

diff --git a/src/data-visualizer/data-visualizer.scss b/src/data-visualizer/data-visualizer.scss
@@ -87,14 +87,20 @@
 }
 
 .rightListItem {
-  @extend .leftListItem;
+  list-style-type: none;
+  padding: 0.75rem 1rem;
+  @include type.type-style('body-compact-01');
 
   &:hover {
-    display: unset;
-    align-items: unset;
+    background-color: colors.$gray-10-hover;
 
-    &::after {
-      content: none;
+    .itemChevronUpDown {
+      display: unset;
+    }
+
+    .selectedListItem {
+      display: flex;
+      justify-content: space-between;
     }
   }
 }
@@ -282,12 +288,12 @@
   min-width: 2.5rem;
 }
 
-.selectedListItem {
-  display: flex;
-  justify-content: space-between;
+.selectedListItemArrow {
+  cursor: pointer;
 }
 
-.selectedListItemArrow {
+.itemChevronUpDown {
+  display: none;
   cursor: pointer;
 }
 
@@ -324,3 +330,21 @@
   height: 0;
   display: none;
 }
+
+.mostRecentContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.openRightListItem {
+  background-color: colors.$gray-10-hover;
+
+  .itemChevronUpDown {
+    display: unset;
+  }
+
+  .selectedListItem {
+    display: flex;
+    justify-content: space-between;
+  }
+}