diff --git a/epictrack-web/src/components/project/ProjectList.tsx b/epictrack-web/src/components/project/ProjectList.tsx index e41894b4c..296b8fac5 100644 --- a/epictrack-web/src/components/project/ProjectList.tsx +++ b/epictrack-web/src/components/project/ProjectList.tsx @@ -224,7 +224,6 @@ const ProjectList = () => { header: "Status", filterVariant: "multi-select", filterSelectOptions: statusesOptions, - size: 115, Filter: ({ header, column }) => { return ( diff --git a/epictrack-web/src/components/shared/chip/ETChip.tsx b/epictrack-web/src/components/shared/chip/ETChip.tsx index 798454df6..292ea268b 100644 --- a/epictrack-web/src/components/shared/chip/ETChip.tsx +++ b/epictrack-web/src/components/shared/chip/ETChip.tsx @@ -1,42 +1,42 @@ -import { Chip, styled } from "@mui/material"; +import { Chip, ChipProps, styled } from "@mui/material"; import { Palette } from "../../../styles/theme"; -const ActiveChip = styled(Chip)({ - background: "#C2EACA", - color: "#236430", +const chipStyles = { fontWeight: "bold", borderRadius: "4px", - padding: "4px 8px", - gap: "8px", - width: "100px", + minWidth: "80px", +}; + +const ActiveChip = styled(({ size = "small", ...other }: ChipProps) => ( + +))({ + background: Palette.success.bg.light, + color: Palette.success.dark, + ...chipStyles, }); -const InactiveChip = styled(Chip)({ +const InactiveChip = styled(({ size = "small", ...other }: ChipProps) => ( + +))({ background: "#F2F2F2", color: "#6D7274", - fontWeight: "bold", - borderRadius: "4px", - padding: "4px 8px", - gap: "8px", - width: "100px", + ...chipStyles, }); -const HighPriorityChip = styled(Chip)({ +const HighPriorityChip = styled(({ size = "small", ...other }: ChipProps) => ( + +))({ background: `${Palette.secondary.bg.light}`, color: `${Palette.secondary.dark}`, - fontWeight: "bold", - borderRadius: "4px", - padding: "4px 8px", - gap: "8px", + ...chipStyles, }); -const ErrorChip = styled(Chip)({ +const ErrorChip = styled(({ size = "small", ...other }: ChipProps) => ( + +))({ background: `${Palette.error.bg.light}`, color: `${Palette.error.dark}`, - fontWeight: "bold", - borderRadius: "4px", - padding: "4px 8px", - gap: "8px", + ...chipStyles, }); export { ActiveChip, InactiveChip, HighPriorityChip, ErrorChip };