Web:Client:Profile: fix styles for main-profile

2023-03-02 15:56:27 +03:00 · 2023-03-02 15:56:27 +03:00 · 6fcabb5e2b
commit 6fcabb5e2b
parent 17f71f97e6
6 changed files with 102 additions and 90 deletions
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
@ -40,6 +40,7 @@ const MainProfile = (props) => {
    setChangeAvatarVisible,
    withActivationBar,
    sendActivationLink,
+    currentColorScheme,
  } = props;

  const role = getUserRole(profile);
@ -63,11 +64,14 @@ const MainProfile = (props) => {
        editing={true}
        editAction={() => setChangeAvatarVisible(true)}
      />
-      <StyledInfo>
+      <StyledInfo
+        withActivationBar={withActivationBar}
+        currentColorScheme={currentColorScheme}
+      >
        <div className="rows-container">
          <div className="row">
            <div className="field">
-              <Text as="div" color="#A3A9AE" className="label">
+              <Text as="div" className="label">
                {t("Common:Name")}
              </Text>
              <Text fontWeight={600} truncate>
@ -83,7 +87,7 @@ const MainProfile = (props) => {
          </div>
          <div className="row">
            <div className="field">
-              <Text as="div" color="#A3A9AE" className="label">
+              <Text as="div" className="label">
                {t("Common:Email")}
              </Text>
              <Text
@ -92,26 +96,20 @@ const MainProfile = (props) => {
                fontWeight={600}
              >
                {profile.email}
-                {withActivationBar && (
-                  <HelpButton
-                    className="send-again-icon"
-                    color={"#316daa"}
-                    tooltipContent={t("EmailNotVerified")}
-                    iconName={SendClockReactSvgUrl}
-                  />
-                )}
              </Text>
-
              {withActivationBar && (
-                <Text
-                  className="send-again-text"
-                  fontWeight={600}
-                  noSelect
-                  truncate
+                <div
+                  className="send-again-container send-again-mobile"
                  onClick={sendActivationLinkAction}
                >
-                  {t("SendAgain")}
-                </Text>
+                  <ReactSVG
+                    className="send-again-icon"
+                    src={SendClockReactSvgUrl}
+                  />
+                  <Text className="send-again-text" fontWeight={600} noSelect>
+                    {t("SendAgain")}
+                  </Text>
+                </div>
              )}
            </div>
            <IconButton
@ -121,18 +119,18 @@ const MainProfile = (props) => {
              onClick={() => setChangeEmailVisible(true)}
            />
            {withActivationBar && (
-              <div className="send-again-container">
-                <HelpButton
+              <div
+                className="send-again-container send-again-desktop"
+                onClick={sendActivationLinkAction}
+              >
+                <ReactSVG
                  className="send-again-icon"
-                  color={"#316daa"}
-                  tooltipContent={t("EmailNotVerified")}
-                  iconName={SendClockReactSvgUrl}
+                  src={SendClockReactSvgUrl}
                />
                <Text
                  className="send-again-text"
                  fontWeight={600}
                  noSelect
-                  truncate
                  onClick={sendActivationLinkAction}
                >
                  {t("SendAgain")}
@ -142,7 +140,7 @@ const MainProfile = (props) => {
          </div>
          <div className="row">
            <div className="field">
-              <Text as="div" color="#A3A9AE" className="label">
+              <Text as="div" className="label">
                {t("Common:Password")}
              </Text>
              <Text fontWeight={600}>********</Text>
@ -199,6 +197,10 @@ export default inject(({ auth, peopleStore }) => {

  const { withActivationBar, sendActivationLink } = auth.userStore;

+  const { currentColorScheme } = auth.settingsStore;
+
+  console.log(currentColorScheme);
+
  const {
    targetUser: profile,
    changeEmailVisible,
@ -223,5 +225,6 @@ export default inject(({ auth, peopleStore }) => {
    setChangeAvatarVisible,
    withActivationBar,
    sendActivationLink,
+    currentColorScheme,
  };
 })(observer(MainProfile));
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/languagesCombo.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/languagesCombo.js
@ -79,7 +79,7 @@ const LanguagesCombo = (props) => {

  return (
    <StyledRow>
-      <Text as="div" color="#A3A9AE" className="label">
+      <Text as="div" className="label">
        {t("Common:Language")}
        <HelpButton
          size={12}
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/styled-main-profile.js
@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import {
  hugeMobile,
  smallTablet,
@ -49,6 +49,13 @@ export const StyledInfo = styled.div`
    gap: 16px;
  }

+  .label {
+    min-width: 75px;
+    max-width: 75px;
+    white-space: nowrap;
+    color: ${(props) => props.theme.profile.main.descriptionTextColor};
+  }
+
  .rows-container {
    display: flex;
    flex-direction: column;
@ -85,69 +92,71 @@ export const StyledInfo = styled.div`

    .email-text-container {
      padding-left: 8px;
-    }

-    .send-again-text {
-      line-height: 15px;
-
-      color: #316daa;
-
-      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;
-      }
+      ${(props) =>
+        props.withActivationBar &&
+        css`
+          color: ${props.theme.profile.main.pendingEmailTextColor};
+        `}
    }

    .send-again-container {
-      display: flex;
-      align-items: center;
+      flex-grow: 1;

-      margin-left: 8px;
+      max-width: 50%;
+      cursor: pointer;
+
+      align-items: center;

      cursor: pointer;

-      .send-again-text {
-        display: block;
+      height: 18px;

-        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 {
        display: block;
-      }

-      @media ${smallTablet} {
-        display: none;
+        width: 12px;
+        height: 12px;

-        .send-again-text,
-        .send-again-icon {
-          display: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        div {
+          width: 12px;
+          height: 12px;
+        }
+
+        svg {
+          width: 12px;
+          height: 12px;
+
+          path {
+            fill: ${(props) => props.currentColorScheme.main.accent};
+          }
        }
      }
    }

-    .label {
-      min-width: 75px;
-      max-width: 75px;
-      white-space: nowrap;
+    .send-again-desktop {
+      display: flex;
+    }
+
+    .send-again-mobile {
+      display: none;
    }

    .edit-button {
@ -165,19 +174,7 @@ export const StyledInfo = styled.div`
        gap: 2px;

        .email-text-container {
-          display: flex;
-
-          .send-again-icon {
-            margin-left: 4px;
-
-            display: flex;
-            align-items: center;
-
-            div {
-              display: flex;
-              align-items: center;
-            }
-          }
+          padding-left: 0px;
        }

        & > p {
@ -199,8 +196,14 @@ export const StyledInfo = styled.div`
        min-width: 12px;
      }

-      .email-text-container {
-        padding-left: 0px;
+      .send-again-desktop {
+        display: none;
+
+        margin-left: 8px;
+      }
+
+      .send-again-mobile {
+        display: flex;
      }
    }
  }
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/timezoneCombo.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/timezoneCombo.js
@ -9,7 +9,7 @@ import { isMobileOnly } from "react-device-detect";

 import { StyledRow } from "./styled-main-profile";

-const TimezoneCombo = ({title}) => {
+const TimezoneCombo = ({ title }) => {
  const { t } = useTranslation("Wizard");

  const timezones = [{ key: "03", label: "(UTC) +03 Moscow" }];
@ -17,7 +17,7 @@ const TimezoneCombo = ({title}) => {

  return (
    <StyledRow title={title}>
-      <Text as="div" color="#A3A9AE" className="label">
+      <Text as="div" className="label">
        {t("Wizard:Timezone")}
      </Text>
      <ComboBox
--- a/packages/components/themes/base.js
+++ b/packages/components/themes/base.js
@ -3081,6 +3081,9 @@ const Base = {
    main: {
      background: "#F8F9F9",
      textColor: black,
+
+      descriptionTextColor: "#A3A9AE",
+      pendingEmailTextColor: "#A3A9AE",
    },
    themePreview: {
      descriptionColor: "#A3A9AE",
--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@ -3080,6 +3080,9 @@ const Dark = {
    main: {
      background: "#1f1f1f",
      textColor: white,
+
+      descriptionTextColor: "#858585",
+      pendingEmailTextColor: "#858585",
    },
    themePreview: {
      descriptionColor: "#ADADAD",