fix: Change run picker menu to use three dots and update stop timeser…

…ies icon [PT-187736835]
concord-consortium · Jul 2, 2024 · bee817b · bee817b
1 parent 2dd55a1
commit bee817b
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 3 deletions.
diff --git a/src/mobile-app/components/run-picker.tsx b/src/mobile-app/components/run-picker.tsx
@@ -26,7 +26,7 @@ export const RunPicker: React.FC<IProps> = ({ runs, onRunSelect, onRunUpload, on
               <div className={css.icon}><Icon name="upload" /></div><div className={css.text}>Upload</div></div> : undefined}
           </div>
           <div className={css.menuContainer}>
-            <MenuComponent>
+            <MenuComponent icon="more">
               {onRunEdit ? <MenuItemComponent icon={"create"} onClick={onRunEdit.bind(null, run)}>Edit</MenuItemComponent> : undefined}
               {onRunUpload ? <MenuItemComponent icon={"upload"} onClick={onRunUpload.bind(null, run)}>Upload</MenuItemComponent> : undefined}
               {onRunDelete ? <MenuItemComponent icon={"delete"} onClick={onRunDelete.bind(null, run)}>Delete</MenuItemComponent> : undefined}

diff --git a/src/shared/components/data-table-field.module.scss b/src/shared/components/data-table-field.module.scss
@@ -174,6 +174,10 @@ $headerBorder: #fff;
         &.record {
           background-color: $sensorGreenLight1;
         }
+        &.timeSeriesStop {
+          background-color: #fff;
+          border: 4px solid #00a80a;
+        }
         &:hover:not(.disabled) {
           cursor: pointer;
         }

diff --git a/src/shared/components/data-table-field.tsx b/src/shared/components/data-table-field.tsx
@@ -461,6 +461,7 @@ export const DataTableField: React.FC<FieldProps> = props => {
       [css.refresh]: !sensorFieldsBlank,
       [css.record]:  sensorFieldsBlank,
       [css.disabled]: buttonDisabled,
+      [css.timeSeriesStop]: iconName === "stopDataTrial",
     });
     const refreshBtnCell = <td key="refreshBtn" className={`${css.refreshSensorReadingColumn} ${css.readOnly}`}>
       {

diff --git a/src/shared/components/icon.tsx b/src/shared/components/icon.tsx
@@ -21,6 +21,7 @@ import RecordDataTrial from "../icons/record-data-trial.svg";
 import ReRecordDataTrial from "../icons/re-record-data-trial.svg";
 import StopDataTrial from "../icons/stop-data-trial.svg";
 import DeleteDataTrial from "../icons/delete-data-trial.svg";
+import More from "../icons/more-button.svg";
 
 const Icons = {
   label: Label,
@@ -44,7 +45,8 @@ const Icons = {
   recordDataTrial: RecordDataTrial,
   reRecordDataTrial: ReRecordDataTrial,
   stopDataTrial: StopDataTrial,
-  deleteDataTrial: DeleteDataTrial
+  deleteDataTrial: DeleteDataTrial,
+  more: More
 };
 export type IconName = keyof typeof Icons;
 

diff --git a/src/shared/icons/more-button.svg b/src/shared/icons/more-button.svg
diff --git a/src/shared/icons/stop-data-trial.svg b/src/shared/icons/stop-data-trial.svg