Fixed design bugs

src/components/Cards/OfferCard/CheckButton/CheckButton.styled.js

@@ -12,7 +12,7 @@ export const CheckButtonContainer = styled(PrimaryButton)`
     background-color: ${selectedTheme.colors.primaryPurple} !important;
     color: white !important;
   }
-  @media (max-width: 650px) {
+  @media (max-width: 1150px) {
     display: none;
   }
-`;
+`;

src/components/Cards/OfferCard/OfferCard.styled.js

@@ -123,7 +123,7 @@ export const OfferTitle = styled(Typography)`
 
     `}
   }
-  @media (max-width: 760px) {
+  @media (max-width: 800px) {
     margin-bottom: 16px;
   }
 `;
@@ -166,11 +166,11 @@ export const OfferDetails = styled(Box)`
   flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")};
   justify-content: start;
   gap: 1rem;
-  @media (max-width: 1150px) {
+  /* @media (max-width: 1150px) {
     flex-direction: column;
     justify-content: center;
     gap: 0;
-  }
+  } */
   @media (max-width: 900px) {
     gap: 1rem;
     justify-content: start;

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

@@ -20,10 +20,11 @@ export const ProfileContactContainer = styled(Grid)`
   }
   @media (max-width: 600px) {
     ${(props) => props.isAdmin && `overflow: hidden;`}
-    padding-top: ${(props) => props.isAdmin && (props.bigProfileCard ? "88px" : "58px")};
+    padding-top: ${(props) =>
+      props.isAdmin && (props.bigProfileCard ? "88px" : "58px")};
     padding-bottom: ${(props) => (props.isAdmin ? "1rem" : "0")};
     gap: 5px;
-    width: ${props => props.bigProfileCard && 'calc(100vw - 198px)'};
+    width: ${(props) => props.bigProfileCard && "calc(100vw - 198px)"};
   }
 `;
 export const LocationIcon = styled(Location)`
@@ -49,16 +50,19 @@ export const ContactItem = styled(Typography)`
   font-family: ${selectedTheme.fonts.textFont};
   letter-spacing: 0.02em;
   font-size: 16px;
+  font-weight: 400;
   position: relative;
   bottom: 1px;
   @media (max-width: 600px) {
     font-size: 14px;
     bottom: 4px;
     margin-right: 0;
-    ${props => props.bigProfileCard && css`
-      width: calc(100vw - 218px);
-      overflow-wrap: break-word;
-    `}
+    ${(props) =>
+      props.bigProfileCard &&
+      css`
+        width: calc(100vw - 218px);
+        overflow-wrap: break-word;
+      `}
   }
 `;
 export const MailIcon = styled(Mail)`

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

@@ -60,9 +60,11 @@ export const ProfileMainInfoGrid = styled(Grid)`
   margin-left: 16px;
   @media (max-width: 600px) {
     margin-left: 0;
-    ${props => props.bigProfileCard && css`
-      width: calc(100vw - 196px);
-    `}
+    ${(props) =>
+      props.bigProfileCard &&
+      css`
+        width: calc(100vw - 196px);
+      `}
   }
 `;
 export const ProfileName = styled(Typography)`
