Fixed 2119

src/pages/AdminHomePage/AdminCategoriesPage/AdminCategoriesPage.styled.js

@@ -20,14 +20,19 @@ export const AdminCategoriesPageContainer = styled(Box)`
 export const AdminCategoriesHeader = styled(Header)`
   /* top: 40px; */
   top: 0;
+  @media (min-width: 600px) and (max-width: 900px) {
+    & > div:nth-child(2) {
+      display: none;
+    }
+  }
   @media (max-width: 600px) {
-    top: -5px;
+    top: 0;
     margin-top: 0px;
     & > div {
-      margin-top: -10px;
+      margin-top: 0;
     }
-    & > div > div > div:nth-child(1) {
-      top: 15px;
+    & > div > div > div {
+      top: 25px;
       left: 0;
     }
   }

src/pages/AdminHomePage/AdminLocationsPage/AdminLocationsPage.styled.js

@@ -20,6 +20,11 @@ export const AdminLocationsPageContainer = styled(Box)`
 `;
 export const AdminLocationsHeader = styled(Header)`
   top: 0;
+  @media (min-width: 600px) and (max-width: 900px) {
+    & > div:nth-child(2) {
+      display: none;
+    }
+  }
   @media (max-width: 600px) {
     top: 0px;
     margin-top: 0px;

src/pages/AdminHomePage/AdminSubcategoriesPage/AdminSubcategoriesPage.js

@@ -13,6 +13,7 @@ import {
   HeaderText,
   NewSubcategoryButton,
   SponsoredCategoryCard,
+  SubcategoriesHeader,
   SubcategoriesList,
 } from "./AdminSubcategoriesPage.styled";
 import { selectManualSearchString } from "../../../store/selectors/filtersSelectors";
@@ -76,7 +77,7 @@ const AdminSubcategoriesPage = () => {
         method: ADD_TYPE,
         showSecondButton: true,
         category,
-        categoryId: category?._id
+        categoryId: category?._id,
       })
     );
   };
@@ -89,10 +90,20 @@ const AdminSubcategoriesPage = () => {
           handleSearch={handleSearch}
           placeholder={t("admin.subcategories.placeholder")}
         />
-        <ButtonContainer onClick={goBack}>
-          <ArrowButton side={"left"}></ArrowButton>
-          <HeaderText>{t("admin.subcategories.goBack")}</HeaderText>
-        </ButtonContainer>
+        <SubcategoriesHeader>
+          <ButtonContainer onClick={goBack}>
+            <ArrowButton side={"left"}></ArrowButton>
+            <HeaderText>{t("admin.subcategories.goBack")}</HeaderText>
+          </ButtonContainer>
+          <NewSubcategoryButton
+            variant="contained"
+            buttoncolor={selectedTheme.colors.iconYellowColor}
+            textcolor={selectedTheme.colors.messageText}
+            onClick={showAddSubcategoryModal}
+          >
+            {t("admin.subcategories.addSubcategory")}
+          </NewSubcategoryButton>
+        </SubcategoriesHeader>
         <AdminSubcategoriesHeader
           hideSorting
           myOffers
@@ -131,14 +142,6 @@ const AdminSubcategoriesPage = () => {
             />
           ))}
         </SubcategoriesList>
-        <NewSubcategoryButton
-          variant="contained"
-          buttoncolor={selectedTheme.colors.iconYellowColor}
-          textcolor={selectedTheme.colors.messageText}
-          onClick={showAddSubcategoryModal}
-        >
-          {t("admin.subcategories.addSubcategory")}
-        </NewSubcategoryButton>
       </AdminSubcategoriesPageContainer>
     </>
   );

src/pages/AdminHomePage/AdminSubcategoriesPage/AdminSubcategoriesPage.styled.js

@@ -23,6 +23,11 @@ export const AdminSubcategoriesPageContainer = styled(Box)`
 `;
 export const AdminSubcategoriesHeader = styled(Header)`
   top: 4px;
+  @media (min-width: 600px) and (max-width: 900px) {
+    & > div:nth-child(2) {
+      display: none;
+    }
+  }
   @media (max-width: 600px) {
     height: 10px;
     top: -65px;
@@ -37,12 +42,16 @@ export const AdminSubcategoriesHeader = styled(Header)`
       margin-top: 10px;
     }
     & div div:nth-child(2) {
-      top: 22px;
+      top: 57px;
     }
   }
 `;
 export const AdminSubcategoriesSearchField = styled(SearchField)`
   top: -15px;
+  @media (max-width: 900px) {
+    margin-top: 72px;
+  }
+
   @media (max-width: 600px) {
     display: none;
   }
@@ -54,39 +63,46 @@ export const SubcategoriesList = styled(Box)`
       padding-top: 0;
     }
   }
-`
+`;
 export const SponsoredCategoryCard = styled(CategoryCard)`
   background: ${selectedTheme.colors.backgroundSponsoredColor};
   border: 1px solid ${selectedTheme.colors.borderSponsoredColor};
 `;
 export const NewSubcategoryButton = styled(PrimaryButton)`
-  position: absolute;
-  bottom: 18px;
-  right: 37px;
   height: 48px;
   width: 224px;
   & button {
     font-weight: 700;
   }
+
   @media (max-width: 600px) {
-    bottom: 18px;
-    right: 16px;
+    margin-bottom: 20px;
   }
-`
+`;
 export const ButtonContainer = styled(Link)`
-    width:fit-content;
-    cursor:pointer;
-    display: flex;
-    justify-content: start;
-    align-items:center;
-    gap:12px;
-    text-decoration: none;
-`
-export const HeaderText = styled(Typography) `
-    font-family: ${selectedTheme.fonts.textFont};
-    line-height: 22px;
-    font-size: 16px;
-    color: ${selectedTheme.colors.primaryPurple};
-    text-decoration: none;
-    border-bottom: 1px dotted ${selectedTheme.colors.primaryPurple};
-`
+  width: fit-content;
+  cursor: pointer;
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+`;
+export const HeaderText = styled(Typography)`
+  font-family: ${selectedTheme.fonts.textFont};
+  line-height: 22px;
+  font-size: 16px;
+  color: ${selectedTheme.colors.primaryPurple};
+  text-decoration: none;
+  border-bottom: 1px dotted ${selectedTheme.colors.primaryPurple};
+`;
+
+export const SubcategoriesHeader = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+`;