Fixed bugs 1758

src/components/Cards/CategoryCard/CategoryCard.styled.js

@@ -15,6 +15,14 @@ export const CategoryCardContainer = styled(Box)`
   flex-direction: row;
   justify-content: space-between;
   position: relative;
+
+  @media (max-width: 1050px) {
+    height: 102px;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+
   @media (max-width: 600px) {
     height: 102px;
     margin-left: 0;
@@ -29,10 +37,22 @@ export const CategoryCardLeftContainer = styled(Box)`
 export const CategoryCardRightContainer = styled(Box)`
   display: flex;
   flex-direction: row;
+
+  @media (max-width: 345px) {
+    position: absolute;
+    right: 0;
+  }
 `;
 export const CategoryCardDetailsContainer = styled(Box)`
   display: flex;
   flex-direction: row;
+
+  @media (max-width: 1050px) {
+    position: absolute;
+    bottom: 50px;
+    left: -13px;
+    max-height: 16px;
+  }
   @media (max-width: 600px) {
     position: absolute;
     bottom: 18px;

src/components/Cards/CreateOfferCard/CreateOffer.styled.js

@@ -240,6 +240,20 @@ export const NextButtonContainer = styled(PrimaryButton)`
       height: 44px;
     }
   }
+
+  @media (max-width: 360px) {
+    width: 300px;
+  }
+
+  @media (max-width: 320px) {
+    width: 260px;
+  }
+
+  @media (max-height: 660px) {
+    position: relative;
+    width: 100%;
+    margin-top: 34px;
+  }
 `;
 export const ErrorText = styled(Typography)`
   color: red;

src/components/Cards/CreateOfferCard/FirstPart/FirstPartCreateOffer.styled.js

@@ -36,6 +36,10 @@ export const CreateOfferDescription = styled(Typography)`
 export const CreateOfferFormContainer = styled(Box)`
   width: 335px;
   padding: 20px 0 35px 0;
+
+  @media (max-width: 360px) {
+    width: 100%;
+  }
 `;
 export const FieldLabel = styled(Label)`
   position: relative;

src/components/Cards/CreateOfferCard/SecondPart/OfferConditionField/OfferConditionField.styled.js

@@ -7,4 +7,8 @@ export const InputButtonContainer = styled(Box)`
   display: flex;
   flex-direction: column;
   justify-content: center;
+
+  @media (max-width: 360px) {
+    width: 260px;
+  }
 `;

src/components/Cards/CreateOfferCard/ThirdPart/ThirdPartCreateOffer.styled.js

@@ -27,4 +27,13 @@ export const PublishButton = styled(PrimaryAnimatedButton)`
     position: absolute;
     bottom: 26px;
   }
+
+  @media (max-width: 320px) {
+    width: 260px;
+  }
+
+  @media (max-height: 629px) {
+    position: relative;
+    margin-top: 40px;
+  }
 `;

src/components/Cards/FilterCard/FilterCard.js

