| border-top-right-radius: 4px; | border-top-right-radius: 4px; | ||||
| height: ${(props) => | height: ${(props) => | ||||
| props.myOffers ? `calc(100% - 153px)` : `calc(100% - 90px)`}; | props.myOffers ? `calc(100% - 153px)` : `calc(100% - 90px)`}; | ||||
| padding: ${props => props.skeleton ? "0" : "36px"}; | |||||
| padding: ${(props) => (props.skeleton ? "0" : "36px")}; | |||||
| background-color: white; | background-color: white; | ||||
| width: calc(100% / 12 * 3.5); | width: calc(100% / 12 * 3.5); | ||||
| left: 0; | left: 0; | ||||
| transition: all ease-in-out 0.36s; | transition: all ease-in-out 0.36s; | ||||
| } | } | ||||
| & * { | & * { | ||||
| ${props => props.skeleton && 'display: none;'} | |||||
| ${(props) => props.skeleton && "display: none;"} | |||||
| } | } | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| margin-top: -14px; | margin-top: -14px; | ||||
| margin-bottom: 1.8rem; | margin-bottom: 1.8rem; | ||||
| &::-webkit-scrollbar { | &::-webkit-scrollbar { | ||||
| width: 5px; | width: 5px; | ||||
| height: 5px; | |||||
| } | } | ||||
| &::-webkit-scrollbar-track { | &::-webkit-scrollbar-track { | ||||
| background: #ddd; | background: #ddd; | ||||
| scrollbar-color: #ddd; | scrollbar-color: #ddd; | ||||
| ${() => window.scrollbars.visible && `padding-right: 15px`}; | ${() => window.scrollbars.visible && `padding-right: 15px`}; | ||||
| `; | `; | ||||
| `; | `; | ||||
| export const ClearText = styled(Box)` | export const ClearText = styled(Box)` | ||||
| padding-top: 1px; | |||||
| border-radius: 100%; | |||||
| cursor: pointer; | |||||
| padding-right: 2px; | |||||
| position: relative; | |||||
| left: 6px; | |||||
| width: 21px; | |||||
| height: 21px; | |||||
| &:hover { | |||||
| background-color: ${selectedTheme.colors.primaryIconBackgroundColor}; | |||||
| } | |||||
| ` | |||||
| padding-top: 1px; | |||||
| border-radius: 100%; | |||||
| cursor: pointer; | |||||
| padding-right: 2px; | |||||
| position: relative; | |||||
| left: 6px; | |||||
| width: 21px; | |||||
| height: 21px; | |||||
| &:hover { | |||||
| background-color: ${selectedTheme.colors.primaryIconBackgroundColor}; | |||||
| } | |||||
| `; | |||||
| export const SearchBar = styled(TextField)` | export const SearchBar = styled(TextField)` | ||||
| & div { | & div { | ||||
| background-color: white; | background-color: white; | ||||
| } | } | ||||
| ` | |||||
| `; |
| import selectedTheme from "../../themes"; | import selectedTheme from "../../themes"; | ||||
| export const LabelContainer = styled(Box)` | export const LabelContainer = styled(Box)` | ||||
| display: flex; | |||||
| flex: 1; | |||||
| justify-content: space-between; | |||||
| max-width: ${props => props.maxWidth}; | |||||
| ` | |||||
| display: flex; | |||||
| flex: 1; | |||||
| justify-content: space-between; | |||||
| max-width: ${(props) => props.maxWidth}; | |||||
| `; | |||||
| export const LeftLabel = styled(FormLabel)` | export const LeftLabel = styled(FormLabel)` | ||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| max-width: 200px; | |||||
| flex: 1; | |||||
| cursor: pointer; | |||||
| color: ${selectedTheme.colors.primaryText}; | |||||
| ` | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| max-width: 200px; | |||||
| flex: 1; | |||||
| cursor: pointer; | |||||
| color: ${selectedTheme.colors.primaryText}; | |||||
| `; | |||||
| export const RightLabel = styled(FormLabel)` | export const RightLabel = styled(FormLabel)` | ||||
| margin-left: 10px; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| max-width: 100px; | |||||
| cursor: pointer; | |||||
| color: ${selectedTheme.colors.primaryText}; | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| ` | |||||
| margin-left: 10px; | |||||
| margin-right: 10px; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| white-space: nowrap; | |||||
| max-width: 100px; | |||||
| cursor: pointer; | |||||
| color: ${selectedTheme.colors.primaryText}; | |||||
| font-family: ${selectedTheme.fonts.textFont}; | |||||
| `; |
| const closeModalHandler = () => { | const closeModalHandler = () => { | ||||
| dispatch(closeModal()); | dispatch(closeModal()); | ||||
| }; | }; | ||||
| setTimeout(() => { | |||||
| dispatch(closeModal()); | |||||
| }, 3000); | |||||
| const handleApiResponseSuccess = () => { | const handleApiResponseSuccess = () => { | ||||
| dispatch(fetchExchange(props.exchange._id)); | dispatch(fetchExchange(props.exchange._id)); | ||||
| }; | }; |
| font-weight: 700; | font-weight: 700; | ||||
| color: ${selectedTheme.colors.primaryPurple}; | color: ${selectedTheme.colors.primaryPurple}; | ||||
| @media (max-width: 1370px) { | |||||
| line-height: 1.2; | |||||
| } | |||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| font-size: 36px; | font-size: 36px; | ||||
| } | } |
| bottom: 15px; | bottom: 15px; | ||||
| padding-left: 0; | padding-left: 0; | ||||
| padding-right: 0; | padding-right: 0; | ||||
| margin: auto; | |||||
| margin: -10px auto; | |||||
| left: 0; | left: 0; | ||||
| right: 0; | right: 0; | ||||
| `; | `; | ||||
| } | } | ||||
| `} | `} | ||||
| @media (max-width: 600px) { | |||||
| width: 30px; | |||||
| min-width: 30px; | |||||
| height: 30px; | |||||
| padding-top: 5px; | |||||
| padding-left: 5px; | |||||
| } | |||||
| @media (max-width: 600px) { | |||||
| width: 30px; | |||||
| min-width: 30px; | |||||
| height: 30px; | |||||
| padding-top: 5px; | |||||
| padding-left: 5px; | |||||
| } | |||||
| `; | `; | ||||
| export const PageNumber = styled(Box)` | export const PageNumber = styled(Box)` | ||||
| color: ${(props) => (!props.current ? selectedTheme.colors.primaryPurple : "white")}; | |||||
| color: ${(props) => | |||||
| !props.current ? selectedTheme.colors.primaryPurple : "white"}; | |||||
| font-weight: 600; | font-weight: 600; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| line-height: 18px; | line-height: 18px; | ||||
| width: 40px !important; | width: 40px !important; | ||||
| margin: 5px; | margin: 5px; | ||||
| padding-top: 10px; | padding-top: 10px; | ||||
| background-color: ${(props) => props.current && selectedTheme.colors.primaryPurple}; | |||||
| background-color: ${(props) => | |||||
| props.current && selectedTheme.colors.primaryPurple}; | |||||
| border-radius: 100%; | border-radius: 100%; | ||||
| position: relative; | position: relative; | ||||
| top: 1px; | top: 1px; | ||||
| } | } | ||||
| `; | `; | ||||
| export const ThreeDots = styled(Box)` | export const ThreeDots = styled(Box)` | ||||
| color: ${(props) => (!props.current ? selectedTheme.colors.primaryPurple : "white")}; | |||||
| color: ${(props) => | |||||
| !props.current ? selectedTheme.colors.primaryPurple : "white"}; | |||||
| font-weight: 600; | font-weight: 600; | ||||
| font-size: 16px; | font-size: 16px; | ||||
| line-height: 18px; | line-height: 18px; | ||||
| width: 40px !important; | width: 40px !important; | ||||
| margin: 5px; | margin: 5px; | ||||
| padding-top: 10px; | padding-top: 10px; | ||||
| background-color: ${(props) => props.current && selectedTheme.colors.primaryPurple}; | |||||
| background-color: ${(props) => | |||||
| props.current && selectedTheme.colors.primaryPurple}; | |||||
| border-radius: 100%; | border-radius: 100%; | ||||
| position: relative; | position: relative; | ||||
| top: 1px; | top: 1px; | ||||
| font-size: 14px; | font-size: 14px; | ||||
| margin: 1px; | margin: 1px; | ||||
| } | } | ||||
| ` | |||||
| `; |
| color: ${selectedTheme.colors.primaryPurple}; | color: ${selectedTheme.colors.primaryPurple}; | ||||
| text-decoration: underline; | text-decoration: underline; | ||||
| cursor: pointer; | cursor: pointer; | ||||
| vertical-align: unset; | |||||
| `; | `; | ||||
| export const PostsNotFoundSkeleton = styled(Box)` | export const PostsNotFoundSkeleton = styled(Box)` |
| import { useTranslation } from "react-i18next"; | import { useTranslation } from "react-i18next"; | ||||
| const PhonePopover = (props) => { | const PhonePopover = (props) => { | ||||
| const {t} = useTranslation(); | |||||
| const { t } = useTranslation(); | |||||
| return ( | return ( | ||||
| <PhonePopoverContainer> | <PhonePopoverContainer> | ||||
| <Arrow /> | <Arrow /> |