@@ -133,6 +135,7 @@ export const ProfilePIB = styled(Typography)`
   margin-top: 0.18rem;
   font-family: ${selectedTheme.fonts.textFont};
   font-size: 16px;
+  font-weight: 400;
   padding-top: 1px;
   white-space: nowrap;
   @media (max-width: 600px) {

src/components/Header/DrawerContainer/DrawerContainer.js

@@ -10,8 +10,7 @@ import { useImperativeHandle } from "react";
 const DrawerContainer = forwardRef((props, ref) => {
   const [openDrawer, setOpenDrawer] = useState(false);
   const { isMobile } = useIsMobile();
-  console.log("openDrawer", openDrawer)
-  console.log("isMobile", isMobile)
+
   useImperativeHandle(ref, () => ({
     handleToggleDrawer,
   }));
@@ -24,11 +23,7 @@ const DrawerContainer = forwardRef((props, ref) => {
     <Drawer
       open={openDrawer}
       toggleOpen={handleToggleDrawer}
-      content={
-        <HeaderDrawer
-          toggleDrawer={handleToggleDrawer}
-        />
-      }
+      content={<HeaderDrawer toggleDrawer={handleToggleDrawer} />}
     />
   );
 });

src/components/Header/Header.js

@@ -107,6 +107,7 @@ const Header = () => {
           logo: true,
         },
       });
+      searchRef.current.value = "";
     }
   };
 

src/components/ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard.styled.js

@@ -14,7 +14,11 @@ export const ItemDetailsHeaderContainer = styled(Box)`
   background-color: ${(props) =>
     props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"};
   border-radius: 4px;
-  border: 1px solid ${selectedTheme.colors.primaryPurple};
+  border: 1px solid
+    ${(props) =>
+      props.isMyProfile
+        ? selectedTheme.colors.primaryPurple
+        : selectedTheme.colors.borderNormal};
   max-width: 2000px;
   position: relative;
 

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

@@ -40,6 +40,9 @@ export const CircleGroup = styled(Box)`
   position: relative;
   top: -3px;
   margin-right: 46px;
+  @media (max-width: 1500px) {
+    display: none;
+  }
   @media (max-width: 600px) {
     margin-right: 0;
   }

src/components/ProfileMini/ProfileMini.js

@@ -3,13 +3,14 @@ import {
   ProfileHeader,
   ProfileHeaderIconContainer,
   ProfileHeaderText,
+  ProfileMiniHeader,
   ProfileMiniStats,
 } from "./ProfileMini.styled";
 import { useSelector } from "react-redux";
 import { selectOffer } from "../../store/selectors/offersSelectors";
 import { selectUserId } from "../../store/selectors/loginSelectors";
 import { ReactComponent as ProfileIcon } from "../../assets/images/svg/user-gray.svg";
-import ItemDetailsHeaderCard from "../ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard";
+// import ItemDetailsHeaderCard from "../ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard";
 import { useTranslation } from "react-i18next";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini";
@@ -40,7 +41,7 @@ const ProfileMini = () => {
                 : t("profile.companyProfile")}
             </ProfileHeaderText>
           </ProfileHeaderIconContainer>
-          <ItemDetailsHeaderCard
+          <ProfileMiniHeader
             offer={offer}
             isMyProfile={isMyProfile}
             singleOffer
@@ -50,6 +51,7 @@ const ProfileMini = () => {
             percentOfSucceededExchanges={
               offer.companyData?.statistics?.exchanges?.total
             }
+            isMyProfile={isMyProfile}
           />
         </ProfileHeader>
       )}

src/components/ProfileMini/ProfileMini.styled.js

@@ -3,6 +3,7 @@ import { Box } from "@mui/system";
 import { Typography } from "@mui/material";
 import selectedTheme from "../../themes";
 import ProfileStats from "../Cards/ProfileCard/ProfileStats/ProfileStats";
+import ItemDetailsHeaderCard from "../ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard";
 
 export const ProfileHeader = styled(Box)`
   margin-top: 60px;
@@ -36,6 +37,7 @@ export const ProfileHeaderText = styled(Typography)`
     font-size: 12px;
   }
 `;
+export const ProfileMiniHeader = styled(ItemDetailsHeaderCard)``;
 export const ProfileMiniStats = styled(ProfileStats)`
   position: relative;
   width: 100%;
@@ -43,7 +45,21 @@ export const ProfileMiniStats = styled(ProfileStats)`
   margin-top: -1rem;
   margin-bottom: 36px;
   border-radius: 0 0 4px 4px;
-  border: 1px solid ${selectedTheme.colors.primaryPurple};
+  border-left: 1px solid
+    ${(props) =>
+      props.isMyProfile
+        ? selectedTheme.colors.primaryPurple
+        : selectedTheme.colors.borderNormal};
+  border-right: 1px solid
+    ${(props) =>
+      props.isMyProfile
+        ? selectedTheme.colors.primaryPurple
+        : selectedTheme.colors.borderNormal};
+  border-bottom: 1px solid
+    ${(props) =>
+      props.isMyProfile
+        ? selectedTheme.colors.primaryPurple
+        : selectedTheme.colors.borderNormal};
 
   @media (max-width: 600px) {
     width: calc(100vw - 36px);

src/components/UserReviews/NoReviews/UserReviewsSkeleton/UserReviewsSkeleton.styled.js

@@ -35,7 +35,6 @@ export const UserReviewsSkeletonContainer = styled(Box)`
 `;
 export const UserReviewsSkeletonItemsContainer = styled(Box)`
   width: 100%;
-  padding: 36px;
 `;
 export const UserReviewsSkeletonLine = styled(Box)`
   display: flex;

src/hooks/useOffers/useOffers.js

@@ -119,12 +119,9 @@ const useOffers = () => {
   }, [offers, pinnedOffers]);
 
   useEffect(() => {
-    console.log("useeff", filtersCleared);
     if (filtersCleared) {
-      console.log("useeff unutra");
       setFiltersCleared(false);
       apply();
-      console.log("posle useeff");
     }
   }, [filtersCleared]);
 
@@ -151,12 +148,12 @@ const useOffers = () => {
   const applySorting = () => {
     paging.changePage(1);
     setFiltersCleared(true);
-  }
+  };
 
   const applySearch = () => {
     paging.changePage(1);
     setFiltersCleared(true);
-  }
+  };
 
   // Those hooks are below becouse function apply cannot be put on props before initialization
   const sorting = useSorting(applySorting);