Responsive change in search, logo and org tab

AI4Bharat · Dec 27, 2024 · 85924b9 · 85924b9
1 parent 14f6ce4
commit 85924b9
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -89,6 +89,7 @@ const WorkspaceTable = (props) => {
         setCellHeaderProps: (sort) => ({
           style: { height: "70px", padding: "16px" },
         }),
+        setCellProps: () => ({ style: { wordWrap: "break-word" } }),
       },
     },
     {

diff --git a/src/themes/theme.js b/src/themes/theme.js
@@ -132,6 +132,17 @@ const themeDefault = createTheme({
     MUIDataTablePagination: {
       styleOverrides: {
         backgroundColor: "#fff",
+        // "@media (max-width:640px)": {
+        //   flexDirection: "column",
+        // },
+        root: {
+          "&.MUIDataTablePagination-navContainer": {
+            flexDirection: "column",
+          },
+        },
+        "&.MUIDataTablePagination-navContainer": {
+          flexDirection: "column",
+        },
       },
     },
     MUIDataTableFilterList: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -89,6 +89,7 @@ const WorkspaceTable = (props) => { @@
             setCellHeaderProps: (sort) => ({
               style: { height: "70px", padding: "16px" },
             }),
+            setCellProps: () => ({ style: { wordWrap: "break-word" } }),
           },
         },
         {
@@ Expand Down @@