feat: Update styling [PT-187736835]

- Changed experiment colors so that the icon colors are specified in the experiment and not in the code - Added permanent border around experiment name in header - Update time series sensor header to use svg sparkgraph
concord-consortium · Jun 20, 2024 · 8565425 · 8565425
1 parent cacc372
commit 8565425
Show file tree

Hide file tree

Showing 25 changed files with 418 additions and 339 deletions.
diff --git a/src/authoring-app/utils/experiment-authoring-schema.json b/src/authoring-app/utils/experiment-authoring-schema.json
@@ -67,6 +67,26 @@
                     "examples": [
                         "SI"
                     ]
+                },
+                "iconColor": {
+                    "$id": "#/properties/metadata/properties/iconColor",
+                    "type": "string",
+                    "title": "The IconColor Schema",
+                    "description": "Icon color for this template.",
+                    "default": "",
+                    "examples": [
+                        "#0f73b8"
+                    ]
+                },
+                "iconHoverColor": {
+                    "$id": "#/properties/metadata/properties/iconHoverColor",
+                    "type": "string",
+                    "title": "The IconHoverColor Schema",
+                    "description": "Icon hover color for this template.",
+                    "default": "",
+                    "examples": [
+                        "#4b96ca"
+                    ]
                 }
             }
         },

diff --git a/src/data/experiments.json b/src/data/experiments.json
@@ -1,10 +1,135 @@
 [
+  {
+    "version": "1.0.0",
+    "metadata": {
+      "uuid": "aefb5299-c127-4d84-b7f0-78da389ebecd",
+      "name": "Data Trial",
+      "initials": "DT",
+      "iconColor": "#008a09",
+      "iconHoverColor": "#40a847"
+    },
+    "schema": {
+      "sections": [
+        {
+          "title": "Collect",
+          "icon": "collect",
+          "formFields": [
+            "experimentData"
+          ]
+        },
+        {
+          "title": "Note & Photo",
+          "icon": "note_and_photo",
+          "formFields": [
+            "photo"
+          ]
+        }
+      ],
+      "dataSchema": {
+        "type": "object",
+        "required": [],
+        "properties": {
+          "experimentData": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "required": [
+                "timeSeries"
+              ],
+              "properties": {
+                "timeSeries": {
+                  "title": "Readout",
+                  "type": "array"
+                },
+                "label": {
+                  "title": "Label",
+                  "type": "string"
+                }
+              }
+            }
+          },
+          "photo": {
+            "title": "Photos",
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "isPhoto": {
+                  "type": "boolean"
+                },
+                "localPhotoUrl": {
+                  "type": "string"
+                },
+                "remotePhotoUrl": {
+                  "type": "string"
+                },
+                "note": {
+                  "type": "string"
+                },
+                "timestamp": {
+                  "type": "string",
+                  "format": "date-time"
+                }
+              }
+            }
+          }
+        }
+      },
+      "formUiSchema": {
+        "customName": {
+          "ui:icon": "label",
+          "ui:placeholder": "Time Series Investigation"
+        },
+        "note": {
+          "items": {
+            "ui:widget": "textarea"
+          }
+        },
+        "experimentData": {
+          "ui:field": "dataTable",
+          "ui:dataTableOptions": {
+            "sensorFields": [
+              "timeSeries"
+            ],
+            "filters": [{
+              "namePrefix": "GDX-"
+            }]
+          }
+        },
+        "photo": {
+          "ui:field": "photo"
+        }
+      }
+    },
+    "data": {
+      "experimentData": [
+        {
+          "label": ""
+        },
+        {
+          "label": ""
+        },
+        {
+          "label": ""
+        },
+        {
+          "label": ""
+        },
+        {
+          "label": ""
+        }
+      ],
+      "photo": []
+    }
+  },
   {
     "version": "1.0.0",
     "metadata": {
       "uuid": "e431af00-5ef9-44f8-a887-c76caa6ddde1",
       "name": "Schoolyard Investigation",
-      "initials": "SI"
+      "initials": "SI",
+      "iconColor": "#e0007f",
+      "iconHoverColor": "#e8409f"
     },
     "schema": {
       "titleField": "studySite",
@@ -184,7 +309,9 @@
     "metadata": {
       "uuid": "d27df06a-0997-4c53-8afd-d5dcc627d44f",
       "name": "Stream Study",
-      "initials": "SS"
+      "initials": "SS",
+      "iconColor": "#0f73b8",
+      "iconHoverColor": "#4b96ca"
     },
     "schema": {
       "titleField": "studySite",
@@ -347,7 +474,9 @@
     "metadata": {
       "uuid": "df02396f-a3d6-4dc5-bc10-fac4007fb6de",
       "name": "Pond Study",
-      "initials": "PS"
+      "initials": "PS",
+      "iconColor": "#d04a06",
+      "iconHoverColor": "#dc7744"
     },
     "schema": {
       "titleField": "Collect",
@@ -509,126 +638,5 @@
       ],
       "photo": []
     }
-  },
-  {
-    "version": "1.0.0",
-    "metadata": {
-      "uuid": "aefb5299-c127-4d84-b7f0-78da389ebecd",
-      "name": "Record Data Trials",
-      "initials": "RD"
-    },
-    "schema": {
-      "sections": [
-        {
-          "title": "Collect",
-          "icon": "collect",
-          "formFields": [
-            "experimentData"
-          ]
-        },
-        {
-          "title": "Note & Photo",
-          "icon": "note_and_photo",
-          "formFields": [
-            "photo"
-          ]
-        }
-      ],
-      "dataSchema": {
-        "type": "object",
-        "required": [],
-        "properties": {
-          "experimentData": {
-            "type": "array",
-            "items": {
-              "type": "object",
-              "required": [
-                "timeSeries"
-              ],
-              "properties": {
-                "timeSeries": {
-                  "title": "Readout",
-                  "type": "array"
-                },
-                "label": {
-                  "title": "Label",
-                  "type": "string"
-                }
-              }
-            }
-          },
-          "photo": {
-            "title": "Photos",
-            "type": "array",
-            "items": {
-              "type": "object",
-              "properties": {
-                "isPhoto": {
-                  "type": "boolean"
-                },
-                "localPhotoUrl": {
-                  "type": "string"
-                },
-                "remotePhotoUrl": {
-                  "type": "string"
-                },
-                "note": {
-                  "type": "string"
-                },
-                "timestamp": {
-                  "type": "string",
-                  "format": "date-time"
-                }
-              }
-            }
-          }
-        }
-      },
-      "formUiSchema": {
-        "customName": {
-          "ui:icon": "label",
-          "ui:placeholder": "Time Series Investigation"
-        },
-        "note": {
-          "items": {
-            "ui:widget": "textarea"
-          }
-        },
-        "experimentData": {
-          "ui:field": "dataTable",
-          "ui:dataTableOptions": {
-            "sensorFields": [
-              "timeSeries"
-            ],
-            "filters": [{
-              "namePrefix": "GDX-"
-            }]
-          }
-        },
-        "photo": {
-          "ui:field": "photo"
-        }
-      }
-    },
-    "data": {
-      "experimentData": [
-        {
-          "label": ""
-        },
-        {
-          "label": ""
-        },
-        {
-          "label": ""
-        },
-        {
-          "label": ""
-        },
-        {
-          "label": ""
-        }
-      ],
-      "photo": []
-    }
   }
 ]