@@ -20,9 +20,10 @@ const FilterCard = (props) => {
   const closeAllSections = () => {
     categoryRef.current.closeSection();
     subcategoryRef.current.closeSection();
-    locationRef.current.closeSection();
-    companyRef.current.closeSection();
+    locationRef?.current?.closeSection();
+    companyRef?.current?.closeSection();
   };
+  console.log(props);
   return (
     <FilterCardContainer
       filtersOpened={props.filtersOpened}

src/components/Cards/FilterCard/FilterHeader/FilterHeader.js

@@ -25,7 +25,12 @@ const FilterHeader = (props) => {
       {isMobile ? (
         <CloseIcon onClick={props.toggleFilters} />
       ) : (
-        <Link to="#" textsize={"12px"} font={selectedTheme.fonts.textFont} onClick={clearFilters}>
+        <Link
+          to="#"
+          textsize={"12px"}
+          font={selectedTheme.fonts.textFont}
+          onClick={clearFilters}
+        >
           {t("filters.cancel")}
         </Link>
       )}

src/components/Cards/ItemDetailsCard/OfferInformations/SingleInformation/SingleInformation.styled.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import selectedTheme from "../../../../../themes";
 
 export const InfoGroup = styled(Box)`
-  display: ${props => props.hide ? 'none' : 'flex'};
+  display: ${(props) => (props.hide ? "none" : "flex")};
   flex-direction: row;
   align-items: center;
   gap: 4px;
@@ -27,4 +27,7 @@ export const InfoText = styled(Typography)`
   @media (max-width: 600px) {
     font-size: 12px;
   }
-`;
+  @media (max-width: 360px) {
+    max-width: 50px;
+  }
+`;

src/components/Cards/ProfileCard/EditProfile/EditProfile.styled.js

@@ -140,11 +140,19 @@ export const InputField = styled(TextField)`
 export const SaveButton = styled(PrimaryButton)`
   font-size: 12px;
   letter-spacing: 1.5px;
+
+  @media (max-width: 375px) {
+    width: 100%;
+  }
 `;
 export const FinishButton = styled(PrimaryAnimatedButton)`
   font-size: 12px;
   letter-spacing: 1.5px;
-`
+
+  @media (max-width: 375px) {
+    width: 100%;
+  }
+`;
 
 export const ButtonsContainer = styled(Box)`
   display: flex;

src/components/Cards/RequestExchangeCard/RequestExchangeCard.styled.js

@@ -21,7 +21,8 @@ export const MessageContent = styled(Box)`
   @media (max-width: 600px) {
     width: 100%;
     margin: 0;
-    ${props => props.ismymessage ? "margin-right: 9px;" : "margin-left: 9px;"}
+    ${(props) =>
+      props.ismymessage ? "margin-right: 9px;" : "margin-left: 9px;"}
   }
 `;
 export const MessageText = styled(Typography)`

src/components/Cards/RequestExchangeCard/RequestExchangeMessage/RequestExchangeMessage.styled.js

@@ -9,6 +9,10 @@ export const RequestExchangeMessageContainer = styled(Box)`
   gap: 27px;
   width: 314px;
   margin-bottom: 10px;
+
+  @media (max-width: 445px) {
+    width: 100%;
+  }
 `;
 export const RequestExchangeMessageText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -22,6 +26,10 @@ export const RequestExchangeMessageButtonsContainer = styled(Box)`
   flex-direction: row;
   justify-content: space-between;
   gap: 18px;
+
+  @media (max-width: 375px) {
+    gap: 9px;
+  }
 `;
 export const RequestExchangeMessageButton = styled(PrimaryButton)`
   flex: 1;
@@ -33,4 +41,12 @@ export const RequestExchangeMessageButton = styled(PrimaryButton)`
     font-family: ${selectedTheme.fonts.textFont};
     letter-spacing: 1.5px;
   }
+
+  @media (max-width: 375px) {
+    height: 40px;
+
+    & button {
+      letter-spacing: 1px;
+    }
+  }
 `;

src/components/DirectChat/DirectChatContent/DirectChatContentHeader/DirectChatContentHeader.styled.js

@@ -93,7 +93,7 @@ export const PhoneIconContainer = styled(IconButton)`
 `;
 export const DirectChatHeaderStatusContainer = styled(Box)`
   background-color: ${selectedTheme.colors.primaryPurple};
-  height: 39px;
+  /* height: 39px; */
   width: 100%;
   padding: 9px 36px;
   @media (max-width: 600px) {

src/components/Header/Drawer/Buttons/AdminButtons/AdminButtons.js

@@ -5,6 +5,7 @@ import {
   CategoryIcon,
   DollarIcon,
   LocationIcon,
+  MarketplaceIcon,
   UserIcon,
 } from "./AdminButtons.styled";
 import {
@@ -12,6 +13,7 @@ import {
   ADMIN_LOCATIONS_PAGE,
   ADMIN_PAYMENT_PAGE,
   ADMIN_USERS_PAGE,
+  HOME_PAGE,
 } from "../../../../../constants/pages";
 import { useTranslation } from "react-i18next";
 
@@ -43,6 +45,12 @@ const AdminButtons = (props) => {
         title={t("admin.navigation.payment")}
         route={ADMIN_PAYMENT_PAGE}
       />
+      <AdminButton
+        toggleDrawer={props.toggleDrawer}
+        icon={<MarketplaceIcon />}
+        title={t("admin.navigation.marketplace")}
+        route={HOME_PAGE}
+      />
     </>
   );
 };

src/components/Header/Drawer/Buttons/AdminButtons/AdminButtons.styled.js

@@ -2,8 +2,10 @@ import { ReactComponent as User } from "../../../../../assets/images/svg/user.sv
 import { ReactComponent as Location } from "../../../../../assets/images/svg/location.svg";
 import { ReactComponent as Category } from "../../../../../assets/images/svg/category.svg";
 import { ReactComponent as Dollar } from "../../../../../assets/images/svg/dollar-sign.svg";
+import { ReactComponent as Marketplace } from "../../../../../assets/images/svg/package.svg";
 import styled from "styled-components";
 export const LocationIcon = styled(Location)``;
 export const UserIcon = styled(User)``;
 export const CategoryIcon = styled(Category)``;
-export const DollarIcon = styled(Dollar)``;
+export const DollarIcon = styled(Dollar)``;
+export const MarketplaceIcon = styled(Marketplace)``;

src/components/Header/Drawer/Buttons/AdminPanelButton/AdminPanelButton.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { DrawerButton, DrawerOption } from "../../Drawer.styled";
+import { IconButton } from "../../../../Buttons/IconButton/IconButton";
+import history from "../../../../../store/utils/history";
+import { ADMIN_HOME_PAGE } from "../../../../../constants/pages";
+import { SettingsIcon } from "./AdminPanelButton.styled";
+
+const AdminPanelButton = (props) => {
+  const { t } = useTranslation();
+  const handleClick = () => {
+    props.toggleDrawer();
+    history.push(ADMIN_HOME_PAGE);
+  };
+  return (
+    <DrawerButton onClick={handleClick}>
+      <IconButton sx={{ borderRadius: "4px" }}>
+        <SettingsIcon />
+      </IconButton>
+      <DrawerOption>{t("profile.adminPanel")}</DrawerOption>
+    </DrawerButton>
+  );
+};
+
+AdminPanelButton.propTypes = {
+  toggleDrawer: PropTypes.func,
+};
+
+export default AdminPanelButton;

src/components/Header/Drawer/Buttons/AdminPanelButton/AdminPanelButton.styled.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { ReactComponent as Settings } from "../../../../../assets/images/svg/settings.svg";
+import selectedTheme from "../../../../../themes";
+
+export const SettingsIcon = styled(Settings)`
+  width: 24px;
+  height: 24px;
+  margin-right: 9px;
+  & path {
+    stroke: ${selectedTheme.colors.primaryYellow};
+  }
+`;

src/components/Header/Drawer/Drawer.js

@@ -21,12 +21,16 @@ import PricesButton from "./Buttons/PricesButton/PricesButton";
 import AboutButton from "./Buttons/AboutButton/AboutButton";
 import PrivacyPolicyButton from "./Buttons/PrivacyPolicyButton/PrivacyPolicyButton";
 import { useSelector } from "react-redux";
-import { selectUserId } from "../../../store/selectors/loginSelectors";
+import {
+  selectRoles,
+  selectUserId,
+} from "../../../store/selectors/loginSelectors";
 import { isAdminRoute } from "../../../util/helpers/routeHelpers";
 import { useLocation } from "react-router-dom";
 import AdminButtons from "./Buttons/AdminButtons/AdminButtons";
 import AdminInfo from "./AdminInfo/AdminInfo";
 import { selectMineProfile } from "../../../store/selectors/profileSelectors";
+import AdminPanelButton from "./Buttons/AdminPanelButton/AdminPanelButton";
 
 export const Drawer = (props) => {
   const { t } = useTranslation();
@@ -34,6 +38,8 @@ export const Drawer = (props) => {
   const mineProfile = useSelector(selectMineProfile);
   const location = useLocation();
   const isAdmin = useMemo(() => isAdminRoute(), [location.pathname]);
+  const role = useSelector(selectRoles);
+  const isUserAdmin = role?.includes("Admin");
 
   return (
     <DrawerContainer>
@@ -45,12 +51,15 @@ export const Drawer = (props) => {
         <ToolsContainer mobile isAdmin={isAdmin}>
           {user ? (
             isAdmin ? (
-              <AdminButtons toggleDrawer={props.toggleDrawer}/>
+              <AdminButtons toggleDrawer={props.toggleDrawer} />
             ) : (
               <>
                 <MyPostsButton toggleDrawer={props.toggleDrawer} />
                 <MyMessagesButton toggleDrawer={props.toggleDrawer} />
                 <MyProfileButton toggleDrawer={props.toggleDrawer} />
+                {isUserAdmin && (
+                  <AdminPanelButton toggleDrawer={props.toggleDrawer} />
+                )}
                 <Separator />
                 <PricesButton toggleDrawer={props.toggleDrawer} />
                 <AboutButton toggleDrawer={props.toggleDrawer} />
@@ -70,9 +79,7 @@ export const Drawer = (props) => {
             {isAdmin ? (
               <AdminInfo name={mineProfile?.company?.name} />
             ) : (
-              <AddOfferButton
-                toggleDrawer={props.toggleDrawer}
-              />
+              <AddOfferButton toggleDrawer={props.toggleDrawer} />
             )}
             <LogoutButton toggleDrawer={props.toggleDrawer} />
           </FooterButtons>

src/components/Header/Drawer/Drawer.styled.js

@@ -26,6 +26,10 @@ export const ToolsContainer = styled(Box)`
   bottom: 70px;
   left: ${(props) => (props.isAdmin ? "18px" : "36px")};
   gap: ${(props) => (props.isAdmin ? "0" : "26px")};
+
+  @media (max-width: 320px) {
+    gap: 6px;
+  }
 `;
 
 export const AuthButtonsDrawerContainer = styled(Box)`
@@ -35,8 +39,8 @@ export const AuthButtonsDrawerContainer = styled(Box)`
 
 export const CloseButton = styled(IconButton)`
   position: absolute;
-  top: 30px;
-  right: 36px;
+  top: 16px;
+  right: 18px;
   z-index: 1000;
 `;
 export const CloseIcon = styled(Close)`
@@ -82,6 +86,10 @@ export const HeaderTitle = styled(Typography)`
   position: absolute;
   top: 36px;
   left: 36px;
+
+  @media (max-width: 375px) {
+    top: 18px;
+  }
 `;
 export const Separator = styled(Box)`
   border-bottom: 1px solid ${selectedTheme.colors.primaryPurpleDisabled};

src/components/Header/DrawerContainer/DrawerContainer.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import useIsMobile from "../../../hooks/useIsMobile";
+// import useIsMobile from "../../../hooks/useIsMobile";
 import { Drawer as HeaderDrawer } from "../Drawer/Drawer";
 import Drawer from "../../MUI/DrawerComponent";
 import { useState } from "react";
@@ -9,7 +9,7 @@ import { useImperativeHandle } from "react";
 
 const DrawerContainer = forwardRef((props, ref) => {
   const [openDrawer, setOpenDrawer] = useState(false);
-  const { isMobile } = useIsMobile();
+  // const { isMobile } = useIsMobile();
 
   useImperativeHandle(ref, () => ({
     handleToggleDrawer,
@@ -18,7 +18,7 @@ const DrawerContainer = forwardRef((props, ref) => {
   const handleToggleDrawer = () => {
     setOpenDrawer((prevOpenDrawer) => !prevOpenDrawer);
   };
-  if (!isMobile) return <></>;
+  // if (!isMobile) return <></>;
   return (
     <Drawer
       open={openDrawer}

src/components/Header/Header.js

@@ -39,10 +39,10 @@ import MyMessagesButton from "./MyMessagesButton/MyMessagesButton";
 import UserButton from "./UserButton/UserButton";
 import LoginButton from "./LoginButton/LoginButton";
 import RegisterButton from "./RegisterButton/RegisterButton";
-import useIsMobile from "../../hooks/useIsMobile";
 import { toggleCreateOfferModal } from "../../store/actions/modal/modalActions";
 import { ReactComponent as Marketplace } from "../../assets/images/svg/package.svg";
 import { useTranslation } from "react-i18next";
+import useIsTablet from "../../hooks/useIsTablet";
 
 const Header = () => {
   const theme = useTheme();
@@ -56,14 +56,14 @@ const Header = () => {
   const drawerRef = useRef(null);
   const [shouldShow, setShouldShow] = useState(true);
   const routeMatch = useRouteMatch();
-  const { isMobile } = useIsMobile();
+  const { isTablet } = useIsTablet();
   const { t } = useTranslation();
 
   // Dont show header on auth routes(login, register, etc.) and admin routes
   useEffect(() => {
-    if (isAuthRoute() || (isAdminRoute() && !isMobile)) setShouldShow(false);
+    if (isAuthRoute() || (isAdminRoute() && !isTablet)) setShouldShow(false);
     else setShouldShow(true);
-  }, [routeMatch, isMobile]);
+  }, [routeMatch, isTablet]);
 
   // Fetch mine profile on loading home page
   useEffect(() => {

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/Category/CategoryDetail.styled.js

@@ -4,7 +4,6 @@ import selectedTheme from "../../../../../themes";
 import { Icon } from "../../../../Icon/Icon";
 import { ReactComponent as Location } from "../../../../../assets/images/svg/location.svg";
 
-
 export const DetailContainer = styled(Box)`
   display: flex;
   flex-direction: row;
@@ -15,8 +14,11 @@ export const DetailContainer = styled(Box)`
   line-height: 16px;
   margin-bottom: 7px;
   font-size: 12px;
-  @media (max-width: 600px) {
+  /* @media (max-width: 600px) {
     ${(props) => props.shouldHideResponsive && `display: none;`}
+  } */
+  @media (max-width: 600px) {
+    margin-bottom: 3px;
   }
 `;
 export const DetailIcon = styled(Icon)`
@@ -26,10 +28,16 @@ export const DetailIcon = styled(Icon)`
     width: 22px;
     position: relative;
   }
+  @media (max-width: 600px) {
+    & svg {
+      width: 14px;
+    }
+  }
 `;
 export const DetailText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
-  color: ${props => props.ismyprofile ? "white" : selectedTheme.colors.primaryText};
+  color: ${(props) =>
+    props.ismyprofile ? "white" : selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 16px;
   position: relative;
@@ -37,6 +45,4 @@ export const DetailText = styled(Typography)`
     font-size: 14px;
   }
 `;
-export const LocationIcon = styled(Location)`
-  
-`
+export const LocationIcon = styled(Location)``;

src/components/ItemDetails/ItemDetailsHeaderCard/OfferDetail/PIB/PIBDetail.styled.js

@@ -15,6 +15,7 @@ export const DetailContainer = styled(Box)`
   font-size: 12px;
   @media (max-width: 600px) {
     ${(props) => props.shouldHideResponsive && `display: none;`}
+    margin-bottom: 3px;
   }
 `;
 export const DetailIcon = styled(Icon)`
@@ -27,7 +28,8 @@ export const DetailIcon = styled(Icon)`
 `;
 export const DetailText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
-  color: ${props => props.isMyProfile ? "white" : selectedTheme.colors.primaryText};
+  color: ${(props) =>
+    props.isMyProfile ? "white" : selectedTheme.colors.primaryText};
   line-height: 16px;
   font-size: 16px;
   position: relative;
@@ -46,4 +48,4 @@ export const PIBIcon = styled(DetailIcon)`
       height: 14px;
     }
   }
-`;
+`;

src/components/Login/Login.js

@@ -10,8 +10,12 @@ import {
 import { selectLoginError } from "../../store/selectors/loginSelectors";
 import { HOME_PAGE, ADMIN_HOME_PAGE } from "../../constants/pages";
 import { ReactComponent as Logo } from "../../assets/images/svg/logo-vertical.svg";
-import { ReactComponent as LogoAdmin } from "../../assets/images/svg/logo-vertical-admin.svg";
-import { LoginPageContainer, LoginFormContainer } from "./Login.styled";
+// import { ReactComponent as LogoAdmin } from "../../assets/images/svg/logo-vertical-admin.svg";
+import {
+  LoginPageContainer,
+  LoginFormContainer,
+  LogoAdmin,
+} from "./Login.styled";
 import loginValidation from "../../validations/loginValidation";
 import loginInitialValues from "../../initialValues/loginInitialValues";
 import LoginTitle from "./Title/LoginTitle";
@@ -37,18 +41,19 @@ const Login = (props) => {
 
   // Api response callback function on success
   const handleApiResponseSuccess = () => {
-    props.isAdmin ? history.push({
-      pathname: ADMIN_HOME_PAGE,
-      state: {
-        from: history.location.pathname,
-      },
-    }) :
-    history.push({
-      pathname: HOME_PAGE,
-      state: {
-        from: history.location.pathname,
-      },
-    });
+    props.isAdmin
+      ? history.push({
+          pathname: ADMIN_HOME_PAGE,
+          state: {
+            from: history.location.pathname,
+          },
+        })
+      : history.push({
+          pathname: HOME_PAGE,
+          state: {
+            from: history.location.pathname,
+          },
+        });
   };
 
   // Resets password to blank field when there is need to
@@ -82,7 +87,7 @@ const Login = (props) => {
           password,
           handleApiResponseSuccess,
           handleApiResponseError,
-          isAdmin: props.isAdmin
+          isAdmin: props.isAdmin,
         })
       );
     }
@@ -111,18 +116,16 @@ const Login = (props) => {
 
   return (
     <LoginPageContainer>
-      {
-        props.isAdmin ? <LogoAdmin/> : <Logo/>
-      }
+      {props.isAdmin ? <LogoAdmin /> : <Logo />}
       <LoginTitle isAdmin={props.isAdmin} />
-      <LoginDescription isAdmin={props.isAdmin}/>
+      <LoginDescription isAdmin={props.isAdmin} />
       <LoginFormContainer component="form" onSubmit={handleSubmitForm}>
         <EmailField formik={formik} />
         <PasswordField formik={formik} ref={passwordRef} />
         <ErrorMessage formik={formik} />
-        {!props.isAdmin ? <ForgotPasswordLink/>:<></>}
+        {!props.isAdmin ? <ForgotPasswordLink /> : <></>}
         <LoginButton formik={formik} />
-        {!props.isAdmin ? <RegisterLink/>:<></>}
+        {!props.isAdmin ? <RegisterLink /> : <></>}
       </LoginFormContainer>
     </LoginPageContainer>
   );
@@ -136,6 +139,6 @@ Login.propTypes = {
       pathname: PropTypes.string,
     }),
   }),
-  isAdmin: PropTypes.bool
+  isAdmin: PropTypes.bool,
 };
 export default Login;

src/components/Login/Login.styled.js

@@ -1,5 +1,6 @@
-import { Box, Container } from "@mui/material";
 import styled from "styled-components";
+import { Box, Container } from "@mui/material";
+import { ReactComponent as AdminLogo } from "../../assets/images/svg/logo-vertical-admin.svg";
 
 export const LoginPageContainer = styled(Container)`
   margin-top: 150px;
@@ -12,8 +13,16 @@ export const LoginPageContainer = styled(Container)`
   @media (max-height: 800px) {
     margin-top: 70px;
   }
+  @media (max-width: 320px) {
+    margin-top: 30px;
+  }
 `;
+export const LogoAdmin = styled(AdminLogo)``;
 export const LoginFormContainer = styled(Box)`
   width: 335px;
   height: 216px;
+
+  @media (max-width: 320px) {
+    width: 100%;
+  }
 `;

src/components/MarketPlace/Header/Header.js

@@ -16,17 +16,18 @@ import {
 import { sortEnum } from "../../../enums/sortEnum";
 import { useTranslation } from "react-i18next";
 import SkeletonHeader from "./SkeletonHeader/SkeletonHeader";
-import useIsMobile from "../../../hooks/useIsMobile";
+import useIsTablet from "../../../hooks/useIsTablet";
 
 // import { ArrowButton } from "../../Buttons/ArrowButton/ArrowButton";
 import TooltipHeader from "./TooltipHeader/TooltipHeader";
 import GridButtons from "./GridButtons/GridButtons";
 import HeaderSelect from "./HeaderSelect/HeaderSelect";
+// import HeaderTitle from "../../Profile/ProfileOffers/HeaderTitle/HeaderTitle";
 
 const Header = (props) => {
   const { t } = useTranslation();
   const sorting = props?.sorting;
-  const { isMobile } = useIsMobile();
+  const { isTablet } = useIsTablet();
 
   // Changing header string on refresh or on load
   const altString = useMemo(() => {
@@ -52,12 +53,12 @@ const Header = (props) => {
       ? t("admin.subcategories.headerTitle")
       : props.location
       ? t("admin.locations.headerTitle")
-      : !isMobile
+      : !isTablet
       ? t("header.myOffers")
       : props.myOffers
       ? t("header.myOffers")
       : t("offer.offers");
-  }, [props, t, isMobile]);
+  }, [props, t, isTablet]);
   const headerIcon = useMemo(() => {
     return props.users ? (
       <UserIcon />
@@ -67,7 +68,7 @@ const Header = (props) => {
       <SubcategoryIcon />
     ) : props.location ? (
       <LocationIcon />
-    ) : isMobile ? (
+    ) : isTablet ? (
       <SwapsIcon />
     ) : (
       <SwapsHeaderIcon />
@@ -94,6 +95,7 @@ const Header = (props) => {
             myOffers={props?.myOffers}
             hideBackButton={props?.hideBackButton}
           />
+          {/* <HeaderTitle isMyProfile={props?.myOffers} /> */}
           {/* ^^^^^^ */}
 
           <HeaderOptions>
@@ -114,7 +116,7 @@ const Header = (props) => {
             {/* ^^^^^^ */}
           </HeaderOptions>
         </HeaderContainer>
-        {isMobile && (
+        {isTablet && (
           <PageTitleContainer>
             {headerIcon}
             <SwapsTitle>{headerTitle}</SwapsTitle>

src/components/MarketPlace/Header/Header.styled.js

@@ -25,6 +25,10 @@ export const HeaderOptions = styled(Box)`
   flex-direction: row;
   flex: 1;
   justify-content: end;
+
+  @media (max-width: 320px) {
+    width: 180px;
+  }
 `;
 
 export const IconStyled = styled(Box)`

src/components/MarketPlace/Header/HeaderSelect/HeaderSelect.js

@@ -19,6 +19,7 @@ const HeaderSelect = (props) => {
       }
       onChange={handleChangeSelect}
       myOffers={props?.myOffers}
+      isMyOffers={props?.isMyOffers}
     >
       <SelectOption style={{ display: "none" }} value="default">
         {t("reviews.sortBy")}
@@ -42,6 +43,7 @@ HeaderSelect.propTypes = {
   sorting: PropTypes.any,
   myOffers: PropTypes.bool,
   hideSorting: PropTypes.bool,
+  isMyOffers: PropTypes.bool,
 };
 HeaderSelect.defaultProps = {
   myOffers: false,

src/components/MarketPlace/Header/HeaderSelect/HeaderSelect.styled.js

@@ -13,18 +13,29 @@ export const HeaderSelectContainer = styled(Select)`
   position: relative;
   left: -5px;
   background-color: white;
-  display: ${(props) => props.hideSorting && "none"};
+  /* display: ${(props) => props.hideSorting && "none"}; */
   & div:first-child {
     padding-left: 8px;
   }
 
-  @media (max-width: 650px) {
+  ${(props) =>
+    !props.isMyOffers
+      ? `
+    @media (max-width: 600px) {
     width: 144px;
     height: 30px;
     font-size: 14px;
     top: 60px;
     left: ${(props) => (props.myOffers ? "-7px" : "0")};
   }
+  `
+      : `
+  @media (max-width: 600px) {
+    width: 144px;
+    height: 30px;
+    font-size: 14px;
+  }
+  `}
 `;
 export const SelectItem = styled(MenuItem)`
   font-family: ${selectedTheme.fonts.textFont};

src/components/MarketPlace/Header/TooltipHeader/TooltipHeader.styled.js

@@ -7,7 +7,7 @@ export const TooltipInnerContainer = styled(Box)`
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
+  /* text-overflow: ellipsis; */
   & * {
     display: inline;
   }

src/components/MarketPlace/MarketPlace.js

@@ -33,6 +33,7 @@ const MarketPlace = (props) => {
         isAdmin={props.isAdmin}
         users={props.users}
       />
+
       <Offers
         isGrid={isGrid}
         myOffers={props.myOffers}

src/components/MarketPlace/Offers/OffersFilterButton/OffersFilterButton.styled.js

@@ -19,10 +19,11 @@ export const FilterContainer = styled(IconWithNumber)`
     line-height: 15px;
     text-align: center;
   }
+
   @media (min-width: 600px) {
     display: none;
   }
 `;
 export const FilterIcon = styled(Filter)`
   background-color: ${selectedTheme.colors.primaryBackgroundColor};
-`;
+`;

src/components/Scroller/HorizontalScroller.styled.js

@@ -21,6 +21,10 @@ export const HorizontalScrollerContainer = styled(Box)`
   @media screen and (max-width: 480px) {
     width: 340px;
   }
+
+  @media screen and (max-width: 360px) {
+    width: 300px;
+  }
 `;
 export const Arrow = styled(IconButton)`
   border: 1px solid ${selectedTheme.colors.primaryPurple};

src/components/StepProgress/StepProgress.styled.js

@@ -20,6 +20,14 @@ export const StepProgressContainer = styled(Box)`
   @media (max-width: 600px) {
     margin-bottom: 0;
   }
+
+  @media (max-width: 360px) {
+    width: 100%;
+  }
+  @media (max-width: 345px) {
+    max-width: 300px;
+    margin: auto;
+  }
 `;
 
 export const StepLine = styled(Box)`

src/hooks/useIsTablet.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+function getScreenWidth() {
+  return window.innerWidth;
+}
+
+const useIsTablet = () => {
+  const [isTablet, setIsTablet] = useState(window.innerWidth < 900);
+  useEffect(() => {
+    const resize = () => {
+      if (getScreenWidth() < 900) {
+        setIsTablet(true);
+      } else {
+        setIsTablet(false);
+      }
+    };
+    window.addEventListener("resize", resize);
+    resize();
+    return () => window.removeEventListener("resize", resize);
+  }, []);
+  return { isTablet };
+};
+export default useIsTablet;

src/i18n/resources/rs.js

@@ -331,6 +331,7 @@ export default {
     mineProfileBlocked: "Vaš profil je trenutno blokiran.",
     deletedProfile: "Obrisan profil",
     admin: "Administrator",
+    adminPanel: "Admin Panel",
   },
   about: {
     header: {

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

@@ -6,7 +6,7 @@ import SearchField from "../../../components/TextFields/SearchField/SearchField"
 
 export const AdminCategoriesPageContainer = styled(Box)`
   padding: 60px;
-  padding-top: 38px; 
+  padding-top: 38px;
   min-height: 100vh;
   padding-bottom: 100px;
   position: relative;
@@ -34,6 +34,11 @@ export const AdminCategoriesHeader = styled(Header)`
 `;
 export const AdminCategoriesSearchField = styled(SearchField)`
   top: -15px;
+
+  @media (max-width: 900px) {
+    margin-top: 72px;
+  }
+
   @media (max-width: 600px) {
     display: none;
   }
@@ -51,7 +56,7 @@ export const NewCategoryButton = styled(PrimaryButton)`
     bottom: 18px;
     right: 16px;
   }
-`
+`;
 export const CategoriesList = styled(Box)`
   /* padding-top: 10px */
-`
+`;

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

@@ -33,10 +33,15 @@ export const AdminLocationsHeader = styled(Header)`
   }
 `;
 export const LocationsList = styled(Box)`
-    padding-top: 10px;
-`
+  padding-top: 10px;
+`;
 export const AdminLocationsSearchField = styled(SearchField)`
   top: -15px;
+
+  @media (max-width: 900px) {
+    margin-top: 72px;
+  }
+
   @media (max-width: 600px) {
     display: none;
   }

src/pages/AdminHomePage/AdminUsersPage/AdminUsersPage.js

@@ -37,7 +37,7 @@ const AdminUsersPage = () => {
       fetchAllProfilesAsAdmin({
         currentPage: paging.currentPage,
         searchValue: searchValue,
-        sortOption: sorting.selectedSortOptionLocally
+        sortOption: sorting.selectedSortOptionLocally,
       })
     );
   }, [paging.currentPage, searchValue, sorting.selectedSortOptionLocally]);

src/pages/AdminHomePage/AdminUsersPage/AdminUsersPage.styled.js

@@ -37,6 +37,11 @@ export const AdminUsersHeader = styled(Header)`
 `;
 export const AdminUsersSearchField = styled(SearchField)`
   top: -15px;
+
+  @media (max-width: 900px) {
+    margin-top: 72px;
+  }
+
   @media (max-width: 600px) {
     display: none;
   }

src/pages/ForgotPasswordPage/ForgotPassword.styled.js

@@ -44,6 +44,10 @@ export const ForgotPasswordDescription = styled(Typography)`
 export const FormContainer = styled(Box)`
   width: 335px;
   height: 216px;
+
+  @media (max-width: 345px) {
+    width: 300px;
+  }
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
@@ -51,7 +55,7 @@ export const ErrorMessage = styled(Typography)`
   position: relative;
   top: -7px;
   font-size: 14px;
-`
+`;
 export const LoginAltText = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   color: ${selectedTheme.colors.primaryText};

src/pages/RegisterPages/Register/FirstPart/FirstPartOfRegistration.styled.js

@@ -4,6 +4,10 @@ import selectedTheme from "../../../../themes";
 
 export const FormContainer = styled.form`
   width: 335px;
+
+  @media (max-width: 345px) {
+    width: 300px;
+  }
 `;
 export const RegisterDescription = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -22,7 +26,6 @@ export const RegisterDescription = styled(Typography)`
   @media (max-height: 800px) {
     margin-top: 14px;
   }
-  
 `;
 export const ErrorMessage = styled(Typography)`
   color: red;
@@ -30,4 +33,4 @@ export const ErrorMessage = styled(Typography)`
   position: relative;
   top: -7px;
   font-size: 14px;
-`
+`;

src/pages/RegisterPages/Register/SecondPart/SecondPartOfRegistration.styled.js

@@ -2,9 +2,12 @@ import { Typography } from "@mui/material";
 import styled from "styled-components";
 import selectedTheme from "../../../../themes";
 
-
 export const FormContainer = styled.form`
   width: 335px;
+
+  @media (max-width: 345px) {
+    width: 300px;
+  }
 `;
 export const RegisterDescription = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -30,4 +33,4 @@ export const ErrorMessage = styled(Typography)`
   position: relative;
   top: -7px;
   font-size: 14px;
-`
+`;

src/pages/RegisterPages/Register/ThirdPart/ThirdPartOfRegistration.styled.js

@@ -4,6 +4,10 @@ import selectedTheme from "../../../../themes";
 
 export const FormContainer = styled.form`
   width: 335px;
+
+  @media (max-width: 345px) {
+    width: 300px;
+  }
 `;
 export const RegisterDescription = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
@@ -23,4 +27,3 @@ export const RegisterDescription = styled(Typography)`
     margin-top: 14px;
   }
 `;
-