From cc99a561bdbf68d73dbabb519979ca18ad07515f Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:24:10 -0400
Subject: [PATCH 1/5] colorizing help icons

---
 .../trays/help-about/helpAboutTray.js         | 72 ++++++++++++++-----
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/src/components/trays/help-about/helpAboutTray.js b/src/components/trays/help-about/helpAboutTray.js
index 6ef8fca1..bb92b2c2 100644
--- a/src/components/trays/help-about/helpAboutTray.js
+++ b/src/components/trays/help-about/helpAboutTray.js
@@ -1,12 +1,39 @@
 import React, {Fragment} from 'react';
 import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List,  ListItem, ListItemDecorator }
         from '@mui/joy';
-import { Layers as LayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, Delete as RemoveIcon, Tune as SettingsIcon,
+import { Layers as LayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, DeleteForever as RemoveIcon, Tune as SettingsIcon,
         Share as ShareViewIcon, HelpCenter as HelpAboutIcon, Map as MapIcon, LightMode as LightModeIcon,DragHandleRounded as HandleIcon,
         KeyboardArrowDown as ExpandIcon, ArrowDropUp as MoveUpArrow, KeyboardArrowLeft, Tsunami as WaveHeightIcon, QueryStats as ObservationIcon,
-        Air as WindVelocityIcon, Water as WaterLevelIcon, BlurOn as WaterSurfaceIcon, Flood as FloodIcon }
+        Air as WindVelocityIcon, Water as WaterLevelIcon, BlurOn as WaterSurfaceIcon, Flood as FloodIcon, ToggleOn as OnOffIcon }
         from '@mui/icons-material';
 
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * gets a svg component for the observation point icon.
+ *
+ * @param color
+ * @param name
+ * @returns {JSX.Element}
+ */
+const getObsSVGIcon = ( color, name ) => {
+    return (
+        <Fragment>
+            <SvgIcon>
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    stroke="black"
+                >
+                    <circle r="6" cx="12" cy="12" fill={ color } stroke="black" strokeWidth="1"/>
+                </svg>
+            </SvgIcon>
+            <Typography sx={{ ml: 2, fontSize: "sm"}}> {name} </Typography>
+        </Fragment>
+    );
+
+};
+
 /**
  * This component renders the help/about tray
  *
@@ -127,30 +154,37 @@ export const HelpAboutTray = () => {
                             <AccordionDetails>
                                 <Typography level="body-sm" sx={{ ml: 1 }}>Each icon represents a functionality of the application available to the
                                     user.</Typography>
-                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> Collapsable tray items
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><LayersIcon/></ListItemDecorator>Model run/layers selected list.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HurricaneIcon/></ListItemDecorator>Hurricane track list.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ModelSelectionIcon/></ListItemDecorator>Model run filtering and selection. </ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon/></ListItemDecorator>Remove various map items.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><SettingsIcon/></ListItemDecorator>Application settings.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ShareViewIcon/></ListItemDecorator>Share your view with a colleague.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HelpAboutIcon/></ListItemDecorator>Application help/about (here).</ListItem>
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Collapsable tray items:</Typography>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><LayersIcon color="primary"/></ListItemDecorator>Model run/layers selected list</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HurricaneIcon color="primary"/></ListItemDecorator>Hurricane track list</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ModelSelectionIcon color="primary"/></ListItemDecorator>Model run filtering and selection</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon color="primary"/></ListItemDecorator>Remove various map items</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><SettingsIcon color="primary"/></ListItemDecorator>Application settings</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ShareViewIcon color="primary"/></ListItemDecorator>Share your view with a colleague</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><HelpAboutIcon color="primary"/></ListItemDecorator>Application help/about</ListItem>
+                                </List>
+
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Map model layer types:</Typography>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaveHeightIcon color="primary"/></ListItemDecorator>Maximum Significant Wave Height</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ObservationIcon color="primary"/></ListItemDecorator>Observations</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WindVelocityIcon color="primary"/></ListItemDecorator>Maximum Wind Speed</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterLevelIcon color="primary"/></ListItemDecorator>Maximum Water Level</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterSurfaceIcon color="primary"/></ListItemDecorator>HECRAS Water Surface</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><FloodIcon color="primary"/></ListItemDecorator>Inundation</ListItem>
                                 </List>
 
-                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> Map model layer types
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaveHeightIcon/></ListItemDecorator>Maximum Significant Wave Height layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><ObservationIcon/></ListItemDecorator>Observation layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WindVelocityIcon/></ListItemDecorator>Maximum Wind Speed layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterLevelIcon/></ListItemDecorator>Maximum Water Level layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterSurfaceIcon/></ListItemDecorator>HECRAS Water Surface layer</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><FloodIcon/></ListItemDecorator>Inundation layer</ListItem>
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Map observation points:</Typography>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#FFFF00', 'NOAA/NDBC') }</ListItemDecorator></ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#3D4849', 'NCEM') }</ListItemDecorator></ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#BEAEFA', 'NOAA/NOS') }</ListItemDecorator></ListItem>
                                 </List>
 
-                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> Other action buttons
+                                <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Action buttons:</Typography>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><LightModeIcon/></ListItemDecorator>Toggle light or dark mode.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><MapIcon/></ListItemDecorator>Select a different base map.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><HandleIcon/></ListItemDecorator>Reorder a model run up or down in the list.</ListItem>
-                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon/></ListItemDecorator>Remove a model run or layer.</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><OnOffIcon color="primary"/></ListItemDecorator>Turn on/off a layer</ListItem>
+                                    <ListItem sx={{ ml: 1 }}><ListItemDecorator><RemoveIcon sx={{ color:'darkred', 'filter': 'opacity(0.5)' }}/></ListItemDecorator>Remove a model run or layer.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><ExpandIcon/> or <ExpandIcon sx={{ transform: 'rotate(180deg)' }}/>Expand or collapse an item.</ListItemDecorator></ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><MoveUpArrow/> or <MoveUpArrow sx={{ transform: 'rotate(180deg)'}}/>Reorder a model layer.</ListItemDecorator></ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><KeyboardArrowLeft/> or <KeyboardArrowLeft sx={{ transform: 'rotate(180deg)'}}/>Move through tropical advisories or synoptic cycles.</ListItemDecorator></ListItem>

From 1bedef8a15377dbeaf40a2068ffb398e36024aa2 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:24:51 -0400
Subject: [PATCH 2/5] lowering some font sizes in the tray components

---
 src/components/trays/layers/layer-card.js               | 2 +-
 src/components/trays/layers/tray-contents.js            | 4 ++--
 src/components/trays/model-selection/DropDownOptions.js | 2 +-
 src/components/trays/model-selection/catalogItems.js    | 6 +++---
 src/components/trays/model-selection/synopticTab.js     | 2 +-
 src/components/trays/model-selection/tropicalTab.js     | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/trays/layers/layer-card.js b/src/components/trays/layers/layer-card.js
index bf1f00d2..6cae3aa0 100644
--- a/src/components/trays/layers/layer-card.js
+++ b/src/components/trays/layers/layer-card.js
@@ -67,7 +67,7 @@ export const LayerCard = ({ index, layer }) => {
             <Avatar variant="outlined">
               <LayerIcon size="lg" color="primary" />
             </Avatar>
-            <Typography level="title-md" sx={{ flex: 1 }}>
+            <Typography level="title-sm" sx={{ flex: 1 }}>
               {layer.properties.product_name}
             </Typography>
             <Switch
diff --git a/src/components/trays/layers/tray-contents.js b/src/components/trays/layers/tray-contents.js
index b3f3eeb0..888dc0fb 100644
--- a/src/components/trays/layers/tray-contents.js
+++ b/src/components/trays/layers/tray-contents.js
@@ -26,7 +26,7 @@ export const TrayContents = () => {
       return (
         <Stack p={ 2 }>
           <Button
-            size="lg"
+            size="md"
             startDecorator={ <AddLayerIcon /> }
             onClick={ handleClickToggleState }
           >Add a Model Run</Button>
@@ -36,7 +36,7 @@ export const TrayContents = () => {
     return (
       <Stack p={ 2 }>
         <Button
-          size="lg"
+          size="md"
           color="warning"
           startDecorator={ <CloseIcon /> }
           onClick={ handleClickToggleState }
diff --git a/src/components/trays/model-selection/DropDownOptions.js b/src/components/trays/model-selection/DropDownOptions.js
index 5ea4537a..73c7b424 100644
--- a/src/components/trays/model-selection/DropDownOptions.js
+++ b/src/components/trays/model-selection/DropDownOptions.js
@@ -36,7 +36,7 @@ export default function DropDownOptions(data) {
             return (
                 <Fragment>
                     {data.data[data.type].filter(item => item !== "").map(item => (
-                        <Option key={item} value={item}>{item}</Option>
+                        <Option key={item} value={item} sx={{ fontSize: "sm" }}>{item}</Option>
                     ))}
                 </Fragment>
             );
diff --git a/src/components/trays/model-selection/catalogItems.js b/src/components/trays/model-selection/catalogItems.js
index 1928d4b0..1665ffcb 100644
--- a/src/components/trays/model-selection/catalogItems.js
+++ b/src/components/trays/model-selection/catalogItems.js
@@ -175,11 +175,11 @@ export default function CatalogItems(data) {
                                     <Stack key={ itemIndex } spacing={ 1 }>
                                         <Accordion
                                             key={ itemIndex }
-                                            sx={{ p: 0 }}
+                                            sx={{ p: 0, fontSize: "sm" }}
                                             expanded={accordianDateIndex === itemIndex}
                                             onChange={(event, expanded) => { setAccordianDateIndex(expanded ? itemIndex : null); }}>
 
-                                            <AccordionSummary sx={{ fontSize: 15 }}> {catalog['id']} </AccordionSummary>
+                                            <AccordionSummary sx={{ fontSize: 'sm' }}> { catalog['id'] } </AccordionSummary>
 
                                             <AccordionDetails> {
                                                 // loop through the data members and put them away
@@ -192,7 +192,7 @@ export default function CatalogItems(data) {
                                                     .map((mbr, mbrIdx) => (
                                                         // create the checkbox
                                                         <Checkbox
-                                                            sx={{ m: .5, fontSize: 12 }}
+                                                            sx={{ m: .5, fontSize: 'sm' }}
                                                             key={ mbrIdx }
                                                             checked={ getCheckedState(mbr.group) }
                                                             label={
diff --git a/src/components/trays/model-selection/synopticTab.js b/src/components/trays/model-selection/synopticTab.js
index f5dbc481..b449d9b9 100644
--- a/src/components/trays/model-selection/synopticTab.js
+++ b/src/components/trays/model-selection/synopticTab.js
@@ -285,7 +285,7 @@ export const SynopticTabForm = () => {
                     <Button type="reset" onClick={ resetForm }>Reset</Button>
                 </Stack>
 
-                <Divider sx={{m: 2}}/>
+                <Divider sx={{ m: 2 }}/>
 
                 <Stack>
                     { <CatalogItems data={ catalogData } isTropical={ false }/> }
diff --git a/src/components/trays/model-selection/tropicalTab.js b/src/components/trays/model-selection/tropicalTab.js
index c5124127..0b4a23ac 100644
--- a/src/components/trays/model-selection/tropicalTab.js
+++ b/src/components/trays/model-selection/tropicalTab.js
@@ -152,7 +152,7 @@ export const TropicalTabForm = () => {
                 <Stack spacing={1}>
                     <Select name="tropical-storm-name" value={ tropicalStorm } placeholder="Please select a tropical storm" onChange={(e, newValue) => {
                         setTropicalStorm(newValue); }}>
-                        <DropDownOptions data={dropDownData} type={'storm_names'} />
+                        <DropDownOptions data={dropDownData} type={'storm_names'}/>
                     </Select>
                     <Select name="tropical-advisory" value={ tropicalAdvisory } placeholder="Please select an advisory" onChange={(e, newValue) => {
                         setTropicalAdvisory(newValue); }}>

From 0052e63a51a705203a73bdc76e59b8744886858f Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:42:20 -0400
Subject: [PATCH 3/5] lowering some font sizes in the tray components

---
 src/components/trays/model-selection/synopticTab.js | 7 +++----
 src/components/trays/model-selection/tropicalTab.js | 8 ++++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/trays/model-selection/synopticTab.js b/src/components/trays/model-selection/synopticTab.js
index b449d9b9..8b0472cd 100644
--- a/src/components/trays/model-selection/synopticTab.js
+++ b/src/components/trays/model-selection/synopticTab.js
@@ -256,26 +256,25 @@ export const SynopticTabForm = () => {
                                 field: { clearable: true },
                                 actionBar: { actions: ['clear'] },
                             }}
-
                             onChange={(newValue) => {
                                 setChangedSynopticDate(newValue);
                             }}/>
 
                     </LocalizationProvider>
 
-                    <Select name="synoptic-cycle" value={ synopticCycle } placeholder="Please select a cycle" onChange={ (e, newValue) => {
+                    <Select name="synoptic-cycle" sx={{ fontSize: 'md'}} value={ synopticCycle } placeholder="Please select a cycle" onChange={ (e, newValue) => {
                         setSynopticCycle(newValue);
                     }}>
                         <DropDownOptions data={ dropDownData } type={ 'cycles' }/>
                     </Select>
 
-                    <Select name="synoptic-grid" value={ synopticGrid } placeholder="Please select a grid" onChange={ (e, newValue) => {
+                    <Select name="synoptic-grid" sx={{ fontSize: 'md'}} value={ synopticGrid } placeholder="Please select a grid" onChange={ (e, newValue) => {
                         setSynopticGrid(newValue);
                     }}>
                         <DropDownOptions data={ dropDownData } type={ 'grid_types' }/>
                     </Select>
 
-                    <Select name="synoptic-instance" value={ synopticInstance } placeholder="Please select an instance" onChange={ (e, newValue) => {
+                    <Select name="synoptic-instance" sx={{ fontSize: 'md'}} value={ synopticInstance } placeholder="Please select an instance" onChange={ (e, newValue) => {
                         setSynopticInstance(newValue);
                     }}>
                         <DropDownOptions data={ dropDownData } type={'instance_names'}/>
diff --git a/src/components/trays/model-selection/tropicalTab.js b/src/components/trays/model-selection/tropicalTab.js
index 0b4a23ac..4fd7addf 100644
--- a/src/components/trays/model-selection/tropicalTab.js
+++ b/src/components/trays/model-selection/tropicalTab.js
@@ -150,19 +150,19 @@ export const TropicalTabForm = () => {
         <Fragment>
             <form name={ "Tropical" } onSubmit={ formTropicalHandler }>
                 <Stack spacing={1}>
-                    <Select name="tropical-storm-name" value={ tropicalStorm } placeholder="Please select a tropical storm" onChange={(e, newValue) => {
+                    <Select name="tropical-storm-name" sx={{ fontSize: 'md'}} value={ tropicalStorm } placeholder="Please select a tropical storm" onChange={(e, newValue) => {
                         setTropicalStorm(newValue); }}>
                         <DropDownOptions data={dropDownData} type={'storm_names'}/>
                     </Select>
-                    <Select name="tropical-advisory" value={ tropicalAdvisory } placeholder="Please select an advisory" onChange={(e, newValue) => {
+                    <Select name="tropical-advisory" sx={{ fontSize: 'md'}} value={ tropicalAdvisory } placeholder="Please select an advisory" onChange={(e, newValue) => {
                         setTropicalAdvisory(newValue); }}>
                         <DropDownOptions data={ dropDownData } type={ 'advisory_numbers' } />
                     </Select>
-                    <Select name="tropical-grid" value={ tropicalGrid } placeholder="Please select a grid" onChange={(e, newValue) => {
+                    <Select name="tropical-grid" sx={{ fontSize: 'md'}} value={ tropicalGrid } placeholder="Please select a grid" onChange={(e, newValue) => {
                         setTropicalGrid(newValue); }}>
                         <DropDownOptions data={ dropDownData } type={ 'grid_types' } />
                     </Select>
-                    <Select name="tropical-instance" value={ tropicalInstance } placeholder="Please select an instance" onChange={(e, newValue) => {
+                    <Select name="tropical-instance" sx={{ fontSize: 'md'}} value={ tropicalInstance } placeholder="Please select an instance" onChange={(e, newValue) => {
                         setTropicalInstance(newValue); }}>
                         <DropDownOptions data={ dropDownData } type={ 'instance_names' } />
                     </Select>

From f69b4cc8ce39f934e697e2762af9eb76b187ab5a Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:46:20 -0400
Subject: [PATCH 4/5] adding dividers

---
 src/components/trays/help-about/helpAboutTray.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/trays/help-about/helpAboutTray.js b/src/components/trays/help-about/helpAboutTray.js
index bb92b2c2..0d5163c5 100644
--- a/src/components/trays/help-about/helpAboutTray.js
+++ b/src/components/trays/help-about/helpAboutTray.js
@@ -1,5 +1,5 @@
 import React, {Fragment} from 'react';
-import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List,  ListItem, ListItemDecorator }
+import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Stack, Typography, List,  ListItem, ListItemDecorator, Divider }
         from '@mui/joy';
 import { Layers as LayersIcon, Storm as HurricaneIcon, Checklist as ModelSelectionIcon, DeleteForever as RemoveIcon, Tune as SettingsIcon,
         Share as ShareViewIcon, HelpCenter as HelpAboutIcon, Map as MapIcon, LightMode as LightModeIcon,DragHandleRounded as HandleIcon,
@@ -152,8 +152,10 @@ export const HelpAboutTray = () => {
                                 <Typography level="title-sm" sx={{ fontWeight: 'bold' }}>What do all the icons mean?</Typography>
                             </AccordionSummary>
                             <AccordionDetails>
-                                <Typography level="body-sm" sx={{ ml: 1 }}>Each icon represents a functionality of the application available to the
+
+                                <Typography level="body-sm" sx={{ ml: 1, mb: 1}}>Each icon represents a functionality of the application available to the
                                     user.</Typography>
+                                <Divider/>
                                 <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Collapsable tray items:</Typography>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><LayersIcon color="primary"/></ListItemDecorator>Model run/layers selected list</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><HurricaneIcon color="primary"/></ListItemDecorator>Hurricane track list</ListItem>
@@ -163,7 +165,7 @@ export const HelpAboutTray = () => {
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><ShareViewIcon color="primary"/></ListItemDecorator>Share your view with a colleague</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><HelpAboutIcon color="primary"/></ListItemDecorator>Application help/about</ListItem>
                                 </List>
-
+                                <Divider/>
                                 <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Map model layer types:</Typography>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaveHeightIcon color="primary"/></ListItemDecorator>Maximum Significant Wave Height</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><ObservationIcon color="primary"/></ListItemDecorator>Observations</ListItem>
@@ -172,13 +174,13 @@ export const HelpAboutTray = () => {
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><WaterSurfaceIcon color="primary"/></ListItemDecorator>HECRAS Water Surface</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><FloodIcon color="primary"/></ListItemDecorator>Inundation</ListItem>
                                 </List>
-
+                                <Divider/>
                                 <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Map observation points:</Typography>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#FFFF00', 'NOAA/NDBC') }</ListItemDecorator></ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#3D4849', 'NCEM') }</ListItemDecorator></ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator>{ getObsSVGIcon('#BEAEFA', 'NOAA/NOS') }</ListItemDecorator></ListItem>
                                 </List>
-
+                                <Divider/>
                                 <List sx={{ ml: 2, mt: 1, fontSize: "sm" }}> <Typography sx={{ fontSize: "sm", fontStyle: 'italic' }}>Action buttons:</Typography>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><LightModeIcon/></ListItemDecorator>Toggle light or dark mode.</ListItem>
                                     <ListItem sx={{ ml: 1 }}><ListItemDecorator><MapIcon/></ListItemDecorator>Select a different base map.</ListItem>

From ffc38afdb84cb34a85bb2c8b3be4c499cbcf30b6 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Thu, 22 Aug 2024 11:39:20 -0400
Subject: [PATCH 5/5] correcting grammar

---
 src/components/sidebar/sidebar.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
index 66f08ec3..e7bb41d9 100644
--- a/src/components/sidebar/sidebar.js
+++ b/src/components/sidebar/sidebar.js
@@ -5,8 +5,8 @@ import { Tray } from './tray';
 import { MenuItem } from './menu-item';
 import SidebarTrays from '../trays';
 
-// ordered list of tray keys for lower portion of sidebar
-// tray for unlisted keys will be stuck into upper sidebar list.
+// ordered list of tray keys for the lower portion of sidebar
+// tray for unlisted keys will be stuck into the upper sidebar list.
 const LOWER_SIDEBAR_MENU_ITEM_IDS = [
   'help_about',
   'settings',
@@ -34,7 +34,7 @@ export const Sidebar = () => {
       setActiveKey(null);
       return;
     }
-    // otherwise, open desired tray.
+    // otherwise, open the desired tray.
     setActiveKey(newKey);
   }, [activeKey]);
 
@@ -63,7 +63,7 @@ export const Sidebar = () => {
           },
           // we'll add a delay to this exit animation to give ample time
           // for the disappearing tray get out of they view before going translucent.
-          // otherwise we see it sliding behind the sidebar
+          // otherwise, we see it sliding behind the sidebar.
           // this is also nice for accidental mouse leaves. we'll also fade slower than we un-fade.
           transition: 'max-width 250ms, filter 250ms, background-color 1000ms 500ms',
           display: 'flex',