From 5f6ab892404f88b64e1a1e3acd37e208aa89af5a Mon Sep 17 00:00:00 2001
From: ttpl-rt-217 <shreyas_s@techjoomla.com>
Date: Tue, 12 Nov 2024 22:37:20 +0530
Subject: [PATCH] Issue #PS-2322 fix: Workspace UI improvements and Fixes

---
 src/components/Layout.tsx                     |   2 +-
 src/components/SearchBox.tsx                  |  10 +-
 src/components/SideBar.tsx                    |  12 +-
 src/components/WorkspaceText.tsx              |  16 +-
 .../workspace/content/allContents/index.tsx   | 218 ++++++++-------
 src/pages/workspace/content/draft/index.tsx   | 250 +++++++++++-------
 src/pages/workspace/content/publish/index.tsx | 240 ++++++++++-------
 src/pages/workspace/content/review/index.tsx  |  71 ++---
 .../workspace/content/submitted/index.tsx     | 236 ++++++++++-------
 src/styles/global.css                         |  12 +
 10 files changed, 635 insertions(+), 432 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 20df430..fff120a 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -12,7 +12,7 @@ const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
   return (
     <Box display="flex" minHeight={"100vh"}>
       <Sidebar selectedKey={selectedKey} onSelect={onSelect} />
-      <Box sx={{ flex: 1, background: 'rgb(243, 245, 248)'}}>{children}</Box>
+      <Box sx={{ flex: 1, background: 'rgb(243, 245, 248)' }}>{children}</Box>
     </Box>
   );
 };
diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx
index a0aff77..ab45b22 100644
--- a/src/components/SearchBox.tsx
+++ b/src/components/SearchBox.tsx
@@ -108,6 +108,7 @@ const SearchBox: React.FC<SearchBarProps> = ({
               borderRadius: "50px",
               background: theme.palette.warning.A700,
               boxShadow: "none",
+              border: "1px solid #000000DE !important",
             }}
           >
             <InputBase
