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 (