From 71fd72dfb0b05e7de5edc436bd2f460e2aaf4f25 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Wed, 9 Oct 2024 12:12:00 +0530 Subject: [PATCH 1/3] Issue #PS-2121 chore: pakages and theme matched with admin --- package.json | 14 +- src/styles/CustomTheme.tsx | 282 ++++++++++++++++++++----------------- 2 files changed, 163 insertions(+), 133 deletions(-) diff --git a/package.json b/package.json index 0146b22..2174d1b 100644 --- a/package.json +++ b/package.json @@ -9,12 +9,14 @@ "lint": "next lint" }, "dependencies": { - "@module-federation/nextjs-mf": "^8.6.0", - "@module-federation/utilities": "1.7.3", - "@emotion/react": "^11.13.3", - "@emotion/styled": "^11.13.0", - "@mui/icons-material": "^6.1.1", - "@mui/material": "^6.1.1", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.5", + "@module-federation/nextjs-mf": "^8.5.5", + "@module-federation/utilities": "3.0.11", + "@mui/icons-material": "^5.15.20", + "@mui/material": "^5.16.0", + "@mui/system": "^6.1.2", + "@project-sunbird/sunbird-questionset-editor-web-component": "^4.0.2", "async": "^3.2.5", "body-parser": "^1.20.2", "dotenv": "^16.4.5", diff --git a/src/styles/CustomTheme.tsx b/src/styles/CustomTheme.tsx index 1e0fe66..a4ad2d9 100644 --- a/src/styles/CustomTheme.tsx +++ b/src/styles/CustomTheme.tsx @@ -1,159 +1,184 @@ -import { extendTheme } from "@mui/material/styles"; - -// Common palette definitions -const commonPalette = { - primary: { - main: "#FDBE16", - light: "#FFDEA1", - }, - secondary: { - main: "#0D599E", - light: "#E7F3F8", - }, - success: { - main: "#1A8825", - light: "#C0FFC7", - }, - info: { - main: "#064471", - light: "#D6EEFF", - contrastText: "#EFC570", - }, - warning: { - "100": "#17130B", - "200": "#261900", - "300": "#1F1B13", - "400": "#7C766F", - "500": "#969088", - "600": "#B1AAA2", - "700": "#DED8E1", - "800": "#F8EFE7", - "900": "#DADADA", - A100: "#D0C5B4", - A200: "#4D4639", - A400: "#FFFFFF", - A700: "#EDEDED", - }, - error: { - main: "#BA1A1A", - light: "#FFDAD6", - contrastText: "#1E1B16", - }, - action: { - activeChannel: "#987100", - selectedChannel: "#dba403", - }, -}; - -// Common component style overrides -const commonComponents = { - MuiButton: { - styleOverrides: { - root: { - borderRadius: "100px", - border: "1px solid #1E1B16", - color: "#1E1B16", - }, - containedPrimary: { - backgroundColor: "#FDBE16", - border: "none", - }, - outlinedPrimary: { - backgroundColor: "none", - border: "1px solid #1E1B16", - }, - textPrimary: { - backgroundColor: "none", - border: "none", - color: "#0D599E", - }, - containedSecondary: { - backgroundColor: "#fbbc13", - }, - }, - }, - MuiTextField: { - styleOverrides: { - root: { - width: "100%", - }, - }, - }, - MuiDialog: { - styleOverrides: { - paper: { - borderRadius: "16px", - width: "90vw", - maxWidth: "340px", - }, - }, - }, - MuiInputLabel: { - styleOverrides: { - root: { - "&.Mui-focused": { - color: "#1F1B13", - }, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - root: { - "&.Mui-focused .MuiOutlinedInput-notchedOutline": {}, - }, - }, - }, -}; +import { experimental_extendTheme as extendTheme } from "@mui/material/styles"; const customTheme = extendTheme({ colorSchemes: { light: { palette: { - ...commonPalette, primary: { - ...commonPalette.primary, + main: "#FDBE16", + light: "#FFDEA1", contrastText: "#EBE1D4", + "100": "#000000", }, secondary: { - ...commonPalette.secondary, - contrastText: "#cdc5bd", + main: "#0D599E", + light: "#E7F3F8", + contrastText: " #cdc5bd", + "100": "#F3F5F8", + "200": "#FFFFFF", + "300": "#EEEEEE", }, success: { - ...commonPalette.success, - contrastText: "#fff8f2", + main: "#1A8825", + light: "#C0FFC7", + contrastText: " #fff8f2", + }, + info: { + main: "#064471", + light: "#D6EEFF", + contrastText: " #EFC570", }, warning: { - ...commonPalette.warning, - contrastText: "#3B383E", + "100": "#17130B", + "200": "#261900", + "300": "#1F1B13", + "400": "#7C766F", + "500": "#969088", + "600": "#B1AAA2", + "700": "#DED8E1", + "800": "#F8EFE7", + "900": "#DADADA", + A100: "#D0C5B4", + A200: "#4d4639", + A400: "#FFFFFF", + A700: "#EDEDED", + contrastText: " #3B383E", + }, + error: { + main: "#BA1A1A", + light: "#FFDAD6", }, action: { - ...commonPalette.action, - active: "#E2D9CC", - selected: "#FBF4E4", + activeChannel: "#987100", + selectedChannel: "#dba403", }, Skeleton: { bg: "#FFDCC2", }, - background: { - default: "#F3EDF7", - paper: "#fff", - }, + background: {}, }, }, dark: { palette: { - ...commonPalette, + primary: { + main: "#FDBE16", + light: "#FFDEA1", + }, + secondary: { + main: "#0D599E", + light: "#E7F3F8", + }, + success: { + main: "#1A8825", + light: "#C0FFC7", + }, + info: { + main: "#064471", + light: "#D6EEFF", + contrastText: " #EFC570", + }, + warning: { + "100": "#17130B", + "200": "#261900", + "300": "#1F1B13", + "400": "#7C766F", + "500": "#969088", + "600": "#B1AAA2", + "700": "#DED8E1", + "800": "#F8EFE7", + "900": "#DADADA", + A100: "#D0C5B4", + A200: "#4d4639", + A400: "#FFFFFF", + A700: "#EDEDED", + }, + error: { + main: "#BA1A1A", + light: "#FFDAD6", + }, action: { - ...commonPalette.action, - focus: "#2E1500", + activeChannel: "#987100", + selectedChannel: "#dba403", + }, + }, + }, + }, + components: { + MuiButton: { + styleOverrides: { + root: { + borderRadius: "100px", + border: "1px solid #1E1B16", + color: "#1E1B16", + }, + containedPrimary: { + backgroundColor: "#FDBE16", + border: "none", + // '&:hover': { + // backgroundColor: '#FDBE161F' + // } + }, + outlinedPrimary: { + backgroundColor: "none", + border: "1px solid #1E1B16", + // '&:hover': { + // backgroundColor: '#0D599E' + // } + }, + textPrimary: { + backgroundColor: "none", + border: "none", + color: "#0D599E", + // '&:hover': { + // backgroundColor: '6750A41F', + // border: 'none' + // } + }, + containedSecondary: { + backgroundColor: "#fbbc13", + // '&:hover': { + // backgroundColor: '#b20041' + // } + }, + }, + }, + MuiTextField: { + styleOverrides: { + root: { + width: "100%", + }, + }, + }, + MuiDialog: { + styleOverrides: { + paper: { + borderRadius: "16px", // Override the border radius + width: "90vw", + maxWidth: "340px", + }, + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + "&.Mui-focused": { + color: "#1F1B13", + }, + }, + }, + }, + MuiOutlinedInput: { + styleOverrides: { + root: { + "&.Mui-focused .MuiOutlinedInput-notchedOutline": { + // borderColor: '#000', // Change to your desired color + }, }, }, }, }, - components: commonComponents, typography: { - fontFamily: "inherit", + fontFamily: "Poppins, Arial, sans-serif", h1: { fontSize: "22px", fontWeight: 400, @@ -172,18 +197,21 @@ const customTheme = extendTheme({ marginBottom: "0.5rem", }, h4: { + //h4 is a large label style fontSize: "14px", fontWeight: 400, lineHeight: "20px", letterSpacing: "0.1px", }, h5: { + //h5 is a medium label style fontSize: "12px", fontWeight: 500, lineHeight: "16px", letterSpacing: "0.5px", }, h6: { + //h6 is a small label style fontSize: "11px", fontWeight: 500, lineHeight: "16px", From 92bcb4dea4efdbc7558aa27dad1260159b92e67c Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Wed, 9 Oct 2024 15:26:05 +0530 Subject: [PATCH 2/3] Issue #PS-2002 feat: url change for workspace content and UI changes --- package.json | 2 -- src/components/CourseCard.tsx | 2 +- src/pages/workspace/content/allContents/index.tsx | 4 ++-- src/pages/workspace/content/create/index.tsx | 13 ++++++++++--- src/pages/workspace/content/draft/index.tsx | 4 ++-- src/services/ContentService.ts | 5 +---- 6 files changed, 16 insertions(+), 14 deletions(-) diff --git a/package.json b/package.json index 3a67f56..bf5d24b 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,6 @@ "@module-federation/utilities": "3.0.11", "@mui/icons-material": "^5.15.20", "@mui/material": "^5.16.0", - "@mui/system": "^6.1.2", - "@project-sunbird/sunbird-questionset-editor-web-component": "^4.0.2", "async": "^3.2.5", "body-parser": "^1.20.2", "dotenv": "^16.4.5", diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 5226662..b8c409e 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -54,7 +54,7 @@ const CourseCard: React.FC = ({ }} > {imageUrl ? ( - {title} + {title} ) : ( )} diff --git a/src/pages/workspace/content/allContents/index.tsx b/src/pages/workspace/content/allContents/index.tsx index 0093867..c0e32b7 100644 --- a/src/pages/workspace/content/allContents/index.tsx +++ b/src/pages/workspace/content/allContents/index.tsx @@ -79,7 +79,7 @@ const AllContentsPage = () => { ]; const response = await getContent(status); - const contentList = response?.content || []; + const contentList = response?.content || response?.QuestionSet; setContentList(contentList); } catch (error) { console.log(error); @@ -118,7 +118,7 @@ const AllContentsPage = () => { {content?.appIcon ? ( - + ) : ( )} diff --git a/src/pages/workspace/content/create/index.tsx b/src/pages/workspace/content/create/index.tsx index 742f347..93b22f8 100644 --- a/src/pages/workspace/content/create/index.tsx +++ b/src/pages/workspace/content/create/index.tsx @@ -1,12 +1,14 @@ import React, { useState } from "react"; import Layout from "../../../../components/Layout"; -import { Typography, Box } from "@mui/material"; +import { Typography, Box, useTheme } from "@mui/material"; import ContentCard from "../../../../components/ContentCard"; import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined"; import DescriptionIcon from "@mui/icons-material/Description"; import UploadIcon from "@mui/icons-material/Upload"; import { useRouter } from "next/router"; + const CreatePage = () => { + const theme = useTheme(); const [selectedKey, setSelectedKey] = useState("create"); const router = useRouter(); @@ -35,8 +37,13 @@ const CreatePage = () => { return ( - Create Content - Here you can create new content. + + Here you can create new content. + { const getDraftContentList = async () => { try { const response = await getContent(["Draft", "FlagDraft"]); - const contentList = response?.content || []; + const contentList = response?.content || response?.QuestionSet; setContentList(contentList); } catch (error) { console.log(error); @@ -83,7 +83,7 @@ const DraftPage = () => { - {contentList.map((content, index) => ( + {contentList?.map((content, index) => ( { }; export const getContent = async (status: string[]) => { - const apiURL = "https://sunbirdsaas.com/api/content/v1/search"; + const apiURL = "/action/composite/v3/search"; try { const reqBody = getReqBodyWithStatus(status); const response = await post(apiURL, reqBody); From 88bba540a541018548ca6e2a8e394269b814cac8 Mon Sep 17 00:00:00 2001 From: suvarnakale Date: Wed, 9 Oct 2024 16:17:57 +0530 Subject: [PATCH 3/3] Issue #PS-2002 feat: menubar UI changes --- src/components/SideBar.tsx | 131 ++++++++++++++++++++++++++++++++----- 1 file changed, 114 insertions(+), 17 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 2573028..08b890f 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { useRouter } from "next/router"; import { Box, @@ -7,9 +7,15 @@ import { ListItemIcon, ListItemText, Typography, + IconButton, + Drawer, useTheme, + useMediaQuery, } from "@mui/material"; +import MenuIcon from "@mui/icons-material/Menu"; import DatabaseIcon from "@mui/icons-material/Storage"; +import CloseIcon from "@mui/icons-material/Close"; + const menuItems = [ { text: "Create", key: "create" }, { text: "All My Contents", key: "allContents" }, @@ -18,35 +24,84 @@ const menuItems = [ { text: "Publish", key: "publish" }, ]; +interface SidebarProps { + selectedKey: string; + onSelect: (key: string) => void; +} + const Sidebar: React.FC = ({ selectedKey, onSelect }) => { + const [drawerOpen, setDrawerOpen] = useState(false); const router = useRouter(); const theme = useTheme(); + const isMobile = useMediaQuery(theme.breakpoints.down("sm")); + const handleNavigation = (key: string) => { + console.log(key); router.push(`/workspace/content/${key}`); onSelect(key); + if (isMobile) { + setDrawerOpen(false); // Close drawer after selecting in mobile view + } }; - return ( - - - - - - My Workspace + const toggleDrawer = () => { + setDrawerOpen(!drawerOpen); + }; + + const drawerContent = ( + + + + + + + + + + My Workspace + + + {isMobile && ( + + + + )} {menuItems.map((item) => ( handleNavigation(item.key)} > @@ -55,6 +110,48 @@ const Sidebar: React.FC = ({ selectedKey, onSelect }) => { ); + + return ( + <> + {isMobile ? ( + <> + + + + + {drawerContent} + + + ) : ( + + {drawerContent} + + )} + + ); }; export default Sidebar;