Web:Client:Profile: fix styles for main-profile
This commit is contained in:
parent
17f71f97e6
commit
6fcabb5e2b
@ -40,6 +40,7 @@ const MainProfile = (props) => {
|
|||||||
setChangeAvatarVisible,
|
setChangeAvatarVisible,
|
||||||
withActivationBar,
|
withActivationBar,
|
||||||
sendActivationLink,
|
sendActivationLink,
|
||||||
|
currentColorScheme,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const role = getUserRole(profile);
|
const role = getUserRole(profile);
|
||||||
@ -63,11 +64,14 @@ const MainProfile = (props) => {
|
|||||||
editing={true}
|
editing={true}
|
||||||
editAction={() => setChangeAvatarVisible(true)}
|
editAction={() => setChangeAvatarVisible(true)}
|
||||||
/>
|
/>
|
||||||
<StyledInfo>
|
<StyledInfo
|
||||||
|
withActivationBar={withActivationBar}
|
||||||
|
currentColorScheme={currentColorScheme}
|
||||||
|
>
|
||||||
<div className="rows-container">
|
<div className="rows-container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<Text as="div" color="#A3A9AE" className="label">
|
<Text as="div" className="label">
|
||||||
{t("Common:Name")}
|
{t("Common:Name")}
|
||||||
</Text>
|
</Text>
|
||||||
<Text fontWeight={600} truncate>
|
<Text fontWeight={600} truncate>
|
||||||
@ -83,7 +87,7 @@ const MainProfile = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<Text as="div" color="#A3A9AE" className="label">
|
<Text as="div" className="label">
|
||||||
{t("Common:Email")}
|
{t("Common:Email")}
|
||||||
</Text>
|
</Text>
|
||||||
<Text
|
<Text
|
||||||
@ -92,26 +96,20 @@ const MainProfile = (props) => {
|
|||||||
fontWeight={600}
|
fontWeight={600}
|
||||||
>
|
>
|
||||||
{profile.email}
|
{profile.email}
|
||||||
{withActivationBar && (
|
|
||||||
<HelpButton
|
|
||||||
className="send-again-icon"
|
|
||||||
color={"#316daa"}
|
|
||||||
tooltipContent={t("EmailNotVerified")}
|
|
||||||
iconName={SendClockReactSvgUrl}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
{withActivationBar && (
|
{withActivationBar && (
|
||||||
<Text
|
<div
|
||||||
className="send-again-text"
|
className="send-again-container send-again-mobile"
|
||||||
fontWeight={600}
|
|
||||||
noSelect
|
|
||||||
truncate
|
|
||||||
onClick={sendActivationLinkAction}
|
onClick={sendActivationLinkAction}
|
||||||
>
|
>
|
||||||
{t("SendAgain")}
|
<ReactSVG
|
||||||
</Text>
|
className="send-again-icon"
|
||||||
|
src={SendClockReactSvgUrl}
|
||||||
|
/>
|
||||||
|
<Text className="send-again-text" fontWeight={600} noSelect>
|
||||||
|
{t("SendAgain")}
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<IconButton
|
<IconButton
|
||||||
@ -121,18 +119,18 @@ const MainProfile = (props) => {
|
|||||||
onClick={() => setChangeEmailVisible(true)}
|
onClick={() => setChangeEmailVisible(true)}
|
||||||
/>
|
/>
|
||||||
{withActivationBar && (
|
{withActivationBar && (
|
||||||
<div className="send-again-container">
|
<div
|
||||||
<HelpButton
|
className="send-again-container send-again-desktop"
|
||||||
|
onClick={sendActivationLinkAction}
|
||||||
|
>
|
||||||
|
<ReactSVG
|
||||||
className="send-again-icon"
|
className="send-again-icon"
|
||||||
color={"#316daa"}
|
src={SendClockReactSvgUrl}
|
||||||
tooltipContent={t("EmailNotVerified")}
|
|
||||||
iconName={SendClockReactSvgUrl}
|
|
||||||
/>
|
/>
|
||||||
<Text
|
<Text
|
||||||
className="send-again-text"
|
className="send-again-text"
|
||||||
fontWeight={600}
|
fontWeight={600}
|
||||||
noSelect
|
noSelect
|
||||||
truncate
|
|
||||||
onClick={sendActivationLinkAction}
|
onClick={sendActivationLinkAction}
|
||||||
>
|
>
|
||||||
{t("SendAgain")}
|
{t("SendAgain")}
|
||||||
@ -142,7 +140,7 @@ const MainProfile = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<Text as="div" color="#A3A9AE" className="label">
|
<Text as="div" className="label">
|
||||||
{t("Common:Password")}
|
{t("Common:Password")}
|
||||||
</Text>
|
</Text>
|
||||||
<Text fontWeight={600}>********</Text>
|
<Text fontWeight={600}>********</Text>
|
||||||
@ -199,6 +197,10 @@ export default inject(({ auth, peopleStore }) => {
|
|||||||
|
|
||||||
const { withActivationBar, sendActivationLink } = auth.userStore;
|
const { withActivationBar, sendActivationLink } = auth.userStore;
|
||||||
|
|
||||||
|
const { currentColorScheme } = auth.settingsStore;
|
||||||
|
|
||||||
|
console.log(currentColorScheme);
|
||||||
|
|
||||||
const {
|
const {
|
||||||
targetUser: profile,
|
targetUser: profile,
|
||||||
changeEmailVisible,
|
changeEmailVisible,
|
||||||
@ -223,5 +225,6 @@ export default inject(({ auth, peopleStore }) => {
|
|||||||
setChangeAvatarVisible,
|
setChangeAvatarVisible,
|
||||||
withActivationBar,
|
withActivationBar,
|
||||||
sendActivationLink,
|
sendActivationLink,
|
||||||
|
currentColorScheme,
|
||||||
};
|
};
|
||||||
})(observer(MainProfile));
|
})(observer(MainProfile));
|
||||||
|
@ -79,7 +79,7 @@ const LanguagesCombo = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledRow>
|
<StyledRow>
|
||||||
<Text as="div" color="#A3A9AE" className="label">
|
<Text as="div" className="label">
|
||||||
{t("Common:Language")}
|
{t("Common:Language")}
|
||||||
<HelpButton
|
<HelpButton
|
||||||
size={12}
|
size={12}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import styled from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
import {
|
import {
|
||||||
hugeMobile,
|
hugeMobile,
|
||||||
smallTablet,
|
smallTablet,
|
||||||
@ -49,6 +49,13 @@ export const StyledInfo = styled.div`
|
|||||||
gap: 16px;
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
min-width: 75px;
|
||||||
|
max-width: 75px;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: ${(props) => props.theme.profile.main.descriptionTextColor};
|
||||||
|
}
|
||||||
|
|
||||||
.rows-container {
|
.rows-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -85,69 +92,71 @@ export const StyledInfo = styled.div`
|
|||||||
|
|
||||||
.email-text-container {
|
.email-text-container {
|
||||||
padding-left: 8px;
|
padding-left: 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.send-again-text {
|
${(props) =>
|
||||||
line-height: 15px;
|
props.withActivationBar &&
|
||||||
|
css`
|
||||||
color: #316daa;
|
color: ${props.theme.profile.main.pendingEmailTextColor};
|
||||||
|
`}
|
||||||
border-bottom: 1px solid #316daa;
|
|
||||||
|
|
||||||
width: fit-content;
|
|
||||||
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@media ${smallTablet} {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.send-again-icon {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
@media ${smallTablet} {
|
|
||||||
display: block;
|
|
||||||
padding-left: 5px;
|
|
||||||
|
|
||||||
max-width: 12px;
|
|
||||||
max-height: 12px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-again-container {
|
.send-again-container {
|
||||||
display: flex;
|
flex-grow: 1;
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
margin-left: 8px;
|
max-width: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.send-again-text {
|
height: 18px;
|
||||||
display: block;
|
|
||||||
|
|
||||||
margin-left: 4px;
|
.send-again-text {
|
||||||
|
margin-left: 5px;
|
||||||
|
|
||||||
|
line-height: 15px;
|
||||||
|
|
||||||
|
color: ${(props) => props.currentColorScheme.main.accent};
|
||||||
|
|
||||||
|
border-bottom: 1px solid
|
||||||
|
${(props) => props.currentColorScheme.main.accent};
|
||||||
|
|
||||||
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-again-icon {
|
.send-again-icon {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
|
||||||
|
|
||||||
@media ${smallTablet} {
|
width: 12px;
|
||||||
display: none;
|
height: 12px;
|
||||||
|
|
||||||
.send-again-text,
|
display: flex;
|
||||||
.send-again-icon {
|
align-items: center;
|
||||||
display: none;
|
justify-content: center;
|
||||||
|
|
||||||
|
div {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
|
||||||
|
path {
|
||||||
|
fill: ${(props) => props.currentColorScheme.main.accent};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.send-again-desktop {
|
||||||
min-width: 75px;
|
display: flex;
|
||||||
max-width: 75px;
|
}
|
||||||
white-space: nowrap;
|
|
||||||
|
.send-again-mobile {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-button {
|
.edit-button {
|
||||||
@ -165,19 +174,7 @@ export const StyledInfo = styled.div`
|
|||||||
gap: 2px;
|
gap: 2px;
|
||||||
|
|
||||||
.email-text-container {
|
.email-text-container {
|
||||||
display: flex;
|
padding-left: 0px;
|
||||||
|
|
||||||
.send-again-icon {
|
|
||||||
margin-left: 4px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
& > p {
|
& > p {
|
||||||
@ -199,8 +196,14 @@ export const StyledInfo = styled.div`
|
|||||||
min-width: 12px;
|
min-width: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-text-container {
|
.send-again-desktop {
|
||||||
padding-left: 0px;
|
display: none;
|
||||||
|
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.send-again-mobile {
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -9,7 +9,7 @@ import { isMobileOnly } from "react-device-detect";
|
|||||||
|
|
||||||
import { StyledRow } from "./styled-main-profile";
|
import { StyledRow } from "./styled-main-profile";
|
||||||
|
|
||||||
const TimezoneCombo = ({title}) => {
|
const TimezoneCombo = ({ title }) => {
|
||||||
const { t } = useTranslation("Wizard");
|
const { t } = useTranslation("Wizard");
|
||||||
|
|
||||||
const timezones = [{ key: "03", label: "(UTC) +03 Moscow" }];
|
const timezones = [{ key: "03", label: "(UTC) +03 Moscow" }];
|
||||||
@ -17,7 +17,7 @@ const TimezoneCombo = ({title}) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledRow title={title}>
|
<StyledRow title={title}>
|
||||||
<Text as="div" color="#A3A9AE" className="label">
|
<Text as="div" className="label">
|
||||||
{t("Wizard:Timezone")}
|
{t("Wizard:Timezone")}
|
||||||
</Text>
|
</Text>
|
||||||
<ComboBox
|
<ComboBox
|
||||||
|
@ -3081,6 +3081,9 @@ const Base = {
|
|||||||
main: {
|
main: {
|
||||||
background: "#F8F9F9",
|
background: "#F8F9F9",
|
||||||
textColor: black,
|
textColor: black,
|
||||||
|
|
||||||
|
descriptionTextColor: "#A3A9AE",
|
||||||
|
pendingEmailTextColor: "#A3A9AE",
|
||||||
},
|
},
|
||||||
themePreview: {
|
themePreview: {
|
||||||
descriptionColor: "#A3A9AE",
|
descriptionColor: "#A3A9AE",
|
||||||
|
@ -3080,6 +3080,9 @@ const Dark = {
|
|||||||
main: {
|
main: {
|
||||||
background: "#1f1f1f",
|
background: "#1f1f1f",
|
||||||
textColor: white,
|
textColor: white,
|
||||||
|
|
||||||
|
descriptionTextColor: "#858585",
|
||||||
|
pendingEmailTextColor: "#858585",
|
||||||
},
|
},
|
||||||
themePreview: {
|
themePreview: {
|
||||||
descriptionColor: "#ADADAD",
|
descriptionColor: "#ADADAD",
|
||||||
|
Loading…
Reference in New Issue
Block a user