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

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
+                <div
-                  className="send-again-text"
+                  className="send-again-container send-again-mobile"
-                  fontWeight={600}
-                  noSelect
-                  truncate
                   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>
             <IconButton
@@ -121,18 +119,18 @@ const MainProfile = (props) => {
               onClick={() => setChangeEmailVisible(true)}
             />
             {withActivationBar && (
-              <div className="send-again-container">
+              <div
-                <HelpButton
+                className="send-again-container send-again-desktop"
+                onClick={sendActivationLinkAction}
+              >
+                <ReactSVG
                   className="send-again-icon"
-                  color={"#316daa"}
+                  src={SendClockReactSvgUrl}
-                  tooltipContent={t("EmailNotVerified")}
-                  iconName={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));

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}

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 {
+      ${(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 {
-      display: flex;
+      flex-grow: 1;
-      align-items: center;
 
-      margin-left: 8px;
+      max-width: 50%;
+      cursor: pointer;
+
+      align-items: center;
 
       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 {
         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 {
@@ -165,19 +174,7 @@ export const StyledInfo = styled.div`
         gap: 2px;
 
         .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 {
@@ -199,8 +196,14 @@ export const StyledInfo = styled.div`
         min-width: 12px;
       }
 
-      .email-text-container {
+      .send-again-desktop {
-        padding-left: 0px;
+        display: none;
+
+        margin-left: 8px;
+      }
+
+      .send-again-mobile {
+        display: flex;
       }
     }
   }

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

packages/components/themes/base.js

@@ -3081,6 +3081,9 @@ const Base = {
     main: {
       background: "#F8F9F9",
       textColor: black,
+
+      descriptionTextColor: "#A3A9AE",
+      pendingEmailTextColor: "#A3A9AE",
     },
     themePreview: {
       descriptionColor: "#A3A9AE",

packages/components/themes/dark.js

@@ -3080,6 +3080,9 @@ const Dark = {
     main: {
       background: "#1f1f1f",
       textColor: white,
+
+      descriptionTextColor: "#858585",
+      pendingEmailTextColor: "#858585",
     },
     themePreview: {
       descriptionColor: "#ADADAD",