From 16e400c798556b7c3742a76b66cde5600f2571a3 Mon Sep 17 00:00:00 2001
From: al-yx <shrutikumari14092k@gmail.com>
Date: Fri, 27 Dec 2024 14:12:52 +0530
Subject: [PATCH 1/4] Responsive change in search, logo and org tab

---
 src/app/ui/pages/workspace/DetailsViewPage.js |  7 +++++++
 src/components/common/MobileNavbar.jsx        |  8 ++++----
 src/components/common/ProjectCard.jsx         |  1 -
 src/components/common/Search.jsx              | 12 ++++++------
 src/components/common/WorkspaceTable.jsx      |  1 +
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/app/ui/pages/workspace/DetailsViewPage.js b/src/app/ui/pages/workspace/DetailsViewPage.js
index 574953b4..5d74565b 100644
--- a/src/app/ui/pages/workspace/DetailsViewPage.js
+++ b/src/app/ui/pages/workspace/DetailsViewPage.js
@@ -13,6 +13,8 @@ import {
   Menu,
   MenuItem,
 } from "@mui/material";
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import React, { useState, useEffect } from "react";
@@ -258,6 +260,10 @@ const DetailsViewPage = (props) => {
     setbtn(null);
     setUserType(Object.keys(UserRolesList)[0]);
   };
