Shared: use colors from theme

2024-06-25 16:36:17 +03:00 · 2024-06-25 16:36:17 +03:00 · d1fb375e98
commit d1fb375e98
parent f93b3650a7
18 changed files with 73 additions and 38 deletions
--- a/packages/shared/components/context-menu/ContextMenu.stories.tsx
+++ b/packages/shared/components/context-menu/ContextMenu.stories.tsx
@ -30,6 +30,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";

 import { ContextMenu, ContextMenuModel } from ".";
+import { globalColors } from "../../themes";

 const meta = {
  title: "Components/ContextMenu",
@ -183,11 +184,11 @@ const Template = () => {
        style={{
          width: "200px",
          height: "200px",
-          backgroundColor: "#7dadfa",
+          backgroundColor: globalColors.lightSecondMain,
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
-          color: "#fff",
+          color: globalColors.white,
          fontSize: "18px",
        }}
        onContextMenu={(e) => {
--- a/packages/shared/components/loader/loader.stories.tsx
+++ b/packages/shared/components/loader/loader.stories.tsx
@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react";

 import { Loader } from ".";
 import { LoaderTypes } from "./Loader.enums";
+import { globalColors } from "../../themes";

 const meta = {
  title: "Components/Loader",
@ -61,7 +62,7 @@ export const Default: Story = {
  ),
  args: {
    type: LoaderTypes.base,
-    color: "#63686a",
+    color: globalColors.loaderLight,
    size: "18px",
    label: "Loading content, please wait...",
  },
@ -79,19 +80,19 @@ export const Examples = {
      >
        <Loader
          type={LoaderTypes.base}
-          color="#63686a"
+          color={globalColors.loaderLight}
          size="18px"
          label="Loading content, please wait..."
        />
        <Loader
          type={LoaderTypes.dualRing}
-          color="#63686a"
+          color={globalColors.loaderLight}
          size="40px"
          label="Loading content, please wait."
        />
        <Loader
          type={LoaderTypes.oval}
-          color="#63686a"
+          color={globalColors.loaderLight}
          size="40px"
          label="Loading content, please wait."
        />
--- a/packages/shared/components/main-button/MainButton.styled.ts
+++ b/packages/shared/components/main-button/MainButton.styled.ts
@ -108,7 +108,7 @@ const StyledMainButton = styled.div<{
    svg {
      padding-bottom: 1px;
      path {
-        fill: #fff;
+        fill: ${(props) => props.theme.mainButton.svg.fill};
      }
    }
  }
--- a/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx
@ -35,6 +35,7 @@ import { ControlBtn } from "../../MediaViewer.styled";

 import type { DesktopDetailsProps } from "./DesktopDetails.type";
 import { DesktopDetailsContainer } from "./DesktopDetails.styled";
+import { globalColors } from "../../../../themes";

 export const DesktopDetails = ({
  onMaskClick,
@ -51,7 +52,7 @@ export const DesktopDetails = ({
      {showCloseButton && (
        <ControlBtn onClick={onMaskClick} className="mediaPlayerClose">
          <IconButton
-            color="#fff"
+            color={globalColors.white}
            iconName={ViewerMediaCloseSvgUrl}
            size={28}
            isClickable
--- a/packages/shared/components/media-viewer/sub-components/ImageViewer/ImageViewer.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ImageViewer/ImageViewer.styled.ts
@ -26,6 +26,7 @@

 import styled from "styled-components";
 import { animated } from "@react-spring/web";
+import { globalColors } from "../../../../themes";

 export const ImageViewerContainer = styled.div<{ $backgroundBlack: boolean }>`
  width: 100%;
@ -41,7 +42,7 @@ export const ImageViewerContainer = styled.div<{ $backgroundBlack: boolean }>`
  touch-action: none;

  background-color: ${(props) =>
-    props.$backgroundBlack ? "#000" : "rgba(55, 55, 55, 0.6)"};
+    props.$backgroundBlack ? globalColors.darkBlack : "rgba(55, 55, 55, 0.6)"};
 `;

 export const ImageWrapper = styled.div<{ $isLoading: boolean }>`
--- a/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx
@ -32,6 +32,7 @@ import { isSeparator } from "@docspace/shared/utils/typeGuards";

 import { StyledErrorToolbar, StyledMediaError } from "./MessageError.styled";
 import type PlayerMessageErrorProps from "./MessageError.props";
+import { globalColors } from "../../../../themes";

 export const MessageError = ({
  model,
@ -46,7 +47,12 @@ export const MessageError = ({
  return (
    <div>
      <StyledMediaError>
-        <Text fontSize="15px" color="#fff" textAlign="center" className="title">
+        <Text
+          fontSize="15px"
+          color={globalColors.white}
+          textAlign="center"
+          className="title"
+        >
          {errorTitle}
        </Text>
      </StyledMediaError>
--- a/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx
@ -39,6 +39,7 @@ import BackArrow from "PUBLIC_DIR/images/viewer.media.back.react.svg";
 import { StyledMobileDetails } from "../../MediaViewer.styled";

 import type MobileDetailsProps from "./MobileDetails.props";
+import { globalColors } from "../../../../themes";

 const MobileDetails = memo(
  forwardRef(
@ -69,7 +70,7 @@ const MobileDetails = memo(
          {!isPublicFile && (
            <BackArrow className="mobile-close" onClick={onMaskClick} />
          )}
-          <Text fontSize="14px" color="#fff" className="title">
+          <Text fontSize="14px" color={globalColors.white} className="title">
            {title}
          </Text>
          {!isPreviewFile && !isError && (
--- a/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts
@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode

 import styled from "styled-components";
+import { globalColors } from "../../../../themes";

 export const PlayerDesktopContextMenuWrapper = styled.div`
  position: relative;
@ -45,11 +46,11 @@ export const PlayerDesktopContextMenuWrapper = styled.div`
    height: 20px;

    path {
-      fill: #fff;
+      fill: ${globalColors.white};
    }

    rect {
-      stroke: #fff;
+      stroke: ${globalColors.white};
    }
  }
 `;
@ -66,7 +67,7 @@ export const DownloadIconWrapper = styled.div`

  svg {
    path {
-      fill: #fff;
+      fill: ${globalColors.white};
    }
  }
 `;
--- a/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx
+++ b/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx
@ -29,10 +29,11 @@ import styled from "styled-components";

 import { mobile } from "@docspace/shared/utils";
 import { formatTime } from "../../MediaViewer.utils";
+import { globalColors } from "../../../../themes";

 const PlayerDurationWrapper = styled.div`
  width: 102px;
-  color: #fff;
+  color: ${globalColors.white};
  user-select: none;
  font-size: 12px;
  font-weight: 700;
--- a/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts
@ -28,6 +28,7 @@ import styled, { css } from "styled-components";
 import { isMobile } from "react-device-detect";

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

 export const HoverProgress = styled.div`
  display: none;
@ -59,7 +60,7 @@ const mobileCss = css`
    -webkit-appearance: none;
    visibility: visible;
    opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
    height: 10px;
    width: 10px;
    border-radius: 50%;
@ -72,7 +73,7 @@ const mobileCss = css`
    -webkit-appearance: none;
    visibility: visible;
    opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
    height: 10px;
    width: 10px;
    border-radius: 50%;
@ -86,7 +87,7 @@ const mobileCss = css`
    -webkit-appearance: none;
    visibility: visible;
    opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
    height: 10px;
    width: 10px;
    border-radius: 50%;
@ -113,7 +114,7 @@ export const PlayerTimelineWrapper = styled.div`
    left: 50%;
    top: -25px;
    font-size: 13px;
-    color: #fff;
+    color: ${globalColors.white};
    pointer-events: none;
    transform: translateX(-50%);
  }
@ -150,7 +151,10 @@ export const PlayerTimelineWrapper = styled.div`
    border-radius: 5px;

    background: rgba(255, 255, 255, 0.3);
-    background-image: linear-gradient(#fff, #fff);
+    background-image: linear-gradient(
+      ${globalColors.white},
+      ${globalColors.white}
+    );
    background-repeat: no-repeat;

    z-index: 1;
@ -168,7 +172,7 @@ export const PlayerTimelineWrapper = styled.div`
    -webkit-appearance: none;
    visibility: hidden;
    opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};

    transition:
      opacity 0.3s ease 0s,
@ -181,7 +185,7 @@ export const PlayerTimelineWrapper = styled.div`
    -webkit-appearance: none;
    visibility: hidden;
    opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
    transition:
      opacity 0.3s ease 0s,
      visibility 0.3s ease 0s;
@ -193,7 +197,7 @@ export const PlayerTimelineWrapper = styled.div`
    -webkit-appearance: none;
    visibility: hidden;
    opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
    transition:
      opacity 0.3s ease 0s,
      visibility 0.3s ease 0s;
--- a/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts
@ -27,6 +27,7 @@
 import styled, { css } from "styled-components";

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

 export const PlayerVolumeControlWrapper = styled.div`
  display: flex;
@ -47,7 +48,7 @@ const mobilecss = css`
    -webkit-appearance: none;
    visibility: visible;
    opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
    height: 10px;
    width: 10px;
    border-radius: 50%;
@ -60,7 +61,7 @@ const mobilecss = css`
    -webkit-appearance: none;
    visibility: visible;
    opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
    height: 10px;
    width: 10px;
    border-radius: 50%;
@ -73,7 +74,7 @@ const mobilecss = css`
    -webkit-appearance: none;
    visibility: visible;
    opacity: 1;
-    background: #fff;
+    background: ${globalColors.white};
    height: 10px;
    width: 10px;
    border-radius: 50%;
@ -100,7 +101,10 @@ export const VolumeWrapper = styled.div`
    border-radius: 5px;

    background: rgba(255, 255, 255, 0.3);
-    background-image: linear-gradient(#fff, #fff);
+    background-image: linear-gradient(
+      ${globalColors.white},
+      ${globalColors.white}
+    );
    background-repeat: no-repeat;

    &:hover {
@ -118,7 +122,7 @@ export const VolumeWrapper = styled.div`
    -webkit-appearance: none;
    visibility: hidden;
    opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
  }

  input[type="range"]::-moz-range-thumb {
@ -127,7 +131,7 @@ export const VolumeWrapper = styled.div`
    -webkit-appearance: none;
    visibility: hidden;
    opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
  }

  input[type="range"]::-ms-fill-upper {
@ -136,7 +140,7 @@ export const VolumeWrapper = styled.div`
    -webkit-appearance: none;
    visibility: hidden;
    opacity: 0;
-    background: #fff;
+    background: ${globalColors.white};
  }

  &:hover {
--- a/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts
@ -26,6 +26,7 @@

 import styled from "styled-components";
 import { ViewerLoaderProps } from "./ViewerLoader.types";
+import { globalColors } from "../../../../themes";

 export const StyledLoaderWrapper = styled.div<
  Pick<ViewerLoaderProps, "withBackground">
@ -45,7 +46,7 @@ export const StyledLoaderWrapper = styled.div<
 export const StyledLoader = styled.div`
  width: 48px;
  height: 48px;
-  border: 4px solid #fff;
+  border: 4px solid ${globalColors.white};
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
--- a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts
@ -28,13 +28,14 @@ import styled from "styled-components";
 import { animated } from "@react-spring/web";

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

 export const ContainerPlayer = styled.div<{ $isFullScreen: boolean }>`
  position: fixed;
  inset: 0;
  z-index: 305;
  background-color: ${(props) =>
-    props.$isFullScreen ? "#000" : "rgba(55, 55, 55, 0.6)"};
+    props.$isFullScreen ? globalColors.darkBlack : "rgba(55, 55, 55, 0.6)"};
  touch-action: none;
 `;

--- a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts
+++ b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts
@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode

 import styled from "styled-components";
+import { globalColors } from "../../../../themes";

 export const ImageViewerToolbarWrapper = styled.div`
  height: 48px;
@ -80,7 +81,10 @@ export const ToolbarItem = styled.li<{
    height: 16px;
    path,
    rect {
-      ${(props) => (props.$percent !== 25 ? "fill: #fff;" : "fill: #BEBEBE;")}
+      ${(props) =>
+        props.$percent !== 25
+          ? `fill: ${globalColors.white};`
+          : "fill: #BEBEBE;"}
    }
  }

--- a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx
+++ b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx
@ -45,6 +45,7 @@ import {
  ListTools,
  ToolbarItem,
 } from "./ViewerToolbar.styled";
+import { globalColors } from "../../../../themes";

 const ViewerToolbar = forwardRef<ImperativeHandle, ImageViewerToolbarProps>(
  (
@ -106,7 +107,11 @@ const ViewerToolbar = forwardRef<ImperativeHandle, ImageViewerToolbarProps>(
      return (
        <div
          className="iconContainer zoomPercent"
-          style={{ width: "auto", color: "#fff", userSelect: "none" }}
+          style={{
+            width: "auto",
+            color: globalColors.white,
+            userSelect: "none",
+          }}
        >
          {`${percent}%`}
        </div>
--- a/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts
+++ b/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts
@ -28,6 +28,7 @@ import styled, { css } from "styled-components";

 import { mobile } from "@docspace/shared/utils";
 import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+import { globalColors } from "../../themes";

 export const ProviderRow = styled.div`
  width: 100%;
@ -53,7 +54,7 @@ export const ProviderRow = styled.div`
          `}

    path {
-      fill: ${(props) => !props.theme.isBase && "#fff"};
+      fill: ${(props) => !props.theme.isBase && globalColors.white};
    }
  }

--- a/packages/shared/components/selector/Selector.stories.tsx
+++ b/packages/shared/components/selector/Selector.stories.tsx
@ -39,6 +39,7 @@ import { AvatarRole } from "../avatar";

 import { Selector } from "./Selector";
 import { SelectorProps, TSelectorItem } from "./Selector.types";
+import { globalColors } from "../../themes";

 const StyledRowLoader = styled.div`
  width: 100%;
@ -210,7 +211,7 @@ const Template = (args: SelectorProps) => {
      style={{
        width: "480px",
        height: "485px",
-        border: "1px solid #eee",
+        border: `1px solid ${globalColors.grayLightMid}`,
        margin: "auto",
      }}
    >
--- a/packages/shared/skeletons/nav-menu/NavMenu.header.tsx
+++ b/packages/shared/skeletons/nav-menu/NavMenu.header.tsx
@ -31,6 +31,7 @@ import { RectangleSkeleton } from "../rectangle";

 import { StyledHeader, StyledSpacer } from "./NavMenu.styled";
 import type { NavMenuHeaderLoaderProps } from "./NavMenu.types";
+import { globalColors } from "../../themes";

 export const NavMenuHeaderLoader = ({
  id,
@ -41,8 +42,8 @@ export const NavMenuHeaderLoader = ({
  const {
    title,
    borderRadius,
-    backgroundColor = "#fff",
-    foregroundColor = "#fff",
+    backgroundColor = globalColors.white,
+    foregroundColor = globalColors.white,
    backgroundOpacity = 0.25,
    foregroundOpacity = 0.2,
    speed,