Merge pull request #41 from AkshataKatwal16/admin

adjust UI responsiveness
tekdi · Jul 19, 2024 · f598f21 · f598f21
2 parents 85f8540 + 83c7e44
commit f598f21
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
@@ -158,7 +158,7 @@ const HeaderComponent = ({
           }}
         >
           <Grid container spacing={isMobile ? 1 : 2}>
-            <Grid item xs={12} sm={isMediumScreen ? 12 :2}>
+            <Grid item xs={12} sm={isMediumScreen ? 12 : 3}>
               <MultipleSelectCheckmarks
                 names={allStates.map(
                   (state) =>
@@ -171,7 +171,7 @@ const HeaderComponent = ({
                 onCategoryChange={handleStateChangeWrapper}
               />
             </Grid>
-            <Grid item xs={12} sm={isMediumScreen ? 12 : 2}>
+            <Grid item xs={12} sm={isMediumScreen ? 12 : 3}>
               <MultipleSelectCheckmarks
                 names={allDistricts.map((districts) => districts.label)}
                 codes={allDistricts.map((districts) => districts.value)}
@@ -181,7 +181,7 @@ const HeaderComponent = ({
                 disabled={selectedState.length === 0 || selectedState[0] === ""}
               />
             </Grid>
-            <Grid item xs={12} sm={isMediumScreen ? 12 : 2}>
+            <Grid item xs={12} sm={isMediumScreen ? 12 : 3}>
               <MultipleSelectCheckmarks
                 names={allBlocks.map((blocks) => blocks.label)}
                 codes={allBlocks.map((blocks) => blocks.value)}
@@ -196,7 +196,7 @@ const HeaderComponent = ({
           </Grid>
         </Box>
       )}
-      <Typography variant="h1" sx={{ mt: isMobile ? "12px" : "20px" }}>
+      <Typography variant="h2" sx={{ mt: isMobile ? "12px" : "20px" }}>
         {userType}
       </Typography>
       <Box
@@ -210,7 +210,7 @@ const HeaderComponent = ({
           <SearchBar
             className="searchBox"
             placeholder={searchPlaceHolder}
-            backgroundColor={"white"}
+            backgroundColor="white"
             fullWidth
           />
         </Box>