From 76e34149e98bce481ab1717de4bdc35799538b8d Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 6 May 2024 15:58:51 -0700
Subject: [PATCH 1/6] Add label component, add colors to theme

---
 Client/src/Components/Label/index.css |  3 ++
 Client/src/Components/Label/index.jsx | 58 +++++++++++++++++++++++++++
 Client/src/Pages/Home/index.jsx       |  9 ++++-
 Client/src/Utils/Theme.js             | 37 +++++++++++++++++
 4 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 Client/src/Components/Label/index.css
 create mode 100644 Client/src/Components/Label/index.jsx

diff --git a/Client/src/Components/Label/index.css b/Client/src/Components/Label/index.css
new file mode 100644
index 000000000..945ab62d1
--- /dev/null
+++ b/Client/src/Components/Label/index.css
@@ -0,0 +1,3 @@
+.label {
+  border: 1px solid #000;
+}
diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
new file mode 100644
index 000000000..0d9a75c39
--- /dev/null
+++ b/Client/src/Components/Label/index.jsx
@@ -0,0 +1,58 @@
+import PropTypes from "prop-types";
+import "./index.css";
+import { useTheme } from "@mui/material";
+
+/**
+ * @typedef {Object} Props
+ * @property {string} label - The label of the button
+ */
+
+const Label = ({ label, color }) => {
+  const theme = useTheme();
+
+  const config = {
+    orange: {
+      borderColor: theme.palette.labelOrange.borderColor,
+      bgColor: theme.palette.labelOrange.bgColor,
+      textColor: theme.palette.labelOrange.textColor,
+    },
+    gray: {
+      borderColor: theme.palette.labelGray.borderColor,
+      bgColor: theme.palette.labelGray.bgColor,
+      textColor: theme.palette.labelGray.textColor,
+    },
+    purple: {
+      borderColor: theme.palette.labelPurple.borderColor,
+      bgColor: theme.palette.labelPurple.bgColor,
+      textColor: theme.palette.labelPurple.textColor,
+    },
+    green: {
+      borderColor: theme.palette.labelGreen.borderColor,
+      bgColor: theme.palette.labelGreen.bgColor,
+      textColor: theme.palette.labelGreen.textColor,
+    },
+  };
+
+  const { borderColor, bgColor, textColor } = config[color];
+  const { borderRadius } = theme.shape;
+  return (
+    <div
+      className="label"
+      style={{
+        borderRadius: borderRadius,
+        borderColor: borderColor,
+        backgroundColor: bgColor,
+        color: textColor,
+      }}
+    >
+      {label}
+    </div>
+  );
+};
+
+Label.propTypes = {
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+export default Label;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 849489ff8..81cec067a 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -1,7 +1,7 @@
-import React from "react";
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
+import Label from "../../Components/Label";
 
 const Home = () => {
   return (
@@ -25,6 +25,13 @@ const Home = () => {
           <Button level="tertiary" label="Tertiary" disabled />
           <Button level="error" label="Error" disabled />
         </div>
+        <h4>Labels</h4>
+        <div>
+          <Label label="Label" color="orange" />
+          <Label label="Label" color="gray" />
+          <Label label="Label" color="purple" />
+          <Label label="Label" color="green" />
+        </div>
       </div>
     </>
   );
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 5ad9df5c8..b07da936f 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -4,6 +4,23 @@ import { createTheme } from "@mui/material";
 const secondaryMain = "#475467";
 const tertiaryMain = "#475467";
 
+// Label Colors
+const labelBorderOrange = "#F9DBAF";
+const labelBgOrange = "#FEF6EE";
+const labelTextOrange = "#B93815";
+
+const labelBorderGray = "#EAECF0";
+const labelBgGray = "#F9FAFB";
+const labelTextGray = "#344054";
+
+const labelBorderPurple = "#E9D7FE";
+const labelBgPurple = "#F9F5FF";
+const labelTextPurple = "#6941C6";
+
+const labelBorderGreen = "#AAEFC6";
+const labelBgGreen = "#ECFDF3";
+const labelTextGreen = "#067647";
+
 const theme = createTheme({
   palette: {
     secondary: {
@@ -12,6 +29,26 @@ const theme = createTheme({
     tertiary: {
       main: tertiaryMain,
     },
+    labelOrange: {
+      borderColor: labelBorderOrange,
+      bgColor: labelBgOrange,
+      textColor: labelTextOrange,
+    },
+    labelGray: {
+      borderColor: labelBorderGray,
+      bgColor: labelBgGray,
+      textColor: labelTextGray,
+    },
+    labelPurple: {
+      borderColor: labelBorderPurple,
+      bgColor: labelBgPurple,
+      textColor: labelTextPurple,
+    },
+    labelGreen: {
+      borderColor: labelBorderGreen,
+      bgColor: labelBgGreen,
+      textColor: labelTextGreen,
+    },
   },
 });
 

From 6bd8fec1195257eff6b8904f3c99c9e876884304 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 7 May 2024 11:44:27 -0700
Subject: [PATCH 2/6] Added color lightening function, removed hardcoded colors
 from theme

---
 Client/src/Components/Label/index.css |  2 +
 Client/src/Components/Label/index.jsx | 58 ++++++++++++++++-----------
 Client/src/Pages/Home/index.jsx       | 14 +++----
 Client/src/Utils/Theme.js             | 25 +++---------
 4 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/Client/src/Components/Label/index.css b/Client/src/Components/Label/index.css
index 945ab62d1..e0c82b062 100644
--- a/Client/src/Components/Label/index.css
+++ b/Client/src/Components/Label/index.css
@@ -1,3 +1,5 @@
 .label {
   border: 1px solid #000;
+  display: inline-flex;
+  justify-content: center;
 }
diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx
index 0d9a75c39..921178c6a 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/index.jsx
@@ -2,38 +2,47 @@ import PropTypes from "prop-types";
 import "./index.css";
 import { useTheme } from "@mui/material";
 
+// Produces a lighter color based on a hex color and a percent
+// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
+const lightenColor = (color, percent) => {
+  let r = parseInt(color.substring(1, 3), 16);
+  let g = parseInt(color.substring(3, 5), 16);
+  let b = parseInt(color.substring(5, 7), 16);
+
+  const amt = Math.round((255 * percent) / 100);
+
+  r = r + amt <= 255 ? r + amt : 255;
+  g = g + amt <= 255 ? g + amt : 255;
+  b = b + amt <= 255 ? b + amt : 255;
+
+  r = r.toString(16).padStart(2, "0");
+  g = g.toString(16).padStart(2, "0");
+  b = b.toString(16).padStart(2, "0");
+
+  return `#${r}${g}${b}`;
+};
+
 /**
  * @typedef {Object} Props
  * @property {string} label - The label of the button
+ * @property {string} color - The base color of the label
  */
 
 const Label = ({ label, color }) => {
   const theme = useTheme();
 
-  const config = {
-    orange: {
-      borderColor: theme.palette.labelOrange.borderColor,
-      bgColor: theme.palette.labelOrange.bgColor,
-      textColor: theme.palette.labelOrange.textColor,
-    },
-    gray: {
-      borderColor: theme.palette.labelGray.borderColor,
-      bgColor: theme.palette.labelGray.bgColor,
-      textColor: theme.palette.labelGray.textColor,
-    },
-    purple: {
-      borderColor: theme.palette.labelPurple.borderColor,
-      bgColor: theme.palette.labelPurple.bgColor,
-      textColor: theme.palette.labelPurple.textColor,
-    },
-    green: {
-      borderColor: theme.palette.labelGreen.borderColor,
-      bgColor: theme.palette.labelGreen.bgColor,
-      textColor: theme.palette.labelGreen.textColor,
-    },
-  };
+  // If an invalid color is passed, default to the labelGray color
+  if (
+    typeof color !== "string" ||
+    !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
+  ) {
+    color = theme.palette.labelGray.textColor;
+    console.log(color);
+  }
 
-  const { borderColor, bgColor, textColor } = config[color];
+  // Calculate lighter shades for border and bg
+  const borderColor = lightenColor(color, 20);
+  const bgColor = lightenColor(color, 75);
   const { borderRadius } = theme.shape;
   return (
     <div
@@ -42,7 +51,8 @@ const Label = ({ label, color }) => {
         borderRadius: borderRadius,
         borderColor: borderColor,
         backgroundColor: bgColor,
-        color: textColor,
+        color: color,
+        padding: theme.spacing(1 * 0.75, 2),
       }}
     >
       {label}
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index 81cec067a..c358e24ea 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -2,15 +2,15 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
 import Label from "../../Components/Label";
+import { useTheme } from "@mui/material";
 
 const Home = () => {
+  const theme = useTheme();
   return (
     <>
       <div>Home</div>
       <DropdownTeamMember />
-      <div
-        style={{ display: "flex", flexDirection: "column", marginTop: "2rem" }}
-      >
+      <div>
         <h4>Buttons</h4>
         <div>
           <Button level="primary" label="Primary" />
@@ -27,10 +27,10 @@ const Home = () => {
         </div>
         <h4>Labels</h4>
         <div>
-          <Label label="Label" color="orange" />
-          <Label label="Label" color="gray" />
-          <Label label="Label" color="purple" />
-          <Label label="Label" color="green" />
+          <Label label="Label" color={theme.palette.labelOrange.textColor} />
+          <Label label="Label" color={theme.palette.labelGray.textColor} />
+          <Label label="Label" color={theme.palette.labelPurple.textColor} />
+          <Label label="Label" color={theme.palette.labelGreen.textColor} />
         </div>
       </div>
     </>
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index b07da936f..61dd26230 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -1,28 +1,21 @@
 import { createTheme } from "@mui/material";
 
 // Colors for MUI theme
+const primaryMain = "#1570EF";
 const secondaryMain = "#475467";
 const tertiaryMain = "#475467";
 
 // Label Colors
-const labelBorderOrange = "#F9DBAF";
-const labelBgOrange = "#FEF6EE";
 const labelTextOrange = "#B93815";
-
-const labelBorderGray = "#EAECF0";
-const labelBgGray = "#F9FAFB";
-const labelTextGray = "#344054";
-
-const labelBorderPurple = "#E9D7FE";
-const labelBgPurple = "#F9F5FF";
+const labelTextGray = "#475467";
 const labelTextPurple = "#6941C6";
-
-const labelBorderGreen = "#AAEFC6";
-const labelBgGreen = "#ECFDF3";
 const labelTextGreen = "#067647";
 
 const theme = createTheme({
   palette: {
+    primary: {
+      main: primaryMain,
+    },
     secondary: {
       main: secondaryMain,
     },
@@ -30,23 +23,15 @@ const theme = createTheme({
       main: tertiaryMain,
     },
     labelOrange: {
-      borderColor: labelBorderOrange,
-      bgColor: labelBgOrange,
       textColor: labelTextOrange,
     },
     labelGray: {
-      borderColor: labelBorderGray,
-      bgColor: labelBgGray,
       textColor: labelTextGray,
     },
     labelPurple: {
-      borderColor: labelBorderPurple,
-      bgColor: labelBgPurple,
       textColor: labelTextPurple,
     },
     labelGreen: {
-      borderColor: labelBorderGreen,
-      bgColor: labelBgGreen,
       textColor: labelTextGreen,
     },
   },

From f8828fe6e82bd11a792c39a80abff2718da4ac4f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 7 May 2024 11:52:06 -0700
Subject: [PATCH 3/6] Refactoring to a base label and extended labels

---
 .../Label/{index.css => BaseLabel.css}           |  0
 .../Label/{index.jsx => BaseLabel.jsx}           |  8 ++++++--
 Client/src/Components/Label/ColoredLabel.jsx     |  0
 Client/src/Components/Label/StautsLabel.jsx      |  0
 Client/src/Pages/Home/index.jsx                  | 16 +++++++++++-----
 5 files changed, 17 insertions(+), 7 deletions(-)
 rename Client/src/Components/Label/{index.css => BaseLabel.css} (100%)
 rename Client/src/Components/Label/{index.jsx => BaseLabel.jsx} (86%)
 create mode 100644 Client/src/Components/Label/ColoredLabel.jsx
 create mode 100644 Client/src/Components/Label/StautsLabel.jsx

diff --git a/Client/src/Components/Label/index.css b/Client/src/Components/Label/BaseLabel.css
similarity index 100%
rename from Client/src/Components/Label/index.css
rename to Client/src/Components/Label/BaseLabel.css
diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/BaseLabel.jsx
similarity index 86%
rename from Client/src/Components/Label/index.jsx
rename to Client/src/Components/Label/BaseLabel.jsx
index 921178c6a..8b557133c 100644
--- a/Client/src/Components/Label/index.jsx
+++ b/Client/src/Components/Label/BaseLabel.jsx
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import "./index.css";
+import "./BaseLabel.css";
 import { useTheme } from "@mui/material";
 
 // Produces a lighter color based on a hex color and a percent
@@ -43,7 +43,11 @@ const Label = ({ label, color }) => {
   // Calculate lighter shades for border and bg
   const borderColor = lightenColor(color, 20);
   const bgColor = lightenColor(color, 75);
+  // Grab the default borderRadius from the theme to match button style
   const { borderRadius } = theme.shape;
+  // Calculate padding for the label to mimic button.  Appears to scale correctly, not 100% sure though.
+  const padding = theme.spacing(1 * 0.75, 2);
+
   return (
     <div
       className="label"
@@ -52,7 +56,7 @@ const Label = ({ label, color }) => {
         borderColor: borderColor,
         backgroundColor: bgColor,
         color: color,
-        padding: theme.spacing(1 * 0.75, 2),
+        padding: padding,
       }}
     >
       {label}
diff --git a/Client/src/Components/Label/ColoredLabel.jsx b/Client/src/Components/Label/ColoredLabel.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Components/Label/StautsLabel.jsx b/Client/src/Components/Label/StautsLabel.jsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index c358e24ea..bb47b2888 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -1,7 +1,7 @@
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
-import Label from "../../Components/Label";
+import BaseLabel from "../../Components/Label/BaseLabel";
 import { useTheme } from "@mui/material";
 
 const Home = () => {
@@ -27,10 +27,16 @@ const Home = () => {
         </div>
         <h4>Labels</h4>
         <div>
-          <Label label="Label" color={theme.palette.labelOrange.textColor} />
-          <Label label="Label" color={theme.palette.labelGray.textColor} />
-          <Label label="Label" color={theme.palette.labelPurple.textColor} />
-          <Label label="Label" color={theme.palette.labelGreen.textColor} />
+          <BaseLabel label="Label" color={theme.palette.labelGray.textColor} />
+          <BaseLabel
+            label="Label"
+            color={theme.palette.labelPurple.textColor}
+          />
+          <BaseLabel label="Label" color={theme.palette.labelGreen.textColor} />
+          <BaseLabel
+            label="Label"
+            color={theme.palette.labelOrange.textColor}
+          />
         </div>
       </div>
     </>

From 6359fd52b68025cadc5e41675ba08a2bc5ef608f Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 7 May 2024 14:22:39 -0700
Subject: [PATCH 4/6] Added status label, fixed JSdoc

---
 Client/src/Components/Button/index.jsx       |  8 +--
 Client/src/Components/Label/BaseLabel.css    |  1 +
 Client/src/Components/Label/BaseLabel.jsx    | 68 +++++++-------------
 Client/src/Components/Label/ColoredLabel.jsx | 64 ++++++++++++++++++
 Client/src/Components/Label/StautsLabel.jsx  | 42 ++++++++++++
 Client/src/Pages/Home/index.jsx              | 25 +++----
 Client/src/Utils/Theme.js                    | 21 +++---
 7 files changed, 162 insertions(+), 67 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index f357e1dd2..4d479495e 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -21,10 +21,10 @@ const levelConfig = {
 };
 
 /**
- * @typedef {Object} Props
- * @property {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
- * @property {string} label - The label of the button
- * @property {boolean} [disabled] - Whether the button is disabled
+ * @param {Object} Props
+ * @param {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
+ * @param {string} label - The label of the button
+ * @param {boolean} [disabled] - Whether the button is disabled
  */
 
 const Button = ({ level, label, disabled }) => {
diff --git a/Client/src/Components/Label/BaseLabel.css b/Client/src/Components/Label/BaseLabel.css
index e0c82b062..6aed6326d 100644
--- a/Client/src/Components/Label/BaseLabel.css
+++ b/Client/src/Components/Label/BaseLabel.css
@@ -2,4 +2,5 @@
   border: 1px solid #000;
   display: inline-flex;
   justify-content: center;
+  align-items: center;
 }
diff --git a/Client/src/Components/Label/BaseLabel.jsx b/Client/src/Components/Label/BaseLabel.jsx
index 8b557133c..d44104e80 100644
--- a/Client/src/Components/Label/BaseLabel.jsx
+++ b/Client/src/Components/Label/BaseLabel.jsx
@@ -2,47 +2,24 @@ import PropTypes from "prop-types";
 import "./BaseLabel.css";
 import { useTheme } from "@mui/material";
 
-// Produces a lighter color based on a hex color and a percent
-// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
-const lightenColor = (color, percent) => {
-  let r = parseInt(color.substring(1, 3), 16);
-  let g = parseInt(color.substring(3, 5), 16);
-  let b = parseInt(color.substring(5, 7), 16);
-
-  const amt = Math.round((255 * percent) / 100);
-
-  r = r + amt <= 255 ? r + amt : 255;
-  g = g + amt <= 255 ? g + amt : 255;
-  b = b + amt <= 255 ? b + amt : 255;
-
-  r = r.toString(16).padStart(2, "0");
-  g = g.toString(16).padStart(2, "0");
-  b = b.toString(16).padStart(2, "0");
-
-  return `#${r}${g}${b}`;
-};
-
 /**
- * @typedef {Object} Props
- * @property {string} label - The label of the button
- * @property {string} color - The base color of the label
+ * @typedef {Object} Styles
+ * @param {string} [color] - The text color
+ * @param {string} [backgroundColor] - The background color
+ * @param {string} [borderColor] - The border color
  */
 
-const Label = ({ label, color }) => {
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label of the label
+ * @param {Styles} props.styles - CSS Styles passed from parent component
+ * @param {React.ReactNode} children - CSS Styles passed from parent component
+ * @returns {JSX.Element}
+ */
+
+const BaseLabel = ({ label, styles, children }) => {
   const theme = useTheme();
-
-  // If an invalid color is passed, default to the labelGray color
-  if (
-    typeof color !== "string" ||
-    !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
-  ) {
-    color = theme.palette.labelGray.textColor;
-    console.log(color);
-  }
-
-  // Calculate lighter shades for border and bg
-  const borderColor = lightenColor(color, 20);
-  const bgColor = lightenColor(color, 75);
   // Grab the default borderRadius from the theme to match button style
   const { borderRadius } = theme.shape;
   // Calculate padding for the label to mimic button.  Appears to scale correctly, not 100% sure though.
@@ -53,20 +30,25 @@ const Label = ({ label, color }) => {
       className="label"
       style={{
         borderRadius: borderRadius,
-        borderColor: borderColor,
-        backgroundColor: bgColor,
-        color: color,
+        borderColor: theme.palette.tertiary.main,
+        color: theme.palette.tertiary.main,
         padding: padding,
+        ...styles,
       }}
     >
+      {children}
       {label}
     </div>
   );
 };
 
-Label.propTypes = {
+BaseLabel.propTypes = {
   label: PropTypes.string.isRequired,
-  color: PropTypes.string.isRequired,
+  styles: PropTypes.shape({
+    color: PropTypes.string,
+    backgroundColor: PropTypes.string,
+  }),
+  children: PropTypes.node,
 };
 
-export default Label;
+export default BaseLabel;
diff --git a/Client/src/Components/Label/ColoredLabel.jsx b/Client/src/Components/Label/ColoredLabel.jsx
index e69de29bb..86c3059ca 100644
--- a/Client/src/Components/Label/ColoredLabel.jsx
+++ b/Client/src/Components/Label/ColoredLabel.jsx
@@ -0,0 +1,64 @@
+import { useTheme } from "@mui/material";
+import { PropTypes } from "prop-types";
+import BaseLabel from "./BaseLabel";
+
+// Produces a lighter color based on a hex color and a percent
+// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
+const lightenColor = (color, percent) => {
+  let r = parseInt(color.substring(1, 3), 16);
+  let g = parseInt(color.substring(3, 5), 16);
+  let b = parseInt(color.substring(5, 7), 16);
+
+  const amt = Math.round((255 * percent) / 100);
+
+  r = r + amt <= 255 ? r + amt : 255;
+  g = g + amt <= 255 ? g + amt : 255;
+  b = b + amt <= 255 ? b + amt : 255;
+
+  r = r.toString(16).padStart(2, "0");
+  g = g.toString(16).padStart(2, "0");
+  b = b.toString(16).padStart(2, "0");
+
+  return `#${r}${g}${b}`;
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label of the label
+ * @param {string} props.color - The color of the label
+ * @returns {JSX.Element}
+ */
+
+const ColoredLabel = ({ label, color }) => {
+  const theme = useTheme();
+  // If an invalid color is passed, default to the labelGray color
+  if (
+    typeof color !== "string" ||
+    !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)
+  ) {
+    color = theme.palette.labelGray.color;
+  }
+
+  // Calculate lighter shades for border and bg
+  const borderColor = lightenColor(color, 20);
+  const bgColor = lightenColor(color, 75);
+
+  return (
+    <BaseLabel
+      label={label}
+      styles={{
+        color: color,
+        borderColor: borderColor,
+        backgroundColor: bgColor,
+      }}
+    ></BaseLabel>
+  );
+};
+
+ColoredLabel.propTypes = {
+  label: PropTypes.string.isRequired,
+  color: PropTypes.string.isRequired,
+};
+
+export default ColoredLabel;
diff --git a/Client/src/Components/Label/StautsLabel.jsx b/Client/src/Components/Label/StautsLabel.jsx
index e69de29bb..b82167e14 100644
--- a/Client/src/Components/Label/StautsLabel.jsx
+++ b/Client/src/Components/Label/StautsLabel.jsx
@@ -0,0 +1,42 @@
+import PropTypes from "prop-types";
+import BaseLabel from "./BaseLabel";
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
+ * @returns {JSX.Element}
+ */
+
+const StatusLabel = ({ status }) => {
+  const theme = useTheme();
+
+  const colorLookup = {
+    Seen: theme.palette.labelGray.color,
+    Waiting: theme.palette.labelRed.color,
+    New: theme.palette.labelOrange.color,
+    Active: theme.palette.labelGreen.color,
+  };
+
+  const color = colorLookup[status] || theme.palette.labelGray.color;
+
+  return (
+    <BaseLabel label={status}>
+      <Box
+        width={12}
+        height={12}
+        bgcolor={color}
+        borderRadius="50%"
+        marginRight={1}
+      />
+    </BaseLabel>
+  );
+};
+
+StatusLabel.propTypes = {
+  status: PropTypes.oneOf(["Seen", "Waiting", "New", "Active"]),
+};
+
+export default StatusLabel;
diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx
index bb47b2888..40e062399 100644
--- a/Client/src/Pages/Home/index.jsx
+++ b/Client/src/Pages/Home/index.jsx
@@ -1,8 +1,9 @@
 import DropdownTeamMember from "../../Components/DropdownTeamMember";
 import "./index.css";
 import Button from "../../Components/Button";
-import BaseLabel from "../../Components/Label/BaseLabel";
+import ColoredLabel from "../../Components/Label/ColoredLabel";
 import { useTheme } from "@mui/material";
+import StatusLabel from "../../Components/Label/StautsLabel";
 
 const Home = () => {
   const theme = useTheme();
@@ -27,16 +28,18 @@ const Home = () => {
         </div>
         <h4>Labels</h4>
         <div>
-          <BaseLabel label="Label" color={theme.palette.labelGray.textColor} />
-          <BaseLabel
-            label="Label"
-            color={theme.palette.labelPurple.textColor}
-          />
-          <BaseLabel label="Label" color={theme.palette.labelGreen.textColor} />
-          <BaseLabel
-            label="Label"
-            color={theme.palette.labelOrange.textColor}
-          />
+          <ColoredLabel label="Label" color={theme.palette.labelGray.color} />
+          <ColoredLabel label="Label" color={theme.palette.labelPurple.color} />
+          <ColoredLabel label="Label" color={theme.palette.labelGreen.color} />
+          <ColoredLabel label="Label" color={theme.palette.labelOrange.color} />
+        </div>
+
+        <h4>Status Lables</h4>
+        <div>
+          <StatusLabel status="Seen" />
+          <StatusLabel status="Waiting" />
+          <StatusLabel status="New" />
+          <StatusLabel status="Active" />
         </div>
       </div>
     </>
diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js
index 61dd26230..59985d0bd 100644
--- a/Client/src/Utils/Theme.js
+++ b/Client/src/Utils/Theme.js
@@ -6,11 +6,11 @@ const secondaryMain = "#475467";
 const tertiaryMain = "#475467";
 
 // Label Colors
-const labelTextOrange = "#B93815";
-const labelTextGray = "#475467";
-const labelTextPurple = "#6941C6";
-const labelTextGreen = "#067647";
-
+const labelOrange = "#F79009";
+const labelGray = "#475467";
+const labelPurple = "#6941C6";
+const labelGreen = "#067647";
+const labelRed = "#F04438";
 const theme = createTheme({
   palette: {
     primary: {
@@ -23,16 +23,19 @@ const theme = createTheme({
       main: tertiaryMain,
     },
     labelOrange: {
-      textColor: labelTextOrange,
+      color: labelOrange,
     },
     labelGray: {
-      textColor: labelTextGray,
+      color: labelGray,
     },
     labelPurple: {
-      textColor: labelTextPurple,
+      color: labelPurple,
     },
     labelGreen: {
-      textColor: labelTextGreen,
+      color: labelGreen,
+    },
+    labelRed: {
+      color: labelRed,
     },
   },
 });

From bc463802d975e7218ef8bdb5edf022d55f9ed3d0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 7 May 2024 14:30:00 -0700
Subject: [PATCH 5/6] Updated JSdocs

---
 Client/src/Components/Button/index.jsx       | 12 ++++++++----
 Client/src/Components/Label/BaseLabel.jsx    |  2 +-
 Client/src/Components/Label/ColoredLabel.jsx |  5 ++++-
 Client/src/Components/Label/StautsLabel.jsx  |  3 +++
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx
index 4d479495e..66a345746 100644
--- a/Client/src/Components/Button/index.jsx
+++ b/Client/src/Components/Button/index.jsx
@@ -21,10 +21,14 @@ const levelConfig = {
 };
 
 /**
- * @param {Object} Props
- * @param {'primary' | 'secondary' | 'tertiary' | 'error'} level - The level of the button
- * @param {string} label - The label of the button
- * @param {boolean} [disabled] - Whether the button is disabled
+ * @param {Object} props
+ * @param {'primary' | 'secondary' | 'tertiary' | 'error'} props.level - The level of the button
+ * @param {string} props.label - The label of the button
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @returns {JSX.Element}
+ * @example
+ * // Render an error button
+ * <Button level="error" label="Error" disabled />
  */
 
 const Button = ({ level, label, disabled }) => {
diff --git a/Client/src/Components/Label/BaseLabel.jsx b/Client/src/Components/Label/BaseLabel.jsx
index d44104e80..aa23aeab3 100644
--- a/Client/src/Components/Label/BaseLabel.jsx
+++ b/Client/src/Components/Label/BaseLabel.jsx
@@ -14,7 +14,7 @@ import { useTheme } from "@mui/material";
  * @param {Object} props
  * @param {string} props.label - The label of the label
  * @param {Styles} props.styles - CSS Styles passed from parent component
- * @param {React.ReactNode} children - CSS Styles passed from parent component
+ * @param {React.ReactNode} children - Children passed from parent component
  * @returns {JSX.Element}
  */
 
diff --git a/Client/src/Components/Label/ColoredLabel.jsx b/Client/src/Components/Label/ColoredLabel.jsx
index 86c3059ca..744652050 100644
--- a/Client/src/Components/Label/ColoredLabel.jsx
+++ b/Client/src/Components/Label/ColoredLabel.jsx
@@ -26,8 +26,11 @@ const lightenColor = (color, percent) => {
  * @component
  * @param {Object} props
  * @param {string} props.label - The label of the label
- * @param {string} props.color - The color of the label
+ * @param {string} props.color - The color of the label, specified in #RRGGBB format
  * @returns {JSX.Element}
+ * @example
+ * // Render a red label
+ * <ColoredLabel label="Label" color="#FF0000" />
  */
 
 const ColoredLabel = ({ label, color }) => {
diff --git a/Client/src/Components/Label/StautsLabel.jsx b/Client/src/Components/Label/StautsLabel.jsx
index b82167e14..19423d838 100644
--- a/Client/src/Components/Label/StautsLabel.jsx
+++ b/Client/src/Components/Label/StautsLabel.jsx
@@ -8,6 +8,9 @@ import { useTheme } from "@mui/material";
  * @param {Object} props
  * @param {'Seen' | 'Waiting' | 'New' | 'Active'} props.status - The status for the label
  * @returns {JSX.Element}
+ * @example
+ * // Render an active label
+ * <StatusLabel status="Active" />
  */
 
 const StatusLabel = ({ status }) => {

From f32bcb79fc59aba68403b4f50a1c8d52772b17c1 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 7 May 2024 14:31:21 -0700
Subject: [PATCH 6/6] Added comment for default color

---
 Client/src/Components/Label/StautsLabel.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Client/src/Components/Label/StautsLabel.jsx b/Client/src/Components/Label/StautsLabel.jsx
index 19423d838..108ca0f2f 100644
--- a/Client/src/Components/Label/StautsLabel.jsx
+++ b/Client/src/Components/Label/StautsLabel.jsx
@@ -23,6 +23,7 @@ const StatusLabel = ({ status }) => {
     Active: theme.palette.labelGreen.color,
   };
 
+  // Look up the color for the status, default to labelGray if not found
   const color = colorLookup[status] || theme.palette.labelGray.color;
 
   return (