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;