Merge pull request #80 from shreyas1434shinde/main

Issue #PS-2322 fix: Workspace UI improvements and Fixes
tekdi · Nov 11, 2024 · 510b833 · 510b833
2 parents 23e795e + b387ef1
commit 510b833
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 43 deletions.
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -147,15 +147,9 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedKey, onSelect }) => {
     <>
       {isMobile ? (
         <>
-          <IconButton
-            edge="start"
-            color="inherit"
-            aria-label="menu"
-            onClick={toggleDrawer}
-            sx={{ marginLeft: 2 }}
-          >
-            <MenuIcon />
-          </IconButton>
+
+            <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,25 +3,27 @@ import React from "react";
 
 
 const WorkspaceText: React.FC<any> = () => {
-  const theme = useTheme();
+  const theme = useTheme<any>();
 
     return (<Box p={3} display={"flex"} flexDirection={"row"} gap={2}>
         <Typography
             variant="h1"
             sx={{
-                color: theme.palette.text.primary,
+                color: theme.palette.warning['300'],
                 marginRight: "10px",
-                fontSize: "22px"
+                fontSize: "22px",
+                fontWeight: 400,
             }}
         >
             Workspace
         </Typography>
 
         <Typography
             variant="body1"
-            color="textSecondary"
-            width={500}
+            color="#635E57"
+            width={'70%'}
             fontSize={15}
+            sx={{lineHeight:'20px', fontSize:'14px'}}
         >
             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/create/index.tsx b/src/pages/workspace/content/create/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Layout from "../../../../components/Layout";
-import { Typography, Box, useTheme, Paper } from "@mui/material";
+import { Typography, Box, useTheme, Paper, Grid } from "@mui/material";
 import ContentCard from "../../../../components/ContentCard";
 import DescriptionIcon from "@mui/icons-material/Description";
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
@@ -126,34 +126,39 @@ const CreatePage = () => {
           justifyContent="flex-start"
           flexWrap="wrap"
         >
-          {cardData.map((card, index) => (
-            <Paper
-              key={index}
-              elevation={3}
-              onClick={card.onClick}
-              sx={{
-                padding: "1rem",
-                borderRadius: "8px",
-                textAlign: "left",
-                cursor: "pointer",
-                flex: "1 1 180px",
-                maxWidth: "220px",
-                border: "solid 1px #D0C5B4",
-                boxShadow: 'none',
-                "&:hover": {
-                  backgroundColor: theme.palette.action.hover,
-                },
-              }}
-            >
-              {card?.icon}
-              <Typography variant="h3" sx={{ mt: 1, fontWeight: "bold", fontSize: '14px' }}>
-                {card?.title}
-              </Typography>
-              <Typography variant="body2" color="textSecondary" sx={{mt: 1, mb: 0}}>
-                {card?.description}
-              </Typography>
-            </Paper>
-          ))}
+          <Grid container spacing={2}>
+              {cardData.map((card, index) => (
+                <Grid item xs={12} sm={6} md={4} key={index}>
+                  <Paper
+                    key={index}
+                    elevation={3}
+                    onClick={card.onClick}
+                    sx={{
+                      padding: "1rem",
+                      borderRadius: "8px",
+                      textAlign: "left",
+                      cursor: "pointer",
+                      flex: "1 1 180px",
+                      // maxWidth: "220px",
+                      border: "solid 1px #D0C5B4",
+                      boxShadow: 'none',
+                      "&:hover": {
+                        backgroundColor: theme.palette.action.hover,
+                      },
+                    }}
+                  >
+                    {card?.icon}
+                    <Typography variant="h3" sx={{ mt: 1, fontWeight: "bold", fontSize: '14px' }}>
+                      {card?.title}
+                    </Typography>
+                    <Typography variant="body2" color="textSecondary" sx={{mt: 1, mb: 0}}>
+                      {card?.description}
+                    </Typography>
+                  </Paper>
+                </Grid>
+              ))}
+          </Grid>
+
         </Box>
       </Box>
     </Layout>