Merge pull request #85 from shreyas1434shinde/main

Issue #PS-2322 fix: Workspace UI improvements and Fixes
tekdi · Nov 12, 2024 · 651d19e · 651d19e
2 parents 4ada740 + e1f768f
commit 651d19e
Show file tree

Hide file tree

Showing 10 changed files with 635 additions and 433 deletions.
diff --git 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
@@ -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,14 +131,21 @@ 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
             value={selectedFilters}
             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
@@ -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
@@ -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
@@ -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>
   );