| background-color: ${selectedTheme.colors.primaryPurple} !important; | background-color: ${selectedTheme.colors.primaryPurple} !important; | ||||
| color: white !important; | color: white !important; | ||||
| } | } | ||||
| @media (max-width: 650px) { | |||||
| @media (max-width: 1150px) { | |||||
| display: none; | display: none; | ||||
| } | } | ||||
| `; | |||||
| `; |
| `} | `} | ||||
| } | } | ||||
| @media (max-width: 760px) { | |||||
| @media (max-width: 800px) { | |||||
| margin-bottom: 16px; | margin-bottom: 16px; | ||||
| } | } | ||||
| `; | `; | ||||
| flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")}; | flex-wrap: ${(props) => (!props.halfwidth ? "no-wrap" : "wrap")}; | ||||
| justify-content: start; | justify-content: start; | ||||
| gap: 1rem; | gap: 1rem; | ||||
| @media (max-width: 1150px) { | |||||
| /* @media (max-width: 1150px) { | |||||
| flex-direction: column; | flex-direction: column; | ||||
| justify-content: center; | justify-content: center; | ||||
| gap: 0; | gap: 0; | ||||
| } | |||||
| } */ | |||||
| @media (max-width: 900px) { | @media (max-width: 900px) { | ||||
| gap: 1rem; | gap: 1rem; | ||||
| justify-content: start; | justify-content: start; |
| } | } | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| ${(props) => props.isAdmin && `overflow: hidden;`} | ${(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")}; | padding-bottom: ${(props) => (props.isAdmin ? "1rem" : "0")}; | ||||
| gap: 5px; | gap: 5px; | ||||
| width: ${props => props.bigProfileCard && 'calc(100vw - 198px)'}; | |||||
| width: ${(props) => props.bigProfileCard && "calc(100vw - 198px)"}; | |||||
| } | } | ||||
| `; | `; | ||||
| export const LocationIcon = styled(Location)` | export const LocationIcon = styled(Location)` | ||||
| font-family: ${selectedTheme.fonts.textFont}; | font-family: ${selectedTheme.fonts.textFont}; | ||||
| letter-spacing: 0.02em; | letter-spacing: 0.02em; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| font-weight: 400; | |||||
| position: relative; | position: relative; | ||||
| bottom: 1px; | bottom: 1px; | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| font-size: 14px; | font-size: 14px; | ||||
| bottom: 4px; | bottom: 4px; | ||||
| margin-right: 0; | 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)` | export const MailIcon = styled(Mail)` |
| margin-left: 16px; | margin-left: 16px; | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| margin-left: 0; | margin-left: 0; | ||||
| ${props => props.bigProfileCard && css` | |||||
| width: calc(100vw - 196px); | |||||
| `} | |||||
| ${(props) => | |||||
| props.bigProfileCard && | |||||
| css` | |||||
| width: calc(100vw - 196px); | |||||
| `} | |||||
| } | } | ||||
| `; | `; | ||||
| export const ProfileName = styled(Typography)` | export const ProfileName = styled(Typography)` | ||||
| margin-top: 0.18rem; | margin-top: 0.18rem; | ||||
| font-family: ${selectedTheme.fonts.textFont}; | font-family: ${selectedTheme.fonts.textFont}; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| font-weight: 400; | |||||
| padding-top: 1px; | padding-top: 1px; | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { |
| const DrawerContainer = forwardRef((props, ref) => { | const DrawerContainer = forwardRef((props, ref) => { | ||||
| const [openDrawer, setOpenDrawer] = useState(false); | const [openDrawer, setOpenDrawer] = useState(false); | ||||
| const { isMobile } = useIsMobile(); | const { isMobile } = useIsMobile(); | ||||
| console.log("openDrawer", openDrawer) | |||||
| console.log("isMobile", isMobile) | |||||
| useImperativeHandle(ref, () => ({ | useImperativeHandle(ref, () => ({ | ||||
| handleToggleDrawer, | handleToggleDrawer, | ||||
| })); | })); | ||||
| <Drawer | <Drawer | ||||
| open={openDrawer} | open={openDrawer} | ||||
| toggleOpen={handleToggleDrawer} | toggleOpen={handleToggleDrawer} | ||||
| content={ | |||||
| <HeaderDrawer | |||||
| toggleDrawer={handleToggleDrawer} | |||||
| /> | |||||
| } | |||||
| content={<HeaderDrawer toggleDrawer={handleToggleDrawer} />} | |||||
| /> | /> | ||||
| ); | ); | ||||
| }); | }); |
| logo: true, | logo: true, | ||||
| }, | }, | ||||
| }); | }); | ||||
| searchRef.current.value = ""; | |||||
| } | } | ||||
| }; | }; | ||||
| background-color: ${(props) => | background-color: ${(props) => | ||||
| props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"}; | props.isMyProfile ? selectedTheme.colors.primaryPurple : "white"}; | ||||
| border-radius: 4px; | border-radius: 4px; | ||||
| border: 1px solid ${selectedTheme.colors.primaryPurple}; | |||||
| border: 1px solid | |||||
| ${(props) => | |||||
| props.isMyProfile | |||||
| ? selectedTheme.colors.primaryPurple | |||||
| : selectedTheme.colors.borderNormal}; | |||||
| max-width: 2000px; | max-width: 2000px; | ||||
| position: relative; | position: relative; | ||||
| position: relative; | position: relative; | ||||
| top: -3px; | top: -3px; | ||||
| margin-right: 46px; | margin-right: 46px; | ||||
| @media (max-width: 1500px) { | |||||
| display: none; | |||||
| } | |||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| margin-right: 0; | margin-right: 0; | ||||
| } | } |
| ProfileHeader, | ProfileHeader, | ||||
| ProfileHeaderIconContainer, | ProfileHeaderIconContainer, | ||||
| ProfileHeaderText, | ProfileHeaderText, | ||||
| ProfileMiniHeader, | |||||
| ProfileMiniStats, | ProfileMiniStats, | ||||
| } from "./ProfileMini.styled"; | } from "./ProfileMini.styled"; | ||||
| import { useSelector } from "react-redux"; | import { useSelector } from "react-redux"; | ||||
| import { selectOffer } from "../../store/selectors/offersSelectors"; | import { selectOffer } from "../../store/selectors/offersSelectors"; | ||||
| import { selectUserId } from "../../store/selectors/loginSelectors"; | import { selectUserId } from "../../store/selectors/loginSelectors"; | ||||
| import { ReactComponent as ProfileIcon } from "../../assets/images/svg/user-gray.svg"; | 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 { useTranslation } from "react-i18next"; | ||||
| import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; | import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; | ||||
| import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini"; | import SkeletonProfileMini from "./SkeletonProfileMini/SkeletonProfileMini"; | ||||
| : t("profile.companyProfile")} | : t("profile.companyProfile")} | ||||
| </ProfileHeaderText> | </ProfileHeaderText> | ||||
| </ProfileHeaderIconContainer> | </ProfileHeaderIconContainer> | ||||
| <ItemDetailsHeaderCard | |||||
| <ProfileMiniHeader | |||||
| offer={offer} | offer={offer} | ||||
| isMyProfile={isMyProfile} | isMyProfile={isMyProfile} | ||||
| singleOffer | singleOffer | ||||
| percentOfSucceededExchanges={ | percentOfSucceededExchanges={ | ||||
| offer.companyData?.statistics?.exchanges?.total | offer.companyData?.statistics?.exchanges?.total | ||||
| } | } | ||||
| isMyProfile={isMyProfile} | |||||
| /> | /> | ||||
| </ProfileHeader> | </ProfileHeader> | ||||
| )} | )} |
| import { Typography } from "@mui/material"; | import { Typography } from "@mui/material"; | ||||
| import selectedTheme from "../../themes"; | import selectedTheme from "../../themes"; | ||||
| import ProfileStats from "../Cards/ProfileCard/ProfileStats/ProfileStats"; | import ProfileStats from "../Cards/ProfileCard/ProfileStats/ProfileStats"; | ||||
| import ItemDetailsHeaderCard from "../ItemDetails/ItemDetailsHeaderCard/ItemDetailsHeaderCard"; | |||||
| export const ProfileHeader = styled(Box)` | export const ProfileHeader = styled(Box)` | ||||
| margin-top: 60px; | margin-top: 60px; | ||||
| font-size: 12px; | font-size: 12px; | ||||
| } | } | ||||
| `; | `; | ||||
| export const ProfileMiniHeader = styled(ItemDetailsHeaderCard)``; | |||||
| export const ProfileMiniStats = styled(ProfileStats)` | export const ProfileMiniStats = styled(ProfileStats)` | ||||
| position: relative; | position: relative; | ||||
| width: 100%; | width: 100%; | ||||
| margin-top: -1rem; | margin-top: -1rem; | ||||
| margin-bottom: 36px; | margin-bottom: 36px; | ||||
| border-radius: 0 0 4px 4px; | 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) { | @media (max-width: 600px) { | ||||
| width: calc(100vw - 36px); | width: calc(100vw - 36px); |
| `; | `; | ||||
| export const UserReviewsSkeletonItemsContainer = styled(Box)` | export const UserReviewsSkeletonItemsContainer = styled(Box)` | ||||
| width: 100%; | width: 100%; | ||||
| padding: 36px; | |||||
| `; | `; | ||||
| export const UserReviewsSkeletonLine = styled(Box)` | export const UserReviewsSkeletonLine = styled(Box)` | ||||
| display: flex; | display: flex; |
| }, [offers, pinnedOffers]); | }, [offers, pinnedOffers]); | ||||
| useEffect(() => { | useEffect(() => { | ||||
| console.log("useeff", filtersCleared); | |||||
| if (filtersCleared) { | if (filtersCleared) { | ||||
| console.log("useeff unutra"); | |||||
| setFiltersCleared(false); | setFiltersCleared(false); | ||||
| apply(); | apply(); | ||||
| console.log("posle useeff"); | |||||
| } | } | ||||
| }, [filtersCleared]); | }, [filtersCleared]); | ||||
| const applySorting = () => { | const applySorting = () => { | ||||
| paging.changePage(1); | paging.changePage(1); | ||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| } | |||||
| }; | |||||
| const applySearch = () => { | const applySearch = () => { | ||||
| paging.changePage(1); | paging.changePage(1); | ||||
| setFiltersCleared(true); | setFiltersCleared(true); | ||||
| } | |||||
| }; | |||||
| // Those hooks are below becouse function apply cannot be put on props before initialization | // Those hooks are below becouse function apply cannot be put on props before initialization | ||||
| const sorting = useSorting(applySorting); | const sorting = useSorting(applySorting); |