+
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
+
   return (
     <ThemeProvider theme={themeDefault}>
       {apiLoading ? (
@@ -340,6 +346,7 @@ const DetailsViewPage = (props) => {
                 TabIndicatorProps={{
                   style: { display: "none" },
                 }}
+                orientation={isSmallScreen ? "vertical" : "horizontal"}
               >
                 {pageType === componentType.Type_Workspace && (
                   <Tab
diff --git a/src/components/common/MobileNavbar.jsx b/src/components/common/MobileNavbar.jsx
index c3e4fc03..a3c866a2 100644
--- a/src/components/common/MobileNavbar.jsx
+++ b/src/components/common/MobileNavbar.jsx
@@ -177,7 +177,7 @@ function MobileNavbar(props) {
                 padding: "0 5%"
             }}
         > 
-            <Grid item sx={{ display: "flex", alignItems: "center" }}>
+            <Grid item sx={{ display: "flex", alignItems: "center" ,gap: "10px"}}>
                 <Link href="/projects">
                 <Image 
                     onClick={() => navigate("/")} 
@@ -190,12 +190,12 @@ function MobileNavbar(props) {
                   />
                 </Link>
                 <Typography
-                  variant="h4"
                   className="headerTitle"
                   style={{
                     fontSize: "28px",
-                    fontWeight: "lighter",
-                    fontFamily: 'Rowdies,cursive,Roboto,sans-serif'
+                    fontWeight: "bold",
+                    fontFamily: 'Rowdies,"Roboto,sans-serif',
+                    color: "#000000",
 
                   }}
                 >
diff --git a/src/components/common/ProjectCard.jsx b/src/components/common/ProjectCard.jsx
index b92d899d..58e22542 100644
--- a/src/components/common/ProjectCard.jsx
+++ b/src/components/common/ProjectCard.jsx
@@ -38,7 +38,6 @@ const ProjectCard = (props) => {
 
   const userRole =projectObj.project_stage && UserMappedByProjectStage(projectObj.project_stage).name;
   return (
-    // <Link to={`/projects/${projectObj.id}`} style={{ textDecoration: "none" }}>
     <>
     <div onClick={() => handleCardClick(projectObj)}>
 
diff --git a/src/components/common/Search.jsx b/src/components/common/Search.jsx
index aa6b903a..355d91b4 100644
--- a/src/components/common/Search.jsx
+++ b/src/components/common/Search.jsx
@@ -45,7 +45,7 @@ const Search = (props) => {
 
 
   return (
-   <Grid container justifyContent="end" sx={{marginTop:"20px"}}>
+   <Grid container justifyContent={{xs:"start",md:"end"}} sx={{marginTop:"20px",width:"100%"}}>
                 <Grid   className="search">
                     <Grid className="searchIcon">
                         <SearchIcon fontSize="small" />
@@ -57,7 +57,7 @@ const Search = (props) => {
                     renderComponent={(props) => (
                       <textarea
                       
-                      placeholder="Search..."
+                      placeholder="Search here"
                       {...props}
                       style={{background: "transparent", borderRadius:"16px", padding:"2px", height:"24px", width:"90%", marginLeft:"10%", resize:"none", marginTop:"2%", border: "none", outline: "none", overflow: "hidden"}}
                       />
@@ -74,15 +74,15 @@ const Search = (props) => {
                     }}
                     lang={targetLang}
                     style={{background:"#F0F0F0", borderRadius:"16px", padding:"2px", height:"24px", width:"90%", marginLeft:"10%", resize:"none", marginTop:"2%"}}
-                    /> : 
+                    /> : (
                     <InputBase
-                        sx={{ ml: 4 }}
+                        sx={{ ml: 4 ,width:"120px"}}
                         // inputRef={ref}
-                        placeholder="Search..."
+                        placeholder="Search here"
                         value={searchValue}
                         onChange={(e) => handleChangeName(e.target.value)}
                         inputProps={{ "aria-label": "search" }}
-                    />}
+                    />)}
                 </Grid>
                 </Grid>
           
diff --git a/src/components/common/WorkspaceTable.jsx b/src/components/common/WorkspaceTable.jsx
index ab102fec..ad407bf2 100644
--- a/src/components/common/WorkspaceTable.jsx
+++ b/src/components/common/WorkspaceTable.jsx
@@ -89,6 +89,7 @@ const WorkspaceTable = (props) => {
         setCellHeaderProps: (sort) => ({
           style: { height: "70px", padding: "16px" },
         }),
+        setCellProps: () => ({ style: { wordWrap: "break-word" } }),
       },
     },
     {

From 23998ebcf78a3c15257d355ad8a595b688fdb0a3 Mon Sep 17 00:00:00 2001
From: al-yx <shrutikumari14092k@gmail.com>
Date: Mon, 6 Jan 2025 09:37:13 +0530
Subject: [PATCH 2/4] Project card changes

---
 src/app/ui/pages/projects/project.js          |  6 ++++-
 src/app/ui/pages/workspace/DetailsViewPage.js | 14 +++++++++--
 src/components/common/Search.jsx              | 23 +++++++++++--------
 3 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/app/ui/pages/projects/project.js b/src/app/ui/pages/projects/project.js
index b041fec5..b852db16 100644
--- a/src/app/ui/pages/projects/project.js
+++ b/src/app/ui/pages/projects/project.js
@@ -1,6 +1,7 @@
 'use client'
 import  { React,useEffect, useState } from "react";
 import { Radio, Box, Grid, Typography, ThemeProvider } from "@mui/material";
+import { useTheme } from '@mui/material/styles';
 import RadioGroup from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
@@ -19,9 +20,12 @@ export default function ProjectList({data}) {
          /* eslint-disable react-hooks/exhaustive-deps */
            /* eslint-disable-next-line react/jsx-key */
 
+           
 const dispatch = useDispatch();
 const [radiobutton, setRadiobutton] = useState(true);
 console.log(data);
+const theme = useTheme();
+
 
   // const [loading, setLoading] = useState(true);
   const [selectedFilters, setsSelectedFilters] = useState({
@@ -100,7 +104,7 @@ console.log(data?.length,"hel");
       </Grid>
 
       <Box>
-        <Box sx={{ marginTop: "20px" }}>
+        <Box sx={{ margin: "20px" }}>
           {radiobutton ? (
             <ProjectCardList
               projectData={displayedProjects}
diff --git a/src/app/ui/pages/workspace/DetailsViewPage.js b/src/app/ui/pages/workspace/DetailsViewPage.js
index 5d74565b..7713ffd8 100644
--- a/src/app/ui/pages/workspace/DetailsViewPage.js
+++ b/src/app/ui/pages/workspace/DetailsViewPage.js
@@ -13,8 +13,8 @@ import {
   Menu,
   MenuItem,
 } from "@mui/material";
-import { useMediaQuery } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { useMediaQuery } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import React, { useState, useEffect } from "react";
@@ -356,6 +356,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 0 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 0 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -371,6 +372,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 0 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 0 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -387,6 +389,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 1 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 1 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -402,6 +405,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 1 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 1 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -418,6 +422,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 2 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 2 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -433,6 +438,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 2 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 2 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -449,6 +455,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 3 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 3 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -464,6 +471,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 3 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 3 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -491,6 +499,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 4 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 4 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
@@ -507,6 +516,7 @@ const DetailsViewPage = (props) => {
                       fontWeight: "700",
                       bgcolor: value === 4 ? "#d3d3d3" : "#F5F5F5",
                       color: value === 4 ? "black" : "text.primary",
+                      margin: isSmallScreen ? "0 0 1rem 0" : "0 1rem 0 0", 
                       borderRadius: 1,
                       "&:hover": {
                         bgcolor: "#e0e0e0",
diff --git a/src/components/common/Search.jsx b/src/components/common/Search.jsx
index 355d91b4..66fee899 100644
--- a/src/components/common/Search.jsx
+++ b/src/components/common/Search.jsx
@@ -1,6 +1,7 @@
 import { InputBase,ThemeProvider,Grid } from "@mui/material";
 import SearchIcon from '@mui/icons-material/Search';
 import { useEffect, useRef, useState } from "react";
+import { useTheme } from "@mui/material/styles";
 import themeDefault from '../../themes/theme'
  import  "../../styles/Dataset.css";
  import { useDispatch, useSelector } from "react-redux";
@@ -41,9 +42,8 @@ const Search = (props) => {
     setTargetLang(storedLanguage);
     console.log(globalTransliteration,localStorage.getItem("globalTransliteration"));
   }, [searchValue]);
- 
-
 
+  const theme = useTheme();
   return (
    <Grid container justifyContent={{xs:"start",md:"end"}} sx={{marginTop:"20px",width:"100%"}}>
                 <Grid   className="search">
@@ -75,14 +75,17 @@ const Search = (props) => {
                     lang={targetLang}
                     style={{background:"#F0F0F0", borderRadius:"16px", padding:"2px", height:"24px", width:"90%", marginLeft:"10%", resize:"none", marginTop:"2%"}}
                     /> : (
-                    <InputBase
-                        sx={{ ml: 4 ,width:"120px"}}
-                        // inputRef={ref}
-                        placeholder="Search here"
-                        value={searchValue}
-                        onChange={(e) => handleChangeName(e.target.value)}
-                        inputProps={{ "aria-label": "search" }}
-                    />)}
+                      <InputBase
+                      sx={{
+                        ml: 4,
+                        width: "120px",
+                      }}
+                      placeholder="Search here"
+                      value={searchValue}
+                      onChange={(e) => handleChangeName(e.target.value)}
+                      inputProps={{ "aria-label": "search" }}
+                    />
+                    )}
                 </Grid>
                 </Grid>
           

From 6daa30555716a8c36157e9fd50391adf7dd6b8f1 Mon Sep 17 00:00:00 2001
From: al-yx <shrutikumari14092k@gmail.com>
Date: Thu, 9 Jan 2025 09:37:51 +0530
Subject: [PATCH 3/4] Make Grid component responsive and add padding for small
 screens

---
 src/app/ui/pages/projects/project.js          |  17 +-
 src/app/ui/pages/projects/projectDetails.js   |  60 ++-
 src/components/Project/ProjectSettings.jsx    |  98 +++--
 .../Project/ReadOnlyConfigurations.jsx        | 403 +++++++++---------
 4 files changed, 312 insertions(+), 266 deletions(-)

diff --git a/src/app/ui/pages/projects/project.js b/src/app/ui/pages/projects/project.js
index b852db16..fa6a8acb 100644
--- a/src/app/ui/pages/projects/project.js
+++ b/src/app/ui/pages/projects/project.js
@@ -98,10 +98,19 @@ console.log(data?.length,"hel");
           </FormControl>
         </Grid>
 
-        <Grid xs={3} item className="fixedWidthContainer">
-          <Search />
-        </Grid> 
-      </Grid>
+            <Grid
+              item
+              xs={12}
+              sm={6}
+              md={3}
+              className="fixedWidthContainer"
+              sx={{
+                paddingX: { xs: 2, sm: 3, md: 0 },
+              }}
+            >
+              <Search />
+            </Grid>
+          </Grid>
 
       <Box>
         <Box sx={{ margin: "20px" }}>
diff --git a/src/app/ui/pages/projects/projectDetails.js b/src/app/ui/pages/projects/projectDetails.js
index 3e3ee45e..d446e569 100644
--- a/src/app/ui/pages/projects/projectDetails.js
+++ b/src/app/ui/pages/projects/projectDetails.js
@@ -405,6 +405,9 @@ import {
           direction="row"
           justifyContent="center"
           alignItems="center"
+          sx={{
+            padding: { xs: 2, sm: 3, md: 5 },
+          }}
         >
           <Card
             sx={{
@@ -419,21 +422,47 @@ import {
               direction="row"
               justifyContent="center"
               alignItems="center"
-              sx={{ mb: 3 }}
+              sx={{ mb: { xs: 2, md: 3 } }}
             >
-  <Grid item xs={12} sm={12} md={loggedInUserData?.role && (userRole.WorkspaceManager === loggedInUserData.role || userRole.OrganizationOwner === loggedInUserData.role || userRole.Admin === loggedInUserData.role) ? 10 : 12} lg={loggedInUserData?.role && (userRole.WorkspaceManager === loggedInUserData.role || userRole.OrganizationOwner === loggedInUserData.role || userRole.Admin === loggedInUserData.role) ? 10 : 12} xl={loggedInUserData?.role && (userRole.WorkspaceManager === loggedInUserData.role || userRole.OrganizationOwner === loggedInUserData.role || userRole.Admin === loggedInUserData.role) ? 10 : 12}>
-  <Typography variant="h3">{ProjectDetails.title}</Typography>
+              <Grid
+                item
+                xs={12}
+                md={
+                  loggedInUserData?.role &&
+                  (userRole.WorkspaceManager === loggedInUserData.role ||
+                    userRole.OrganizationOwner === loggedInUserData.role ||
+                    userRole.Admin === loggedInUserData.role)
+                    ? 10
+                    : 12
+                }
+                sx={{
+                  textAlign: { xs: "center", md: "left" },
+                  mb: { xs: 2, md: 0 },
+                }}
+              >
+                <Typography
+                  variant="h5"
+                  sx={{ fontSize: { xs: "1.5rem", md: "2rem" } }}
+                >
+                  {ProjectDetails.title}
+                </Typography>
               </Grid>
 
               {(userRole.WorkspaceManager === loggedInUserData?.role ||
-              userRole.OrganizationOwner === loggedInUserData?.role ||
-              userRole.Admin === loggedInUserData?.role) && (
-                <Grid item xs={12} sm={12} md={2} lg={2} xl={2}>
+                userRole.OrganizationOwner === loggedInUserData?.role ||
+                userRole.Admin === loggedInUserData?.role) && (
+                <Grid
+                  item
+                  xs={12}
+                  md={2}
+                  sx={{
+                    display: "flex",
+                    justifyContent: { xs: "center", md: "flex-end" },
+                    mt: { xs: 2, md: 0 },
+                  }}
+                >
                   <Tooltip title={translate("label.showProjectSettings")}>
-                    <IconButton
-                      onClick={handleOpenSettings}
-                      sx={{ marginLeft: "140px" }}
-                    >
+                    <IconButton onClick={handleOpenSettings}>
                       <SettingsOutlinedIcon
                         color="primary.dark"
                         fontSize="large"
@@ -442,8 +471,15 @@ import {
                   </Tooltip>
                 </Grid>
               )}
-          </Grid>
-            <Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ mb: 2 }}>
+            </Grid>
+
+            <Grid
+              item
+              xs={12}
+              sx={{
+                mb: { xs: 2, md: 3 },
+              }}
+            >
               <Grid container spacing={2}>
                 {projectFilterData?.map((des, i) => (
                   <Grid key={i} item xs={isSuperChecker?3:4} sm={isSuperChecker?3:4} md={isSuperChecker?3:4} lg={isSuperChecker?3:4} xl={isSuperChecker?3:4}>
diff --git a/src/components/Project/ProjectSettings.jsx b/src/components/Project/ProjectSettings.jsx
index 181a6899..19c666e1 100644
--- a/src/components/Project/ProjectSettings.jsx
+++ b/src/components/Project/ProjectSettings.jsx
@@ -53,45 +53,65 @@ const ProjectSetting = () => {
     }, [])
     return (
         <Card
-        sx={{
-            // width: window.innerWidth * 0.8,
-            width: "100%",
-            minHeight: 500,
-            padding: 5
-        }}
-    >
-      
-        <Box >
-              <Grid
-                        item
-                        xs={12}
-                        sm={12}
-                        md={12}
-                        lg={12}
-                        xl={12}
-                        sx={{mb:3,}}
-                    >
-                        <Typography variant="h3" gutterBottom component="div"sx={{fontWeight: '1.6875rem'}}>
-                            Project Settings
-                        </Typography>
-                    </Grid>
-            <Box sx={{mb:2,}} >
-                <Tabs value={tabValue} onChange={handleTabChange} aria-label="user-tabs">
-                    <Tab label="Basic " sx={{ fontSize: 17, fontWeight: '700', marginRight: '28px !important' }} />
-                    <Tab label=" Advanced " sx={{ fontSize: 17, fontWeight: '700' }} />
-                    <Tab label=" Read-only " sx={{ fontSize: 17, fontWeight: '700' }} />
-                    <Tab label=" Logs " sx={{ fontSize: 17, fontWeight: '700' }} />
-                </Tabs>
-            </Box>
-            <Divider/>
-            <Box sx={{ p: 1 }}>
-                <TabPanel value={tabValue} index={0}>
-                <BasicSettings   ProjectDetails={ProjectDetails}/>  
-                </TabPanel>
-                <TabPanel value={tabValue} index={1}>
-                    <AdvancedOperation />
-                </TabPanel>
-                <TabPanel value={tabValue} index={2}>
+    sx={{
+        width: "100%",
+        minHeight: 500,
+        padding: 5,
+        '@media (max-width: 600px)': {
+            padding: 2, 
+        },
+    }}
+>
+    <Box>
+        <Grid
+            item
+            xs={12}
+            sx={{
+                mb: 3,
+                textAlign: {
+                    xs: "center", 
+                    sm: "left", 
+                },
+            }}
+        >
+            <Typography
+                variant="h3"
+                gutterBottom
+                component="div"
+                sx={{
+                    fontWeight: 500,
+                    fontSize: {
+                        xs: "1.5rem", 
+                        sm: "1.6875rem", 
+                    },
+                }}
+            >
+                Project Settings
+            </Typography>
+        </Grid>
+        <Box sx={{ mb: 2 }}>
+            <Tabs
+                value={tabValue}
+                onChange={handleTabChange}
+                aria-label="user-tabs"
+                variant="scrollable" 
+                scrollButtons="auto"
+            >
+                <Tab label="Basic" sx={{ fontSize: 15, fontWeight: 700, marginRight: 1 }} />
+                <Tab label="Advanced" sx={{ fontSize: 15, fontWeight: 700, marginRight: 1 }} />
+                <Tab label="Read-only" sx={{ fontSize: 15, fontWeight: 700, marginRight: 1 }} />
+                <Tab label="Logs" sx={{ fontSize: 15, fontWeight: 700 }} />
+            </Tabs>
+        </Box>
+        <Divider />
+        <Box sx={{ p: 1 }}>
+            <TabPanel value={tabValue} index={0}>
+                <BasicSettings ProjectDetails={ProjectDetails} />
+            </TabPanel>
+            <TabPanel value={tabValue} index={1}>
+                <AdvancedOperation />
+            </TabPanel>
+            <TabPanel value={tabValue} index={2}>
                 <ReadonlyConfigurations />
                 </TabPanel>
                 <TabPanel value={tabValue} index={3}>
diff --git a/src/components/Project/ReadOnlyConfigurations.jsx b/src/components/Project/ReadOnlyConfigurations.jsx
index 09785166..7d30d751 100644
--- a/src/components/Project/ReadOnlyConfigurations.jsx
+++ b/src/components/Project/ReadOnlyConfigurations.jsx
@@ -25,224 +25,205 @@ const workspaceDetails = useSelector(state => state.getWorkspaceDetails.data);
 
   return (
     <ThemeProvider theme={themeDefault}>
-      <Grid
-        container
-        direction="row"
-        // justifyContent='center'
-        // alignItems='center'
-      >
-        {/* <Grid
-                        item
-                        xs={12}
-                        md={12}
-                        lg={12}
-                        xl={12}
-                        sm={12}
-                    >
-                        <Typography variant="h5"   >
-                            Read-only Configurations
-                        </Typography>
-                    </Grid> */}
-        {ProjectDetails && ProjectDetails.sampling_mode && (
-          <div>
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              // sx={{mt:2}}
+  <Grid
+    container
+    direction="row"
+    sx={{
+      padding: { xs: 2, md: 4 }, // Adjust padding for smaller screens
+    }}
+  >
+    {ProjectDetails && ProjectDetails.sampling_mode && (
+      <div>
+        {/* Sampling Parameters Section */}
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <Typography
+            variant="h6"
+            sx={{
+              fontSize: { xs: "1rem", md: "1.25rem" }, // Adjust font size
+              textAlign: { xs: "center", md: "left" }, // Center-align on mobile
+            }}
+          >
+            Sampling Parameters
+          </Typography>
+        </Grid>
+
+        {/* Sampling Mode */}
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            alignItems: { xs: "flex-start", md: "center" },
+            mb: 2,
+          }}
+        >
+          <Typography variant="subtitle1">Sampling Mode:</Typography>
+          <Typography
+            variant="subtitle1"
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
+          >
+            {ProjectDetails.sampling_mode === "f" && "Full"}
+            {ProjectDetails.sampling_mode === "b" && "Batch"}
+            {ProjectDetails.sampling_mode === "r" && "Random"}
+          </Typography>
+        </Grid>
+
+        {/* Batch Size */}
+        {ProjectDetails?.sampling_parameters_json?.batch_size && (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "flex-start", md: "center" },
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1">Batch Size:</Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
             >
-              <Typography variant="h6">Sampling Parameters</Typography>
-            </Grid>
+              {ProjectDetails.sampling_parameters_json.batch_size}
+            </Typography>
+          </Grid>
+        )}
 
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
+        {/* Dataset Instances */}
+        {ProjectDetails.datasets.map((dataset, i) => (
+          <Grid
+            container
+            item
+            xs={12}
+            key={i}
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "flex-start", md: "center" },
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1">Dataset Instance:</Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
             >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                Sampling Mode :
-              </Typography>
-
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                {ProjectDetails.sampling_mode == "f" && "Full"}
-                {ProjectDetails.sampling_mode == "b" && "Batch"}
-                {ProjectDetails.sampling_mode == "r" && "Random"}
-              </Typography>
-              
-            </Grid>
-            {ProjectDetails && ProjectDetails?.sampling_parameters_json?.batch_size  && ( 
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
+              {dataset?.instance_name}
+            </Typography>
+            <Link
+              to={`/datasets/${dataset?.instance_id}`}
+              style={{ textDecoration: "none", marginTop: { xs: 8, md: 0 } }}
             >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                Batch Size  :
-              </Typography>
-
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-              {ProjectDetails.sampling_parameters_json?.batch_size}
-              </Typography>
-              
-            </Grid>)}
-            {ProjectDetails && ProjectDetails?.sampling_parameters_json?.batch_size  && ( 
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
+              <CustomButton
+                sx={{
+                  borderRadius: 2,
+                  ml: { xs: 0, md: 2 },
+                  mt: { xs: 1, md: 0 },
+                }}
+                label="View Dataset"
+              />
+            </Link>
+          </Grid>
+        ))}
+
+        {/* Workspace Name */}
+        <Grid
+          container
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            alignItems: { xs: "flex-start", md: "center" },
+            mb: 2,
+          }}
+        >
+          <Typography variant="subtitle1">Workspace Name:</Typography>
+          <Typography
+            variant="subtitle1"
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
+          >
+            {workspaceDetails.workspace_name}
+          </Typography>
+          <Link
+            to={`/workspaces/${ProjectDetails.workspace_id}`}
+            style={{ textDecoration: "none" }}
+          >
+            <CustomButton
+              sx={{
+                borderRadius: 2,
+                ml: { xs: 0, md: 2 },
+                mt: { xs: 1, md: 0 },
+              }}
+              label="View Workspace"
+            />
+          </Link>
+        </Grid>
+
+        {/* Filter String */}
+        {ProjectDetails.filter_string && (
+          <Grid
+            item
+            xs={12}
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "flex-start", md: "center" },
+              mb: 2,
+            }}
+          >
+            <Typography variant="subtitle1">Filter String:</Typography>
+            <Typography
+              variant="subtitle1"
+              sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
             >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                 Batch Number  :
-              </Typography>
-
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-              {ProjectDetails.sampling_parameters_json?.batch_number}
-              </Typography>
-            </Grid>)}
-
-            {ProjectDetails.datasets.map((dataset,i) => (
-              <Grid
-                item
-                xs={12}
-                md={12}
-                lg={12}
-                xl={12}
-                sm={12}
-                sx={{ mt: 2, display: "flex" }}
-                key={i}
-              >
-                <Typography
-                  variant="subtitle1"
-                  style={{ flexDirection: "column" }}
-                >
-                  Dataset Instance :
-                </Typography>
-
-                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                  {dataset?.instance_name}
-                </Typography>
-                <Link
-                    to={`/datasets/${dataset?.instance_id}`}
-                    style={{ textDecoration: "none" }}
-                    >
-                    <CustomButton
-                        sx={{ borderRadius: 2,marginLeft:2 ,marginRight: 2 }}
-                        label="View Dataset"
-                    />
-                </Link>
-              </Grid>
-            ))}
-
-             <Grid
-                item
-                xs={12}
-                md={12}
-                lg={12}
-                xl={12}
-                sm={12}
-                sx={{ mt: 2, display: "flex" }}
-              >
-                <Typography
-                  variant="subtitle1"
-                  style={{ flexDirection: "column" }}
-                >
-                  Workspace Name :
-                </Typography>
-
-                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                {workspaceDetails.workspace_name}
-                </Typography>
-                <Link
-                    to={`/workspaces/${ProjectDetails.workspace_id}`}
-                    style={{ textDecoration: "none" }}
-                    >
-                    <CustomButton
-                        sx={{ borderRadius: 2,marginLeft:2 ,marginRight: 2 }}
-                        label="View Workspace"
-                    />
-                </Link>
-              </Grid>
-
-            {ProjectDetails.filter_string && (
-              <Grid
-                item
-                xs={12}
-                md={12}
-                lg={12}
-                xl={12}
-                sm={12}
-                sx={{ mt: 2, display: "flex" }}
-              >
-                <Typography
-                  variant="subtitle1"
-                  style={{ flexDirection: "column" }}
-                >
-                  Filter String :
-                </Typography>
-
-                <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                  {ProjectDetails.filter_string}
-                </Typography>
-              </Grid>
-            )}
-          </div>
+              {ProjectDetails.filter_string}
+            </Typography>
+          </Grid>
         )}
-      </Grid>
+      </div>
+    )}
+  </Grid>
+
+  {/* Variable Parameters Section */}
+  <Grid container direction="row" sx={{ mt: 4 }}>
+    {ProjectDetails?.variable_parameters?.output_language && (
+      <div>
+        <Grid item xs={12} sx={{ mb: 2 }}>
+          <Typography
+            variant="h6"
+            sx={{ fontSize: { xs: "1rem", md: "1.25rem" } }}
+          >
+            Variable Parameters
+          </Typography>
+        </Grid>
+
+        {/* Output Language */}
+        <Grid
+          item
+          xs={12}
+          sx={{
+            display: "flex",
+            flexDirection: { xs: "column", md: "row" },
+            alignItems: { xs: "flex-start", md: "center" },
+            mb: 2,
+          }}
+        >
+          <Typography variant="subtitle1">Output Language:</Typography>
+          <Typography
+            variant="subtitle1"
+            sx={{ ml: { xs: 0, md: 3 }, mt: { xs: 1, md: 0 } }}
+          >
+            {ProjectDetails?.variable_parameters?.output_language}
+          </Typography>
+        </Grid>
+      </div>
+    )}
+  </Grid>
+</ThemeProvider>
 
-      <Grid container direction="row">
-        {ProjectDetails && ProjectDetails?.variable_parameters?.output_language && (
-          <div>
-            <Grid item xs={12} md={12} lg={12} xl={12} sm={12} sx={{ mt: 2 }}>
-              <Typography variant="h6">Variable Parameters</Typography>
-            </Grid>
-
-            <Grid
-              item
-              xs={12}
-              md={12}
-              lg={12}
-              xl={12}
-              sm={12}
-              sx={{ mt: 2, display: "flex" }}
-            >
-              <Typography
-                variant="subtitle1"
-                style={{ flexDirection: "column" }}
-              >
-                Output Language :
-              </Typography>
-              <Typography variant="subtitle1" style={{ marginLeft: 25 }}>
-                {ProjectDetails?.variable_parameters?.output_language}
-              </Typography>
-            </Grid>
-          </div>
-        )}
-      </Grid>
-    </ThemeProvider>
   );
 };
 

From 6f171e578b2db34e07bfeaf30bd7e8954b9b6fe9 Mon Sep 17 00:00:00 2001
From: al-yx <shrutikumari14092k@gmail.com>
Date: Wed, 22 Jan 2025 09:39:04 +0530
Subject: [PATCH 4/4] Add CSS to View and fix MobileNavbar

---
 src/app/ui/pages/projects/project.js   |   8 +-
 src/components/common/MobileNavbar.jsx | 350 +++++++++++++++----------
 2 files changed, 216 insertions(+), 142 deletions(-)

diff --git a/src/app/ui/pages/projects/project.js b/src/app/ui/pages/projects/project.js
index fa6a8acb..6d825bf1 100644
--- a/src/app/ui/pages/projects/project.js
+++ b/src/app/ui/pages/projects/project.js
@@ -67,10 +67,10 @@ console.log(data?.length,"hel");
     <ThemeProvider theme={themeDefault}>
       {apiLoading ? <Spinner /> :  
       <>
-      {/* <Grid container direction="row" columnSpacing={3} rowSpacing={2} sx={{ position: "static", bottom: "-51px", left: "20px" }} > */}
-      <Grid container className="root">
-        <Grid item style={{ flexGrow: "0" }}>
-          <Typography variant="h6" sx={{ paddingBottom: "7px" }}>
+      <Grid container className="root" >
+
+        <Grid item style={{ flexGrow: "0" }} >
+          <Typography variant="h6" sx={{ paddingBottom: "7px" ,paddingLeft: "15px"}}>
             View :{" "}
           </Typography>
         </Grid>
diff --git a/src/components/common/MobileNavbar.jsx b/src/components/common/MobileNavbar.jsx
index a3c866a2..e5d16ba9 100644
--- a/src/components/common/MobileNavbar.jsx
+++ b/src/components/common/MobileNavbar.jsx
@@ -61,152 +61,226 @@ function MobileNavbar(props) {
 
   return (
     <>
-      <Drawer open={openDrawer} onClose={() => setOpenDrawer(false)} PaperProps={{
-        style: {
-            padding: "16px"
-        }
-      }}>
+      <Drawer
+        open={openDrawer}
+        onClose={() => setOpenDrawer(false)}
+        PaperProps={{
+          sx: {
+            padding: 2,
+            width: { xs: "75%", sm: "50%", md: "30%" }, 
+          },
+        }}
+      >
         <Box
-            style={{
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "space-between",
-                height: "100%",
-                paddingBottom: "16px"
-            }}
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            height: "100%",
+            pb: 2,
+          }}
         >
-            <Box>
-                <Link href="/profile" onClick={() => setOpenDrawer(false)} style={{
-                    textDecoration: "none"
-                }}>
-                    <Box
-                        style={{
-                            display: "flex",
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            columnGap: "16px",
-                            paddingBottom: "16px",
-                        }}
-                    >
-                        <Avatar
-                            alt="user_profile_pic"
-                            variant="contained"
-                            className="avatar"
-                        >
-                            {loggedInUserData && loggedInUserData.username && loggedInUserData.username.split("")[0]}
-                        </Avatar>
-                        <Typography variant="h6" sx={{ p: 0, ml : 1 }} style={{
-                            color: "black"
-                        }}>
-                            {loggedInUserData.username}
-                        </Typography>
-                    </Box>
-                </Link>
-                <Divider />
-            </Box>
-            <Box>
-                <List>
-                    {tabs.map((tab,i) => (
-                        <ListItem key={i} onClick={() => setOpenDrawer(false)}>
-                            {tab}
-                        </ListItem>
-                    ))}
-                </List>
-            </Box>
-            <Box>
-                <Typography variant="h6" align="center" style={{
-                    fontSize: "1.1rem"
-                }}>
-                    App Settings
+          <Box>
+            <Link
+              href="/profile"
+              onClick={() => setOpenDrawer(false)}
+              style={{ textDecoration: "none" }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 2,
+                  pb: 2,
+                }}
+              >
+                <Avatar
+                  alt="user_profile_pic"
+                  className="avatar"
+                  sx={{ bgcolor: "primary.main" }}
+                >
+                  {loggedInUserData?.username?.[0]}
+                </Avatar>
+                <Typography
+                  variant="h6"
+                  sx={{
+                    ml: 1,
+                    color: "text.primary",
+                    fontSize: { xs: "1rem", sm: "1.25rem" },
+                  }}
+                >
+                  {loggedInUserData.username}
                 </Typography>
-                <Divider />
-                <List>
-                    {appSettings.map((setting,index) => (
-                        <ListItem key={index}  style={{cursor:"pointer"}} onClick={setting.onclick}>
-                            {setting.control ? 
-                                <FormControlLabel
-                                    control={setting.control}
-                                    label={setting.name}
-                                />
-                                : 
-                                <Typography variant="body1" textAlign="center">
-                                    {setting.name}
-                                </Typography>}
-                        </ListItem>
-                    ))}
-                </List>
-            </Box>
-            <Box>
-                <Typography variant="h6" align="center" style={{
-                    fontSize: "1.1rem"
-                }}>
-                    User Settings
+              </Box>
+            </Link>
+            <Divider />
+          </Box>
+
+          <Box>
+            <List>
+              {tabs.map((tab, i) => (
+                <ListItem
+                  key={i}
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={() => setOpenDrawer(false)}
+                >
+                  {tab}
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+
+          {/* App Settings Section */}
+          <Box>
+            <Typography
+              variant="h6"
+              align="center"
+              sx={{ fontSize: { xs: "1rem", sm: "1.1rem" }, pb: 1 }}
+            >
+              App Settings
+            </Typography>
+            <Divider />
+            <List>
+              {appSettings.map((setting, index) => (
+                <ListItem
+                  key={index}
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={setting.onclick}
+                >
+                  {setting.control ? (
+                    <FormControlLabel
+                      control={setting.control}
+                      label={setting.name}
+                    />
+                  ) : (
+                    <Typography variant="body1" textAlign="center">
+                      {setting.name}
+                    </Typography>
+                  )}
+                </ListItem>
+              ))}
+            </List>
+          </Box>
+
+          <Box>
+            <Typography
+              variant="h6"
+              align="center"
+              sx={{ fontSize: { xs: "1rem", sm: "1.1rem" }, pb: 1 }}
+            >
+              User Settings
+            </Typography>
+            <Divider />
+            <List>
+              {userSettings.map((setting) => (
+                <ListItem
+                  key={setting.name}
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={() => {
+                    setting.onclick();
+                    setOpenDrawer(false);
+                  }}
+                >
+                  <Typography variant="body1" textAlign="center">
+                    {setting.name}
+                  </Typography>
+                </ListItem>
+              ))}
+              {!loggedInUserData.guest_user && (
+                <ListItem
+                  key="change-password"
+                  sx={{
+                    cursor: "pointer",
+                    py: 1,
+                    px: 2,
+                    "&:hover": { bgcolor: "action.hover" },
+                  }}
+                  onClick={() => {
+                    setOpenDrawer(false);
+                    handleChangePassword(loggedInUserData.email);
+                  }}
+                >
+                  <Typography variant="body1" textAlign="center">
+                    Change Password
+                  </Typography>
+                </ListItem>
+              )}
+              <ListItem
+                key="logout"
+                sx={{
+                  cursor: "pointer",
+                  py: 1,
+                  px: 2,
+                  "&:hover": { bgcolor: "action.hover" },
+                }}
+                onClick={onLogoutClick}
+              >
+                <Typography variant="body1" textAlign="center">
+                  Logout
                 </Typography>
-                <Divider />
-                <List>
-                    {userSettings.map((setting) => (
-                        <ListItem key={setting} style={{cursor:"pointer"}} onClick={() => {setting.onclick(); setOpenDrawer(false)}}>
-                            <Typography variant="body1" textAlign="center">
-                                {setting.name}
-                            </Typography>
-                        </ListItem>
-                    ))}
-                    {!loggedInUserData.guest_user && 
-                        <ListItem key={3} style={{cursor:"pointer"}}  onClick={() => {setOpenDrawer(false); handleChangePassword(loggedInUserData.email);}}>
-                            <Typography variant="body1" textAlign="center">
-                            Change Password
-                            </Typography>
-                        </ListItem>
-                    }
-                    <ListItem key={4}  style={{cursor:"pointer"}}  onClick={() => onLogoutClick() }>
-                        <Typography variant="body1" textAlign="center">
-                        Logout
-                        </Typography>
-                    </ListItem>
-                </List>
-            </Box>
+              </ListItem>
+            </List>
+          </Box>
         </Box>
       </Drawer>
       <AppBar style={{ backgroundColor: "#ffffff", padding: "8px 0" }}>
         <Grid
-            container
-            direction="row"
-            justifyContent={"space-between"}
-            style={{
-                padding: "0 5%"
-            }}
-        > 
-            <Grid item sx={{ display: "flex", alignItems: "center" ,gap: "10px"}}>
-                <Link href="/projects">
-                <Image 
-                    onClick={() => navigate("/")} 
-                    src="https://i.imgur.com/56Ut9oz.png"
-                    alt="anudesh"
-                    height="100"
-                    width="100"
-                    className={classes.headerLogo}
-                    sx={{ marginTop: "5%" }}
-                  />
-                </Link>
-                <Typography
-                  className="headerTitle"
-                  style={{
-                    fontSize: "28px",
-                    fontWeight: "bold",
-                    fontFamily: 'Rowdies,"Roboto,sans-serif',
-                    color: "#000000",
-
-                  }}
-                >
-                  Anudesh
-                </Typography>
-            </Grid>
-            <Grid item>
-                <IconButton onClick={() => setOpenDrawer(!openDrawer)}>
-                    <Menu />
-                </IconButton>
-            </Grid>
+          container
+          direction="row"
+          justifyContent={"space-between"}
+          style={{
+            padding: "0 5%",
+          }}
+        >
+          <Grid
+            item
+            sx={{ display: "flex", alignItems: "center", gap: "10px" }}
+          >
+            <Link href="/projects">
+              <Image
+                onClick={() => navigate("/")}
+                src="https://i.imgur.com/56Ut9oz.png"
+                alt="anudesh"
+                height="100"
+                width="100"
+                className={classes.headerLogo}
+                sx={{ marginTop: "5%" }}
+              />
+            </Link>
+            <Typography
+              className="headerTitle"
+              style={{
+                fontSize: "28px",
+                fontWeight: "bold",
+                fontFamily: 'Rowdies,"Roboto,sans-serif',
+                color: "#000000",
+              }}
+            >
+              Anudesh
+            </Typography>
+          </Grid>
+          <Grid item>
+            <IconButton onClick={() => setOpenDrawer(!openDrawer)}>
+              <Menu />
+            </IconButton>
+          </Grid>
         </Grid>
       </AppBar>
     </>