From 89ccbd440b1cd9514f641672a8626a437c0ae642 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Tue, 7 Nov 2023 13:57:59 +0300 Subject: [PATCH 01/41] Common: Components: init tariff bar --- packages/common/components/TariffBar/index.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 packages/common/components/TariffBar/index.js diff --git a/packages/common/components/TariffBar/index.js b/packages/common/components/TariffBar/index.js new file mode 100644 index 0000000000..4746db58c7 --- /dev/null +++ b/packages/common/components/TariffBar/index.js @@ -0,0 +1,42 @@ +import styled from "styled-components"; +import { useNavigate } from "react-router-dom"; + +import { combineUrl } from "@docspace/common/utils"; +import Text from "@docspace/components/text"; + +const StyledWrapper = styled.div` + cursor: pointer; +`; + +const PROXY_BASE_URL = combineUrl( + window.DocSpaceConfig?.proxy?.url, + "/portal-settings" +); + +const TariffBar = () => { + const navigate = useNavigate(); + + const onClick = () => { + const paymentPageUrl = combineUrl( + PROXY_BASE_URL, + "/payments/portal-payments" + ); + navigate(paymentPageUrl); + }; + + return ( + + + Try Business + + + ); +}; + +export default TariffBar; From 89849ee52a0bf5150a4ee9f34998e46f1f6f60dd Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Fri, 12 Jan 2024 17:48:22 +0300 Subject: [PATCH 02/41] Client: PortalSettings: add tariff bar --- .../PortalSettings/Layout/Section/Header/index.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index dfa9346c90..8cdcb8e610 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js @@ -21,6 +21,7 @@ import { checkPropertyByLink, } from "../../../utils"; import { combineUrl } from "@docspace/common/utils"; +import TariffBar from "@docspace/common/components/TariffBar"; const HeaderContainer = styled.div` position: relative; @@ -105,6 +106,17 @@ const HeaderContainer = styled.div` line-height: 59px !important; } } + + .tariff-bar { + ${(props) => + props.theme.interfaceDirection === "rtl" + ? css` + margin-right: auto; + ` + : css` + margin-left: auto; + `} + } `; const StyledContainer = styled.div` @@ -326,6 +338,9 @@ const SectionHeaderContent = (props) => { )} +
+ +
{props.addUsers && (
Date: Fri, 12 Jan 2024 17:48:43 +0300 Subject: [PATCH 03/41] Common: Navigation: add tariff bar --- .../components/Navigation/Navigation.js | 25 ++++++++++------- .../components/Navigation/StyledNavigation.js | 27 +++++++++++++++---- .../sub-components/toggle-infopanel-btn.js | 12 +++------ 3 files changed, 41 insertions(+), 23 deletions(-) diff --git a/packages/common/components/Navigation/Navigation.js b/packages/common/components/Navigation/Navigation.js index fe9481e571..7f02d1ef6e 100644 --- a/packages/common/components/Navigation/Navigation.js +++ b/packages/common/components/Navigation/Navigation.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; -import StyledContainer from "./StyledNavigation"; +import { StyledContainer, StyledWrapper } from "./StyledNavigation"; import ArrowButton from "./sub-components/arrow-btn"; import Text from "./sub-components/text"; import ControlButtons from "./sub-components/control-btn"; @@ -16,6 +16,8 @@ import { ReactSVG } from "react-svg"; import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn"; import TrashWarning from "./sub-components/trash-warning"; import NavigationLogo from "./sub-components/logo-block"; +import TariffBar from "../TariffBar"; + import { DeviceType } from "../../constants"; const Navigation = ({ @@ -271,15 +273,18 @@ const Navigation = ({ isTabletView={isTabletView} /> )} - {infoPanelIsVisible && !hideInfoPanel && ( - - )} + + + {infoPanelIsVisible && !hideInfoPanel && ( + + )} + )} diff --git a/packages/common/components/Navigation/StyledNavigation.js b/packages/common/components/Navigation/StyledNavigation.js index c7149d8ca7..1b3989b8fe 100644 --- a/packages/common/components/Navigation/StyledNavigation.js +++ b/packages/common/components/Navigation/StyledNavigation.js @@ -22,8 +22,8 @@ const StyledContainer = styled.div` ? "1fr auto 1fr" : "auto 1fr" : withLogo - ? "1fr 49px auto 1fr" - : "49px auto 1fr"}; + ? "1fr 49px auto 1fr" + : "49px auto 1fr"}; .navigation-logo { display: flex; @@ -183,8 +183,8 @@ const StyledContainer = styled.div` ? "59px 1fr auto" : "1fr auto" : withLogo - ? "43px 49px 1fr auto" - : "49px 1fr auto"}; + ? "43px 49px 1fr auto" + : "49px 1fr auto"}; } @media ${mobile} { @@ -197,4 +197,21 @@ const StyledContainer = styled.div` } `; -export default StyledContainer; +const StyledWrapper = styled.div` + display: flex; + gap: 20px; + align-items: center; + flex-wrap: nowrap; + ${({ theme }) => + theme.interfaceDirection === "rtl" + ? css` + justify-content: left; + margin-right: auto; + ` + : css` + justify-content: right; + margin-left: auto; + `} +`; + +export { StyledContainer, StyledWrapper }; diff --git a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js index 4ed854929f..a3c0ec6d36 100644 --- a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js +++ b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js @@ -10,14 +10,10 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)` align-self: center; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: auto; - transform: scaleX(-1); - ` - : css` - margin-left: auto; - `} + props.theme.interfaceDirection === "rtl" && + css` + transform: scaleX(-1); + `} margin-bottom: 1px; padding: 0; From 6f2caccb7020320ef09598cef2e0f1648125e4be Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 00:05:22 +0300 Subject: [PATCH 04/41] Web: add translate --- public/locales/en/Common.json | 1 + 1 file changed, 1 insertion(+) diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index 617d45e694..0c417e23d4 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -329,6 +329,7 @@ "Today": "Today", "TrialDaysLeft": "Trial {{count}} days", "TrialExpired": "Trial expired", + "TryBusiness": "Try Business", "TUE": "TUE", "Type": "Type", "UnexpectedError": "An unexpected error occurred. Try again later or contact support.", From fc9a7cafc04c0c3a5166485a27b24d2256f21a83 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 00:25:48 +0300 Subject: [PATCH 05/41] Common: Navigation: fix import --- .../common/components/Navigation/sub-components/drop-box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/components/Navigation/sub-components/drop-box.js b/packages/common/components/Navigation/sub-components/drop-box.js index d20cd1b002..24ebaa2598 100644 --- a/packages/common/components/Navigation/sub-components/drop-box.js +++ b/packages/common/components/Navigation/sub-components/drop-box.js @@ -9,7 +9,7 @@ import ArrowButton from "./arrow-btn"; import Text from "./text"; import ControlButtons from "./control-btn"; import Item from "./item"; -import StyledContainer from "../StyledNavigation"; +import { StyledContainer } from "../StyledNavigation"; import NavigationLogo from "./logo-block"; import { tablet, mobile } from "@docspace/shared/utils"; From 83afb29ed7438be2a7d4e14b9825ed5d78d44c82 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 00:27:14 +0300 Subject: [PATCH 06/41] Common: TariffBar: add logic --- packages/common/components/TariffBar/index.js | 82 +++++++++++++++++-- 1 file changed, 77 insertions(+), 5 deletions(-) diff --git a/packages/common/components/TariffBar/index.js b/packages/common/components/TariffBar/index.js index 4746db58c7..c54949228e 100644 --- a/packages/common/components/TariffBar/index.js +++ b/packages/common/components/TariffBar/index.js @@ -1,8 +1,10 @@ import styled from "styled-components"; import { useNavigate } from "react-router-dom"; +import { inject, observer } from "mobx-react"; +import { useTranslation } from "react-i18next"; import { combineUrl } from "@docspace/common/utils"; -import Text from "@docspace/components/text"; +import { Text } from "@docspace/shared/components/text"; const StyledWrapper = styled.div` cursor: pointer; @@ -13,8 +15,19 @@ const PROXY_BASE_URL = combineUrl( "/portal-settings" ); -const TariffBar = () => { +const TariffBar = ({ + isEnterprise, + isNonProfit, + isGracePeriod, + isFreeTariff, + isPaymentPageAvailable, + isLicenseExpiring, + isLicenseDateExpired, + isTrial, + standalone, +}) => { const navigate = useNavigate(); + const { t } = useTranslation("Common"); const onClick = () => { const paymentPageUrl = combineUrl( @@ -24,19 +37,78 @@ const TariffBar = () => { navigate(paymentPageUrl); }; + const getSaasBar = () => { + if ( + isPaymentPageAvailable && + !isNonProfit && + (isFreeTariff || isGracePeriod) + ) { + if (isFreeTariff) + return { label: t("Common:TryBusiness"), color: "#ED7309" }; + if (isGracePeriod) + return { label: t("Common:LatePayment"), color: "#F24724" }; + } + }; + + const getEnterpriseBar = () => { + if ( + isPaymentPageAvailable && + isEnterprise && + (isTrial || isLicenseExpiring || isLicenseDateExpired) + ) { + if (isTrial) { + if (isLicenseDateExpired) + return { label: t("Common:TrialExpired"), color: "#ED7309" }; + return { + label: t("Common:TrialDaysLeft", { count: trialDaysLeft }), + color: "#ED7309", + }; + } + return { label: t("Common:SubscriptionExpired"), color: "#F24724" }; + } + }; + + const tariffBar = !standalone ? getSaasBar() : getEnterpriseBar(); + + if (!tariffBar) return <>; return ( - Try Business + {tariffBar.label} ); }; -export default TariffBar; +export default inject(({ auth }) => { + const { + settingsStore, + currentQuotaStore, + isPaymentPageAvailable, + currentTariffStatusStore, + isEnterprise, + } = auth; + const { isFreeTariff, isNonProfit, isTrial } = currentQuotaStore; + const { isGracePeriod, isLicenseExpiring, isLicenseDateExpired } = + currentTariffStatusStore; + const { standalone } = settingsStore; + + return { + isEnterprise, + isNonProfit, + isGracePeriod, + isFreeTariff, + isPaymentPageAvailable, + isLicenseExpiring, + isLicenseDateExpired, + isTrial, + standalone, + }; +})(observer(TariffBar)); From b7cab108736c81a4609517c87c31c6fb214ed04d Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 00:35:50 +0300 Subject: [PATCH 07/41] Common: Article: delete old payment alerts --- .../Article/sub-components/article-alerts.js | 58 +-------- .../article-enterprise-alert.js | 119 ------------------ .../sub-components/article-payment-alert.js | 84 ------------- 3 files changed, 2 insertions(+), 259 deletions(-) delete mode 100644 packages/common/components/Article/sub-components/article-enterprise-alert.js delete mode 100644 packages/common/components/Article/sub-components/article-payment-alert.js diff --git a/packages/common/components/Article/sub-components/article-alerts.js b/packages/common/components/Article/sub-components/article-alerts.js index a5feb13ffb..3d5973f96b 100644 --- a/packages/common/components/Article/sub-components/article-alerts.js +++ b/packages/common/components/Article/sub-components/article-alerts.js @@ -3,8 +3,6 @@ import { inject, observer } from "mobx-react"; import ArticleTeamTrainingAlert from "./article-team-training"; import ArticleSubmitToFormGalleryAlert from "./article-submit-to-form-gallery"; -import ArticlePaymentAlert from "./article-payment-alert"; -import ArticleEnterpriseAlert from "./article-enterprise-alert"; import { StyledArticleAlertsComponent } from "../styled-article"; import { ARTICLE_ALERTS } from "@docspace/client/src/helpers/constants"; @@ -13,17 +11,8 @@ const ArticleAlerts = ({ incrementIndexOfArticleAlertsData, showText, - isNonProfit, - isGracePeriod, - isFreeTariff, - isPaymentPageAvailable, isTeamTrainingAlertAvailable, isSubmitToGalleryAlertAvailable, - isLicenseExpiring, - isLicenseDateExpired, - isEnterprise, - isTrial, - standalone, }) => { const currentAlert = articleAlertsData.current; const availableAlerts = articleAlertsData.available; @@ -32,31 +21,8 @@ const ArticleAlerts = ({ incrementIndexOfArticleAlertsData(); }, []); - const paymentsAlertsComponent = () => { - if (!standalone) { - return ( - isPaymentPageAvailable && - !isNonProfit && - (isFreeTariff || isGracePeriod) && - showText && - ); - } - - const isVisibleStandaloneAlert = - isTrial || isLicenseExpiring || isLicenseDateExpired; - - return ( - isPaymentPageAvailable && - isEnterprise && - isVisibleStandaloneAlert && - showText && - ); - }; - return ( - {paymentsAlertsComponent()} - {isTeamTrainingAlertAvailable && showText && availableAlerts.includes(ARTICLE_ALERTS.TeamTraining) && @@ -76,38 +42,18 @@ const ArticleAlerts = ({ export default inject(({ auth }) => { const { - currentQuotaStore, settingsStore, - isPaymentPageAvailable, isTeamTrainingAlertAvailable, isSubmitToGalleryAlertAvailable, - currentTariffStatusStore, - isEnterprise, } = auth; - const { isFreeTariff, isNonProfit, isTrial } = currentQuotaStore; - const { isGracePeriod, isLicenseExpiring, isLicenseDateExpired } = - currentTariffStatusStore; - const { - showText, - standalone, - articleAlertsData, - incrementIndexOfArticleAlertsData, - } = settingsStore; + const { showText, articleAlertsData, incrementIndexOfArticleAlertsData } = + settingsStore; return { articleAlertsData, incrementIndexOfArticleAlertsData, - isEnterprise, showText, - isNonProfit, - isGracePeriod, - isFreeTariff, - isPaymentPageAvailable, isTeamTrainingAlertAvailable, isSubmitToGalleryAlertAvailable, - isLicenseExpiring, - isLicenseDateExpired, - isTrial, - standalone, }; })(observer(ArticleAlerts)); diff --git a/packages/common/components/Article/sub-components/article-enterprise-alert.js b/packages/common/components/Article/sub-components/article-enterprise-alert.js deleted file mode 100644 index 12591b6245..0000000000 --- a/packages/common/components/Article/sub-components/article-enterprise-alert.js +++ /dev/null @@ -1,119 +0,0 @@ -import React, { useState } from "react"; -import { inject, observer } from "mobx-react"; -import { useNavigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; - -import { combineUrl } from "../../../utils"; - -import AlertComponent from "../../AlertComponent"; -import { RectangleSkeleton } from "@docspace/shared/skeletons"; - -const PROXY_BASE_URL = combineUrl( - window.DocSpaceConfig?.proxy?.url, - "/portal-settings" -); - -const ArticleEnterpriseAlert = ({ - theme, - toggleArticleOpen, - isLicenseDateExpired, - trialDaysLeft, - isTrial, - paymentDate, - isEnterprise, -}) => { - const { t, ready } = useTranslation("Common"); - - const navigate = useNavigate(); - - const [isClose, setIsClose] = useState( - localStorage.getItem("enterpriseAlertClose") - ); - - const onCloseClick = () => { - localStorage.setItem("enterpriseAlertClose", true); - setIsClose(true); - }; - - const onAlertClick = () => { - const paymentPageUrl = combineUrl( - PROXY_BASE_URL, - "/payments/portal-payments" - ); - navigate(paymentPageUrl); - toggleArticleOpen(); - }; - - const titleFunction = () => { - if (isTrial) { - if (isLicenseDateExpired) return t("Common:TrialExpired"); - return t("Common:TrialDaysLeft", { count: trialDaysLeft }); - } - - return t("TariffEnterprise"); - }; - - const descriptionFunction = () => { - if (isLicenseDateExpired) { - if (isTrial) return; - - return t("Common:SubscriptionExpired"); - } - - return t("Common:SubscriptionIsExpiring", { date: paymentDate }); - }; - - const title = titleFunction(); - - const additionalDescription = t("Common:RenewSubscription"); - - const description = descriptionFunction(); - - const color = isLicenseDateExpired - ? theme.catalog.paymentAlert.warningColor - : theme.catalog.paymentAlert.color; - - const isShowLoader = !ready; - - if (isEnterprise && isClose) return <>; - - return isShowLoader ? ( - - ) : ( - - ); -}; - -export default inject(({ auth }) => { - const { - currentQuotaStore, - settingsStore, - currentTariffStatusStore, - isEnterprise, - } = auth; - const { isTrial } = currentQuotaStore; - const { theme, toggleArticleOpen } = settingsStore; - const { isLicenseDateExpired, trialDaysLeft, paymentDate } = - currentTariffStatusStore; - return { - isEnterprise, - isTrial, - isLicenseDateExpired, - trialDaysLeft, - paymentDate, - theme, - toggleArticleOpen, - }; -})(observer(ArticleEnterpriseAlert)); diff --git a/packages/common/components/Article/sub-components/article-payment-alert.js b/packages/common/components/Article/sub-components/article-payment-alert.js deleted file mode 100644 index c0bf2a1e1e..0000000000 --- a/packages/common/components/Article/sub-components/article-payment-alert.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react"; -import { inject, observer } from "mobx-react"; -import { useNavigate } from "react-router-dom"; -import { useTranslation, Trans } from "react-i18next"; - -import { combineUrl } from "../../../utils"; - -import AlertComponent from "../../AlertComponent"; -import { RectangleSkeleton } from "@docspace/shared/skeletons"; - -const PROXY_BASE_URL = combineUrl( - window.DocSpaceConfig?.proxy?.url, - "/portal-settings" -); - -const ArticlePaymentAlert = ({ - isFreeTariff, - theme, - currentTariffPlanTitle, - toggleArticleOpen, -}) => { - const { t, ready } = useTranslation("Common"); - - const navigate = useNavigate(); - - const onClick = () => { - const paymentPageUrl = combineUrl( - PROXY_BASE_URL, - "/payments/portal-payments" - ); - navigate(paymentPageUrl); - toggleArticleOpen(); - }; - - const title = isFreeTariff ? ( - - {{ planName: currentTariffPlanTitle }} - - ) : ( - t("Common:LatePayment") - ); - - const description = isFreeTariff - ? t("Common:GetMoreOptions") - : t("Common:PayBeforeTheEndGracePeriod"); - - const additionalDescription = isFreeTariff - ? t("Common:ActivatePremiumFeatures") - : t("Common:GracePeriodActivated"); - - const color = isFreeTariff - ? theme.catalog.paymentAlert.color - : theme.catalog.paymentAlert.warningColor; - - const isShowLoader = !ready; - - return isShowLoader ? ( - - ) : ( - - ); -}; - -export default inject(({ auth }) => { - const { currentQuotaStore, settingsStore } = auth; - const { currentTariffPlanTitle } = currentQuotaStore; - const { theme, toggleArticleOpen } = settingsStore; - - return { - toggleArticleOpen, - theme, - currentTariffPlanTitle, - }; -})(observer(ArticlePaymentAlert)); From fefb517e10a500769b8960ad1eff929bfc424a6c Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 00:44:50 +0300 Subject: [PATCH 08/41] Shared: Components: DropDownItem: add additionalElement prop --- .../drop-down-item/DropDownItem.styled.ts | 59 +++++++++++-------- .../drop-down-item/DropDownItem.tsx | 7 +++ .../drop-down-item/DropDownItem.types.tsx | 2 + 3 files changed, 42 insertions(+), 26 deletions(-) diff --git a/packages/shared/components/drop-down-item/DropDownItem.styled.ts b/packages/shared/components/drop-down-item/DropDownItem.styled.ts index 6e492a6f4d..bb547ed31f 100644 --- a/packages/shared/components/drop-down-item/DropDownItem.styled.ts +++ b/packages/shared/components/drop-down-item/DropDownItem.styled.ts @@ -20,7 +20,7 @@ const disabledAndHeaderStyle = css` &:hover { cursor: default; background-color: ${(props) => - props.theme.dropDownItem.hoverDisabledBackgroundColor}; + props.theme.dropDownItem.hoverDisabledBackgroundColor}; } `; @@ -80,30 +80,30 @@ const StyledDropdownItem = styled.div<{ svg { path[fill] { fill: ${(props) => - props.disabled - ? props.theme.dropDownItem.icon.disableColor - : props.theme.dropDownItem.icon.color}; + props.disabled + ? props.theme.dropDownItem.icon.disableColor + : props.theme.dropDownItem.icon.color}; } path[stroke] { stroke: ${(props) => - props.disabled - ? props.theme.dropDownItem.icon.disableColor - : props.theme.dropDownItem.icon.color}; + props.disabled + ? props.theme.dropDownItem.icon.disableColor + : props.theme.dropDownItem.icon.color}; } circle[fill] { fill: ${(props) => - props.disabled - ? props.theme.dropDownItem.icon.disableColor - : props.theme.dropDownItem.icon.color}; + props.disabled + ? props.theme.dropDownItem.icon.disableColor + : props.theme.dropDownItem.icon.color}; } rect[fill] { fill: ${(props) => - props.disabled - ? props.theme.dropDownItem.icon.disableColor - : props.theme.dropDownItem.icon.color}; + props.disabled + ? props.theme.dropDownItem.icon.disableColor + : props.theme.dropDownItem.icon.color}; } } } @@ -120,13 +120,13 @@ const StyledDropdownItem = styled.div<{ &:hover { ${(props) => - !props.noHover && - !props.isHeader && - css` + !props.noHover && + !props.isHeader && + css` background-color: ${props.theme.dropDownItem.hoverBackgroundColor}; text-align: left; ${props.theme.interfaceDirection === "rtl" && - css` + css` text-align: right; `} `} @@ -134,8 +134,8 @@ const StyledDropdownItem = styled.div<{ &:active { ${({ isHeader, theme }) => - !isHeader && - css` + !isHeader && + css` background-color: ${theme.dropDownItem.hoverBackgroundColor}; `} } @@ -160,7 +160,7 @@ const StyledDropdownItem = styled.div<{ cursor: pointer; ${({ theme }) => - theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"} + theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"} } ${({ isHeader, theme }) => @@ -202,14 +202,14 @@ const StyledDropdownItem = styled.div<{ .submenu-arrow { ${(props) => - props.theme.interfaceDirection === "rtl" - ? `margin-right: auto; + props.theme.interfaceDirection === "rtl" + ? `margin-right: auto; transform: scaleX(-1); ` - : `margin-left: auto;`} + : `margin-left: auto;`} ${(props) => - props.isActive && - css` + props.isActive && + css` transform: rotate(90deg); height: auto; `} @@ -261,4 +261,11 @@ const IconWrapper = styled.div` `; IconWrapper.defaultProps = { theme: Base }; -export { StyledDropdownItem, IconWrapper, WrapperToggle, WrapperBadge }; +const ElementWrapper = styled.div` + display: flex; + align-items: center; + ${(props) => + props.theme.interfaceDirection === "rtl" ? css`margin-right: auto;` : css`margin-left: auto;`} +`; + +export { StyledDropdownItem, IconWrapper, WrapperToggle, WrapperBadge, ElementWrapper }; diff --git a/packages/shared/components/drop-down-item/DropDownItem.tsx b/packages/shared/components/drop-down-item/DropDownItem.tsx index 34be3add92..d6b8c8c864 100644 --- a/packages/shared/components/drop-down-item/DropDownItem.tsx +++ b/packages/shared/components/drop-down-item/DropDownItem.tsx @@ -13,6 +13,7 @@ import { IconWrapper, WrapperToggle, WrapperBadge, + ElementWrapper, } from "./DropDownItem.styled"; import { DropDownItemProps } from "./DropDownItem.types"; @@ -37,6 +38,7 @@ const DropDownItem = (props: DropDownItemProps) => { isSelected, isActiveDescendant, isBeta, + additionalElement, } = props; const { t } = useTranslation(["Settings"]); @@ -143,6 +145,10 @@ const DropDownItem = (props: DropDownItemProps) => { /> )} + + {additionalElement && ( + {additionalElement} + )} ); }; @@ -164,3 +170,4 @@ DropDownItem.defaultProps = { }; export { DropDownItem }; + diff --git a/packages/shared/components/drop-down-item/DropDownItem.types.tsx b/packages/shared/components/drop-down-item/DropDownItem.types.tsx index 77102b8631..0dd59165b4 100644 --- a/packages/shared/components/drop-down-item/DropDownItem.types.tsx +++ b/packages/shared/components/drop-down-item/DropDownItem.types.tsx @@ -47,4 +47,6 @@ export interface DropDownItemProps { checked?: boolean; onClickSelectedItem?: () => void; isBeta?: boolean; + additionalElement?: React.ReactNode; } + From 40524d3bc088f7dabb166a68b94efea23ba594f7 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 00:45:25 +0300 Subject: [PATCH 09/41] Client: ProfileActionsStore: add tariff bar to profile menu --- packages/client/src/store/ProfileActionsStore.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client/src/store/ProfileActionsStore.js b/packages/client/src/store/ProfileActionsStore.js index e767abc657..4fbdd67beb 100644 --- a/packages/client/src/store/ProfileActionsStore.js +++ b/packages/client/src/store/ProfileActionsStore.js @@ -19,6 +19,7 @@ import { ZendeskAPI } from "@docspace/common/components/Zendesk"; import { LIVE_CHAT_LOCAL_STORAGE_KEY } from "@docspace/common/constants"; import { toastr } from "@docspace/shared/components/toast"; import { isDesktop, isTablet } from "@docspace/shared/utils"; +import TariffBar from "@docspace/common/components/TariffBar"; const PROXY_HOMEPAGE_URL = combineUrl(window.DocSpaceConfig?.proxy?.url, "/"); const PROFILE_SELF_URL = combineUrl(PROXY_HOMEPAGE_URL, "/profile"); @@ -332,6 +333,7 @@ class ProfileActionsStore { icon: PaymentsReactSvgUrl, label: t("Common:PaymentsTitle"), onClick: this.onPaymentsClick, + additionalElement: , }, { isSeparator: true, From 6227ee4767cc79a6b8007f7e1dc89acbef1ae8b7 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 23:12:37 +0300 Subject: [PATCH 10/41] Common: TariffBar: fix --- packages/common/components/TariffBar/index.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/common/components/TariffBar/index.js b/packages/common/components/TariffBar/index.js index c54949228e..a3d1464f25 100644 --- a/packages/common/components/TariffBar/index.js +++ b/packages/common/components/TariffBar/index.js @@ -25,6 +25,7 @@ const TariffBar = ({ isLicenseDateExpired, isTrial, standalone, + paymentDate, }) => { const navigate = useNavigate(); const { t } = useTranslation("Common"); @@ -63,8 +64,14 @@ const TariffBar = ({ label: t("Common:TrialDaysLeft", { count: trialDaysLeft }), color: "#ED7309", }; + } else { + if (isLicenseDateExpired) + return { label: t("Common:SubscriptionExpired"), color: "#F24724" }; + return { + label: t("Common:SubscriptionIsExpiring", { date: paymentDate }), + color: "#ED7309", + }; } - return { label: t("Common:SubscriptionExpired"), color: "#F24724" }; } }; @@ -74,12 +81,13 @@ const TariffBar = ({ return ( {tariffBar.label} @@ -96,8 +104,12 @@ export default inject(({ auth }) => { isEnterprise, } = auth; const { isFreeTariff, isNonProfit, isTrial } = currentQuotaStore; - const { isGracePeriod, isLicenseExpiring, isLicenseDateExpired } = - currentTariffStatusStore; + const { + isGracePeriod, + isLicenseExpiring, + isLicenseDateExpired, + paymentDate, + } = currentTariffStatusStore; const { standalone } = settingsStore; return { @@ -110,5 +122,6 @@ export default inject(({ auth }) => { isLicenseDateExpired, isTrial, standalone, + paymentDate, }; })(observer(TariffBar)); From 4f68837b386a495fa178c47ecbd85b3165fac2d6 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Sat, 13 Jan 2024 23:29:02 +0300 Subject: [PATCH 11/41] Client: Profile: add tariff bar --- .../Profile/Section/Header/StyledHeader.js | 6 ++++ .../src/pages/Profile/Section/Header/index.js | 28 +++++++++++-------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/packages/client/src/pages/Profile/Section/Header/StyledHeader.js b/packages/client/src/pages/Profile/Section/Header/StyledHeader.js index 36bb70476e..66b7cb3317 100644 --- a/packages/client/src/pages/Profile/Section/Header/StyledHeader.js +++ b/packages/client/src/pages/Profile/Section/Header/StyledHeader.js @@ -15,6 +15,11 @@ export const StyledHeader = styled.div` } .action-button { + display: flex; + gap: 16px; + align-items: center; + flex-direction: row; + ${(props) => props.theme.interfaceDirection === "rtl" ? css` @@ -24,6 +29,7 @@ export const StyledHeader = styled.div` margin-left: 16px; `} @media ${tablet} { + flex-direction: row-reverse; ${(props) => props.theme.interfaceDirection === "rtl" ? css` diff --git a/packages/client/src/pages/Profile/Section/Header/index.js b/packages/client/src/pages/Profile/Section/Header/index.js index 16a8c43e5a..74beed4309 100644 --- a/packages/client/src/pages/Profile/Section/Header/index.js +++ b/packages/client/src/pages/Profile/Section/Header/index.js @@ -19,6 +19,7 @@ import { DeleteOwnerProfileDialog } from "SRC_DIR/components/dialogs"; import { StyledHeader } from "./StyledHeader"; import RoomsFilter from "@docspace/common/api/rooms/filter"; import { RoomSearchArea } from "@docspace/common/constants"; +import TariffBar from "@docspace/common/components/TariffBar"; const Header = (props) => { const { @@ -143,18 +144,21 @@ const Header = (props) => { {t("Profile:MyProfile")} {profile?.isLDAP && ` (${t("PeopleTranslations:LDAPLbl")})`} - {((isAdmin && !profile?.isOwner) || isMe) && ( - - )} +
+ {((isAdmin && !profile?.isOwner) || isMe) && ( + + )} + + +
{deleteSelfProfileDialog && ( Date: Mon, 15 Jan 2024 15:15:14 +0300 Subject: [PATCH 12/41] Web: add translate --- public/locales/en/Common.json | 1 + 1 file changed, 1 insertion(+) diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index 0c417e23d4..5b337e17c8 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -313,6 +313,7 @@ "Standard": "Standard", "SubmitToFormGallery": "Submit to Form Gallery", "SubmitToGallery": "Submit to Gallery", + "SubscriptionExpiredTitle": "Subscription expired", "SubscriptionExpired": "Your subscription to support and updates has expired", "SubscriptionIsExpiring": "Your subscription is expiring on {{date}}", "SUN": "SUN", From 015b92b57dbda75197de80cac2d034394e9f212c Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 15:15:26 +0300 Subject: [PATCH 13/41] Common: TariffBar: fix tKey --- packages/common/components/TariffBar/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/common/components/TariffBar/index.js b/packages/common/components/TariffBar/index.js index a3d1464f25..de78008e6a 100644 --- a/packages/common/components/TariffBar/index.js +++ b/packages/common/components/TariffBar/index.js @@ -66,7 +66,10 @@ const TariffBar = ({ }; } else { if (isLicenseDateExpired) - return { label: t("Common:SubscriptionExpired"), color: "#F24724" }; + return { + label: t("Common:SubscriptionExpiredTitle"), + color: "#F24724", + }; return { label: t("Common:SubscriptionIsExpiring", { date: paymentDate }), color: "#ED7309", From f9b6aedbb823f45dd2e49d936c1203a5428916ae Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 17:46:08 +0300 Subject: [PATCH 14/41] Common: fix after merge --- .../article-enterprise-alert.js | 119 --------- .../sub-components/article-payment-alert.js | 84 ------ .../components/Navigation/StyledNavigation.js | 219 ---------------- .../Navigation/sub-components/drop-box.js | 246 ------------------ .../sub-components/toggle-infopanel-btn.js | 83 ------ packages/common/components/TariffBar/index.js | 2 +- 6 files changed, 1 insertion(+), 752 deletions(-) delete mode 100644 packages/common/components/Article/sub-components/article-enterprise-alert.js delete mode 100644 packages/common/components/Article/sub-components/article-payment-alert.js delete mode 100644 packages/common/components/Navigation/StyledNavigation.js delete mode 100644 packages/common/components/Navigation/sub-components/drop-box.js delete mode 100644 packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js diff --git a/packages/common/components/Article/sub-components/article-enterprise-alert.js b/packages/common/components/Article/sub-components/article-enterprise-alert.js deleted file mode 100644 index 329e70ca81..0000000000 --- a/packages/common/components/Article/sub-components/article-enterprise-alert.js +++ /dev/null @@ -1,119 +0,0 @@ -import React, { useState } from "react"; -import { inject, observer } from "mobx-react"; -import { useNavigate } from "react-router-dom"; -import { useTranslation } from "react-i18next"; - -import { combineUrl } from "@docspace/shared/utils/combineUrl"; - -import AlertComponent from "../../AlertComponent"; -import { RectangleSkeleton } from "@docspace/shared/skeletons"; - -const PROXY_BASE_URL = combineUrl( - window.DocSpaceConfig?.proxy?.url, - "/portal-settings" -); - -const ArticleEnterpriseAlert = ({ - theme, - toggleArticleOpen, - isLicenseDateExpired, - trialDaysLeft, - isTrial, - paymentDate, - isEnterprise, -}) => { - const { t, ready } = useTranslation("Common"); - - const navigate = useNavigate(); - - const [isClose, setIsClose] = useState( - localStorage.getItem("enterpriseAlertClose") - ); - - const onCloseClick = () => { - localStorage.setItem("enterpriseAlertClose", true); - setIsClose(true); - }; - - const onAlertClick = () => { - const paymentPageUrl = combineUrl( - PROXY_BASE_URL, - "/payments/portal-payments" - ); - navigate(paymentPageUrl); - toggleArticleOpen(); - }; - - const titleFunction = () => { - if (isTrial) { - if (isLicenseDateExpired) return t("Common:TrialExpired"); - return t("Common:TrialDaysLeft", { count: trialDaysLeft }); - } - - return t("TariffEnterprise"); - }; - - const descriptionFunction = () => { - if (isLicenseDateExpired) { - if (isTrial) return; - - return t("Common:SubscriptionExpired"); - } - - return t("Common:SubscriptionIsExpiring", { date: paymentDate }); - }; - - const title = titleFunction(); - - const additionalDescription = t("Common:RenewSubscription"); - - const description = descriptionFunction(); - - const color = isLicenseDateExpired - ? theme.catalog.paymentAlert.warningColor - : theme.catalog.paymentAlert.color; - - const isShowLoader = !ready; - - if (isEnterprise && isClose) return <>; - - return isShowLoader ? ( - - ) : ( - - ); -}; - -export default inject(({ auth }) => { - const { - currentQuotaStore, - settingsStore, - currentTariffStatusStore, - isEnterprise, - } = auth; - const { isTrial } = currentQuotaStore; - const { theme, toggleArticleOpen } = settingsStore; - const { isLicenseDateExpired, trialDaysLeft, paymentDate } = - currentTariffStatusStore; - return { - isEnterprise, - isTrial, - isLicenseDateExpired, - trialDaysLeft, - paymentDate, - theme, - toggleArticleOpen, - }; -})(observer(ArticleEnterpriseAlert)); diff --git a/packages/common/components/Article/sub-components/article-payment-alert.js b/packages/common/components/Article/sub-components/article-payment-alert.js deleted file mode 100644 index 31c64f6287..0000000000 --- a/packages/common/components/Article/sub-components/article-payment-alert.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react"; -import { inject, observer } from "mobx-react"; -import { useNavigate } from "react-router-dom"; -import { useTranslation, Trans } from "react-i18next"; - -import { combineUrl } from "@docspace/shared/utils/combineUrl"; - -import AlertComponent from "../../AlertComponent"; -import { RectangleSkeleton } from "@docspace/shared/skeletons"; - -const PROXY_BASE_URL = combineUrl( - window.DocSpaceConfig?.proxy?.url, - "/portal-settings" -); - -const ArticlePaymentAlert = ({ - isFreeTariff, - theme, - currentTariffPlanTitle, - toggleArticleOpen, -}) => { - const { t, ready } = useTranslation("Common"); - - const navigate = useNavigate(); - - const onClick = () => { - const paymentPageUrl = combineUrl( - PROXY_BASE_URL, - "/payments/portal-payments" - ); - navigate(paymentPageUrl); - toggleArticleOpen(); - }; - - const title = isFreeTariff ? ( - - {{ planName: currentTariffPlanTitle }} - - ) : ( - t("Common:LatePayment") - ); - - const description = isFreeTariff - ? t("Common:GetMoreOptions") - : t("Common:PayBeforeTheEndGracePeriod"); - - const additionalDescription = isFreeTariff - ? t("Common:ActivatePremiumFeatures") - : t("Common:GracePeriodActivated"); - - const color = isFreeTariff - ? theme.catalog.paymentAlert.color - : theme.catalog.paymentAlert.warningColor; - - const isShowLoader = !ready; - - return isShowLoader ? ( - - ) : ( - - ); -}; - -export default inject(({ auth }) => { - const { currentQuotaStore, settingsStore } = auth; - const { currentTariffPlanTitle } = currentQuotaStore; - const { theme, toggleArticleOpen } = settingsStore; - - return { - toggleArticleOpen, - theme, - currentTariffPlanTitle, - }; -})(observer(ArticlePaymentAlert)); diff --git a/packages/common/components/Navigation/StyledNavigation.js b/packages/common/components/Navigation/StyledNavigation.js deleted file mode 100644 index 0705b670a9..0000000000 --- a/packages/common/components/Navigation/StyledNavigation.js +++ /dev/null @@ -1,219 +0,0 @@ -import styled, { css } from "styled-components"; - -import { tablet, mobile } from "@docspace/shared/utils"; - -const StyledContainer = styled.div` - ${(props) => - !props.isDropBoxComponent && - props.isDesktop && - css` - width: fit-content; - max-width: ${props.isInfoPanelVisible - ? `calc(100%)` - : `calc(100% - 72px)`}; - `} - - display: grid; - align-items: center; - - margin-right: ${(props) => (props.isTrashFolder ? "16px" : 0)}; - - grid-template-columns: ${({ isRootFolder, withLogo }) => - isRootFolder - ? withLogo - ? "1fr auto 1fr" - : "auto 1fr" - : withLogo - ? "1fr 49px auto 1fr" - : "49px auto 1fr"}; - - .navigation-logo { - display: flex; - height: 24px; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 16px; - ` - : css` - margin-right: 16px; - `} - - @media ${tablet} { - .logo-icon_svg { - display: none; - } - } - - .header_separator { - display: ${({ isRootFolder }) => (isRootFolder ? "block" : "none")}; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - border-right: 1px solid #dfe2e3; - margin: 0 15px 0 0; - ` - : css` - border-left: 1px solid #dfe2e3; - margin: 0 0 0 15px; - `} - - height: 21px; - } - - .header-burger { - cursor: pointer; - display: none; - margin-top: -2px; - - img { - height: 28px; - width: 28px; - } - - @media ${tablet} { - display: flex; - } - - @media ${mobile} { - display: none; - } - } - } - - .drop-box-logo { - display: none; - - @media ${tablet} { - display: grid; - } - } - - height: 100%; - ${(props) => - props.isDesktopClient && - props.isDropBoxComponent && - css` - max-height: 32px; - `} - - .navigation-arrow-container { - display: flex; - } - - .arrow-button { - padding-top: 2px; - width: 17px; - min-width: 17px; - - svg { - ${({ theme }) => - theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`} - } - } - - .title-container { - display: grid; - grid-template-columns: minmax(1px, max-content) auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - .room-title { - cursor: pointer; - } - } - - .navigation-header-separator { - display: block; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - padding-right: 16px; - border-left: ${(props) => - `1px solid ${props.theme.navigation.icon.stroke}`}; - ` - : css` - padding-left: 16px; - border-right: ${(props) => - `1px solid ${props.theme.navigation.icon.stroke}`}; - `} - - height: 21px; - @media ${mobile} { - display: none; - } - } - - .headline-heading { - display: flex; - height: 32px; - align-items: center; - } - - .title-block { - display: flex; - align-items: center; - flex-direction: row; - position: relative; - cursor: pointer; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - gap: 8px; - - .title-icon { - min-width: 17px; - min-height: 17px; - width: 17px; - height: 17px; - - svg { - path, - rect { - fill: ${({ theme }) => theme.navigation.publicIcon}; - } - } - } - } - - @media ${tablet} { - width: 100%; - grid-template-columns: ${({ isRootFolder, withLogo }) => - isRootFolder - ? withLogo - ? "59px 1fr auto" - : "1fr auto" - : withLogo - ? "43px 49px 1fr auto" - : "49px 1fr auto"}; - } - - @media ${mobile} { - .navigation-logo { - display: none; - } - - grid-template-columns: ${(props) => - props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; - } -`; - -const StyledWrapper = styled.div` - display: flex; - gap: 20px; - align-items: center; - flex-wrap: nowrap; - ${({ theme }) => - theme.interfaceDirection === "rtl" - ? css` - justify-content: left; - margin-right: auto; - ` - : css` - justify-content: right; - margin-left: auto; - `} -`; - -export { StyledContainer, StyledWrapper }; diff --git a/packages/common/components/Navigation/sub-components/drop-box.js b/packages/common/components/Navigation/sub-components/drop-box.js deleted file mode 100644 index 24ebaa2598..0000000000 --- a/packages/common/components/Navigation/sub-components/drop-box.js +++ /dev/null @@ -1,246 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; -import styled, { css, useTheme } from "styled-components"; - -import { VariableSizeList } from "react-window"; -import { CustomScrollbarsVirtualList } from "@docspace/shared/components/scrollbar"; - -import ArrowButton from "./arrow-btn"; -import Text from "./text"; -import ControlButtons from "./control-btn"; -import Item from "./item"; -import { StyledContainer } from "../StyledNavigation"; -import NavigationLogo from "./logo-block"; - -import { tablet, mobile } from "@docspace/shared/utils"; -import { ReactSVG } from "react-svg"; - -import { Base } from "@docspace/shared/themes"; -import { DeviceType } from "../../../constants"; - -const StyledBox = styled.div` - position: absolute; - top: 0px; - - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - right: -20px; - ${props.withLogo && `right: 207px;`}; - ` - : css` - left: -20px; - ${props.withLogo && `left: 207px;`}; - `} - padding: 0 20px; - padding-top: 18px; - - width: unset; - - height: ${(props) => (props.height ? `${props.height}px` : "fit-content")}; - max-height: calc(100vh - 48px); - - z-index: 401; - display: table; - margin: auto; - flex-direction: column; - - background: ${(props) => props.theme.navigation.background}; - - box-shadow: ${(props) => props.theme.navigation.boxShadow}; - border-radius: 0px 0px 6px 6px; - - .title-container { - display: grid; - grid-template-columns: minmax(1px, max-content) auto; - } - - @media ${tablet} { - width: ${({ dropBoxWidth }) => dropBoxWidth + "px"}; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - right: -16px; - ` - : css` - left: -16px; - `} - padding: 0 16px; - padding-top: 14px; - } - - @media ${mobile} { - width: ${({ dropBoxWidth }) => dropBoxWidth + "px"}; - padding-top: 10px !important; - } -`; - -StyledBox.defaultProps = { theme: Base }; - -const Row = React.memo(({ data, index, style }) => { - const isRoot = index === data[0].length - 1; - return ( - - ); -}); - -const DropBox = React.forwardRef( - ( - { - sectionHeight, - showText, - dropBoxWidth, - isRootFolder, - onBackToParentFolder, - title, - personal, - canCreate, - navigationItems, - getContextOptionsFolder, - getContextOptionsPlus, - toggleDropBox, - toggleInfoPanel, - onClickAvailable, - isInfoPanelVisible, - maxHeight, - isOpen, - isDesktop, - isDesktopClient, - showRootFolderNavigation, - withLogo, - burgerLogo, - titleIcon, - currentDeviceType, - navigationTitleContainerNode, - }, - ref - ) => { - const [dropBoxHeight, setDropBoxHeight] = React.useState(0); - const countItems = navigationItems.length; - - const getItemSize = (index) => { - if (index === countItems - 1) return 51; - return currentDeviceType !== DeviceType.desktop ? 36 : 30; - }; - - const { interfaceDirection } = useTheme(); - React.useEffect(() => { - const itemsHeight = navigationItems.map((item, index) => - getItemSize(index) - ); - - const currentHeight = itemsHeight.reduce((a, b) => a + b); - - let navHeight = 41; - - if (currentDeviceType === DeviceType.tablet) { - navHeight = 49; - } - - if (currentDeviceType === DeviceType.mobile) { - navHeight = 45; - } - - setDropBoxHeight( - currentHeight + navHeight > sectionHeight - ? sectionHeight - navHeight - 20 - : currentHeight - ); - }, [sectionHeight, currentDeviceType]); - - const isTabletView = currentDeviceType === DeviceType.tablet; - - return ( - <> - - - {withLogo && ( - - )} - - - {navigationTitleContainerNode} - - - - - - {Row} - - - - ); - } -); - -DropBox.propTypes = { - width: PropTypes.number, - changeWidth: PropTypes.bool, - isRootFolder: PropTypes.bool, - onBackToParentFolder: PropTypes.func, - title: PropTypes.string, - personal: PropTypes.bool, - canCreate: PropTypes.bool, - navigationItems: PropTypes.arrayOf(PropTypes.object), - getContextOptionsFolder: PropTypes.func, - getContextOptionsPlus: PropTypes.func, - toggleDropBox: PropTypes.func, - onClickAvailable: PropTypes.func, -}; - -export default React.memo(DropBox); diff --git a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js deleted file mode 100644 index a3c0ec6d36..0000000000 --- a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js +++ /dev/null @@ -1,83 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import PanelReactSvgUrl from "PUBLIC_DIR/images/panel.react.svg?url"; -import { IconButton } from "@docspace/shared/components/icon-button"; -import { tablet } from "@docspace/shared/utils"; -import { Base } from "@docspace/shared/themes"; -import { ColorTheme, ThemeId } from "@docspace/shared/components/color-theme"; - -const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)` - align-self: center; - - ${(props) => - props.theme.interfaceDirection === "rtl" && - css` - transform: scaleX(-1); - `} - - margin-bottom: 1px; - padding: 0; - - .info-panel-toggle { - margin-inline-end: 8px; - } - - ${(props) => - props.isInfoPanelVisible && - css` - .info-panel-toggle-bg { - height: 30px; - width: 30px; - background: ${props.theme.backgroundAndSubstrateColor}; - border: 1px solid ${props.theme.backgroundAndSubstrateColor}; - border-radius: 50%; - .info-panel-toggle { - margin: auto; - margin-top: 25%; - } - } - `} - - @media ${tablet} { - display: none; - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-right: ${props.isRootFolder ? "auto" : "0"}; - ` - : css` - margin-left: ${props.isRootFolder ? "auto" : "0"}; - `} - } -`; -StyledInfoPanelToggleColorThemeWrapper.defaultProps = { theme: Base }; - -const ToggleInfoPanelButton = ({ - isRootFolder, - isInfoPanelVisible, - toggleInfoPanel, - id, - titles, -}) => { - return ( - -
- -
- - ); -}; - -export default ToggleInfoPanelButton; diff --git a/packages/common/components/TariffBar/index.js b/packages/common/components/TariffBar/index.js index de78008e6a..8dcadf6e55 100644 --- a/packages/common/components/TariffBar/index.js +++ b/packages/common/components/TariffBar/index.js @@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom"; import { inject, observer } from "mobx-react"; import { useTranslation } from "react-i18next"; -import { combineUrl } from "@docspace/common/utils"; +import { combineUrl } from "@docspace/shared/utils/combineUrl"; import { Text } from "@docspace/shared/components/text"; const StyledWrapper = styled.div` From 27cf19bc88890566b1e53d14f44a3e9b4674f4d2 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 17:57:37 +0300 Subject: [PATCH 15/41] Client/Common: move tariff bar --- packages/{common => client/src}/components/TariffBar/index.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/{common => client/src}/components/TariffBar/index.js (100%) diff --git a/packages/common/components/TariffBar/index.js b/packages/client/src/components/TariffBar/index.js similarity index 100% rename from packages/common/components/TariffBar/index.js rename to packages/client/src/components/TariffBar/index.js From c0e08573c4a8a9175936ffe172847a5884ab7835 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 17:57:55 +0300 Subject: [PATCH 16/41] Client: fix import --- .../src/pages/PortalSettings/Layout/Section/Header/index.js | 2 +- packages/client/src/pages/Profile/Section/Header/index.js | 3 ++- packages/client/src/store/ProfileActionsStore.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index b81ccc86c4..b04c519af1 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js @@ -21,7 +21,7 @@ import { checkPropertyByLink, } from "../../../utils"; import { combineUrl } from "@docspace/shared/utils/combineUrl"; -import TariffBar from "@docspace/common/components/TariffBar"; +import TariffBar from "SRC_DIR/components/TariffBar"; const HeaderContainer = styled.div` position: relative; diff --git a/packages/client/src/pages/Profile/Section/Header/index.js b/packages/client/src/pages/Profile/Section/Header/index.js index 3146d37bc5..5c69312ad2 100644 --- a/packages/client/src/pages/Profile/Section/Header/index.js +++ b/packages/client/src/pages/Profile/Section/Header/index.js @@ -19,7 +19,8 @@ import { DeleteOwnerProfileDialog } from "SRC_DIR/components/dialogs"; import { StyledHeader } from "./StyledHeader"; import RoomsFilter from "@docspace/shared/api/rooms/filter"; import { RoomSearchArea } from "@docspace/shared/enums"; -import TariffBar from "@docspace/common/components/TariffBar"; +import TariffBar from "SRC_DIR/components/TariffBar"; + const Header = (props) => { const { t, diff --git a/packages/client/src/store/ProfileActionsStore.js b/packages/client/src/store/ProfileActionsStore.js index 332ea1ae63..cbbc741d95 100644 --- a/packages/client/src/store/ProfileActionsStore.js +++ b/packages/client/src/store/ProfileActionsStore.js @@ -19,7 +19,7 @@ import { ZendeskAPI } from "@docspace/common/components/Zendesk"; import { LIVE_CHAT_LOCAL_STORAGE_KEY } from "@docspace/shared/constants"; import { toastr } from "@docspace/shared/components/toast"; import { isDesktop, isTablet } from "@docspace/shared/utils"; -import TariffBar from "@docspace/common/components/TariffBar"; +import TariffBar from "SRC_DIR/components/TariffBar"; const PROXY_HOMEPAGE_URL = combineUrl(window.DocSpaceConfig?.proxy?.url, "/"); const PROFILE_SELF_URL = combineUrl(PROXY_HOMEPAGE_URL, "/profile"); From 4cd811861e54d2bbce65429c6b2580bacd57a9b0 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 18:01:29 +0300 Subject: [PATCH 17/41] Shared: Components: Navigation: add tariff bar prop, wrapper --- .../navigation/Navigation.styled.ts | 130 ++++++++++-------- .../components/navigation/Navigation.tsx | 24 ++-- .../components/navigation/Navigation.types.ts | 1 + 3 files changed, 89 insertions(+), 66 deletions(-) diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts index 974c8fadfd..b15e14f971 100644 --- a/packages/shared/components/navigation/Navigation.styled.ts +++ b/packages/shared/components/navigation/Navigation.styled.ts @@ -48,11 +48,11 @@ const StyledContainer = styled.div<{ display: flex; height: 24px; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} @@ -65,12 +65,12 @@ const StyledContainer = styled.div<{ .header_separator { display: ${({ isRootFolder }) => (isRootFolder ? "block" : "none")}; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` border-right: 1px solid #dfe2e3; margin: 0 15px 0 0; ` - : css` + : css` border-left: 1px solid #dfe2e3; margin: 0 0 0 15px; `} @@ -125,7 +125,7 @@ const StyledContainer = styled.div<{ svg { ${({ theme }) => - theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`} + theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`} } } @@ -144,12 +144,12 @@ const StyledContainer = styled.div<{ .navigation-header-separator { display: block; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` padding-right: 16px; border-left: ${`1px solid ${props.theme.navigation.icon.stroke}`}; ` - : css` + : css` padding-left: 16px; border-right: ${`1px solid ${props.theme.navigation.icon.stroke}`}; `} @@ -195,13 +195,13 @@ const StyledContainer = styled.div<{ @media ${tablet} { width: 100%; grid-template-columns: ${({ isRootFolder, withLogo }) => - isRootFolder - ? withLogo - ? "59px 1fr auto" - : "1fr auto" - : withLogo - ? "43px 49px 1fr auto" - : "49px 1fr auto"}; + isRootFolder + ? withLogo + ? "59px 1fr auto" + : "1fr auto" + : withLogo + ? "43px 49px 1fr auto" + : "49px 1fr auto"}; } @media ${mobile} { @@ -210,11 +210,11 @@ const StyledContainer = styled.div<{ } grid-template-columns: ${(props) => - props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; + props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; } `; -const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{ +const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme) <{ isInfoPanelVisible?: boolean; isRootFolder?: boolean; }>` @@ -256,11 +256,11 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{ @media ${tablet} { display: none; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: ${props.isRootFolder ? "auto" : "0"}; ` - : css` + : css` margin-left: ${props.isRootFolder ? "auto" : "0"}; `} } @@ -283,11 +283,11 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` .add-button { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} min-width: 15px; @@ -305,21 +305,21 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` min-width: 17px; /* ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} */ /* @media ${tablet} { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 9px; ` - : css` + : css` margin-right: 9px; `} } */ @@ -327,11 +327,11 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` .trash-button { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-left: 16px; ` - : css` + : css` margin-right: 16px; `} min-width: 15px; @@ -357,11 +357,11 @@ const StyledInfoPanelToggleWrapper = styled.div<{ @media ${tablet} { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: ${props.isRootFolder ? "auto" : "0"}; ` - : css` + : css` margin-left: ${props.isRootFolder ? "auto" : "0"}; `} } @@ -374,15 +374,15 @@ const StyledInfoPanelToggleWrapper = styled.div<{ justify-content: center; border-radius: 50%; background-color: ${(props) => - props.isInfoPanelVisible - ? props.theme.infoPanel.sectionHeaderToggleBgActive - : props.theme.infoPanel.sectionHeaderToggleBg}; + props.isInfoPanelVisible + ? props.theme.infoPanel.sectionHeaderToggleBgActive + : props.theme.infoPanel.sectionHeaderToggleBg}; path { fill: ${(props) => - props.isInfoPanelVisible - ? props.theme.infoPanel.sectionHeaderToggleIconActive - : props.theme.infoPanel.sectionHeaderToggleIcon}; + props.isInfoPanelVisible + ? props.theme.infoPanel.sectionHeaderToggleIconActive + : props.theme.infoPanel.sectionHeaderToggleIcon}; } } `; @@ -443,7 +443,7 @@ const StyledTextContainer = styled.div<{ `}; `; -const StyledHeading = styled(Heading)<{ isRootFolderTitle: boolean }>` +const StyledHeading = styled(Heading) <{ isRootFolderTitle: boolean }>` font-weight: 700; font-size: ${(props) => props.theme.getCorrectFontSize("18px")}; line-height: 24px; @@ -539,14 +539,14 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>` @media ${tablet} { ${({ withLogo }) => - withLogo && - css` + withLogo && + css` ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: 44px; ` - : css` + : css` margin-left: 44px; `} `}; @@ -554,17 +554,17 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>` @media ${mobile} { ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` margin-right: 0; ` - : css` + : css` margin-left: 0; `} } `; -const StyledText = styled(Text)<{ isRoot: boolean }>` +const StyledText = styled(Text) <{ isRoot: boolean }>` ${(props) => props.theme.interfaceDirection === "rtl" ? css` @@ -621,11 +621,11 @@ const StyledBox = styled.div<{ @media ${tablet} { width: ${({ dropBoxWidth }) => `${dropBoxWidth}px`}; ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` + props.theme.interfaceDirection === "rtl" + ? css` right: -16px; ` - : css` + : css` left: -16px; `} padding: 0 16px; @@ -640,6 +640,23 @@ const StyledBox = styled.div<{ StyledBox.defaultProps = { theme: Base }; +const StyledTariffWrapper = styled.div` + display: flex; + gap: 20px; + align-items: center; + flex-wrap: nowrap; + ${({ theme }) => + theme.interfaceDirection === "rtl" + ? css` + justify-content: left; + margin-right: auto; + ` + : css` + justify-content: right; + margin-left: auto; + `} +`; + export { StyledContainer, StyledInfoPanelToggleColorThemeWrapper, @@ -654,4 +671,5 @@ export { StyledText, StyledItem, StyledBox, + StyledTariffWrapper, }; diff --git a/packages/shared/components/navigation/Navigation.tsx b/packages/shared/components/navigation/Navigation.tsx index 5db9c6b953..1a0a0300c2 100644 --- a/packages/shared/components/navigation/Navigation.tsx +++ b/packages/shared/components/navigation/Navigation.tsx @@ -14,7 +14,7 @@ import TrashWarning from "./sub-components/TrashWarning"; import NavigationLogo from "./sub-components/LogoBlock"; import DropBox from "./sub-components/DropBox"; -import { StyledContainer } from "./Navigation.styled"; +import { StyledContainer, StyledTariffWrapper } from "./Navigation.styled"; import { INavigationProps } from "./Navigation.types"; const Navigation = ({ @@ -52,6 +52,7 @@ const Navigation = ({ titleIcon, currentDeviceType, rootRoomTitle, + tariffBar, ...rest }: INavigationProps) => { @@ -257,15 +258,18 @@ const Navigation = ({ {isDesktop && isTrashFolder && !isEmptyPage && ( )} - {infoPanelIsVisible && !hideInfoPanel && ( - - )} + + {tariffBar && tariffBar} + {infoPanelIsVisible && !hideInfoPanel && ( + + )} + )} diff --git a/packages/shared/components/navigation/Navigation.types.ts b/packages/shared/components/navigation/Navigation.types.ts index 7eb4c62e83..8b84a94ac2 100644 --- a/packages/shared/components/navigation/Navigation.types.ts +++ b/packages/shared/components/navigation/Navigation.types.ts @@ -160,4 +160,5 @@ export interface INavigationProps { titleIcon: string; currentDeviceType: DeviceType; rootRoomTitle: string; + tariffBar: React.ReactNode; } From 5ef02f458e33f851468a3ac32576aef9debb1c0d Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 18:01:44 +0300 Subject: [PATCH 18/41] Client: add tariff bar to navigation --- packages/client/src/pages/Home/Section/Header/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/client/src/pages/Home/Section/Header/index.js b/packages/client/src/pages/Home/Section/Header/index.js index c8ed17906d..bcbead9508 100644 --- a/packages/client/src/pages/Home/Section/Header/index.js +++ b/packages/client/src/pages/Home/Section/Header/index.js @@ -64,6 +64,7 @@ import { getCategoryUrl, } from "SRC_DIR/helpers/utils"; import { getLogoFromPath } from "@docspace/shared/utils"; +import TariffBar from "SRC_DIR/components/TariffBar"; const StyledContainer = styled.div` width: 100%; @@ -1107,6 +1108,7 @@ const SectionHeaderContent = (props) => { showRootFolderTitle={insideTheRoom} currentDeviceType={currentDeviceType} isFrame={isFrame} + tariffBar={} />
)} From dd7798b494ddda6d349ca32da271f63b9f5fa1e7 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 15 Jan 2024 18:36:56 +0300 Subject: [PATCH 19/41] Client: PortalSettings: Header: fix style --- .../PortalSettings/Layout/Section/Header/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index b04c519af1..35b41a558e 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js @@ -11,7 +11,7 @@ import { IconButton } from "@docspace/shared/components/icon-button"; import { TableGroupMenu } from "@docspace/shared/components/table"; import { DropDownItem } from "@docspace/shared/components/drop-down-item"; import LoaderSectionHeader from "../loaderSectionHeader"; -import { tablet, desktop } from "@docspace/shared/utils"; +import { mobile, tablet, desktop } from "@docspace/shared/utils"; import withLoading from "SRC_DIR/HOCs/withLoading"; import { Badge } from "@docspace/shared/components/badge"; import { @@ -107,6 +107,13 @@ const HeaderContainer = styled.div` } } + @media ${mobile} { + h1 { + line-height: 53px; + font-size: ${(props) => props.theme.getCorrectFontSize("18px")}; + } + } + .tariff-bar { ${(props) => props.theme.interfaceDirection === "rtl" @@ -341,6 +348,7 @@ const SectionHeaderContent = (props) => {
+ {props.addUsers && (
Date: Thu, 18 Jan 2024 12:41:42 +0300 Subject: [PATCH 20/41] Client: Profile: Header: fix style --- .../Profile/Section/Header/StyledHeader.js | 22 ++++++++++++------- .../src/pages/Profile/Section/Header/index.js | 6 +++-- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/client/src/pages/Profile/Section/Header/StyledHeader.js b/packages/client/src/pages/Profile/Section/Header/StyledHeader.js index 66b7cb3317..2611162c35 100644 --- a/packages/client/src/pages/Profile/Section/Header/StyledHeader.js +++ b/packages/client/src/pages/Profile/Section/Header/StyledHeader.js @@ -4,17 +4,11 @@ import { tablet } from "@docspace/shared/utils"; export const StyledHeader = styled.div` position: relative; - display: grid; - grid-template-columns: ${(props) => - props.showContextButton ? "auto auto auto 1fr" : "auto 1fr"}; + display: flex; align-items: center; - @media ${tablet} { - grid-template-columns: ${(props) => - props.showContextButton ? "auto 1fr auto" : "auto 1fr"}; - } - .action-button { + width: 100%; display: flex; gap: 16px; align-items: center; @@ -51,6 +45,17 @@ export const StyledHeader = styled.div` `} } } + + .tariff-bar { + ${(props) => + props.theme.interfaceDirection === "rtl" + ? css` + margin-right: auto; + ` + : css` + margin-left: auto; + `} + } } .arrow-button { ${(props) => @@ -66,6 +71,7 @@ export const StyledHeader = styled.div` } .header-headline { + white-space: nowrap; ${(props) => props.theme.interfaceDirection === "rtl" ? css` diff --git a/packages/client/src/pages/Profile/Section/Header/index.js b/packages/client/src/pages/Profile/Section/Header/index.js index 5c69312ad2..0e08264874 100644 --- a/packages/client/src/pages/Profile/Section/Header/index.js +++ b/packages/client/src/pages/Profile/Section/Header/index.js @@ -140,7 +140,7 @@ const Header = (props) => { className="arrow-button" /> - + {t("Profile:MyProfile")} {profile?.isLDAP && ` (${t("PeopleTranslations:LDAPLbl")})`} @@ -157,7 +157,9 @@ const Header = (props) => { /> )} - +
+ +
{deleteSelfProfileDialog && ( From bcd59e934efdea862c7ba369daf4e5cca1097327 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Wed, 24 Jan 2024 15:40:19 +0300 Subject: [PATCH 21/41] Shared: Navigation: fix style --- packages/shared/components/navigation/Navigation.styled.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts index b15e14f971..27963d8396 100644 --- a/packages/shared/components/navigation/Navigation.styled.ts +++ b/packages/shared/components/navigation/Navigation.styled.ts @@ -641,6 +641,7 @@ const StyledBox = styled.div<{ StyledBox.defaultProps = { theme: Base }; const StyledTariffWrapper = styled.div` + width: auto; display: flex; gap: 20px; align-items: center; @@ -655,6 +656,10 @@ const StyledTariffWrapper = styled.div` justify-content: right; margin-left: auto; `} + + @media ${tablet} { + width: 100%; + } `; export { From a7d645658acd3c1427a731ef8921e430939c58e7 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 25 Jan 2024 16:26:04 +0300 Subject: [PATCH 22/41] Client: TariffBar: fix style --- .../client/src/components/TariffBar/index.js | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/client/src/components/TariffBar/index.js b/packages/client/src/components/TariffBar/index.js index 8dcadf6e55..9cbaea7ce4 100644 --- a/packages/client/src/components/TariffBar/index.js +++ b/packages/client/src/components/TariffBar/index.js @@ -8,6 +8,14 @@ import { Text } from "@docspace/shared/components/text"; const StyledWrapper = styled.div` cursor: pointer; + + .tariff-bar-text:hover { + opacity: 0.85; + } + + .tariff-bar-text:active { + filter: brightness(0.9); + } `; const PROXY_BASE_URL = combineUrl( @@ -29,6 +37,8 @@ const TariffBar = ({ }) => { const navigate = useNavigate(); const { t } = useTranslation("Common"); + const orange = "#F97A0B"; + const red = "#F2665A"; const onClick = () => { const paymentPageUrl = combineUrl( @@ -45,9 +55,8 @@ const TariffBar = ({ (isFreeTariff || isGracePeriod) ) { if (isFreeTariff) - return { label: t("Common:TryBusiness"), color: "#ED7309" }; - if (isGracePeriod) - return { label: t("Common:LatePayment"), color: "#F24724" }; + return { label: t("Common:TryBusiness"), color: orange }; + if (isGracePeriod) return { label: t("Common:LatePayment"), color: red }; } }; @@ -59,20 +68,20 @@ const TariffBar = ({ ) { if (isTrial) { if (isLicenseDateExpired) - return { label: t("Common:TrialExpired"), color: "#ED7309" }; + return { label: t("Common:TrialExpired"), color: orange }; return { label: t("Common:TrialDaysLeft", { count: trialDaysLeft }), - color: "#ED7309", + color: orange, }; } else { if (isLicenseDateExpired) return { label: t("Common:SubscriptionExpiredTitle"), - color: "#F24724", + color: red, }; return { label: t("Common:SubscriptionIsExpiring", { date: paymentDate }), - color: "#ED7309", + color: orange, }; } } @@ -84,6 +93,7 @@ const TariffBar = ({ return ( Date: Mon, 29 Jan 2024 14:17:19 +0300 Subject: [PATCH 23/41] Shared: Navigation: fix style --- .../navigation/Navigation.styled.ts | 32 +++++++------------ 1 file changed, 12 insertions(+), 20 deletions(-) diff --git a/packages/shared/components/navigation/Navigation.styled.ts b/packages/shared/components/navigation/Navigation.styled.ts index 27963d8396..74e973edea 100644 --- a/packages/shared/components/navigation/Navigation.styled.ts +++ b/packages/shared/components/navigation/Navigation.styled.ts @@ -24,10 +24,8 @@ const StyledContainer = styled.div<{ !props.isDropBoxComponent && props.isDesktop && css` - width: fit-content; - max-width: ${props.isInfoPanelVisible - ? `calc(100%)` - : `calc(100% - 72px)`}; + width: 100%; + max-width: 100%; `} display: grid; @@ -210,7 +208,7 @@ const StyledContainer = styled.div<{ } grid-template-columns: ${(props) => - props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; + props.isRootFolder ? "auto 1fr" : "29px auto 1fr"}; } `; @@ -223,11 +221,11 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme) <{ ${(props) => props.theme.interfaceDirection === "rtl" ? css` - margin-right: auto; + margin-right: 20px; transform: scaleX(-1); ` : css` - margin-left: auto; + margin-left: 20px; `} margin-bottom: 1px; @@ -278,18 +276,14 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>` `} display: flex; align-items: center; - + gap: 16px; height: 32px; + @media ${tablet} { + flex-direction: row-reverse; + } + .add-button { - ${(props) => - props.theme.interfaceDirection === "rtl" - ? css` - margin-left: 16px; - ` - : css` - margin-right: 16px; - `} min-width: 15px; @media ${tablet} { @@ -641,11 +635,9 @@ const StyledBox = styled.div<{ StyledBox.defaultProps = { theme: Base }; const StyledTariffWrapper = styled.div` - width: auto; display: flex; - gap: 20px; align-items: center; - flex-wrap: nowrap; + ${({ theme }) => theme.interfaceDirection === "rtl" ? css` @@ -658,7 +650,7 @@ const StyledTariffWrapper = styled.div` `} @media ${tablet} { - width: 100%; + flex-direction: row-reverse; } `; From 72da51aeeab46e2ec397a6965acefc49287c1591 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 29 Jan 2024 14:23:54 +0300 Subject: [PATCH 24/41] Shared: Navigation: move tariff bar --- .../components/navigation/Navigation.tsx | 26 +++++++++---------- .../navigation/sub-components/ControlBtn.tsx | 11 ++++++-- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/packages/shared/components/navigation/Navigation.tsx b/packages/shared/components/navigation/Navigation.tsx index 91042bffe8..d27b8a1b7d 100644 --- a/packages/shared/components/navigation/Navigation.tsx +++ b/packages/shared/components/navigation/Navigation.tsx @@ -14,7 +14,7 @@ import TrashWarning from "./sub-components/TrashWarning"; import NavigationLogo from "./sub-components/LogoBlock"; import DropBox from "./sub-components/DropBox"; -import { StyledContainer, StyledTariffWrapper } from "./Navigation.styled"; +import { StyledContainer } from "./Navigation.styled"; import { INavigationProps } from "./Navigation.types"; const Navigation = ({ @@ -254,23 +254,22 @@ const Navigation = ({ isFrame={isFrame} isPublicRoom={isPublicRoom} isTrashFolder={isTrashFolder} + tariffBar={tariffBar} + title={title} /> {isDesktop && isTrashFolder && !isEmptyPage && ( )} - - {tariffBar && tariffBar} - {infoPanelIsVisible && !hideInfoPanel && ( - - )} - + {infoPanelIsVisible && !hideInfoPanel && ( + + )} )} @@ -278,4 +277,3 @@ const Navigation = ({ }; export default React.memo(Navigation); - diff --git a/packages/shared/components/navigation/sub-components/ControlBtn.tsx b/packages/shared/components/navigation/sub-components/ControlBtn.tsx index 616eb3a848..45b3dfc994 100644 --- a/packages/shared/components/navigation/sub-components/ControlBtn.tsx +++ b/packages/shared/components/navigation/sub-components/ControlBtn.tsx @@ -1,6 +1,9 @@ import React from "react"; -import { StyledControlButtonContainer } from "../Navigation.styled"; +import { + StyledControlButtonContainer, + StyledTariffWrapper, +} from "../Navigation.styled"; import { IControlButtonProps } from "../Navigation.types"; import ToggleInfoPanelButton from "./ToggleInfoPanelBtn"; @@ -24,11 +27,14 @@ const ControlButtons = ({ isPublicRoom, isTrashFolder, isMobile, + tariffBar, + title, }: IControlButtonProps) => { const toggleInfoPanelAction = () => { toggleInfoPanel?.(); toggleDropBox?.(); }; + const children = tariffBar ? React.cloneElement(tariffBar, { title }) : null; return ( @@ -124,8 +130,9 @@ const ControlButtons = ({ )} )} + {children && children} ); }; -export default React.memo(ControlButtons); +export default ControlButtons; From 48f2f54bde176573c0f7229aa844d24656681583 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 29 Jan 2024 14:24:10 +0300 Subject: [PATCH 25/41] Shared: Navigation: add types --- packages/shared/components/navigation/Navigation.types.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/shared/components/navigation/Navigation.types.ts b/packages/shared/components/navigation/Navigation.types.ts index 361c6d2673..7ca376bf2b 100644 --- a/packages/shared/components/navigation/Navigation.types.ts +++ b/packages/shared/components/navigation/Navigation.types.ts @@ -60,6 +60,8 @@ export interface IControlButtonProps { isPublicRoom?: boolean; isTrashFolder?: boolean; isMobile?: boolean; + tariffBar?: React.ReactNode; + title?: string; } export interface ITextProps { From 2b9cbb6a5bba3122183fc0a896d63e12e9e47bd7 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 29 Jan 2024 15:37:38 +0300 Subject: [PATCH 26/41] Client: TariffBar: refactoring, hidden bar --- .../src/components/TariffBar/helpers.js | 63 +++++++++++++++ .../client/src/components/TariffBar/index.js | 81 +++++++++---------- 2 files changed, 101 insertions(+), 43 deletions(-) create mode 100644 packages/client/src/components/TariffBar/helpers.js diff --git a/packages/client/src/components/TariffBar/helpers.js b/packages/client/src/components/TariffBar/helpers.js new file mode 100644 index 0000000000..5d90547430 --- /dev/null +++ b/packages/client/src/components/TariffBar/helpers.js @@ -0,0 +1,63 @@ +const ORANGE = "#F97A0B"; +const RED = "#F2665A"; + +export const getSaasBar = ( + t, + isPaymentPageAvailable, + isNonProfit, + isFreeTariff, + isGracePeriod +) => { + if ( + isPaymentPageAvailable && + !isNonProfit && + (isFreeTariff || isGracePeriod) + ) { + if (isFreeTariff) return { label: t("Common:TryBusiness"), color: ORANGE }; + if (isGracePeriod) return { label: t("Common:LatePayment"), color: RED }; + } +}; + +export const getEnterpriseBar = ( + t, + isPaymentPageAvailable, + isEnterprise, + isTrial, + isLicenseExpiring, + isLicenseDateExpired, + trialDaysLeft, + paymentDate +) => { + if ( + isPaymentPageAvailable && + isEnterprise && + (isTrial || isLicenseExpiring || isLicenseDateExpired) + ) { + if (isTrial) { + if (isLicenseDateExpired) + return { label: t("Common:TrialExpired"), color: ORANGE }; + return { + label: t("Common:TrialDaysLeft", { count: trialDaysLeft }), + color: ORANGE, + }; + } else { + if (isLicenseDateExpired) + return { + label: t("Common:SubscriptionExpiredTitle"), + color: RED, + }; + return { + label: t("Common:SubscriptionIsExpiring", { date: paymentDate }), + color: ORANGE, + }; + } + } +}; + +export const checkBar = () => { + const el = document.getElementById("tariff-bar-text"); + el?.classList?.remove("hidden"); + if (el?.offsetWidth < el?.scrollWidth) { + el?.classList?.add("hidden"); + } +}; diff --git a/packages/client/src/components/TariffBar/index.js b/packages/client/src/components/TariffBar/index.js index 9cbaea7ce4..1104fd3a26 100644 --- a/packages/client/src/components/TariffBar/index.js +++ b/packages/client/src/components/TariffBar/index.js @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import { inject, observer } from "mobx-react"; @@ -5,17 +6,23 @@ import { useTranslation } from "react-i18next"; import { combineUrl } from "@docspace/shared/utils/combineUrl"; import { Text } from "@docspace/shared/components/text"; +import { getSaasBar, getEnterpriseBar, checkBar } from "./helpers"; const StyledWrapper = styled.div` + display: grid; cursor: pointer; - .tariff-bar-text:hover { + #tariff-bar-text:hover { opacity: 0.85; } - .tariff-bar-text:active { + #tariff-bar-text:active { filter: brightness(0.9); } + + .hidden { + visibility: hidden; + } `; const PROXY_BASE_URL = combineUrl( @@ -34,11 +41,11 @@ const TariffBar = ({ isTrial, standalone, paymentDate, + trialDaysLeft, + title, }) => { const navigate = useNavigate(); const { t } = useTranslation("Common"); - const orange = "#F97A0B"; - const red = "#F2665A"; const onClick = () => { const paymentPageUrl = combineUrl( @@ -48,52 +55,38 @@ const TariffBar = ({ navigate(paymentPageUrl); }; - const getSaasBar = () => { - if ( - isPaymentPageAvailable && - !isNonProfit && - (isFreeTariff || isGracePeriod) - ) { - if (isFreeTariff) - return { label: t("Common:TryBusiness"), color: orange }; - if (isGracePeriod) return { label: t("Common:LatePayment"), color: red }; - } - }; + useEffect(() => { + checkBar(); + }, []); - const getEnterpriseBar = () => { - if ( - isPaymentPageAvailable && - isEnterprise && - (isTrial || isLicenseExpiring || isLicenseDateExpired) - ) { - if (isTrial) { - if (isLicenseDateExpired) - return { label: t("Common:TrialExpired"), color: orange }; - return { - label: t("Common:TrialDaysLeft", { count: trialDaysLeft }), - color: orange, - }; - } else { - if (isLicenseDateExpired) - return { - label: t("Common:SubscriptionExpiredTitle"), - color: red, - }; - return { - label: t("Common:SubscriptionIsExpiring", { date: paymentDate }), - color: orange, - }; - } - } - }; + useEffect(() => { + checkBar(); + }, [title]); - const tariffBar = !standalone ? getSaasBar() : getEnterpriseBar(); + const tariffBar = !standalone + ? getSaasBar( + t, + isPaymentPageAvailable, + isNonProfit, + isFreeTariff, + isGracePeriod + ) + : getEnterpriseBar( + t, + isPaymentPageAvailable, + isEnterprise, + isTrial, + isLicenseExpiring, + isLicenseDateExpired, + trialDaysLeft, + paymentDate + ); if (!tariffBar) return <>; return ( { isLicenseExpiring, isLicenseDateExpired, paymentDate, + trialDaysLeft, } = currentTariffStatusStore; const { standalone } = settingsStore; @@ -136,5 +130,6 @@ export default inject(({ auth }) => { isTrial, standalone, paymentDate, + trialDaysLeft, }; })(observer(TariffBar)); From cfa93b96ca9ecef48b7ede10553369f28226bad0 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 29 Jan 2024 12:44:01 +0500 Subject: [PATCH 27/41] Web: Components: textarea: numeration was fixed Conflicts: packages/shared/components/textarea/Textarea.styled.tsx --- packages/shared/components/textarea/Textarea.styled.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/shared/components/textarea/Textarea.styled.tsx b/packages/shared/components/textarea/Textarea.styled.tsx index 2755d447ee..2a0cd870ee 100644 --- a/packages/shared/components/textarea/Textarea.styled.tsx +++ b/packages/shared/components/textarea/Textarea.styled.tsx @@ -216,8 +216,7 @@ const Wrapper = styled.div<{ enableCopy?: boolean; isJSONField?: boolean }>` const Numeration = styled.pre<{ fontSize: string }>` display: block; position: absolute; - - font-size: ${(props) => props.theme.getCorrectFontSize(props.fontSize)}; + font-size: ${(props) => props.theme.getCorrectFontSize(props.fontSize)}px; font-family: ${(props) => props.theme.fontFamily}; line-height: 1.5; margin: 0; From 6d99332339540ffaeff8dadc98321cf1f260d33d Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 29 Jan 2024 12:44:01 +0500 Subject: [PATCH 28/41] Web: Components: textarea: numeration was fixed From 9924b25b4bace7149ebdc01716b1aa329be0c40d Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 29 Jan 2024 13:59:38 +0500 Subject: [PATCH 29/41] Web: Components: textarea: warning was fixed Conflicts: packages/shared/components/textarea/Textarea.tsx --- packages/shared/components/textarea/Textarea.styled.tsx | 2 -- packages/shared/components/textarea/Textarea.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/packages/shared/components/textarea/Textarea.styled.tsx b/packages/shared/components/textarea/Textarea.styled.tsx index 2a0cd870ee..28988f18ce 100644 --- a/packages/shared/components/textarea/Textarea.styled.tsx +++ b/packages/shared/components/textarea/Textarea.styled.tsx @@ -72,13 +72,11 @@ const ClearTextareaAutosize = React.forwardRef( paddingLeftProp, isJSONField, enableCopy, - heightTextAreaProp, heightTextArea, ...props }: TextareaProps & { disabled?: boolean; readOnly?: boolean; - heightTextAreaProp?: number; }, ref: React.Ref, ) => , diff --git a/packages/shared/components/textarea/Textarea.tsx b/packages/shared/components/textarea/Textarea.tsx index bd877e086a..618be6dd33 100644 --- a/packages/shared/components/textarea/Textarea.tsx +++ b/packages/shared/components/textarea/Textarea.tsx @@ -128,7 +128,6 @@ const Textarea = ({ )} Date: Mon, 29 Jan 2024 13:59:38 +0500 Subject: [PATCH 30/41] Web: Components: textarea: warning was fixed From 2e70879a958e53f88dfb911dd596ae8cd8fd88f1 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 29 Jan 2024 14:44:26 +0500 Subject: [PATCH 31/41] Web: Components: textarea: heightTextArea prop was cast to string Conflicts: packages/components/textarea/textarea.stories.js packages/shared/components/textarea/README.md packages/shared/components/textarea/Textarea.styled.tsx packages/shared/components/textarea/Textarea.tsx --- .../components/scrollbar/Scrollbar.types.ts | 4 ++ packages/shared/components/textarea/README.md | 2 +- .../components/textarea/Textarea.stories.tsx | 4 +- .../components/textarea/Textarea.styled.tsx | 37 ++++++++++++++----- .../shared/components/textarea/Textarea.tsx | 12 ++++-- .../components/textarea/Textarea.types.ts | 7 +++- 6 files changed, 47 insertions(+), 19 deletions(-) diff --git a/packages/shared/components/scrollbar/Scrollbar.types.ts b/packages/shared/components/scrollbar/Scrollbar.types.ts index dffa1ed390..3242ef81e5 100644 --- a/packages/shared/components/scrollbar/Scrollbar.types.ts +++ b/packages/shared/components/scrollbar/Scrollbar.types.ts @@ -17,6 +17,10 @@ export interface ScrollbarProps { noScrollY?: boolean; /** Disable horizontal scrolling. */ noScrollX?: boolean; + /** Calculating height of content depending on number of lines */ + isFullHeight?: boolean; + /** Calculated height of content depending on number of lines in pixels */ + fullHeight?: number; onScroll?: React.UIEventHandler; scrollclass?: string; diff --git a/packages/shared/components/textarea/README.md b/packages/shared/components/textarea/README.md index 38d6c31a99..63ad9db503 100644 --- a/packages/shared/components/textarea/README.md +++ b/packages/shared/components/textarea/README.md @@ -32,6 +32,6 @@ import { Textarea } from "@docspace/shared/components/textarea"; | `style` | `obj`, `array` | - | - | - | Accepts css style | | `value` | `string` | - | - | - | Value for Textarea | | `fontSize` | `number` | - | - | 13 | Value for font-size | -| `heightTextArea` | `number` | - | - | - | Value for height text-area | +| `heightTextArea` | `string` | - | - | - | Value for height text-area | | `isJSONField` | `bool` | - | - | `false` | Indicates that the field is displaying JSON object | | `copyInfoText` | `string` | - | - | `Content was copied successfully!` | Indicates the text of toast/informational alarm | diff --git a/packages/shared/components/textarea/Textarea.stories.tsx b/packages/shared/components/textarea/Textarea.stories.tsx index 7f5c1485b9..83a6d16b97 100644 --- a/packages/shared/components/textarea/Textarea.stories.tsx +++ b/packages/shared/components/textarea/Textarea.stories.tsx @@ -51,7 +51,7 @@ export const Default: Story = { name: "", tabIndex: 1, fontSize: 13, - heightTextArea: 89, + heightTextArea: "89px", value: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae", isJSONField: false, @@ -80,7 +80,7 @@ export const JsonViewer: Story = { name: "", tabIndex: 1, fontSize: 13, - heightTextArea: 89, + heightTextArea: "89px", value: '{"menu": {"id": "file","value": "File","popup": {"menuitem": [{"value": "New", "onclick": "CreateNewDoc()"},{"value": "Open", "onclick": "OpenDoc()"},{"value": "Close", "onclick": "CloseDoc()"}]}}}', isJSONField: true, diff --git a/packages/shared/components/textarea/Textarea.styled.tsx b/packages/shared/components/textarea/Textarea.styled.tsx index 28988f18ce..b804c50bf0 100644 --- a/packages/shared/components/textarea/Textarea.styled.tsx +++ b/packages/shared/components/textarea/Textarea.styled.tsx @@ -15,6 +15,8 @@ const ClearScrollbar = ({ heightScale, hasError, heightTextAreaProp, + isFullHeight, + fullHeight, ...props }: { isDisabled?: boolean; @@ -37,21 +39,27 @@ const StyledScrollbar = styled(ClearScrollbar)` } width: ${(props) => props.theme.textArea.scrollWidth} !important; - height: ${(props) => { - return props.heightScale - ? "67vh" - : props.heightTextAreaProp - ? `${props.heightTextAreaProp + 2}px` - : "91px"; - }} !important; + height: calc( + ${(props) => { + return props.heightScale + ? "67vh" + : props.isFullHeight + ? `${props.fullHeight}px` + : props.heightTextAreaProp + ? props.heightTextAreaProp + : "91px"; + }} + 2px + ) !important; textarea { height: ${(props) => { return props.heightScale ? "65vh" - : props.heightTextAreaProp - ? `${props.heightTextAreaProp}px` - : "89px"; + : props.isFullHeight + ? `${props.fullHeight}px` + : props.heightTextAreaProp + ? props.heightTextAreaProp + : "89px"; }}; } background-color: ${(props) => @@ -204,6 +212,15 @@ const Wrapper = styled.div<{ enableCopy?: boolean; isJSONField?: boolean }>` position: relative; max-width: 1200px; + height: ${(props) => { + return props.heightScale + ? "65vh" + : props.isFullHeight + ? `${props.fullHeight}px` + : props.heightTextArea + ? props.heightTextArea + : "89px"; + }}; .scroll-wrapper { margin-right: ${(props) => diff --git a/packages/shared/components/textarea/Textarea.tsx b/packages/shared/components/textarea/Textarea.tsx index 618be6dd33..1aadab0d26 100644 --- a/packages/shared/components/textarea/Textarea.tsx +++ b/packages/shared/components/textarea/Textarea.tsx @@ -53,9 +53,7 @@ const Textarea = ({ const lineHeight = 1.5; const padding = 7; const numberOfLines = modifiedValue.split("\n").length; - const textareaHeight = isFullHeight - ? numberOfLines * fontSize * lineHeight + padding + 4 - : heightTextArea; + const fullHeight = numberOfLines * fontSize * lineHeight + padding + 4; const defaultPaddingLeft = 42; const numberOfDigits = @@ -97,6 +95,10 @@ const Textarea = ({ enableCopy={enableCopy} onClick={onTextareaClick} data-testid="textarea" + heightScale={heightScale} + heightTextArea={heightTextArea} + isFullHeight={isFullHeight} + fullHeight={fullHeight} > {enableCopy && ( diff --git a/packages/shared/components/textarea/Textarea.types.ts b/packages/shared/components/textarea/Textarea.types.ts index c7611e00fa..927cf78122 100644 --- a/packages/shared/components/textarea/Textarea.types.ts +++ b/packages/shared/components/textarea/Textarea.types.ts @@ -31,7 +31,7 @@ export interface TextareaProps { /** Font-size value */ fontSize?: number; /** Text-area height value */ - heightTextArea?: number; + heightTextArea?: string; /** Specifies the text color */ color?: string; /** Default input property */ @@ -48,13 +48,16 @@ export interface TextareaProps { hasNumeration?: boolean; /** Calculating height of content depending on number of lines */ isFullHeight?: boolean; + /** Calculated height of content depending on number of lines in pixels */ + fullHeight?: number; + classNameCopyIcon?: string; paddingLeftProp?: string; } export interface TextareaThemeProps extends TextareaProps { ref: React.LegacyRef; - heightTextAreaProp?: number; + heightTextAreaProp?: string; $currentColorScheme?: TColorScheme; interfaceDirection?: string; } From eca37dd8436f670fcedd5ed5250b7c91ffb2f210 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 29 Jan 2024 14:44:26 +0500 Subject: [PATCH 32/41] Web: Components: textarea: heightTextArea prop was cast to string From d9e7652f9e6d5602f07737ff1c763e527d5d0cb5 Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Tue, 30 Jan 2024 13:54:49 +0500 Subject: [PATCH 33/41] Web: heightTextArea was changed to string --- packages/client/src/components/dialogs/ReportDialog/index.js | 2 +- .../src/components/panels/EmbeddingPanel/EmbeddingBody.js | 2 +- .../pages/Home/InfoPanel/Body/sub-components/CommentEditor.js | 2 +- .../categories/developer-tools/JavascriptSDK/index.js | 2 +- .../JavascriptSDK/sub-components/GetCodeDialog.js | 2 +- .../src/pages/VersionHistory/Section/Body/VersionRow.js | 2 +- .../RecoverAccessModalDialog/recover-access-modal-dialog.tsx | 2 +- packages/shared/components/textarea/Textarea.test.tsx | 4 ++-- 8 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/client/src/components/dialogs/ReportDialog/index.js b/packages/client/src/components/dialogs/ReportDialog/index.js index 993590305e..bdaa60b60b 100644 --- a/packages/client/src/components/dialogs/ReportDialog/index.js +++ b/packages/client/src/components/dialogs/ReportDialog/index.js @@ -119,7 +119,7 @@ const ReportDialog = (props) => { onChange={onChangeTextareaValue} autoFocus areaSelect - heightTextArea={72} + heightTextArea="72px" fontSize={13} />
diff --git a/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js b/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js index 56038605cc..deb2efeb83 100644 --- a/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js +++ b/packages/client/src/components/panels/EmbeddingPanel/EmbeddingBody.js @@ -145,7 +145,7 @@ const EmbeddingBody = ({ t, link, requestToken, roomId }) => { iconName={CopyReactSvgUrl} onClick={onCopyLink} /> -