From 27216b54367f32a0ffb07aaba53d40044e36e933 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Tue, 2 Jul 2024 06:49:37 -0400
Subject: [PATCH] fix: Change run picker menu to use three dots and update stop
 timeseries icon [PT-187736835]

---
 src/mobile-app/components/run-picker.tsx           | 2 +-
 src/shared/components/data-table-field.module.scss | 4 ++++
 src/shared/components/data-table-field.tsx         | 1 +
 src/shared/components/icon.tsx                     | 4 +++-
 src/shared/icons/more-button.svg                   | 5 +++++
 src/shared/icons/stop-data-trial.svg               | 2 +-
 6 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/shared/icons/more-button.svg

diff --git a/src/mobile-app/components/run-picker.tsx b/src/mobile-app/components/run-picker.tsx
index 8e69144..13cb3b7 100644
--- 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
index b5cc969..a4728a4 100644
--- 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
index 2a123e8..fe237bc 100644
--- 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
index 13d145b..4155b3f 100644
--- 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
new file mode 100644
index 0000000..1f96873
--- /dev/null
+++ b/src/shared/icons/more-button.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="6" r="2" fill="#0b809b"/>
+  <circle cx="12" cy="12" r="2" fill="#0b809b"/>
+  <circle cx="12" cy="18" r="2" fill="#0b809b"/>
+</svg>
\ No newline at end of file
diff --git a/src/shared/icons/stop-data-trial.svg b/src/shared/icons/stop-data-trial.svg
index 5c4dd95..9ce2d99 100644
--- a/src/shared/icons/stop-data-trial.svg
+++ b/src/shared/icons/stop-data-trial.svg
@@ -5,7 +5,7 @@
         <g id="Monitor-Your-World-App-Update" transform="translate(-1728, -173)">
             <g id="Stop-Data-Trial-Icon" transform="translate(1728, 173)">
                 <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-                <rect id="Stop" fill="#ffffff" fill-rule="nonzero" x="4" y="4" width="16" height="16" rx="2"></rect>
+                <rect id="Stop" fill="#00a80a" fill-rule="nonzero" x="4" y="4" width="16" height="16" rx="2"></rect>
             </g>
         </g>
     </g>