| {props.profile?.company?.contacts?.location && ( | {props.profile?.company?.contacts?.location && ( | ||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <LocationIcon isMyProfile={props.isMyProfile} /> | <LocationIcon isMyProfile={props.isMyProfile} /> | ||||
| <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2"> | |||||
| <ContactItem | |||||
| isAdmin={props.isAdmin} | |||||
| isMyProfile={props.isMyProfile} | |||||
| variant="subtitle2" | |||||
| > | |||||
| {props.profile?.company?.contacts?.location} | {props.profile?.company?.contacts?.location} | ||||
| </ContactItem> | </ContactItem> | ||||
| </Stack> | </Stack> | ||||
| )} | )} | ||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <MailIcon isMyProfile={props.isMyProfile} /> | <MailIcon isMyProfile={props.isMyProfile} /> | ||||
| <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2"> | |||||
| <ContactItem | |||||
| isAdmin={props.isAdmin} | |||||
| isMyProfile={props.isMyProfile} | |||||
| variant="subtitle2" | |||||
| > | |||||
| {props.profile?.email} | {props.profile?.email} | ||||
| </ContactItem> | </ContactItem> | ||||
| </Stack> | </Stack> | ||||
| {props.profile?.company?.contacts?.web && ( | {props.profile?.company?.contacts?.web && ( | ||||
| <Stack direction="row"> | <Stack direction="row"> | ||||
| <GlobeIcon isMyProfile={props.isMyProfile} /> | <GlobeIcon isMyProfile={props.isMyProfile} /> | ||||
| <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2"> | |||||
| <ContactItem | |||||
| isAdmin={props.isAdmin} | |||||
| isMyProfile={props.isMyProfile} | |||||
| variant="subtitle2" | |||||
| > | |||||
| {props.profile?.company?.contacts?.web} | {props.profile?.company?.contacts?.web} | ||||
| </ContactItem> | </ContactItem> | ||||
| </Stack> | </Stack> |
| padding-top: ${(props) => props.isAdmin && "88px"}; | padding-top: ${(props) => props.isAdmin && "88px"}; | ||||
| padding-bottom: ${(props) => (props.isAdmin ? "1rem" : "0")}; | padding-bottom: ${(props) => (props.isAdmin ? "1rem" : "0")}; | ||||
| gap: 5px; | gap: 5px; | ||||
| width: calc(100vw - 216px); | |||||
| width: ${props => props.isAdmin && 'calc(100vw - 198px)'}; | |||||
| } | } | ||||
| `; | `; | ||||
| export const LocationIcon = styled(Location)` | export const LocationIcon = styled(Location)` | ||||
| font-size: 14px; | font-size: 14px; | ||||
| bottom: 4px; | bottom: 4px; | ||||
| margin-right: 0; | margin-right: 0; | ||||
| ${props => props.isAdmin && css` | |||||
| width: calc(100vw - 218px); | |||||
| overflow-wrap: break-word; | |||||
| `} | |||||
| } | } | ||||
| `; | `; | ||||
| export const MailIcon = styled(Mail)` | export const MailIcon = styled(Mail)` |
| import styled from "styled-components"; | |||||
| import styled, { css } from "styled-components"; | |||||
| import { Grid, Typography } from "@mui/material"; | import { Grid, Typography } from "@mui/material"; | ||||
| import selectedTheme from "../../../../themes"; | import selectedTheme from "../../../../themes"; | ||||
| import { ReactComponent as Pocket } from "../../../../assets/images/svg/pocket.svg"; | import { ReactComponent as Pocket } from "../../../../assets/images/svg/pocket.svg"; | ||||
| @media (max-width: 600px) { | @media (max-width: 600px) { | ||||
| font-size: 18px; | font-size: 18px; | ||||
| margin-bottom: 0; | margin-bottom: 0; | ||||
| ${props => props.isAdmin && css` | |||||
| max-width: calc(100vw - 200px); | |||||
| min-width: 0; | |||||
| white-space: nowrap; | |||||
| text-overflow: ellipsis; | |||||
| overflow: hidden; | |||||
| display: inline; | |||||
| `} | |||||
| } | } | ||||
| `; | `; | ||||
| export const ProfilePIBContainer = styled(Grid)` | export const ProfilePIBContainer = styled(Grid)` |