Feature[#20] Remove SX props from DataGrid, add width and adjust font…

… color for status and add icon for assignees
Impactworkers · Jul 11, 2024 · a001de3 · a001de3
1 parent 5f22538
commit a001de3
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 63 deletions.
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -162,12 +162,14 @@ export const lightTheme = createTheme({
                         {
                             display: "flex",
                             justifyContent: "center",
-                            alignItems: "center"
+                            alignItems: "center",
+                            width: '66px',
                         },
                     "& .MuiDataGrid-cellCheckbox": {
                         display: "flex",
                         justifyContent: "center",
-                        alignItems: "center"
+                        alignItems: "center",
+                        width: '66px',
                     },
                     "& .MuiDataGrid-row": {
                         minHeight: "50px !important",
@@ -180,7 +182,7 @@ export const lightTheme = createTheme({
                     },
                     "& .MuiDataGrid-virtualScroller": {
                         marginTop: "5px"
-                    }
+                    }, 
                 }
             }
         },
@@ -366,9 +368,9 @@ export const darkTheme = createTheme({
 
 export const getCustomStyles = (chipColor: string) => ({
     bgcolor: chipColor === "success" ? "rgba(129, 199, 132, 0.1)" : "rgba(158, 158, 158, 0.1)",
-    border: chipColor === "success" ? "1px solid rgba(129, 199, 132, 1)" : "1px solid rgba(158, 158, 158, 1)",
+    color: chipColor === "success" ? "rgba(109, 179, 112, 1)" : "rgba(138, 138, 138, 1)", 
     "&:hover": {
-      bgcolor: chipColor === "success" ? "rgba(102, 187, 106, 0.1)" : "rgba(158, 158, 158, 0.1)",
-      border: chipColor === "success" ? "1px solid rgba(102, 187, 106, 1)" : "1px solid rgba(158, 158, 158, 1)"
+    bgcolor: chipColor === "success" ? "rgba(102, 187, 106, 0.1)" : "rgba(158, 158, 158, 0.1)",
+    border: chipColor === "success" ? "1px solid rgba(102, 187, 106, 1)" : "1px solid rgba(158, 158, 158, 1)"
     }
-  });
+});
diff --git a/src/components/Cases/CasesTable.tsx b/src/components/Cases/CasesTable.tsx
@@ -90,51 +90,6 @@ const CasesTable: React.FC<CasesTableProps> = ({ columns, rows }) => {
                     onPaginationModelChange={setPaginationModel}
                     disableColumnMenu
                     checkboxSelection
-                    // sx={{
-                    //     "& .MuiDataGrid-root": {
-                    //         border: "none",
-                    //         width: "100%"
-                    //     },
-                    //     "& .MuiDataGrid-cell": {
-                    //         borderBottom: "1px solid #f0f0f0"
-                    //     },
-                    //     "& .MuiDataGrid-columnHeaders": {
-                    //         backgroundColor: "#f5f5f5",
-                    //         borderBottom: "3px solid red",
-                    //         fontSize: "14px",
-                    //         fontWeight: "bold"
-                    //     },
-                    //     "& .MuiDataGrid-columnHeaderTitleContainer": {
-                    //         justifyContent: "center",
-                    //         textAlign: "center"
-                    //     },
-                    //     "& .MuiDataGrid-columnSeparator": {
-                    //         display: "none"
-                    //     },
-                    //     "& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer":
-                    //         {
-                    //             display: "flex",
-                    //             justifyContent: "center",
-                    //             alignItems: "center"
-                    //         },
-                    //     "& .MuiDataGrid-cellCheckbox": {
-                    //         display: "flex",
-                    //         justifyContent: "center",
-                    //         alignItems: "center"
-                    //     },
-                    //     "& .MuiDataGrid-row": {
-                    //         minHeight: "50px !important",
-                    //         maxHeight: "50px !important",
-                    //         "& .MuiDataGrid-cell": {
-                    //             display: "flex",
-                    //             justifyContent: "center",
-                    //             alignItems: "center"
-                    //         }
-                    //     },
-                    //     "& .MuiDataGrid-virtualScroller": {
-                    //         marginTop: "5px"
-                    //     }
-                    // }}
                 />
             </ThemeProvider>
         </div>

diff --git a/src/components/Cases/ModifiedColumns.tsx b/src/components/Cases/ModifiedColumns.tsx
@@ -6,9 +6,9 @@ import "./CasesTable.css";
 import Chip from "@mui/material/Chip";
 import Avatar from "@mui/material/Avatar";
 import IconButton from "@mui/material/IconButton";
-import Button from "@mui/material/Button";
-import { Add } from "@mui/icons-material";
 import { getCustomStyles } from "../../../.storybook/theme";
+import { Fab } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 
 export const ModifiedColumns = (
     columns: GridColDef[],
@@ -29,10 +29,36 @@ export const ModifiedColumns = (
                     const chipColor =
                         params.value === "Active" ? "success" : "grey";
                     const customStyles = getCustomStyles(chipColor);
-
-                    return <Chip label={params.value} sx={customStyles} />;
+                    const DotIcon = () => (
+                        <span
+                            style={{
+                                height: "10px",
+                                width: "10px",
+                                backgroundColor: customStyles.color, // Green color
+                                borderRadius: "50%",
+                                display: "inline-block"
+                            }}
+                        />
+                    );
+                    return (
+                        <div style={{ display: "flex", alignItems: "center" }}>
+                            <Chip
+                                icon={<DotIcon />}
+                                label={params.value}
+                                sx={customStyles}
+                            />
+                        </div>
+                    );
                 }
                 if (column.field === "Assignee") {
+                    const fullName = params.value;
+                    const nameParts = fullName.split(" ");
+                    const firstInitial = nameParts[0][0] || "";
+                    const lastName =
+                        nameParts.length > 1
+                            ? nameParts[nameParts.length - 1]
+                            : ""; // Get the last name
+                    const formattedName = `${firstInitial}. ${lastName}`; // Form
                     return (
                         <div
                             style={{
@@ -41,15 +67,14 @@ export const ModifiedColumns = (
                                 gap: "10px"
                             }}
                         >
-                            <Avatar>{params.value}</Avatar>
-                            <Button
+                            <Avatar>{formattedName}</Avatar>
+                            <Fab
                                 size="small"
-                                onClick={() => {
-                                    /* Handle adding more assignees */
-                                }}
+                                color="secondary"
+                                aria-label="add"
                             >
-                                <Add color="primary" />
-                            </Button>
+                                <AddIcon />
+                            </Fab>
                         </div>
                     );
                 }