styles: design update

src/app/(dashboard)/home/page.tsx

@@ -15,7 +15,7 @@ const HomePage = async () => {
         sx={{ boxShadow: "none", borderRadius: "12px", marginBlockStart: 2 }}
       >
         <CardHeader
-          title="Projects"
+          title="Products"
           fontWeight={"bold"}
           sx={{ borderBlockEnd: "1px solid var(--primary_light)" }}
         />

src/app/globals.scss

@@ -31,6 +31,9 @@
   --input-border-default: #e0e3e7;
   --input-border-hover: #b2bac2;
 
+  --clr_table_border: #eeeeee;
+  --clr_table_cell_border: #e0e0e0;
+
   --dashboard-bg: #eef2f6; /* #EEF2F6 */
 
   // ========== Font Family ==========

src/components/reviewModal/ReviewModal.tsx

@@ -73,7 +73,7 @@ const ReviewModal = ({
           <Stack
             spacing={2}
             direction={"column"}
-            sx={{ maxHeight: "350px", overflow: "auto" }}
+            sx={{ maxHeight: "370px", overflow: "auto" }}
           >
             {reviewModalData.map((review: ReviewModalData, index: number) => (
               <ReviewModalContent key={index} data={review} />

src/components/table/TanStackTable.module.scss

@@ -1,15 +1,51 @@
 @use "@/theme/sass/helper" as *;
+.sort {
+  @include displayFlex(row, center, flex-start);
+  gap: rem(4);
+}
+.clamp_2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 .responsive_table {
   width: 100%;
+  max-height: rem(400);
+  overflow: auto;
+  border: 1px solid var(--clr_table_border);
+
   .table {
     width: 100%;
+    border-collapse: collapse;
     thead {
       tr {
         th {
           text-align: start;
           padding-inline: rem(10);
           padding-block: rem(4);
-          min-height: rem(40);
+          height: rem(40);
+          cursor: pointer;
+          color: var(--primary_text_clr);
+          font-weight: var(--fw_medium);
+          min-width: rem(100);
+          border-bottom: 1px solid var(--clr_table_cell_border);
+          background: var(--bg_white);
+          position: sticky;
+          z-index: 1;
+          top: 0;
+          &:first-child {
+            min-width: max-content;
+          }
+          &:last-child {
+            min-width: max-content;
+            text-align: center;
+          }
+          &:nth-of-type(6),
+          &:nth-of-type(2),
+          &:nth-of-type(3) {
+            min-width: rem(152);
+          }
         }
       }
     }
@@ -20,6 +56,15 @@
           padding-inline: rem(10);
           padding-block: rem(4);
           min-height: rem(40);
+          border-bottom: 1px solid var(--clr_table_cell_border);
+          border-right: 1px solid var(--clr_table_cell_border);
+          &:last-child {
+            text-align: center;
+            border-right: none;
+          }
+        }
+        &:nth-of-type(odd) {
+          background: var(--clr_gray_100);
         }
       }
     }

src/components/table/TanStackTable.tsx

@@ -5,10 +5,16 @@ import {
   getCoreRowModel,
   flexRender,
 } from "@tanstack/react-table";
-import global from "../../../src/theme/global/global.module.scss";
+import global from "/src/theme/global/global.module.scss";
 import styles from "./TanStackTable.module.scss";
 import { useEffect, useState } from "react";
 import ReviewModal from "../reviewModal/ReviewModal";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import HeightIcon from "@mui/icons-material/Height";
+import RemoveRedEyeIcon from "@mui/icons-material/RemoveRedEye";
+import { IconButton, Tooltip } from "@mui/material";
+import { grey } from "@mui/material/colors";
 
 const TanStackTable = ({ data }: any) => {
   const [tableData, setTableData] = useState([]);
@@ -34,8 +40,15 @@ const TanStackTable = ({ data }: any) => {
   const columns: any = [
     {
       header: (
-        <div onClick={() => handleSort("id")}>
-          ID {sortOrder === "asc" ? "↑" : sortOrder === "desc" ? "↓" : ""}
+        <div className={styles.sort} onClick={() => handleSort("id")}>
+          ID{" "}
+          {sortOrder === "asc" ? (
+            <ArrowDropUpIcon sx={{ color: grey[300] }} />
+          ) : sortOrder === "desc" ? (
+            <ArrowDropDownIcon sx={{ color: grey[300] }} />
+          ) : (
+            <HeightIcon sx={{ color: grey[300] }} />
+          )}
         </div>
       ),
       accessorKey: "id",
@@ -47,6 +60,13 @@ const TanStackTable = ({ data }: any) => {
     {
       header: "Description",
       accessorKey: "description",
+      cell: ({ row }: any) => (
+        <>
+          <Tooltip title={row.original.description}>
+            <p className={styles.clamp_2}>{row.original.description}</p>
+          </Tooltip>
+        </>
+      ),
     },
     {
       header: "Category",
@@ -82,9 +102,14 @@ const TanStackTable = ({ data }: any) => {
       cell: ({ row }: any) => (
         <>
           {/* {row.original.reviews.length} Reviews */}
-          <button onClick={() => handleButtonClick(row.original)}>
-            View Reviews ({row.original.reviews.length})
-          </button>
+          <IconButton
+            aria-label="log out"
+            size="medium"
+            color="primary"
+            onClick={() => handleButtonClick(row.original)}
+          >
+            <RemoveRedEyeIcon fontSize="small" />
+          </IconButton>
         </>
       ),
     },

src/components/titleHeader/titleHeader.tsx

@@ -26,7 +26,7 @@ const TitleHeader = () => {
           }}
         >
           <Typography variant="h6" color="text.primary" fontWeight={"bold"}>
-            Projects
+            Products
           </Typography>
           <Breadcrumbs aria-label="breadcrumb">
             <Link
@@ -51,7 +51,7 @@ const TitleHeader = () => {
               color="inherit"
               href="/material-ui/getting-started/installation/"
             >
-              Project Table
+              Product Table
             </Link>
           </Breadcrumbs>
         </CardContent>

src/components/wrapper/dashboardWrapper.tsx

@@ -103,7 +103,7 @@ export default function DashboardWrapper(props: Props) {
       </Toolbar>
       {/* <Divider /> */}
       <CssList sx={{ padding: "0", paddingInline: "18px" }}>
-        {["Project Table"].map((text, index) => (
+        {["Product Table"].map((text, index) => (
           <ListItem
             key={text}
             disablePadding
@@ -151,9 +151,7 @@ export default function DashboardWrapper(props: Props) {
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" noWrap component="div">
-              Responsive drawer
-            </Typography>
+            <Typography variant="h6" noWrap component="div"></Typography>
           </Box>
           <Box display={"flex"} alignItems={"center"} gap={1}>
             <Box
@@ -236,7 +234,7 @@ export default function DashboardWrapper(props: Props) {
         sx={{
           flexGrow: 1,
           p: 3,
-          width: { md: `calc(100% - ${drawerWidth}px)` },
+          width: { xs: "100%", md: `calc(100% - ${drawerWidth}px)` },
         }}
       >
         <Toolbar />