From d0016a69d11d7a0da4386b1e160a22099544e47f Mon Sep 17 00:00:00 2001
From: chiaberry <analuciaby@gmail.com>
Date: Mon, 4 Nov 2024 17:32:57 -0600
Subject: [PATCH 1/6] quick chips

---
 .../ProjectComponents/ComponentListItem.js     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
index 5af309fcb4..ed6eb1d79e 100644
--- a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
+++ b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
@@ -10,6 +10,7 @@ import ListItemSecondaryAction from "@mui/material/ListItemSecondaryAction";
 import ZoomInIcon from "@mui/icons-material/ZoomIn";
 import IconButton from "@mui/material/IconButton";
 import ListItemText from "@mui/material/ListItemText";
+import { Grid, Chip } from "@mui/material";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import { COLORS } from "./mapStyleSettings";
 import ProjectStatusBadge from "../ProjectStatusBadge";
@@ -107,6 +108,23 @@ export default function ComponentListItem({
                 />
               </ListItem>
             )}
+            <Grid container spacing={1}>
+              {component.moped_proj_component_work_types.map((element) => (
+                <Grid item key={element.id}>
+                  <Chip
+                    label={element.moped_work_type.name}
+                    sx={{
+                      height: "auto",
+                      // minHeight: theme.spacing(4),
+                      "& .MuiChip-label": {
+                        display: "block",
+                        whiteSpace: "normal",
+                      },
+                    }}
+                  />
+                </Grid>
+              ))}
+            </Grid>
             {component.description && (
               <ListItem className={classes.nested}>
                 <ListItemText secondary={component.description} />

From d1f9f4e40009f7167b2f7fd70a6c70972891d888 Mon Sep 17 00:00:00 2001
From: chiaberry <analuciaby@gmail.com>
Date: Fri, 8 Nov 2024 16:10:11 -0600
Subject: [PATCH 2/6] add spacing to the grid

---
 .../ProjectComponents/ComponentListItem.js    | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
index b978565427..507b8b2e1f 100644
--- a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
+++ b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
@@ -34,6 +34,16 @@ const useStyles = makeStyles((theme) => ({
   additionalListItemText: {
     display: "block",
   },
+  workTypeChip: {
+    height: "auto",
+    "& .MuiChip-label": {
+      display: "block",
+      whiteSpace: "normal",
+    },
+  },
+  workTypeGroup: {
+    paddingLeft: theme.spacing(4),
+  },
 }));
 
 export default function ComponentListItem({
@@ -108,19 +118,12 @@ export default function ComponentListItem({
                 />
               </ListItem>
             )}
-            <Grid container spacing={1}>
+            <Grid container spacing={0.5} className={classes.workTypeGroup}>
               {component.moped_proj_component_work_types.map((element) => (
                 <Grid item key={element.id}>
                   <Chip
                     label={element.moped_work_type.name}
-                    sx={{
-                      height: "auto",
-                      // minHeight: theme.spacing(4),
-                      "& .MuiChip-label": {
-                        display: "block",
-                        whiteSpace: "normal",
-                      },
-                    }}
+                    className={classes.workTypeChip}
                   />
                 </Grid>
               ))}

From f121671fef2ea7c231f0b3721438cde5eb36a798 Mon Sep 17 00:00:00 2001
From: chiaberry <analuciaby@gmail.com>
Date: Fri, 8 Nov 2024 16:47:06 -0600
Subject: [PATCH 3/6] forgot the condensed sizes

---
 .../projectView/ProjectComponents/ComponentListItem.js       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
index 507b8b2e1f..e30e9cb02f 100644
--- a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
+++ b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
@@ -35,11 +35,14 @@ const useStyles = makeStyles((theme) => ({
     display: "block",
   },
   workTypeChip: {
-    height: "auto",
     "& .MuiChip-label": {
       display: "block",
       whiteSpace: "normal",
     },
+    fontWeight: "500",
+    fontSize: "12px",
+    borderRadius: "2rem",
+    height: "1.75rem",
   },
   workTypeGroup: {
     paddingLeft: theme.spacing(4),

From c96e18a262493c0c7d84f5b35499ee312b4dc4d8 Mon Sep 17 00:00:00 2001
From: chiaberry <analuciaby@gmail.com>
Date: Tue, 12 Nov 2024 08:35:23 -0600
Subject: [PATCH 4/6] use a list item

---
 .../ProjectComponents/ComponentListItem.js    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
index e30e9cb02f..c33aeaeff7 100644
--- a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
+++ b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
@@ -121,16 +121,18 @@ export default function ComponentListItem({
                 />
               </ListItem>
             )}
-            <Grid container spacing={0.5} className={classes.workTypeGroup}>
-              {component.moped_proj_component_work_types.map((element) => (
-                <Grid item key={element.id}>
-                  <Chip
-                    label={element.moped_work_type.name}
-                    className={classes.workTypeChip}
-                  />
-                </Grid>
-              ))}
-            </Grid>
+            <ListItem className={classes.workTypeGroup}>
+              <Grid container spacing={0.5}>
+                {component.moped_proj_component_work_types.map((element) => (
+                  <Grid item key={element.id}>
+                    <Chip
+                      label={element.moped_work_type.name}
+                      className={classes.workTypeChip}
+                    />
+                  </Grid>
+                ))}
+              </Grid>
+            </ListItem>
             {component.description && (
               <ListItem className={classes.nested}>
                 <ListItemText secondary={component.description} />

From 29969c35bdb85f15481b542043f6c41a49a0bf42 Mon Sep 17 00:00:00 2001
From: chiaberry <analuciaby@gmail.com>
Date: Tue, 12 Nov 2024 12:07:30 -0600
Subject: [PATCH 5/6] dupe class

---
 .../projectView/ProjectComponents/ComponentListItem.js       | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
index c33aeaeff7..af345edba0 100644
--- a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
+++ b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
@@ -44,9 +44,6 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: "2rem",
     height: "1.75rem",
   },
-  workTypeGroup: {
-    paddingLeft: theme.spacing(4),
-  },
 }));
 
 export default function ComponentListItem({
@@ -121,7 +118,7 @@ export default function ComponentListItem({
                 />
               </ListItem>
             )}
-            <ListItem className={classes.workTypeGroup}>
+            <ListItem className={classes.nested}>
               <Grid container spacing={0.5}>
                 {component.moped_proj_component_work_types.map((element) => (
                   <Grid item key={element.id}>

From a8ab2311406f8d9704ae4a30a85f2d33c33b777b Mon Sep 17 00:00:00 2001
From: chiaberry <analuciaby@gmail.com>
Date: Tue, 12 Nov 2024 15:13:37 -0600
Subject: [PATCH 6/6] dont show the list item if there are no work types

---
 .../ProjectComponents/ComponentListItem.js    | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
index af345edba0..bfbc825040 100644
--- a/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
+++ b/moped-editor/src/views/projects/projectView/ProjectComponents/ComponentListItem.js
@@ -118,18 +118,20 @@ export default function ComponentListItem({
                 />
               </ListItem>
             )}
-            <ListItem className={classes.nested}>
-              <Grid container spacing={0.5}>
-                {component.moped_proj_component_work_types.map((element) => (
-                  <Grid item key={element.id}>
-                    <Chip
-                      label={element.moped_work_type.name}
-                      className={classes.workTypeChip}
-                    />
-                  </Grid>
-                ))}
-              </Grid>
-            </ListItem>
+            {component.moped_proj_component_work_types.length > 0 && (
+              <ListItem className={classes.nested}>
+                <Grid container spacing={0.5}>
+                  {component.moped_proj_component_work_types.map((element) => (
+                    <Grid item key={element.id}>
+                      <Chip
+                        label={element.moped_work_type.name}
+                        className={classes.workTypeChip}
+                      />
+                    </Grid>
+                  ))}
+                </Grid>
+              </ListItem>
+            )}
             {component.description && (
               <ListItem className={classes.nested}>
                 <ListItemText secondary={component.description} />