Add label component, add colors to theme

Client/src/Components/Label/index.css

@@ -0,0 +1,3 @@
+.label {
+  border: 1px solid #000;
+}

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;

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>
     </>
   );

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,
+    },
   },
 });