@@ -130,7 +131,7 @@ const SearchBox: React.FC<SearchBarProps> = ({
       </Grid>
 
       <Grid item xs={3} md={3}>
-        <FormControl sx={{ width: "100%", mt: 2 }}>
+        <FormControl className="drawer-select" sx={{ width: "100%", mt: 2 }}>
           <InputLabel>Filter By</InputLabel>
           <Select
             multiple
@@ -138,6 +139,13 @@ const SearchBox: React.FC<SearchBarProps> = ({
             onChange={handleFilterChange}
             input={<OutlinedInput label="Filter By" />}
             renderValue={(selected) => (selected as string[]).join(", ")}
+            sx={{
+              '& .MuiSelect-select': {
+                height: '20px',
+                display: 'flex',
+                alignItems: 'center',
+              },
+            }}
           >
             {filterOptions?.map((option) => (
               <MenuItem key={option} value={option}>
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 0cb85dd..ce1595b 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -46,7 +46,7 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
   const [drawerOpen, setDrawerOpen] = useState(false);
   const router = useRouter();
   const theme = useTheme<any>();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const handleNavigation = (key: string) => {
     console.log(key);
@@ -66,7 +66,7 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
   };
 
   const drawerContent = (
-    <Box margin={"1rem 0.5rem 0.5rem 0.5rem"} width={"100%"} height={"100%"} sx={{ fontSize: '14px' }}>
+    <Box display={'inline-block'} margin={"1rem 0.5rem 0.5rem 0.5rem"} width={"100%"} height={"100%"} sx={{ fontSize: '14px' }}>
       <img src={'/logo.png'} alt="logo" height={60} />
       <Box
         p={'2rem 2rem 2rem 0'}
@@ -136,7 +136,7 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
             >
               {item?.icon}
             </ListItemIcon>
-            <ListItemText primaryTypographyProps={{fontSize: '14px', fontWeight: selectedKey === item?.key ? '600' : 'normal'}}  primary={item?.text} />
+            <ListItemText primaryTypographyProps={{ fontSize: '14px', fontWeight: selectedKey === item?.key ? '600' : 'normal' }} primary={item?.text} />
           </ListItemButton>
         ))}
       </List>
@@ -147,9 +147,9 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
     <>
       {isMobile ? (
         <>
-        
-            <MenuIcon sx={{ margin: 2, cursor: "pointer" }}  onClick={toggleDrawer}/>
-         
+
+          <MenuIcon sx={{ margin: 2, cursor: "pointer" }} onClick={toggleDrawer} />
+
           <Drawer
             anchor="left"
             open={drawerOpen}
diff --git a/src/components/WorkspaceText.tsx b/src/components/WorkspaceText.tsx
index 6a7f9e2..8123d20 100644
--- a/src/components/WorkspaceText.tsx
+++ b/src/components/WorkspaceText.tsx
@@ -3,9 +3,14 @@ import React from "react";
 
 
 const WorkspaceText: React.FC<any> = () => {
-  const theme = useTheme<any>();
+    const theme = useTheme<any>();
 
-    return (<Box p={3} display={"flex"} flexDirection={"row"} gap={2}>
+    return (<Box p={3} display={"flex"} sx={{
+        flexDirection: 'row',
+        '@media (max-width: 768px)': {
+            flexDirection: 'column',
+        },
+    }} gap={2}>
         <Typography
             variant="h1"
             sx={{
@@ -22,8 +27,13 @@ const WorkspaceText: React.FC<any> = () => {
             variant="body1"
             color="#635E57"
             width={'70%'}
+
             fontSize={15}
-            sx={{lineHeight:'20px', fontSize:'14px'}}
+            sx={{
+                lineHeight: '20px', fontSize: '14px', '@media (max-width: 768px)': {
+                    width: '100%'
+                }
+            }}
         >
             Create, organize, and manage all types of content in one place.
             Whether it&apos;s courses, assessments, or any other type of content.
diff --git a/src/pages/workspace/content/allContents/index.tsx b/src/pages/workspace/content/allContents/index.tsx
index 0cc111c..768f620 100644
--- a/src/pages/workspace/content/allContents/index.tsx
+++ b/src/pages/workspace/content/allContents/index.tsx
@@ -159,98 +159,138 @@ const AllContentsPage = () => {
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <WorkspaceText />
       <Box p={3}>
-        <Box sx={{ background: "#FFFFFF" }} p={2}>
-          <Typography
-            variant="h4"
-            sx={{ fontWeight: "bold", fontSize: "16px" }}
-          >
-            All My Contents
-          </Typography>
-        </Box>
-        {/* <Typography mb={2}>Here you see all your content.</Typography> */}
+        <Box sx={{ background: "#fff", borderRadius: '8px', boxShadow: "0px 2px 6px 2px #00000026", pb: '15px' }}>
+          <Box p={2}>
+            <Typography
+              variant="h4"
+              sx={{ fontWeight: "bold", fontSize: "16px" }}
+            >
+              All My Contents
+            </Typography>
+          </Box>
+          {/* <Typography mb={2}>Here you see all your content.</Typography> */}
 
-        <Box mb={3}>
-          <SearchBox
-            placeholder="Search by title..."
-            onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
-          />
-        </Box>
-        {loading ? (
-          <Loader showBackdrop={true} loadingText={"Loading"} />
-        ) : contentList && contentList.length > 0 ? (
-          contentList &&
-          contentList.length > 0 && (
-            <>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableCell>Content</TableCell>
-                    <TableCell>Last Updated</TableCell>
-                    <TableCell>Status</TableCell>
-                    <TableCell></TableCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {contentList?.map((content, index) => (
-                    <TableRow key={index}>
-                      <TableCell onClick={() => openEditor(content)}>
-                        <Box
-                          display="flex"
-                          alignItems="center"
-                          sx={{ cursor: "pointer" }}
-                        >
-                          {content?.appIcon ? (
-                            <img
-                              src={content?.appIcon || "/logo.png"}
-                              height={"25px"}
-                            />
-                          ) : (
-                            <UpReviewTinyImage fontSize="small" />
-                          )}
-                          <Box ml={2}>
-                            <Typography variant="body1">
-                              {content?.name}
-                            </Typography>
-                            <Typography
-                              variant="body2"
-                              color={theme.palette.warning["A200"]}
-                            >
-                              {content?.primaryCategory}
-                            </Typography>
-                          </Box>
-                        </Box>
-                      </TableCell>
-                      <TableCell>{timeAgo(content?.lastUpdatedOn)}</TableCell>
-                      <TableCell>{content?.status}</TableCell>
-                      <TableCell>
-                        {content?.status === "Draft" && (
-                          <IconButton
-                            aria-label="delete"
-                            onClick={() => handleDeleteClick(content)}
-                          >
-                            <DeleteIcon />
-                          </IconButton>
-                        )}
-                      </TableCell>
+          <Box mb={3}>
+            <SearchBox
+              placeholder="Search by title..."
+              onSearch={handleSearch}
+              onFilterChange={handleFilterChange}
+              onSortChange={handleSortChange}
+            />
+          </Box>
+          {loading ? (
+            <Loader showBackdrop={true} loadingText={"Loading"} />
+          ) : contentList && contentList.length > 0 ? (
+            contentList &&
+            contentList.length > 0 && (
+              <>
+                <Table>
+                  <TableHead>
+                    <TableRow>
+                      <TableCell sx={
+                        {
+                          color: '#635E57',
+                          fontSize: '12px',
+                          fontWeight: "400"
+                        }
+                      }>Content</TableCell>
+                      <TableCell sx={
+                        {
+                          color: '#635E57',
+                          fontSize: '12px',
+                          fontWeight: "400"
+                        }
+                      }>Last Updated</TableCell>
+                      <TableCell sx={
+                        {
+                          color: '#635E57',
+                          fontSize: '12px',
+                          fontWeight: "400"
+                        }
+                      }>Status</TableCell>
+                      <TableCell sx={
+                        {
+                          color: '#635E57',
+                          fontSize: '12px',
+                          fontWeight: "400"
+                        }
+                      }></TableCell>
                     </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </>
-          )
-        ) : (
-          <NoDataFound />
-        )}
+                  </TableHead>
+                  <TableBody>
+                    {contentList?.map((content, index) => (
+                      <TableRow key={index}>
+                        <TableCell onClick={() => openEditor(content)}>
+                          <Box
+                            display="flex"
+                            alignItems="center"
+                            sx={{ cursor: "pointer" }}
+                          >
+                            {content?.appIcon ? (
+                              <img
+                                src={content?.appIcon || "/logo.png"}
+                                height={"25px"}
+                              />
+                            ) : (
+                              <UpReviewTinyImage fontSize="small" />
+                            )}
+                            <Box ml={2}>
+                              <Typography fontWeight={"500"}
+                                fontSize={"14px"}
+                                color={'#1F1B13'} variant="body1">
+                                {content?.name}
+                              </Typography>
+                              <Typography
+                                variant="body2"
+                                color={theme.palette.warning["A200"]}
+                              >
+                                {content?.primaryCategory}
+                              </Typography>
+                            </Box>
+                          </Box>
+                        </TableCell>
+                        <TableCell>{timeAgo(content?.lastUpdatedOn)}</TableCell>
+                        <TableCell>{content?.status}</TableCell>
+                        <TableCell>
+                          {content?.status === "Draft" && (
+                            <IconButton
+                              aria-label="delete"
+                              onClick={() => handleDeleteClick(content)}
+                              color="error"
+                            >
+                              <Box sx={{
+                                background: '#FAEEEC',
+                                height: '42px',
+                                width: '42px',
+                                borderRadius: '12px',
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center'
+                              }}>
 
-        {totalCount > LIMIT && (
-          <PaginationComponent
-            count={Math.ceil(totalCount / LIMIT)}
-            page={page}
-            onPageChange={handleChangePage}
-          />
-        )}
+                                <DeleteIcon sx={{ fontSize: '18px' }} />
+                              </Box>
+                            </IconButton>
+                          )}
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </>
+            )
+          ) : (
+            <NoDataFound />
+          )}
+
+          {totalCount > LIMIT && (
+            <PaginationComponent
+              count={Math.ceil(totalCount / LIMIT)}
+              page={page}
+              onPageChange={handleChangePage}
+            />
+          )}
+        </Box>
       </Box>
     </Layout>
   );
diff --git a/src/pages/workspace/content/draft/index.tsx b/src/pages/workspace/content/draft/index.tsx
index 03bce13..2e06be4 100644
--- a/src/pages/workspace/content/draft/index.tsx
+++ b/src/pages/workspace/content/draft/index.tsx
@@ -21,6 +21,7 @@ import { LIMIT } from "@/utils/app.constant";
 import { useRouter } from "next/router";
 import { MIME_TYPE } from "@/utils/app.config";
 import WorkspaceText from "@/components/WorkspaceText";
+import Paper from '@mui/material/Paper';
 
 const DraftPage = () => {
   const [selectedKey, setSelectedKey] = useState("draft");
@@ -117,113 +118,158 @@ const DraftPage = () => {
   return (
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <WorkspaceText />
-      <Box p={3}>
-        <Box sx={{ background: "#FFFFFF" }} p={2}>
-          <Typography
-            variant="h4"
-            sx={{ fontWeight: "bold", fontSize: "16px" }}
-          >
-            Drafts
-          </Typography>
-        </Box>
-        {/* <Typography mb={2}>
+      <Box p={3} >
+        <Box sx={{ background: "#fff", borderRadius: '8px', boxShadow: "0px 2px 6px 2px #00000026", pb: '15px' }}>
+          <Box p={2}>
+            <Typography
+              variant="h4"
+              sx={{ fontWeight: "bold", fontSize: "16px" }}
+            >
+              Drafts
+            </Typography>
+          </Box>
+          {/* <Typography mb={2}>
           Create, organize, and manage all types of content in one place.
         </Typography> */}
 
-        <Box mb={3}>
-          <SearchBox
-            placeholder="Search by title..."
-            onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
-          />
-        </Box>
-
-        {loading ? (
-          <Box display="flex" justifyContent="center" my={5}>
-            <CircularProgress />
+          <Box pb={3}>
+            <SearchBox
+              placeholder="Search by title..."
+              onSearch={handleSearch}
+              onFilterChange={handleFilterChange}
+              onSortChange={handleSortChange}
+            />
           </Box>
-        ) : contentList && contentList.length > 0 ? (
-          <TableContainer>
-            <Table>
-              <TableHead sx={{ backgroundColor: "#F8EFE7" }}>
-                <TableRow>
-                  <TableCell>Title & Description</TableCell>
-                  <TableCell>Content Type</TableCell>
-                  <TableCell>Status</TableCell>
-                  <TableCell>Last Modified</TableCell>
-                  <TableCell align="center">Actions</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {contentList.map((content: any, index) => (
-                  <TableRow
-                    key={content.identifier}
-                    hover
-                    style={{ cursor: "pointer" }}
-                  >
-                    <TableCell onClick={() => openEditor(content)}>
-                      <Box display="flex" alignItems="center">
-                        <img
-                          src={content?.appIcon || "/logo.png"}
-                          alt={content.name}
-                          style={{
-                            width: 60,
-                            height: 40,
-                            borderRadius: "8px",
-                            marginRight: "10px",
-                          }}
-                        />
-                        <Box>
-                          <Typography
-                            variant="subtitle1"
-                            noWrap
-                            fontWeight={"bold"}
-                            fontSize={"14px"}
-                          >
-                            {content.name}
-                          </Typography>
-                          <Typography
-                            variant="body2"
-                            color="text.secondary"
-                            noWrap
-                          >
-                            {content.description}
-                          </Typography>
-                        </Box>
-                      </Box>
-                    </TableCell>
-                    <TableCell>{content.primaryCategory}</TableCell>
-                    <TableCell sx={{ color: "#987100" }}>
-                      {content.status}
-                    </TableCell>
-                    <TableCell>
-                      {new Date(content.lastUpdatedOn).toLocaleString()}
-                    </TableCell>
-                    <TableCell align="center">
-                      <IconButton
-                        onClick={() => handleDelete(index)}
-                        color="error"
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    </TableCell>
+
+          {loading ? (
+            <Box display="flex" justifyContent="center" my={5}>
+              <CircularProgress />
+            </Box>
+          ) : contentList && contentList.length > 0 ? (
+            <TableContainer sx={{
+            }} component={Paper}>
+              <Table sx={{ minWidth: 650, overflow: "auto" }}>
+                <TableHead sx={{ backgroundColor: "#F8EFE7" }}>
+                  <TableRow>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Title & Description</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Content Type</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Status</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Last Modified</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    } align="center">Actions</TableCell>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        ) : (
-          <NoDataFound />
-        )}
-
-        {totalCount > LIMIT && (
-          <PaginationComponent
-            count={Math.ceil(totalCount / LIMIT)}
-            page={page}
-            onPageChange={(event, newPage) => setPage(newPage)}
-          />
-        )}
+                </TableHead>
+                <TableBody>
+                  {contentList.map((content: any, index) => (
+                    <TableRow
+                      key={content.identifier}
+                      hover
+                      style={{ cursor: "pointer" }}
+                    >
+                      <TableCell onClick={() => openEditor(content)}>
+                        <Box display="flex" alignItems="center">
+                          <img
+                            src={content?.appIcon || "/logo.png"}
+                            alt={content.name}
+                            style={{
+                              width: 60,
+                              height: 40,
+                              borderRadius: "8px",
+                              marginRight: "10px",
+                            }}
+                          />
+                          <Box>
+                            <Typography
+                              variant="subtitle1"
+                              noWrap
+                              fontWeight={"500"}
+                              fontSize={"14px"}
+                              color={'#1F1B13'}
+                            >
+                              {content.name}
+                            </Typography>
+                            <Typography
+                              variant="body2"
+                              color="text.secondary"
+                              noWrap
+                            >
+                              {content.description}
+                            </Typography>
+                          </Box>
+                        </Box>
+                      </TableCell>
+                      <TableCell>{content.primaryCategory}</TableCell>
+                      <TableCell sx={{ color: "#987100", fontSize: "14px", fontWeight: "400" }}>
+                        {content.status}
+                      </TableCell>
+                      <TableCell sx={{ color: '#1F1B13', fontSize: '14px', fontWeight: '400' }}>
+                        {new Date(content.lastUpdatedOn).toLocaleString()}
+                      </TableCell>
+                      <TableCell align="center">
+                        <IconButton
+                          onClick={() => handleDelete(index)}
+                          color="error"
+                        >
+                          <Box sx={{
+                            background: '#FAEEEC',
+                            height: '42px',
+                            width: '42px',
+                            borderRadius: '12px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                          }}>
+
+                            <DeleteIcon sx={{ fontSize: '18px' }} />
+                          </Box>
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <NoDataFound />
+          )}
+
+          {totalCount > LIMIT && (
+            <PaginationComponent
+              count={Math.ceil(totalCount / LIMIT)}
+              page={page}
+              onPageChange={(event, newPage) => setPage(newPage)}
+            />
+          )}
+        </Box>
       </Box>
     </Layout>
   );
diff --git a/src/pages/workspace/content/publish/index.tsx b/src/pages/workspace/content/publish/index.tsx
index d185bca..43af34f 100644
--- a/src/pages/workspace/content/publish/index.tsx
+++ b/src/pages/workspace/content/publish/index.tsx
@@ -118,110 +118,148 @@ const PublishPage = () => {
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <WorkspaceText />
       <Box p={3}>
-        <Box sx={{ background: "#FFFFFF" }} p={2}>
-          <Typography
-            variant="h4"
-            sx={{ fontWeight: "bold", fontSize: "16px" }}
-          >
-            Published
-          </Typography>
-        </Box>
-        {/* <Typography mb={2}>Here you see all your published content.</Typography> */}
-
-        <Box mb={3}>
-          <SearchBox
-            placeholder="Search by title..."
-            onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
-          />
-        </Box>
+        <Box sx={{ background: "#fff", borderRadius: '8px', boxShadow: "0px 2px 6px 2px #00000026", pb: '15px' }} >
+          <Box p={2}>
+            <Typography
+              variant="h4"
+              sx={{ fontWeight: "bold", fontSize: "16px" }}
+            >
+              Published
+            </Typography>
+          </Box>
+          {/* <Typography mb={2}>Here you see all your published content.</Typography> */}
 
-        {loading ? (
-          <Box display="flex" justifyContent="center" my={5}>
-            <CircularProgress />
+          <Box mb={3}>
+            <SearchBox
+              placeholder="Search by title..."
+              onSearch={handleSearch}
+              onFilterChange={handleFilterChange}
+              onSortChange={handleSortChange}
+            />
           </Box>
-        ) : contentList && contentList.length > 0 ? (
-          <TableContainer>
-            <Table>
-              <TableHead sx={{ backgroundColor: "#F8EFE7" }}>
-                <TableRow>
-                  <TableCell>Title & Description</TableCell>
-                  <TableCell>Content Type</TableCell>
-                  <TableCell>Status</TableCell>
-                  <TableCell>Last Modified</TableCell>
-                  <TableCell align="center">Actions</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {contentList.map((content: any, index) => (
-                  <TableRow
-                    key={content.identifier}
-                    hover
-                    style={{ cursor: "pointer" }}
-                  >
-                    <TableCell onClick={() => openEditor(content)}>
-                      <Box display="flex" alignItems="center">
-                        <img
-                          src={content?.appIcon || "/logo.png"}
-                          alt={content.name}
-                          style={{
-                            width: 60,
-                            height: 40,
-                            borderRadius: "8px",
-                            marginRight: "10px",
-                          }}
-                        />
-                        <Box>
-                          <Typography
-                            variant="subtitle1"
-                            noWrap
-                            fontWeight={"bold"}
-                            fontSize={"14px"}
-                          >
-                            {content.name}
-                          </Typography>
-                          <Typography
-                            variant="body2"
-                            color="text.secondary"
-                            noWrap
-                          >
-                            {content.description}
-                          </Typography>
-                        </Box>
-                      </Box>
-                    </TableCell>
-                    <TableCell>{content.primaryCategory}</TableCell>
-                    <TableCell sx={{ color: "#06A816" }}>
-                      {content.status}
-                    </TableCell>
-                    <TableCell>
-                      {new Date(content.lastUpdatedOn).toLocaleString()}
-                    </TableCell>
-                    <TableCell align="center">
-                      <IconButton
-                        onClick={() => handleDelete(index)}
-                        color="error"
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    </TableCell>
+
+          {loading ? (
+            <Box display="flex" justifyContent="center" my={5}>
+              <CircularProgress />
+            </Box>
+          ) : contentList && contentList.length > 0 ? (
+            <TableContainer>
+              <Table>
+                <TableHead sx={{ backgroundColor: "#F8EFE7" }}>
+                  <TableRow>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Title & Description</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Content Type</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Status</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Last Modified</TableCell>
+                    <TableCell align="center">Actions</TableCell>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        ) : (
-          <NoDataFound />
-        )}
-
-        {totalCount > LIMIT && (
-          <PaginationComponent
-            count={Math.ceil(totalCount / LIMIT)}
-            page={page}
-            onPageChange={(event, newPage) => setPage(newPage)}
-          />
-        )}
+                </TableHead>
+                <TableBody>
+                  {contentList.map((content: any, index) => (
+                    <TableRow
+                      key={content.identifier}
+                      hover
+                      style={{ cursor: "pointer" }}
+                    >
+                      <TableCell onClick={() => openEditor(content)}>
+                        <Box display="flex" alignItems="center">
+                          <img
+                            src={content?.appIcon || "/logo.png"}
+                            alt={content.name}
+                            style={{
+                              width: 60,
+                              height: 40,
+                              borderRadius: "8px",
+                              marginRight: "10px",
+                            }}
+                          />
+                          <Box>
+                            <Typography
+                              variant="subtitle1"
+                              noWrap
+                              fontWeight={"500"}
+                              fontSize={"14px"}
+                              color={'#1F1B13'}
+                            >
+                              {content.name}
+                            </Typography>
+                            <Typography
+                              variant="body2"
+                              color="text.secondary"
+                              noWrap
+                            >
+                              {content.description}
+                            </Typography>
+                          </Box>
+                        </Box>
+                      </TableCell>
+                      <TableCell>{content.primaryCategory}</TableCell>
+                      <TableCell sx={{ color: "#06A816" }}>
+                        {content.status}
+                      </TableCell>
+                      <TableCell sx={{ color: '#1F1B13', fontSize: '14px', fontWeight: '400' }}>
+                        {new Date(content.lastUpdatedOn).toLocaleString()}
+                      </TableCell>
+                      <TableCell align="center">
+                        <IconButton
+                          onClick={() => handleDelete(index)}
+                          color="error"
+                        >
+                          <Box sx={{
+                            background: '#FAEEEC',
+                            height: '42px',
+                            width: '42px',
+                            borderRadius: '12px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                          }}>
+
+                            <DeleteIcon sx={{ fontSize: '18px' }} />
+                          </Box>
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <NoDataFound />
+          )}
+
+          {totalCount > LIMIT && (
+            <PaginationComponent
+              count={Math.ceil(totalCount / LIMIT)}
+              page={page}
+              onPageChange={(event, newPage) => setPage(newPage)}
+            />
+          )}
+        </Box>
       </Box>
     </Layout>
   );
diff --git a/src/pages/workspace/content/review/index.tsx b/src/pages/workspace/content/review/index.tsx
index c7f6dce..dc3d5db 100644
--- a/src/pages/workspace/content/review/index.tsx
+++ b/src/pages/workspace/content/review/index.tsx
@@ -174,7 +174,7 @@ const ReviewContentSubmissions = () => {
                   borderRadius: "16px",
                   padding: 2,
                   backgroundColor: "white",
-                  
+
                 }}
               >
                 <Typography
@@ -222,17 +222,18 @@ const ReviewContentSubmissions = () => {
                   backgroundColor: "white",
                   height: "100%",
                   overflow: "auto",
+
                 }}
               >
                 <Typography
-                  sx={{ color: "#1F1B13", fontSize: "22px", mb: 2 }}
+                  sx={{ color: "#1F1B13", fontSize: "22px", padding: '16px' }}
                   variant="h6"
                   color="primary"
                 >
                   Content Details
                 </Typography>
 
-                <Box sx={{ mb: 2 }}>
+                <Box sx={{ mb: 2, padding: ' 0 16px' }}>
                   <Box
                     sx={{
                       fontWeight: "600",
@@ -254,7 +255,7 @@ const ReviewContentSubmissions = () => {
                   </Box>
                 </Box>
 
-                <Box sx={{ mb: 2 }}>
+                <Box sx={{ mb: 2, padding: ' 0 16px' }}>
                   <Box
                     sx={{
                       fontWeight: "600",
@@ -276,7 +277,7 @@ const ReviewContentSubmissions = () => {
                   </Box>
                 </Box>
 
-                <Box sx={{ mb: 2 }}>
+                <Box sx={{ mb: 2, padding: ' 0 16px' }}>
                   <Box
                     sx={{
                       fontWeight: "600",
@@ -298,7 +299,7 @@ const ReviewContentSubmissions = () => {
                   </Box>
                 </Box>
 
-                <Box sx={{ mb: 2 }}>
+                <Box sx={{ mb: 2, padding: ' 0 16px' }}>
                   <Box
                     sx={{
                       fontWeight: "600",
@@ -320,7 +321,7 @@ const ReviewContentSubmissions = () => {
                   </Box>
                 </Box>
 
-                <Box sx={{ mb: 2 }}>
+                <Box sx={{ mb: 2, padding: ' 0 16px' }}>
                   <Box
                     sx={{
                       fontWeight: "600",
@@ -342,7 +343,7 @@ const ReviewContentSubmissions = () => {
                   </Box>
                 </Box>
 
-                <Box sx={{ mb: 2 }}>
+                <Box sx={{ mb: 2, padding: ' 0 16px' }}>
                   <Box
                     sx={{
                       fontWeight: "600",
@@ -368,32 +369,34 @@ const ReviewContentSubmissions = () => {
           </Grid>
 
           <Box
-  sx={{
-    display: "flex",
-    justifyContent: "flex-end",
-    mt: 2,
-    mb: 2,
-    padding: "8px", // Add padding to avoid overlap
-    borderRadius: "16px", // Match the surrounding box's border radius
-  }}
->
-  <Button
-    variant="contained"
-    color="primary"
-    onClick={handlePublish}
-    sx={{ marginRight: 1, minWidth: "120px" }} // Ensure the button has enough width
-  >
-    Publish
-  </Button>
-  <Button
-    variant="contained"
-    color="primary"
-    onClick={handleReject}
-    sx={{ minWidth: "120px" }} // Ensure the button has enough width
-  >
-    Request Changes
-  </Button>
-</Box>
+            sx={{
+              display: "flex",
+              justifyContent: "flex-end",
+              mt: 2,
+              mb: 2,
+              padding: "8px",
+              borderRadius: "16px",
+            }}
+          >
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handlePublish}
+              sx={{ marginRight: 1, minWidth: "120px" }}
+              className="Request-btn"
+            >
+              Publish
+            </Button>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleReject}
+              sx={{ minWidth: "120px" }}
+              className="Request-btn"
+            >
+              Request Changes
+            </Button>
+          </Box>
         </>
       ) : (
         <Typography>No content details available</Typography>
diff --git a/src/pages/workspace/content/submitted/index.tsx b/src/pages/workspace/content/submitted/index.tsx
index f93d9dd..df62298 100644
--- a/src/pages/workspace/content/submitted/index.tsx
+++ b/src/pages/workspace/content/submitted/index.tsx
@@ -117,107 +117,153 @@ const SubmittedForReviewPage = () => {
     <Layout selectedKey={selectedKey} onSelect={setSelectedKey}>
       <WorkspaceText />
       <Box p={3}>
-        <Box sx={{ background: "#FFFFFF" }} p={2}>
-          <Typography
-            variant="h4"
-            sx={{ fontWeight: "bold", fontSize: "16px" }}
-          >
-            Submitted For Review
-          </Typography>
-        </Box>
-        {/* <Typography mb={2}>
+        <Box sx={{ background: "#fff", borderRadius: '8px', boxShadow: "0px 2px 6px 2px #00000026", pb: '15px' }}>
+          <Box p={2}>
+            <Typography
+              variant="h4"
+              sx={{ fontWeight: "bold", fontSize: "16px" }}
+            >
+              Submitted For Review
+            </Typography>
+          </Box>
+          {/* <Typography mb={2}>
           Here you can see all your content submitted for review.
         </Typography> */}
 
-        <Box mb={3}>
-          <SearchBox
-            placeholder="Search by title..."
-            onSearch={handleSearch}
-            onFilterChange={handleFilterChange}
-            onSortChange={handleSortChange}
-          />
-        </Box>
-
-        {loading ? (
-          <Box display="flex" justifyContent="center" my={5}>
-            <CircularProgress />
+          <Box mb={3}>
+            <SearchBox
+              placeholder="Search by title..."
+              onSearch={handleSearch}
+              onFilterChange={handleFilterChange}
+              onSortChange={handleSortChange}
+            />
           </Box>
-        ) : contentList && contentList.length > 0 ? (
-          <TableContainer>
-            <Table>
-              <TableHead style={{ backgroundColor: "#F8EFE7" }}>
-                <TableRow>
-                  <TableCell>Title & Description</TableCell>
-                  <TableCell>Content Type</TableCell>
-                  <TableCell>Status</TableCell>
-                  <TableCell>Last Modified</TableCell>
-                  <TableCell align="center">Actions</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {contentList.map((content: any, index) => (
-                  <TableRow
-                    key={content.identifier}
-                    hover
-                    style={{ cursor: "pointer" }}
-                  >
-                    <TableCell onClick={() => openEditor(content)}>
-                      <Box display="flex" alignItems="center">
-                        <img
-                          src={content?.appIcon || "/logo.png"}
-                          alt={content?.name}
-                          style={{
-                            width: 60,
-                            height: 40,
-                            borderRadius: "8px",
-                            marginRight: "10px",
-                          }}
-                        />
-                        <Box>
-                          <Typography variant="subtitle1" noWrap>
-                            {content.name}
-                          </Typography>
-                          <Typography
-                            variant="body2"
-                            color="text.secondary"
-                            noWrap
-                          >
-                            {content.description}
-                          </Typography>
-                        </Box>
-                      </Box>
-                    </TableCell>
-                    <TableCell>{content.primaryCategory}</TableCell>
-                    <TableCell sx={{ color: "#BA1A1A" }}>
-                      {content.status}
-                    </TableCell>
-                    <TableCell>
-                      {new Date(content.lastUpdatedOn).toLocaleString()}
-                    </TableCell>
-                    <TableCell align="center">
-                      <IconButton
-                        onClick={() => handleDelete(index)}
-                        color="error"
-                      >
-                        <DeleteIcon />
-                      </IconButton>
-                    </TableCell>
+
+          {loading ? (
+            <Box display="flex" justifyContent="center" my={5}>
+              <CircularProgress />
+            </Box>
+          ) : contentList && contentList.length > 0 ? (
+            <TableContainer>
+              <Table>
+                <TableHead style={{ backgroundColor: "#F8EFE7" }}>
+                  <TableRow>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Title & Description</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Content Type</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Status</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    }>Last Modified</TableCell>
+                    <TableCell sx={
+                      {
+                        color: '#635E57',
+                        fontSize: '12px',
+                        fontWeight: "400"
+                      }
+                    } align="center">Actions</TableCell>
                   </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        ) : (
-          <NoDataFound />
-        )}
+                </TableHead>
+                <TableBody>
+                  {contentList.map((content: any, index) => (
+                    <TableRow
+                      key={content.identifier}
+                      hover
+                      style={{ cursor: "pointer" }}
+                    >
+                      <TableCell onClick={() => openEditor(content)}>
+                        <Box display="flex" alignItems="center">
+                          <img
+                            src={content?.appIcon || "/logo.png"}
+                            alt={content?.name}
+                            style={{
+                              width: 60,
+                              height: 40,
+                              borderRadius: "8px",
+                              marginRight: "10px",
+                            }}
+                          />
+                          <Box>
+                            <Typography fontWeight={"500"}
+                              fontSize={"14px"}
+                              color={'#1F1B13'} variant="subtitle1" noWrap>
+                              {content.name}
+                            </Typography>
+                            <Typography
+                              variant="body2"
+                              color="text.secondary"
+                              noWrap
+                              sx={{ color: "#987100", fontSize: "14px", fontWeight: "400" }}
+                            >
+                              {content.description}
+                            </Typography>
+                          </Box>
+                        </Box>
+                      </TableCell>
+                      <TableCell>{content.primaryCategory}</TableCell>
+                      <TableCell sx={{ color: "#BA1A1A" }}>
+                        {content.status}
+                      </TableCell>
+                      <TableCell sx={{ fontSize: "14px", fontWeight: "400" }}>
+                        {new Date(content.lastUpdatedOn).toLocaleString()}
+                      </TableCell>
+                      <TableCell align="center">
+                        <IconButton
+                          onClick={() => handleDelete(index)}
+                          color="error"
+                        >
+                          <Box sx={{
+                            background: '#FAEEEC',
+                            height: '42px',
+                            width: '42px',
+                            borderRadius: '12px',
+                            display: 'flex',
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                          }}>
 
-        {totalCount > LIMIT && (
-          <PaginationComponent
-            count={Math.ceil(totalCount / LIMIT)}
-            page={page}
-            onPageChange={(event, newPage) => setPage(newPage-1)}
-          />
-        )}
+                            <DeleteIcon sx={{ fontSize: '18px' }} />
+                          </Box>
+                        </IconButton>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          ) : (
+            <NoDataFound />
+          )}
+
+          {totalCount > LIMIT && (
+            <PaginationComponent
+              count={Math.ceil(totalCount / LIMIT)}
+              page={page}
+              onPageChange={(event, newPage) => setPage(newPage - 1)}
+            />
+          )}
+        </Box>
       </Box>
     </Layout>
   );
diff --git a/src/styles/global.css b/src/styles/global.css
index 61108a5..3e77f93 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -17,4 +17,16 @@ html,
 body {
   margin: 0;
   padding: 0;
+}
+
+.drawer-select div div {
+  display: flex !important;
+  align-items: center;
+  height: 32px !important;
+  padding: 0 10px !important;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+
+  /* border: 1px solid #1f1b13 !important; */
+  border-radius: 8px !important;
 }
\ No newline at end of file