Client: use colors from theme

2024-06-20 11:29:42 +03:00 · 2024-06-20 11:29:42 +03:00 · b4698bf439
commit b4698bf439
parent 350967144e
19 changed files with 68 additions and 26 deletions
--- a/packages/client/src/components/NavMenu/sub-components/nav-item.js
+++ b/packages/client/src/components/NavMenu/sub-components/nav-item.js
@ -39,7 +39,7 @@ import {
 } from "@docspace/shared/utils";

 import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
-import { Base } from "@docspace/shared/themes";
+import { Base, globalColors } from "@docspace/shared/themes";

 const NavItemSeparator = styled.div`
  border-bottom: 1px ${(props) => (props.dashed ? "dashed" : "solid")}
@ -127,9 +127,9 @@ const NavItemBadge = styled(Badge)`
 `;

 const VersionBadge = styled.div`
-  background-color: #3cb55b;
+  background-color: ${globalColors.lightStatusPositive};
  border-radius: 5px;
-  color: #ffffff;
+  color: ${globalColors.white};
  display: inline-block;
  font-size: 10px;
  line-height: 8px;
--- a/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
+++ b/packages/client/src/components/panels/InvitePanel/sub-components/ExternalLinks.js
@ -50,6 +50,7 @@ import {
  StyledDescription,
 } from "../StyledInvitePanel";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";

 const ExternalLinks = ({
  t,
@ -191,8 +192,8 @@ const ExternalLinks = ({
            <IconButton
              size={16}
              iconName={MediaDownloadReactSvgUrl}
-              hoverColor="#333333"
-              iconColor="#A3A9AE"
+              hoverColor={globalColors.black}
+              iconColor={globalColors.gray}
              onClick={toggleActionLinks}
            />
            <DropDown
--- a/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js
@ -34,6 +34,7 @@ import * as Styled from "./index.styled";
 import { Text } from "@docspace/shared/components/text";
 import { Avatar } from "@docspace/shared/components/avatar";
 import Badges from "../../Badges";
+import { globalColors } from "@docspace/shared/themes";

 const GroupsTableItem = ({
  t,
@ -143,7 +144,7 @@ const GroupsTableItem = ({
              fontSize="13px"
              isTextOverflow
              className="table-cell_group-manager"
-              color={"#A3A9AE"}
+              color={globalColors.gray}
              dir="auto"
            >
              {item.manager?.displayName}
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomCell.js
@ -31,6 +31,7 @@ import React, { useState } from "react";
 import { StyledText } from "./CellStyles";
 import { getFolderPath } from "@docspace/shared/api/files";
 import { CategoryType } from "@docspace/client/src/helpers/constants";
+import { globalColors } from "@docspace/shared/themes";

 const RoomCell = ({ sideColor, item }) => {
  const { originRoomTitle, originId, originTitle } = item;
@ -78,7 +79,7 @@ const RoomCell = ({ sideColor, item }) => {
      getContent={() => (
        <span>
          {isTooltipLoading ? (
-            <Loader color="#333333" size="12px" type="track" />
+            <Loader color={globalColors.black} size="12px" type="track" />
          ) : (
            path.map((pathPart, i) => (
              <Text key={pathPart.id} isBold={i === 0} isInline fontSize="12px">
--- a/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Appearance/preview.js
@ -40,6 +40,7 @@ import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg";
 import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";

 import { isMobile, isTablet } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";

 const Preview = (props) => {
  const {
@ -366,8 +367,21 @@ const Preview = (props) => {
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
-              <rect x="4" y="6" width="20" height="20" rx="2" fill="#11A3D4" />
-              <circle cx="24" cy="6" r="5" fill="#11A3D4" stroke="#F8F9F9" />
+              <rect
+                x="4"
+                y="6"
+                width="20"
+                height="20"
+                rx="2"
+                fill={globalColors.secondBlue}
+              />
+              <circle
+                cx="24"
+                cy="6"
+                r="5"
+                fill={globalColors.secondBlue}
+                stroke={globalColors.grayLight}
+              />
            </svg>
            <RectangleSkeleton
              animate={false}
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
@ -225,7 +225,7 @@ const DNSSettings = (props) => {
              key="dns-hint"
              fontSize="12px"
              fontWeight="400"
-              color="#A3A9AE"
+              color={globalColors.gray}
            >
              {`${t("Settings:DNSSettingsHint")}${domainExampleText}`}
            </Text>
--- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/AddEmailsStep/AccountsTable/RowView/index.js
@ -33,6 +33,7 @@ import { RowContainer } from "@docspace/shared/components/row-container";
 import UsersRow from "./UsersRow";
 import { Row } from "@docspace/shared/components/row";
 import { Text } from "@docspace/shared/components/text";
+import { globalColors } from "@docspace/shared/themes";

 const StyledRow = styled(Row)`
  box-sizing: border-box;
@ -87,7 +88,7 @@ const RowView = (props) => {
        indeterminate={isIndeterminate}
        isDisabled={usersWithFilledEmails.length === 0}
      >
-        <Text color="#a3a9ae" fontWeight={600} fontSize="12px">
+        <Text color={globalColors.gray} fontWeight={600} fontSize="12px">
          {t("Common:Name")}
        </Text>
      </StyledRow>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/TooltipContent.js
@ -29,6 +29,7 @@ import { Text } from "@docspace/shared/components/text";
 import styled from "styled-components";

 import XImg from "PUBLIC_DIR/images/x.react.svg";
+import { globalColors } from "@docspace/shared/themes";

 const Wrapper = styled.div`
  box-sizing: border-box;
@ -48,7 +49,7 @@ const HeaderContainer = styled.header`
  svg {
    cursor: pointer;
    path {
-      fill: #333;
+      fill: ${globalColors.black};
    }
  }
 `;
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/sub-components/csp.js
@ -40,6 +40,7 @@ import { SelectedItem } from "@docspace/shared/components/selected-item";
 import { tablet } from "@docspace/shared/utils";
 import Base from "@docspace/shared/themes/base";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";

 const CategoryHeader = styled.div`
  margin-top: 24px;
@ -257,7 +258,7 @@ const CSP = ({
      </Container>
      <Text
        lineHeight="20px"
-        color={error ? theme?.input.focusErrorBorderColor : "#A3A9AE"}
+        color={error ? theme?.input.focusErrorBorderColor : globalColors.gray}
      >
        {error ? error : t("CSPUrlHelp", { productName: PRODUCT_NAME })}
      </Text>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/FilterDialog/DeliveryDatePicker.js
@ -37,6 +37,7 @@ import { SelectorAddButton } from "@docspace/shared/components/selector-add-butt
 import { SelectedItem } from "@docspace/shared/components/selected-item";

 import { isMobile } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";

 const Selectors = styled.div`
  position: relative;
@ -235,7 +236,7 @@ const DeliveryDatePicker = ({
                <Text
                  isInline
                  fontWeight={600}
-                  color="#A3A9AE"
+                  color={globalColors.gray}
                  className="mr-8"
                >
                  {t("From")}
@ -250,7 +251,12 @@ const DeliveryDatePicker = ({
                />
              </span>

-              <Text isInline fontWeight={600} color="#A3A9AE" className="mr-8">
+              <Text
+                isInline
+                fontWeight={600}
+                color={globalColors.gray}
+                className="mr-8"
+              >
                {t("Before")}
              </Text>
              <TimePicker
@ -270,7 +276,7 @@ const DeliveryDatePicker = ({
                onClick={showTimePicker}
                className="mr-8 add-delivery-time-button"
              />
-              <Text isInline fontWeight={600} color="#A3A9AE">
+              <Text isInline fontWeight={600} color={globalColors.gray}>
                {t("SelectDeliveryTime")}
              </Text>
            </TimePickerCell>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/StatusBar.js
@ -31,6 +31,7 @@ import { inject, observer } from "mobx-react";

 import { SelectedItem } from "@docspace/shared/components/selected-item";
 import { Link } from "@docspace/shared/components/link";
+import { globalColors } from "@docspace/shared/themes";

 const StatusBarWrapper = styled.div`
  margin-top: 9px;
@ -148,7 +149,7 @@ const StatusBar = (props) => {
          fontWeight={600}
          isHovered={true}
          onClick={clearAll}
-          color="#A3A9AE"
+          color={globalColors.gray}
          className="statusActionItem"
        >
          Clear all
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRowContent.js
@ -33,6 +33,7 @@ import { RowContent } from "@docspace/shared/components/row-content";

 import StatusBadge from "../../../../sub-components/StatusBadge";
 import { useTranslation } from "react-i18next";
+import { globalColors } from "@docspace/shared/themes";

 const StyledRowContent = styled(RowContent)`
  display: flex;
@ -77,7 +78,7 @@ export const HistoryRowContent = ({ sectionWidth, historyItem }) => {
          </Text>
          <StatusBadge status={historyItem.status} />
        </StatusHeader>
-        <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+        <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
          {formattedDelivery}
        </Text>
      </ContentWrapper>
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js
@ -34,6 +34,7 @@ import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import StatusBadge from "../../StatusBadge";

 import { isMobile, tablet } from "@docspace/shared/utils";
+import { globalColors } from "@docspace/shared/themes";

 const StyledRowContent = styled(RowContent)`
  display: flex;
@ -96,7 +97,7 @@ export const WebhookRowContent = ({
        </FlexWrapper>

        {!isMobile() && (
-          <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+          <Text fontWeight={600} fontSize="12px" color={globalColors.gray}>
            {webhook.uri}
          </Text>
        )}
--- a/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js
@ -40,6 +40,7 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";

 import { inject, observer } from "mobx-react";
+import { globalColors } from "@docspace/shared/themes";

 const StyledWrapper = styled.div`
  display: contents;
@ -150,7 +151,7 @@ const WebhooksTableRow = (props) => {
            <Text
              as="span"
              fontSize="11px"
-              color="#A3A9AE"
+              color={globalColors.gray}
              fontWeight={600}
              className="textOverflow"
            >
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/StyledComponent.js
@ -196,7 +196,8 @@ const StyledStatistics = styled.div`
 const StyledDivider = styled.div`
  height: 1px;
  width: 100%;
-  background-color: #ddd;
+  background-color: ${(props) =>
+    props.theme.client.settings.storageManagement.dividerColor};
  margin: 28px 0 28px 0;
 `;

--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRow.js
@ -32,6 +32,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import SessionsRowContent from "./SessionsRowContent";
 import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";

 const SessionsRow = (props) => {
  const {
@ -57,7 +58,11 @@ const SessionsRow = (props) => {
    <>
      {showTickIcon ? (
        !isMobile() && (
-          <IconButton size={16} iconName={TickSvgUrl} color="#20D21F" />
+          <IconButton
+            size={16}
+            iconName={TickSvgUrl}
+            color={globalColors.tickColor}
+          />
        )
      ) : (
        <IconButton
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/RowView/SessionsRowContent.js
@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
 import { RowContent } from "@docspace/shared/components/row-content";
 import { IconButton } from "@docspace/shared/components/icon-button";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";

 const StyledRowContent = styled(RowContent)`
  .rowMainContainer {
@ -66,7 +67,11 @@ const SessionsRowContent = ({
        {platform} <span className="session-browser">{`(${browser})`}</span>
      </Text>
      {isMobile() && showTickIcon && (
-        <IconButton size={12} iconName={TickSvgUrl} color="#20D21F" />
+        <IconButton
+          size={12}
+          iconName={TickSvgUrl}
+          color={globalColors.tickColor}
+        />
      )}
      <Text truncate>{convertTime(date)}</Text>
      {(country || city) && (
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/active-session/SessionsTable/TableView/SessionsTableRow.js
@ -36,6 +36,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { convertTime } from "@docspace/shared/utils/convertTime";
 import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
 import TickSvgUrl from "PUBLIC_DIR/images/tick.svg?url";
+import { globalColors } from "@docspace/shared/themes";

 const StyledTableRow = styled(TableRow)`
  .session-platform {
@ -110,7 +111,7 @@ const SessionsTableRow = (props) => {
          <IconButton
            size={12}
            className="tick-icon"
-            color="#20D21F"
+            color={globalColors.tickColor}
            iconName={TickSvgUrl}
          />
        )}
--- a/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
+++ b/packages/client/src/pages/PublicRoom/StyledPublicRoom.js
@ -60,11 +60,11 @@ const StyledContainer = styled.div`
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin: 0 15px 0 16px;
-            border-right: 1px solid #dfe2e3;
+            border-right: ${(props) => props.theme.publicRoom.border};
          `
        : css`
            margin: 0 16px 0 15px;
-            border-left: 1px solid #dfe2e3;
+            border-left: ${(props) => props.theme.publicRoom.border};
          `}
    height: 21px;
  }