Refactoring to a base label and extended labels

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}

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