Merge branch 'release/v2.0.0' into feature/new-form-gallery

packages/client/src/pages/Home/Section/Header/index.js

@@ -27,6 +27,7 @@ import PersonManagerReactSvgUrl from "PUBLIC_DIR/images/person.manager.react.svg
 import PersonUserReactSvgUrl from "PUBLIC_DIR/images/person.user.react.svg?url";
 import InviteAgainReactSvgUrl from "PUBLIC_DIR/images/invite.again.react.svg?url";
 import PublicRoomIconUrl from "PUBLIC_DIR/images/public-room.react.svg?url";
+import PluginMoreReactSvgUrl from "PUBLIC_DIR/images/plugin.more.react.svg?url";
 
 import React from "react";
 import { inject, observer } from "mobx-react";
@@ -427,12 +428,24 @@ const SectionHeaderContent = (props) => {
         ];
 
     if (mainButtonItemsList && enablePlugins) {
+      const pluginItems = [];
+
       mainButtonItemsList.forEach((option) => {
-        options.splice(option.value.position, 0, {
+        pluginItems.push({
           key: option.key,
           ...option.value,
         });
       });
+
+      options.splice(5, 0, {
+        id: "actions_more-plugins",
+        className: "main-button_drop-down",
+        icon: PluginMoreReactSvgUrl,
+        label: t("Common:More"),
+        disabled: false,
+        key: "more-plugins",
+        items: pluginItems,
+      });
     }
 
     return options;

packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js

@@ -23,7 +23,12 @@ import { Trans } from "react-i18next";
 
 import { AvatarEditorDialog } from "SRC_DIR/components/dialogs";
 
-import { StyledWrapper, StyledInfo, StyledLabel, StyledAvatarWrapper } from "./styled-main-profile";
+import {
+  StyledWrapper,
+  StyledInfo,
+  StyledLabel,
+  StyledAvatarWrapper,
+} from "./styled-main-profile";
 import { HelpButton, Tooltip } from "@docspace/components";
 import withCultureNames from "@docspace/common/hoc/withCultureNames";
 import { isMobile } from "@docspace/components/utils/device";
@@ -84,17 +89,20 @@ const MainProfile = (props) => {
     setChangePasswordVisible(true);
   };
 
-  const userAvatar = profile.hasAvatar ? profile.avatarMax : DefaultUserAvatarMax;
+  const userAvatar = profile.hasAvatar
+    ? profile.avatarMax
+    : DefaultUserAvatarMax;
 
   const tooltipLanguage = (
     <Text as="div" fontSize="12px" color="#333333">
       <Trans t={t} i18nKey="NotFoundLanguage" ns="Common">
-        "In case you cannot find your language in the list of the available ones, feel free to write
-        to us at
+        "In case you cannot find your language in the list of the available
+        ones, feel free to write to us at
         <Link
           href={`mailto:${documentationEmail}`}
           isHovered={true}
-          color={theme.profileInfo.tooltipLinkColor}>
+          color={currentColorScheme?.main?.accent}
+        >
           {{ supportEmail: documentationEmail }}
         </Link>
         to take part in the translation and get up to 1 year free of charge."
@@ -106,7 +114,8 @@ const MainProfile = (props) => {
           color="#333333"
           fontSize="13px"
           href={`${helpLink}/guides/become-translator.aspx`}
-          target="_blank">
+          target="_blank"
+        >
           {t("Common:LearnMore")}
         </Link>
       </Box>
@@ -161,7 +170,10 @@ const MainProfile = (props) => {
           </div>
         )}
       </StyledAvatarWrapper>
-      <StyledInfo withActivationBar={withActivationBar} currentColorScheme={currentColorScheme}>
+      <StyledInfo
+        withActivationBar={withActivationBar}
+        currentColorScheme={currentColorScheme}
+      >
         <div className="rows-container">
           <div className="profile-block">
             <StyledLabel as="div">{t("Common:Name")}</StyledLabel>
@@ -170,11 +182,18 @@ const MainProfile = (props) => {
               {t("Common:Email")}
             </StyledLabel>
 
-            <StyledLabel as="div" marginTopProp={withActivationBar ? "34px" : "16px"}>
+            <StyledLabel
+              as="div"
+              marginTopProp={withActivationBar ? "34px" : "16px"}
+            >
               {t("Common:Password")}
             </StyledLabel>
 
-            <StyledLabel as="div" className="profile-language" marginTopProp="15px">
+            <StyledLabel
+              as="div"
+              className="profile-language"
+              marginTopProp="15px"
+            >
               {t("Common:Language")}
               <HelpButton
                 size={12}
@@ -219,14 +238,17 @@ const MainProfile = (props) => {
                   data-tooltip-content={t("EmailNotVerified")}
                   as="div"
                   className="email-text-container"
-                  fontWeight={600}>
+                  fontWeight={600}
+                >
                   {profile.email}
                 </Text>
                 {withActivationBar && (
                   <Tooltip
                     float
                     id="emailTooltip"
-                    getContent={({ content }) => <Text fontSize="12px">{content}</Text>}
+                    getContent={({ content }) => (
+                      <Text fontSize="12px">{content}</Text>
+                    )}
                     place="bottom"
                   />
                 )}
@@ -240,8 +262,14 @@ const MainProfile = (props) => {
                 )}
               </div>
               {withActivationBar && (
-                <div className="send-again-container" onClick={sendActivationLinkAction}>
-                  <ReactSVG className="send-again-icon" src={SendClockReactSvgUrl} />
+                <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>
@@ -272,7 +300,9 @@ const MainProfile = (props) => {
                 dropDownMaxHeight={364}
                 manualWidth="250px"
                 isDefaultMode={
-                  isMobileHorizontalOrientation ? isMobileHorizontalOrientation : !isMobile()
+                  isMobileHorizontalOrientation
+                    ? isMobileHorizontalOrientation
+                    : !isMobile()
                 }
                 withBlur={isMobileHorizontalOrientation ? false : isMobile()}
                 fillIcon={false}
@@ -287,7 +317,11 @@ const MainProfile = (props) => {
               <Text className="mobile-profile-label" as="div">
                 {t("Common:Name")}
               </Text>
-              <Text className="mobile-profile-label-field" fontWeight={600} truncate>
+              <Text
+                className="mobile-profile-label-field"
+                fontWeight={600}
+                truncate
+              >
                 {profile.displayName}
               </Text>
             </div>
@@ -310,7 +344,8 @@ const MainProfile = (props) => {
                     data-tooltip-content={t("EmailNotVerified")}
                     as="div"
                     className="email-text-container"
-                    fontWeight={600}>
+                    fontWeight={600}
+                  >
                     {profile.email}
                   </Text>
                 </div>
@@ -318,14 +353,22 @@ const MainProfile = (props) => {
                   <Tooltip
                     float
                     id="emailTooltip"
-                    getContent={({ content }) => <Text fontSize="12px">{content}</Text>}
+                    getContent={({ content }) => (
+                      <Text fontSize="12px">{content}</Text>
+                    )}
                     place="bottom"
                   />
                 )}
               </div>
               {withActivationBar && (
-                <div className="send-again-container" onClick={sendActivationLinkAction}>
-                  <ReactSVG className="send-again-icon" src={SendClockReactSvgUrl} />
+                <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>
@@ -380,7 +423,9 @@ const MainProfile = (props) => {
               dropDownMaxHeight={364}
               manualWidth="250px"
               isDefaultMode={
-                isMobileHorizontalOrientation ? isMobileHorizontalOrientation : !isMobile()
+                isMobileHorizontalOrientation
+                  ? isMobileHorizontalOrientation
+                  : !isMobile()
               }
               withBlur={isMobileHorizontalOrientation ? false : isMobile()}
               fillIcon={false}
@@ -404,7 +449,8 @@ const MainProfile = (props) => {
 
 export default inject(({ auth, peopleStore }) => {
   const { withActivationBar, sendActivationLink } = auth.userStore;
-  const { theme, helpLink, culture, currentColorScheme, documentationEmail } = auth.settingsStore;
+  const { theme, helpLink, culture, currentColorScheme, documentationEmail } =
+    auth.settingsStore;
 
   const {
     targetUser: profile,

packages/client/src/pages/Profile/Section/Body/sub-components/social-networks/index.js

@@ -109,7 +109,7 @@ const SocialNetworks = (props) => {
             label={getProviderTranslation(label, t, item.linked)}
             $iconOptions={iconOptions}
             onClick={onClick}
-            size="small"
+            size="base"
             isConnect={item.linked}
           />
         </div>

packages/components/themes/base.js

@@ -317,9 +317,9 @@ const Base = {
       width: "100%",
       height: "16px",
       margin: "0 11px",
-      fontWeight: "600",
+      fontWeight: "500",
       fontSize: "14px",
-      lineHeight: "14px",
+      lineHeight: "16px",
       letterSpacing: "0.21875px",
       overflow: "hidden",
       textOverflow: "ellipsis",

packages/components/themes/dark.js

@@ -315,9 +315,9 @@ const Dark = {
       width: "100%",
       height: "16px",
       margin: "0 11px",
-      fontWeight: "600",
+      fontWeight: "500",
       fontSize: "14px",
-      lineHeight: "14px",
+      lineHeight: "16px",
       letterSpacing: "0.21875px",
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -3068,7 +3068,7 @@ const Dark = {
 
   profile: {
     main: {
-      background: "#1f1f1f",
+      background: "#3D3D3D",
       textColor: white,
 
       descriptionTextColor: "#858585",