Add less padding in reusable chips by adding size='small' prop (#2122)

* add less padding in reusable chips by adding size='small' prop

* remove unecessary styles

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 (
             <Box sx={{ width: "100px" }}>

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) => (
+  <Chip size={size} {...other} />
+))({
+  background: Palette.success.bg.light,
+  color: Palette.success.dark,
+  ...chipStyles,
 });
 
-const InactiveChip = styled(Chip)({
+const InactiveChip = styled(({ size = "small", ...other }: ChipProps) => (
+  <Chip size={size} {...other} />
+))({
   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) => (
+  <Chip size={size} {...other} />
+))({
   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) => (
+  <Chip size={size} {...other} />
+))({
   background: `${Palette.error.bg.light}`,
   color: `${Palette.error.dark}`,
-  fontWeight: "bold",
-  borderRadius: "4px",
-  padding: "4px 8px",
-  gap: "8px",
+  ...chipStyles,
 });
 
 export { ActiveChip, InactiveChip, HighPriorityChip, ErrorChip };