diff --git a/src/mobile-app/components/experiment-picker-item.module.scss b/src/mobile-app/components/experiment-picker-item.module.scss
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
 }
 
 .icon {
@@ -26,23 +26,6 @@
     background-color: $sensorGreenLight1;
     cursor: pointer;
   }
-
-  &.SS{
-    background-color: $streamBlue;
-    &:hover {
-      background-color: $streamBlueLight1;
-      cursor: pointer;
-    }
-
-  }
-  &.SI{
-    background-color: $sensorGreen;
-    &:hover {
-      background-color: $sensorGreenLight1;
-      cursor: pointer;
-    }
-  }
-
 }
 
 .title {

diff --git a/src/mobile-app/components/experiment-picker-item.tsx b/src/mobile-app/components/experiment-picker-item.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { useMemo, useState } from "react";
 import { IExperiment } from "../../shared/experiment-types";
 
 import css from "./experiment-picker-item.module.scss";
+import { useIconStyle } from "../hooks/use-icon-style";
 
 interface IProps {
   experiment: IExperiment;
@@ -10,20 +11,11 @@ interface IProps {
 
 export const ExperimentPickerItem: React.FC<IProps> = ({experiment, setExperiment}) => {
   const {name} = experiment.metadata;
-  const buttonColor = (initials: string) => {
-    switch (initials) {
-      case "SS":
-        return css.SS;
-      case "SI":
-        return css.SI;
-      default:
-        return;
-    }
-  };
+  const {style, handleMouseOut, handleMouseOver} = useIconStyle(experiment.metadata);
 
   return (
-    <div className={css.item} onClick={setExperiment.bind(null, experiment)}>
-      <div className={`${css.icon} ${buttonColor(experiment.metadata.initials)}`}>+</div>
+    <div className={css.item} onClick={setExperiment.bind(null, experiment)} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+      <div className={css.icon} style={style}>+</div>
       <div className={css.title}>
         {name}
       </div>