Client: Profile: fix styles
This commit is contained in:
parent
7e2cd63639
commit
a55dee1156
@ -156,200 +156,94 @@ const MainProfile = (props) => {
|
||||
const isBetaLanguage = selectedLanguage?.isBeta;
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<StyledAvatarWrapper>
|
||||
<Avatar
|
||||
className={"avatar"}
|
||||
size="max"
|
||||
role={role}
|
||||
source={userAvatar}
|
||||
userName={profile.displayName}
|
||||
editing={true}
|
||||
editAction={() => setChangeAvatarVisible(true)}
|
||||
/>
|
||||
{profile.isSSO && (
|
||||
<div className="badges-wrapper">
|
||||
<Badge
|
||||
className="sso-badge"
|
||||
label={SSO_LABEL}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#22C386"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</StyledAvatarWrapper>
|
||||
<StyledInfo
|
||||
withActivationBar={withActivationBar}
|
||||
currentColorScheme={currentColorScheme}
|
||||
>
|
||||
<div className="rows-container">
|
||||
<div className="profile-block">
|
||||
<StyledLabel as="div">{t("Common:Name")}</StyledLabel>
|
||||
|
||||
<StyledLabel as="div" marginTopProp="16px">
|
||||
{t("Common:Email")}
|
||||
</StyledLabel>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
marginTopProp={withActivationBar ? "34px" : "16px"}
|
||||
>
|
||||
{t("Common:Password")}
|
||||
</StyledLabel>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
className="profile-language"
|
||||
marginTopProp="15px"
|
||||
>
|
||||
{t("Common:Language")}
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place={dirTooltip}
|
||||
tooltipContent={tooltipLanguage}
|
||||
<div className="profile-container">
|
||||
<StyledWrapper className="profile-wrapper">
|
||||
<StyledAvatarWrapper className="avatar-wrapper">
|
||||
<Avatar
|
||||
className={"avatar"}
|
||||
size="max"
|
||||
role={role}
|
||||
source={userAvatar}
|
||||
userName={profile.displayName}
|
||||
editing={true}
|
||||
editAction={() => setChangeAvatarVisible(true)}
|
||||
/>
|
||||
{profile.isSSO && (
|
||||
<div className="badges-wrapper">
|
||||
<Badge
|
||||
className="sso-badge"
|
||||
label={SSO_LABEL}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#22C386"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
</StyledLabel>
|
||||
</div>
|
||||
|
||||
<div className="profile-block">
|
||||
<div className="profile-block-field">
|
||||
<Text fontWeight={600} truncate title={profile.displayName}>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
{profile.isSSO && (
|
||||
<Badge
|
||||
className="sso-badge"
|
||||
label={SSO_LABEL}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#22C386"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!profile.isSSO && (
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={() => setChangeNameVisible(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="email-container">
|
||||
<div className="email-edit-container">
|
||||
<Text
|
||||
data-tooltip-id="emailTooltip"
|
||||
data-tooltip-content={t("EmailNotVerified")}
|
||||
as="div"
|
||||
className="email-text-container"
|
||||
fontWeight={600}
|
||||
>
|
||||
{profile.email}
|
||||
)}
|
||||
</StyledAvatarWrapper>
|
||||
<StyledInfo
|
||||
withActivationBar={withActivationBar}
|
||||
currentColorScheme={currentColorScheme}
|
||||
>
|
||||
<div className="rows-container">
|
||||
<div className="profile-block">
|
||||
<StyledLabel as="div">{t("Common:Name")}</StyledLabel>
|
||||
|
||||
<StyledLabel as="div" marginTopProp="16px">
|
||||
{t("Common:Email")}
|
||||
</StyledLabel>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
marginTopProp={withActivationBar ? "34px" : "16px"}
|
||||
>
|
||||
{t("Common:Password")}
|
||||
</StyledLabel>
|
||||
|
||||
<StyledLabel
|
||||
as="div"
|
||||
className="profile-language"
|
||||
marginTopProp="15px"
|
||||
>
|
||||
{t("Common:Language")}
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place={dirTooltip}
|
||||
tooltipContent={tooltipLanguage}
|
||||
/>
|
||||
</StyledLabel>
|
||||
</div>
|
||||
|
||||
<div className="profile-block">
|
||||
<div className="profile-block-field">
|
||||
<Text fontWeight={600} truncate title={profile.displayName}>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
{withActivationBar && (
|
||||
<Tooltip
|
||||
float
|
||||
id="emailTooltip"
|
||||
getContent={({ content }) => (
|
||||
<Text fontSize="12px">{content}</Text>
|
||||
)}
|
||||
place="bottom"
|
||||
{profile.isSSO && (
|
||||
<Badge
|
||||
className="sso-badge"
|
||||
label={SSO_LABEL}
|
||||
color={"#FFFFFF"}
|
||||
backgroundColor="#22C386"
|
||||
fontSize={"9px"}
|
||||
fontWeight={800}
|
||||
noHover
|
||||
lineHeight={"13px"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!profile.isSSO && (
|
||||
<IconButton
|
||||
className="edit-button email-edit-button"
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangeEmailClick}
|
||||
onClick={() => setChangeNameVisible(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{withActivationBar && (
|
||||
<div
|
||||
className="send-again-container"
|
||||
onClick={sendActivationLinkAction}
|
||||
>
|
||||
<ReactSVG
|
||||
className="send-again-icon"
|
||||
src={SendClockReactSvgUrl}
|
||||
/>
|
||||
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||
{t("SendAgain")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="profile-block-field profile-block-password">
|
||||
<Text fontWeight={600}>********</Text>
|
||||
<IconButton
|
||||
className="edit-button password-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
</div>
|
||||
<div className="language-combo-box-wrapper">
|
||||
<ComboBox
|
||||
className="language-combo-box"
|
||||
directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={false}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={dimension < 620 ? 200 : 364}
|
||||
manualWidth="280px"
|
||||
isDefaultMode={
|
||||
isMobileHorizontalOrientation
|
||||
? isMobileHorizontalOrientation
|
||||
: !isMobile()
|
||||
}
|
||||
withBlur={isMobileHorizontalOrientation ? false : isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={!isMobile()}
|
||||
/>
|
||||
{isBetaLanguage && <BetaBadge place="bottom-end" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mobile-profile-block">
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text className="mobile-profile-label" as="div">
|
||||
{t("Common:Name")}
|
||||
</Text>
|
||||
<Text
|
||||
className="mobile-profile-label-field"
|
||||
fontWeight={600}
|
||||
truncate
|
||||
>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={() => setChangeNameVisible(true)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text className="mobile-profile-label" as="div">
|
||||
{t("Common:Email")}
|
||||
</Text>
|
||||
<div className="email-container">
|
||||
<div className="email-edit-container">
|
||||
<Text
|
||||
@ -361,105 +255,213 @@ const MainProfile = (props) => {
|
||||
>
|
||||
{profile.email}
|
||||
</Text>
|
||||
{withActivationBar && (
|
||||
<Tooltip
|
||||
float
|
||||
id="emailTooltip"
|
||||
getContent={({ content }) => (
|
||||
<Text fontSize="12px">{content}</Text>
|
||||
)}
|
||||
place="bottom"
|
||||
/>
|
||||
)}
|
||||
{!profile.isSSO && (
|
||||
<IconButton
|
||||
className="edit-button email-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangeEmailClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{withActivationBar && (
|
||||
<Tooltip
|
||||
float
|
||||
id="emailTooltip"
|
||||
getContent={({ content }) => (
|
||||
<Text fontSize="12px">{content}</Text>
|
||||
)}
|
||||
place="bottom"
|
||||
/>
|
||||
<div
|
||||
className="send-again-container"
|
||||
onClick={sendActivationLinkAction}
|
||||
>
|
||||
<ReactSVG
|
||||
className="send-again-icon"
|
||||
src={SendClockReactSvgUrl}
|
||||
/>
|
||||
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||
{t("SendAgain")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{withActivationBar && (
|
||||
<div
|
||||
className="send-again-container"
|
||||
onClick={sendActivationLinkAction}
|
||||
<div className="profile-block-field profile-block-password">
|
||||
<Text fontWeight={600}>********</Text>
|
||||
<IconButton
|
||||
className="edit-button password-edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
</div>
|
||||
<div className="language-combo-box-wrapper">
|
||||
<ComboBox
|
||||
className="language-combo-box"
|
||||
directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={false}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={dimension < 620 ? 200 : 364}
|
||||
manualWidth="280px"
|
||||
isDefaultMode={
|
||||
isMobileHorizontalOrientation
|
||||
? isMobileHorizontalOrientation
|
||||
: !isMobile()
|
||||
}
|
||||
withBlur={isMobileHorizontalOrientation ? false : isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={!isMobile()}
|
||||
/>
|
||||
{isBetaLanguage && <BetaBadge place="bottom-end" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mobile-profile-block">
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text className="mobile-profile-label" as="div">
|
||||
{t("Common:Name")}
|
||||
</Text>
|
||||
<Text
|
||||
className="mobile-profile-label-field"
|
||||
fontWeight={600}
|
||||
truncate
|
||||
>
|
||||
<ReactSVG
|
||||
className="send-again-icon"
|
||||
src={SendClockReactSvgUrl}
|
||||
/>
|
||||
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||
{t("SendAgain")}
|
||||
</Text>
|
||||
{profile.displayName}
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={() => setChangeNameVisible(true)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text className="mobile-profile-label" as="div">
|
||||
{t("Common:Email")}
|
||||
</Text>
|
||||
<div className="email-container">
|
||||
<div className="email-edit-container">
|
||||
<Text
|
||||
data-tooltip-id="emailTooltip"
|
||||
data-tooltip-content={t("EmailNotVerified")}
|
||||
as="div"
|
||||
className="email-text-container"
|
||||
fontWeight={600}
|
||||
>
|
||||
{profile.email}
|
||||
</Text>
|
||||
</div>
|
||||
{withActivationBar && (
|
||||
<Tooltip
|
||||
float
|
||||
id="emailTooltip"
|
||||
getContent={({ content }) => (
|
||||
<Text fontSize="12px">{content}</Text>
|
||||
)}
|
||||
place="bottom"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangeEmailClick}
|
||||
/>
|
||||
</div>
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text as="div" className="mobile-profile-label">
|
||||
{t("Common:Password")}
|
||||
</Text>
|
||||
<Text className="mobile-profile-password" fontWeight={600}>
|
||||
********
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mobile-language">
|
||||
<Text as="div" fontWeight={600} className="mobile-profile-label">
|
||||
{t("Common:Language")}
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place="right"
|
||||
tooltipContent={tooltipLanguage}
|
||||
{withActivationBar && (
|
||||
<div
|
||||
className="send-again-container"
|
||||
onClick={sendActivationLinkAction}
|
||||
>
|
||||
<ReactSVG
|
||||
className="send-again-icon"
|
||||
src={SendClockReactSvgUrl}
|
||||
/>
|
||||
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||
{t("SendAgain")}
|
||||
</Text>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangeEmailClick}
|
||||
/>
|
||||
</Text>
|
||||
<div className="mobile-language__wrapper-combo-box">
|
||||
<ComboBox
|
||||
className="language-combo-box"
|
||||
directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={false}
|
||||
scaled={isMobile()}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="250px"
|
||||
isDefaultMode={
|
||||
isMobileHorizontalOrientation
|
||||
? isMobileHorizontalOrientation
|
||||
: !isMobile()
|
||||
}
|
||||
withBlur={isMobileHorizontalOrientation ? false : isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={!isMobile()}
|
||||
</div>
|
||||
<div className="mobile-profile-row">
|
||||
<div className="mobile-profile-field">
|
||||
<Text as="div" className="mobile-profile-label">
|
||||
{t("Common:Password")}
|
||||
</Text>
|
||||
<Text className="mobile-profile-password" fontWeight={600}>
|
||||
********
|
||||
</Text>
|
||||
</div>
|
||||
<IconButton
|
||||
className="edit-button"
|
||||
iconName={PencilOutlineReactSvgUrl}
|
||||
size="12"
|
||||
onClick={onChangePasswordClick}
|
||||
/>
|
||||
{isBetaLanguage && <BetaBadge place="bottom-end" />}
|
||||
</div>
|
||||
|
||||
<div className="mobile-language">
|
||||
<Text as="div" fontWeight={600} className="mobile-profile-label">
|
||||
{t("Common:Language")}
|
||||
<HelpButton
|
||||
size={12}
|
||||
offsetRight={0}
|
||||
place="right"
|
||||
tooltipContent={tooltipLanguage}
|
||||
/>
|
||||
</Text>
|
||||
<div className="mobile-language__wrapper-combo-box">
|
||||
<ComboBox
|
||||
className="language-combo-box"
|
||||
directionY={isMobileHorizontalOrientation ? "bottom" : "both"}
|
||||
options={cultureNames}
|
||||
selectedOption={selectedLanguage}
|
||||
onSelect={onLanguageSelect}
|
||||
isDisabled={false}
|
||||
scaled={true}
|
||||
scaledOptions={false}
|
||||
size="content"
|
||||
showDisabledItems={true}
|
||||
dropDownMaxHeight={364}
|
||||
manualWidth="250px"
|
||||
isDefaultMode={
|
||||
isMobileHorizontalOrientation
|
||||
? isMobileHorizontalOrientation
|
||||
: !isMobile()
|
||||
}
|
||||
withBlur={isMobileHorizontalOrientation ? false : isMobile()}
|
||||
fillIcon={false}
|
||||
modernView={false}
|
||||
/>
|
||||
{isBetaLanguage && <BetaBadge place="bottom-end" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <TimezoneCombo title={t("Common:ComingSoon")} /> */}
|
||||
</StyledInfo>
|
||||
{/* <TimezoneCombo title={t("Common:ComingSoon")} /> */}
|
||||
</StyledInfo>
|
||||
|
||||
{changeAvatarVisible && (
|
||||
<AvatarEditorDialog
|
||||
t={t}
|
||||
visible={changeAvatarVisible}
|
||||
onClose={() => setChangeAvatarVisible(false)}
|
||||
/>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
{changeAvatarVisible && (
|
||||
<AvatarEditorDialog
|
||||
t={t}
|
||||
visible={changeAvatarVisible}
|
||||
onClose={() => setChangeAvatarVisible(false)}
|
||||
/>
|
||||
)}
|
||||
</StyledWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -21,24 +21,11 @@ export const StyledWrapper = styled.div`
|
||||
@media ${tablet} {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
background: none;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledAvatarWrapper = styled.div`
|
||||
display: flex;
|
||||
|
||||
@media ${mobile} {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.badges-wrapper {
|
||||
display: none;
|
||||
|
||||
@ -70,10 +57,6 @@ export const StyledInfo = styled.div`
|
||||
gap: 11px;
|
||||
padding-top: 5px;
|
||||
|
||||
@media ${tablet} {
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.rows-container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(75px, auto) 1fr;
|
||||
@ -235,115 +218,43 @@ export const StyledInfo = styled.div`
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
.rows-container {
|
||||
display: none;
|
||||
.mobile-profile-row {
|
||||
background: ${(props) => props.theme.profile.main.mobileRowBackground};
|
||||
|
||||
.mobile-profile-field {
|
||||
align-items: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `flex-start` : `baseline`};
|
||||
}
|
||||
|
||||
.mobile-profile-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 100%;
|
||||
.mobile-profile-label {
|
||||
font-size: ${(props) =>
|
||||
props.theme.getCorrectFontSize("12px")} !important;
|
||||
}
|
||||
|
||||
.mobile-profile-row {
|
||||
gap: 8px;
|
||||
background: ${(props) => props.theme.profile.main.mobileRowBackground};
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 20px;
|
||||
max-width: 100%;
|
||||
.mobile-profile-label-field {
|
||||
font-size: ${(props) =>
|
||||
props.theme.getCorrectFontSize("12px")} !important;
|
||||
}
|
||||
|
||||
.mobile-profile-field {
|
||||
display: flex;
|
||||
align-items: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `flex-start` : `baseline`};
|
||||
max-width: calc(100% - 28px);
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
.edit-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
min-width: 12px;
|
||||
|
||||
.mobile-profile-label {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
font-size: ${(props) =>
|
||||
props.theme.getCorrectFontSize("12px")} !important;
|
||||
line-height: 16px !important;
|
||||
white-space: nowrap;
|
||||
color: rgb(163, 169, 174);
|
||||
}
|
||||
|
||||
.mobile-profile-label-field {
|
||||
padding-left: 0px;
|
||||
max-width: 100%;
|
||||
font-size: ${(props) =>
|
||||
props.theme.getCorrectFontSize("12px")} !important;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.email-container {
|
||||
padding-left: 0px;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
min-width: 12px;
|
||||
|
||||
svg path {
|
||||
fill: ${(props) => props.theme.isBase && `#657077`};
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-profile-password {
|
||||
max-width: 100%;
|
||||
font-size: ${(props) =>
|
||||
props.theme.getCorrectFontSize("12px")} !important;
|
||||
line-height: 16px !important;
|
||||
}
|
||||
svg path {
|
||||
fill: ${(props) => props.theme.isBase && `#657077`};
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-language {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
@media ${mobile} {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&__wrapper-combo-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.mobile-profile-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 75px;
|
||||
max-width: 75px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
gap: 8px;
|
||||
}
|
||||
.mobile-profile-password {
|
||||
font-size: ${(props) =>
|
||||
props.theme.getCorrectFontSize("12px")} !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user