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 (
{ 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 = () => {

Labels

-