From d1fb375e98bf27fb9178d6718453c6558c6f30a4 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Tue, 25 Jun 2024 16:36:17 +0300 Subject: [PATCH] Shared: use colors from theme --- .../context-menu/ContextMenu.stories.tsx | 5 +++-- .../components/loader/loader.stories.tsx | 9 +++++---- .../main-button/MainButton.styled.ts | 2 +- .../sub-components/DesktopDetails/index.tsx | 3 ++- .../ImageViewer/ImageViewer.styled.ts | 3 ++- .../sub-components/MessageError/index.tsx | 8 +++++++- .../sub-components/MobileDetails/index.tsx | 3 ++- .../PlayerDesktopContextMenu.styled.ts | 7 ++++--- .../sub-components/PlayerDuration/inxed.tsx | 3 ++- .../PlayerTimeline/PlayerTimeline.styled.ts | 20 +++++++++++-------- .../PlayerVolumeControl.styled.ts | 18 ++++++++++------- .../ViewerLoader/ViewerLoader.styled.ts | 3 ++- .../ViewerPlayer/ViewerPlayer.styled.ts | 3 ++- .../ViewerToolbar/ViewerToolbar.styled.ts | 6 +++++- .../sub-components/ViewerToolbar/index.tsx | 7 ++++++- .../more-login-modal/MoreLoginModal.styled.ts | 3 ++- .../components/selector/Selector.stories.tsx | 3 ++- .../skeletons/nav-menu/NavMenu.header.tsx | 5 +++-- 18 files changed, 73 insertions(+), 38 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.stories.tsx b/packages/shared/components/context-menu/ContextMenu.stories.tsx index c2f5bf9b76..facf8bfd6f 100644 --- 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) => { diff --git a/packages/shared/components/loader/loader.stories.tsx b/packages/shared/components/loader/loader.stories.tsx index 934fc34d10..81de069384 100644 --- 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 = { > diff --git a/packages/shared/components/main-button/MainButton.styled.ts b/packages/shared/components/main-button/MainButton.styled.ts index 529e51dac8..1060915ec4 100644 --- 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}; } } } diff --git a/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx b/packages/shared/components/media-viewer/sub-components/DesktopDetails/index.tsx index 96923c68b4..b7c27c94f9 100644 --- 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 && ( ` 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 }>` diff --git a/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx b/packages/shared/components/media-viewer/sub-components/MessageError/index.tsx index ceac4338a3..8a4f8a11e3 100644 --- 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 (
- + {errorTitle} diff --git a/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx b/packages/shared/components/media-viewer/sub-components/MobileDetails/index.tsx index 0885f1c964..cabdc3fa03 100644 --- 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 && ( )} - + {title} {!isPreviewFile && !isError && ( diff --git a/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts index 76fc005925..55aec79528 100644 --- 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}; } } `; diff --git a/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx b/packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx index 18825b9d6c..abf4a4d29a 100644 --- 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; diff --git a/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts index c7a15b6dd1..1a2f292f11 100644 --- 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; diff --git a/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts index 069fccf342..60065a7a24 100644 --- 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 { diff --git a/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerLoader/ViewerLoader.styled.ts index dfa2368a72..a1800961ba 100644 --- 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 @@ -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; diff --git a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts index 47e826b7e9..43bcd66e6b 100644 --- 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; `; diff --git a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts index 6231b6f75c..49ea86999c 100644 --- 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;"} } } diff --git a/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx b/packages/shared/components/media-viewer/sub-components/ViewerToolbar/index.tsx index 5593aff92b..77f5273fde 100644 --- 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( ( @@ -106,7 +107,11 @@ const ViewerToolbar = forwardRef( return (
{`${percent}%`}
diff --git a/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts b/packages/shared/components/more-login-modal/MoreLoginModal.styled.ts index a8c652d661..4a8f187eab 100644 --- 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}; } } diff --git a/packages/shared/components/selector/Selector.stories.tsx b/packages/shared/components/selector/Selector.stories.tsx index e6b3e646fe..cde3ecd9f4 100644 --- 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", }} > diff --git a/packages/shared/skeletons/nav-menu/NavMenu.header.tsx b/packages/shared/skeletons/nav-menu/NavMenu.header.tsx index 5e89c9755f..21adfbabb9 100644 --- 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,