Merge pull request #330 from shreyas1434shinde/notification

Issue #PS-2322 fix: admin mobile responsive
tekdi · Nov 18, 2024 · 6524e39 · 6524e39
2 parents a88c192 + 33ef56a
commit 6524e39
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 14 deletions.
diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
@@ -708,14 +708,17 @@ const HeaderComponent = ({
                 justifyContent: "center",
                 alignItems: "center",
                 // height: "40px",
-                width: isMobile ? "70%" : "200px",
+                width: isMobile ? "93%" : "200px",
                 borderRadius: "20px",
                 border: "1px solid #1E1B16",
                 //  mt: isMobile ? "10px" : "16px",
                 boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
                 mr: "10px",
                 ml: isMobile ? "50px" : isMediumScreen ? "10px" : undefined,
                 mt: isMobile ? "10px" : isMediumScreen ? "10px" : undefined,
+                '@media (max-width: 600px)': {
+                  mx: "16px",
+                }
               }}
             >
               <Button

diff --git a/src/components/layouts/header/Header.tsx b/src/components/layouts/header/Header.tsx
@@ -115,6 +115,9 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
             display: {
               lg: "none",
               xs: "flex",
+              '@media (max-width: 600px)': {
+                padding: "0px",
+              }
             },
           }}
         >
@@ -167,7 +170,7 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
             alignItems: "center",
             justifyContent: "center",
             height: "20px",
-            width: "45px",
+            width: "35px",
             borderRadius: "10px",
             cursor: "pointer"
           }}
@@ -185,7 +188,7 @@ const Header = ({ sx, customClass, toggleMobileSidebar, position }: any) => {
 
           </IconButton> */}
           <Image src={deleteIcon} alt="" 
-          width={30}
+          width={22}
           />
 
 

diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx
@@ -245,6 +245,9 @@ const Profile = () => {
           border: "none",
           paddingLeft: "0px !important",
           paddingRight: "0px !important",
+          '@media (max-width: 600px)': {
+            minWidth: "0px !important",
+          }
         }}
       >
         <Box display="flex" alignItems="center" color="white">
@@ -254,6 +257,9 @@ const Profile = () => {
               display: "flex",
               alignItems: "center",
               // ml: 1,
+              '@media (max-width: 600px)': {
+                display: 'none'
+              }
             }}
           >
             <Typography
@@ -286,20 +292,21 @@ const Profile = () => {
         }}
         PaperProps={{
           sx: {
-            width: "500px",
+            // width: "500px",
+            minWidth: "320px",
             borderRadius: "12px",
           },
         }}
         MenuListProps={{
           sx: {
-            paddingTop: "0px !important",
+            paddingTop: "50px !important",
             paddingBottom: "0px !important",
           },
         }}
       >
-        <Box
+        {/* <Box
           sx={{ backgroundColor: "#F8EFE7", height: "56px", width: "100%" }}
-        ></Box>
+        ></Box> */}
         <Box
           sx={{ display: "flex", justifyContent: "center", marginTop: "-25px" }}
         >
@@ -316,14 +323,14 @@ const Profile = () => {
           >
             <Typography
               variant="h6"
-              color={"white"}
+              color="white"
               sx={{ fontWeight: "bold", fontSize: "18px" }}
             >
-              {adminInfo?.name
-                ?.split(" ")
-                .map((word: any) => word[0])
-                .join("")}
+              {adminInfo?.name &&
+                `${adminInfo.name.split(" ")[0][0]}${adminInfo.name.split(" ").slice(-1)[0][0]}`}
             </Typography>
+
+
           </Box>
         </Box>
 
@@ -387,7 +394,7 @@ const Profile = () => {
           </Box>
 
           <Divider sx={{ color: "#D0C5B4" }} />
-          <Box sx={{ px: "20px", display: "flex", gap: "10px", justifyContent: "space-between", alignItems: "center" }}>
+          <Box sx={{ px: "20px", display: "flex", gap: "10px", justifyContent: "space-between", alignItems: "center", '@media (max-width: 434px)': { flexDirection: 'column', justifyContent: 'center', alignItems: 'center'   }  }}>
             <Button
               fullWidth
               variant="outlined"
@@ -398,6 +405,8 @@ const Profile = () => {
                 backgroundColor: "white",
                 border: "0.6px solid #1E1B16",
                 my: "20px",
+                width: "408px",
+                '@media (max-width: 434px)': { width: '100%' }
 
               }}
               endIcon={<EditIcon />}
@@ -414,6 +423,7 @@ const Profile = () => {
                 backgroundColor: "#FDBE16",
                 border: "0.6px solid #1E1B16",
                 my: "20px",
+                '@media (max-width: 434px)': { my: '0px', mb:'20px' }
               }}
               endIcon={<LogoutIcon />}
             >

diff --git a/src/components/layouts/header/SearchBar.tsx b/src/components/layouts/header/SearchBar.tsx
@@ -17,7 +17,7 @@ const SearchBox = styled(Paper)<{ isSmallScreen: boolean }>(({ theme, isSmallScr
   display: "flex",
   alignItems: "center",
   width: "100%",
-  maxWidth: isSmallScreen ? 300 : 900,
+  maxWidth: isSmallScreen ? "100%" : 900,
   borderRadius: "8px",
   backgroundColor:"#F0F0F0",
 }));

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -129,6 +129,7 @@ ul.MuiList-root li.MuiMenuItem-root[data-value=""] {
   min-height: 100% !important;
 }
 
+
 /* .css-1latkvx-MuiFormLabel-root-MuiInputLabel-root.Mui-focused {
   color: #000 !important;
 } */
-Original file line number
+Diff line change
@@ Expand Up / @@ -129,6 +129,7 @@ ul.MuiList-root li.MuiMenuItem-root[data-value=""] { @@
       min-height: 100% !important;
     }
     /* .css-1latkvx-MuiFormLabel-root-MuiInputLabel-root.Mui-focused {
       color: #000 !important;
     } */
@@ Expand Down @@