Merge pull request #87 from shreyas1434shinde/main

Issue #PS-2322 fix: Workspace UI improvements and Fixes

src/components/CourseCard.tsx

@@ -91,6 +91,7 @@ const CourseCard: React.FC<ContentCardProps> = ({
         display: "flex",
         flexDirection: "column",
         width: "250px",
+        borderRight: 'unset !important'
       }}
     >
       <Box position="relative" onClick={onContentClick}>

src/components/Layout.tsx

@@ -11,7 +11,9 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children, selectedKey, onSelect }) => {
   return (
     <Box display="flex" minHeight={"100vh"}>
-      <Sidebar selectedKey={selectedKey} onSelect={onSelect} />
+      <Box sx={{ height: '100vh', '@media (max-width: 900px)': { position: 'absolute' }, '@media (min-width: 900px)': { background: '#fff' } }}>
+        <Sidebar selectedKey={selectedKey} onSelect={onSelect} />
+      </Box>
       <Box sx={{ flex: 1, background: 'rgb(243, 245, 248)' }}>{children}</Box>
     </Box>
   );

src/components/PaginationComponent.tsx

@@ -13,12 +13,18 @@ const PaginationComponent: React.FC<PaginationComponentProps> = ({
   onPageChange,
 }) => {
   return (
-    <Box display="flex" justifyContent="center" mt={2}>
+    <Box display="flex" className="pagination-bottom" justifyContent="end" mt={2}>
       <Pagination
         count={count}
         page={page + 1}
         color="primary"
         onChange={onPageChange}
+        sx={{
+
+          "& .Mui-selected": {
+            backgroundColor: "#FDBE16 !important",
+          },
+        }}
       />
     </Box>
   );

src/components/SideBar.tsx

@@ -66,13 +66,15 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
   };
 
   const drawerContent = (
-    <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 display={'inline-block'} margin={"1rem 0.5rem 0.5rem 0.5rem"} width={"250px"} height={"100%"} sx={{ fontSize: '14px', }}>
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <img src={'/logo.png'} alt="logo" height={60} />
+      </Box>
       <Box
-        p={'2rem 2rem 2rem 0'}
         display="flex"
         alignItems="center"
         justifyContent="space-between"
+        paddingTop={"1rem"}
       >
 
         <Box display="flex" alignItems="center">
@@ -119,6 +121,7 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
                     ? "var(--mui-palette-primary-main)"
                     : "transparent",
               },
+              margin: selectedKey === item.key ? "10px 0" : "0",
             }}
             key={item?.key}
             onClick={() => handleNavigation(item?.key)}

src/components/WorkspaceText.tsx

@@ -10,6 +10,7 @@ const WorkspaceText: React.FC<any> = () => {
         '@media (max-width: 768px)': {
             flexDirection: 'column',
         },
+        '@media (max-width: 900px)': { padding: '18px 24px' }
     }} gap={2}>
         <Typography
             variant="h1"
@@ -18,6 +19,7 @@ const WorkspaceText: React.FC<any> = () => {
                 marginRight: "10px",
                 fontSize: "22px",
                 fontWeight: 400,
+                '@media (max-width: 900px)': { paddingLeft: '34px' }
             }}
         >
             Workspace

src/pages/workspace/content/publish/index.tsx

@@ -260,6 +260,7 @@ const PublishPage = () => {
             />
           )}
         </Box>
+      </Box>
     </Layout>
   );
 };

src/styles/global.css

@@ -17,6 +17,7 @@ html,
 body {
   margin: 0;
   padding: 0;
+  background: '#F3F5F8';
 }
 
 .drawer-select div div {