From 7f19622a28b05bc712439ebde576c1d2ae83b6f2 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Mon, 24 Jun 2024 16:05:10 +0300 Subject: [PATCH] Shared: use colors from theme --- packages/shared/.storybook/darkTheme.js | 3 +- .../components/calendar/calendar.test.tsx | 10 +-- .../components/headline/Headline.stories.tsx | 3 +- .../media-viewer/MediaViewer.styled.ts | 12 +-- .../ui/MobileDrawer/MobileDrawer.styled.ts | 3 +- .../PDFViewer/ui/SideBar/Sidebar.styled.ts | 3 +- .../PlayerSpeedControl.styled.ts | 15 ++-- .../public-room-bar/PublicRoomBar.styled.ts | 4 +- .../shared/components/room-icon/index.tsx | 6 +- .../row-container/RowContainer.stories.tsx | 18 +++- .../row-content/RowContent.stories.tsx | 54 ++++++++---- .../row-content/RowContent.test.tsx | 88 +++---------------- .../components/snackbar/Snackbar.styled.ts | 7 +- .../components/tooltip/tooltip.stories.tsx | 7 +- 14 files changed, 102 insertions(+), 131 deletions(-) diff --git a/packages/shared/.storybook/darkTheme.js b/packages/shared/.storybook/darkTheme.js index b80235cf76..bdeefec498 100644 --- a/packages/shared/.storybook/darkTheme.js +++ b/packages/shared/.storybook/darkTheme.js @@ -1,9 +1,10 @@ import { create } from "@storybook/theming/create"; import Logo from "./darksmall.svg?url"; +import { globalColors } from "../themes"; export default create({ base: "dark", - appBg: "#333", + appBg: globalColors.black, brandTitle: "ONLYOFFICE", brandUrl: "https://www.onlyoffice.com/docspace.aspx", diff --git a/packages/shared/components/calendar/calendar.test.tsx b/packages/shared/components/calendar/calendar.test.tsx index e4ec62b1b3..373920bfdd 100644 --- a/packages/shared/components/calendar/calendar.test.tsx +++ b/packages/shared/components/calendar/calendar.test.tsx @@ -34,7 +34,7 @@ import "@testing-library/jest-dom"; // const baseCalendarProps = { // isDisabled: false, -// themeColor: "#ED7309", +// themeColor: "", // selectedDate: moment(), // openToDate: moment(), // minDate: new Date("1970/01/01"), @@ -50,8 +50,8 @@ import "@testing-library/jest-dom"; // { key: "en_2", value: "We", color: "" }, // { key: "en_3", value: "Th", color: "" }, // { key: "en_4", value: "Fr", color: "" }, -// { key: "en_5", value: "Sa", color: "#A3A9AE" }, -// { key: "en_6", value: "Su", color: "#A3A9AE" }, +// { key: "en_5", value: "Sa", color: "" }, +// { key: "en_6", value: "Su", color: "" }, // ], // size: "base", // }; @@ -217,9 +217,9 @@ describe("Calendar tests:", () => { // it("Calendar themeColor test", () => { // const wrapper = mount( // // @ts-expect-error TS(2322): Type '{ themeColor: string; isDisabled: boolean; s... Remove this comment to see the full error message - // , + // , // ); - // expect(wrapper.props().themeColor).toEqual("#fff"); + // expect(wrapper.props().themeColor).toEqual(""); // }); // it("Calendar locale test", () => { diff --git a/packages/shared/components/headline/Headline.stories.tsx b/packages/shared/components/headline/Headline.stories.tsx index 8648ff1218..7ed2f68f26 100644 --- a/packages/shared/components/headline/Headline.stories.tsx +++ b/packages/shared/components/headline/Headline.stories.tsx @@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react"; import Headline from "./Headline"; import type { HeadlineProps } from "./Headline.types"; +import { globalColors } from "../../themes"; type HeadlineType = FC; @@ -41,7 +42,7 @@ export default meta; export const Default: StoryObj = { args: { - color: "#333", + color: globalColors.black, type: "content", children: "Sample text heading", }, diff --git a/packages/shared/components/media-viewer/MediaViewer.styled.ts b/packages/shared/components/media-viewer/MediaViewer.styled.ts index 48a121d056..d1f29a4479 100644 --- a/packages/shared/components/media-viewer/MediaViewer.styled.ts +++ b/packages/shared/components/media-viewer/MediaViewer.styled.ts @@ -26,7 +26,7 @@ import styled, { css } from "styled-components"; -import { Base } from "@docspace/shared/themes"; +import { Base, globalColors } from "@docspace/shared/themes"; import { DropDown } from "@docspace/shared/components/drop-down"; import { DropDownItem } from "@docspace/shared/components/drop-down-item"; @@ -62,20 +62,20 @@ export const ControlBtn = styled.div` ControlBtn.defaultProps = { theme: Base }; export const StyledDropDown = styled(DropDown)` - background: #333; + background: ${globalColors.black}; `; export const StyledDropDownItem = styled(DropDownItem)` - color: #fff; + color: ${globalColors.white}; .drop-down-item_icon svg { path { - fill: #fff !important; + fill: ${globalColors.white} !important; } } &:hover { - background: #444; + background: ${globalColors.black}; } `; @@ -105,7 +105,7 @@ export const StyledMobileDetails = styled.div` svg { path { - fill: #fff; + fill: ${globalColors.white}; } } diff --git a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts index 818a698070..563c0a1b0d 100644 --- a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts +++ b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts @@ -26,6 +26,7 @@ import { animated } from "@react-spring/web"; import styled from "styled-components"; +import { globalColors } from "../../../../../../themes"; export const MobileDrawerContainer = styled.section` position: fixed; @@ -42,7 +43,7 @@ export const MobileDrawerWrapper = styled(animated.div)` width: 100%; - background: #333333; + background: ${globalColors.black}; touch-action: none; overflow: hidden; diff --git a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts index 87321e2941..b1493e8cd0 100644 --- a/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts +++ b/packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts @@ -26,6 +26,7 @@ import styled, { css } from "styled-components"; import ArticleShowMenuReactSvgUrl from "PUBLIC_DIR/images/article-show-menu.react.svg"; +import { globalColors } from "../../../../../../themes"; export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>` display: flex; @@ -34,7 +35,7 @@ export const SidebarContainer = styled.aside<{ isPanelOpen: boolean }>` height: 100vh; width: 100%; - background: #333333; + background: ${globalColors.black}; max-width: ${(props) => (props.isPanelOpen ? "306px" : "0px")}; visibility: ${(props) => (props.isPanelOpen ? "visible" : "hidden")}; diff --git a/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts b/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts index 046091cc66..c66c3191ad 100644 --- a/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts +++ b/packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.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 SpeedControlWrapper = styled.div` position: relative; @@ -41,12 +42,12 @@ export const SpeedControlWrapper = styled.div` svg { path { - fill: #fff; + fill: ${globalColors.white}; } } rect { - stroke: #fff; + stroke: ${globalColors.white}; } `; @@ -64,8 +65,8 @@ export const DropDown = styled.div` bottom: 48px; z-index: 50; - color: #fff; - background: #333; + color: ${globalColors.white}; + background: ${globalColors.black}; text-align: center; border-radius: 7px 7px 0px 0px; `; @@ -78,7 +79,7 @@ export const DropDownItem = styled.div` width: 48px; &:hover { cursor: pointer; - background: #222; + background: ${globalColors.black}; } `; @@ -105,11 +106,11 @@ export const ToastSpeed = styled.div` width: 46px; height: 46px; path { - fill: #fff; + fill: ${globalColors.white}; } } rect { - stroke: #fff; + stroke: ${globalColors.white}; } `; diff --git a/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts b/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts index d13ba99d59..718e9f4cc4 100644 --- a/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts +++ b/packages/shared/components/public-room-bar/PublicRoomBar.styled.ts @@ -26,12 +26,12 @@ import styled from "styled-components"; -import { Base } from "../../themes"; +import { Base, globalColors } from "../../themes"; const StyledPublicRoomBar = styled.div` display: flex; background-color: ${(props) => props.theme.infoBlock.background}; - color: #333; + color: ${globalColors.black}; font-size: 12px; padding: 12px 16px; border-radius: 6px; diff --git a/packages/shared/components/room-icon/index.tsx b/packages/shared/components/room-icon/index.tsx index e29600be97..fce05cde06 100644 --- a/packages/shared/components/room-icon/index.tsx +++ b/packages/shared/components/room-icon/index.tsx @@ -27,7 +27,7 @@ import React from "react"; import styled, { css } from "styled-components"; -import { Base } from "../../themes"; +import { Base, globalColors } from "../../themes"; import { Text } from "../text"; import { IconButton } from "../icon-button"; @@ -68,7 +68,9 @@ const StyledIcon = styled.div<{ font-weight: 700; line-height: 16px; color: ${(props) => - props.wrongImage && props.theme.isBase ? "#333333" : "#ffffff"}; + props.wrongImage && props.theme.isBase + ? globalColors.black + : globalColors.white}; position: relative; ${(props) => !props.theme.isBase && diff --git a/packages/shared/components/row-container/RowContainer.stories.tsx b/packages/shared/components/row-container/RowContainer.stories.tsx index 16cf403638..d2303df109 100644 --- a/packages/shared/components/row-container/RowContainer.stories.tsx +++ b/packages/shared/components/row-container/RowContainer.stories.tsx @@ -40,6 +40,7 @@ import { Link, LinkType } from "../link"; import { RowContainer } from "./RowContainer"; import { RowContainerProps } from "./RowContainer.types"; +import { globalColors } from "../../themes"; const SendClockIcon = styled(SendClockReactSvg)` ${commonIconsStyles} @@ -144,8 +145,11 @@ const Template = (args: RowContainerProps) => { source={user.avatar} /> ); - const nameColor = user.status === "pending" && "#A3A9AE"; - const sideInfoColor = user.status === "pending" ? "#D0D5DA" : "#A3A9AE"; + const nameColor = user.status === "pending" && globalColors.gray; + const sideInfoColor = + user.status === "pending" + ? globalColors.grayStrong + : globalColors.gray; return ( { <> {user.status === "pending" && ( - + )} {user.status === "disabled" && ( - + )} {user.isHead ? ( diff --git a/packages/shared/components/row-content/RowContent.stories.tsx b/packages/shared/components/row-content/RowContent.stories.tsx index 750a2d9138..cd17ac71b6 100644 --- a/packages/shared/components/row-content/RowContent.stories.tsx +++ b/packages/shared/components/row-content/RowContent.stories.tsx @@ -36,6 +36,7 @@ import { Checkbox } from "../checkbox"; import { RowContent } from "./RowContent"; import { RowContentProps } from "./RowContent.types"; +import { globalColors } from "../../themes"; export default { title: "Components/RowContent", @@ -60,10 +61,21 @@ const Template = (args: RowContentProps) => { Demo <> - - + + - + Demo { type={LinkType.action} title="Demo" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > Demo @@ -79,7 +91,7 @@ const Template = (args: RowContentProps) => { type={LinkType.page} title="0 000 0000000" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > 0 000 0000000 @@ -88,7 +100,7 @@ const Template = (args: RowContentProps) => { type={LinkType.page} title="demo@demo.com" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > demo@demo.com @@ -98,14 +110,17 @@ const Template = (args: RowContentProps) => { Demo Demo - + Demo Demo @@ -113,7 +128,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="0 000 0000000" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > 0 000 0000000 @@ -122,7 +137,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="demo.demo@demo.com" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > demo.demo@demo.com @@ -142,7 +157,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="Demo Demo Demo" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > Demo Demo Demo @@ -150,7 +165,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="0 000 0000000" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > 0 000 0000000 @@ -159,7 +174,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="demo.demo.demo@demo.com" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > demo.demo.demo@demo.com @@ -174,13 +189,16 @@ const Template = (args: RowContentProps) => { Demo Demo Demo Demo - + Demo @@ -189,7 +207,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="Demo Demo Demo Demo" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > Demo Demo Demo Demo @@ -197,7 +215,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="0 000 0000000" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > 0 000 0000000 @@ -206,7 +224,7 @@ const Template = (args: RowContentProps) => { type={LinkType.action} title="demo.demo.demo.demo@demo.com" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > demo.demo.demo.demo@demo.com diff --git a/packages/shared/components/row-content/RowContent.test.tsx b/packages/shared/components/row-content/RowContent.test.tsx index 1ef12f7cb2..fb1a783315 100644 --- a/packages/shared/components/row-content/RowContent.test.tsx +++ b/packages/shared/components/row-content/RowContent.test.tsx @@ -31,6 +31,7 @@ import "@testing-library/jest-dom"; import { Link, LinkType } from "../link"; import { RowContent } from "./RowContent"; +import { globalColors } from "../../themes"; describe("", () => { it("renders without error", () => { @@ -41,18 +42,23 @@ describe("", () => { title="Demo" isBold fontSize="15px" - color="#333333" + color={globalColors.black} > Demo - + Demo Demo @@ -60,7 +66,7 @@ describe("", () => { type={LinkType.page} title="0 000 0000000" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > 0 000 0000000 @@ -68,7 +74,7 @@ describe("", () => { type={LinkType.page} title="demo@demo.com" fontSize="12px" - color="#A3A9AE" + color={globalColors.gray} > demo@demo.com @@ -77,76 +83,4 @@ describe("", () => { expect(screen.getByTestId("row-content")).toBeInTheDocument(); }); - - // it("accepts id", () => { - // const wrapper = mount( - // - // - // Demo - // - // - // Demo - // - // - // Demo - // - // - // 0 000 0000000 - // - // - // demo@demo.com - // - // , - // ); - - // expect(wrapper.prop("id")).toEqual("testId"); - // }); - - // it("accepts className", () => { - // const wrapper = mount( - // - // - // Demo - // - // - // Demo - // - // - // Demo - // - // - // 0 000 0000000 - // - // - // demo@demo.com - // - // , - // ); - - // expect(wrapper.prop("className")).toEqual("test"); - // }); - - // it("accepts style", () => { - // const wrapper = mount( - // - // - // Demo - // - // - // Demo - // - // - // Demo - // - // - // 0 000 0000000 - // - // - // demo@demo.com - // - // , - // ); - - // expect(wrapper.getDOMNode().style).toHaveProperty("color", "red"); - // }); }); diff --git a/packages/shared/components/snackbar/Snackbar.styled.ts b/packages/shared/components/snackbar/Snackbar.styled.ts index 41211db1c1..9ae5ed2e6d 100644 --- a/packages/shared/components/snackbar/Snackbar.styled.ts +++ b/packages/shared/components/snackbar/Snackbar.styled.ts @@ -28,6 +28,7 @@ import styled, { css } from "styled-components"; import { Box } from "../box"; import { tablet } from "../../utils"; +import { globalColors } from "../../themes"; const StyledIframe = styled.iframe<{ sectionWidth: number }>` border: none; @@ -107,7 +108,7 @@ const StyledSnackBar = styled(Box)<{ display: inline-block; border: none; font-size: inherit; - color: "#333"; + color: ${globalColors.black}; margin: 0px 4px 4px 24px; padding: 0; @@ -128,7 +129,7 @@ const StyledSnackBar = styled(Box)<{ background: inherit; border: none; font-size: 13px; - color: "#000"; + color: ${globalColors.darkBlack}; cursor: pointer; line-height: 14px; @@ -144,7 +145,7 @@ const StyledAction = styled.div` display: inline-block; border: none; font-size: inherit; - color: "#333"; + color: ${globalColors.black}; cursor: pointer; text-decoration: underline; @media ${tablet} { diff --git a/packages/shared/components/tooltip/tooltip.stories.tsx b/packages/shared/components/tooltip/tooltip.stories.tsx index 46a0402004..9f2daabf23 100644 --- a/packages/shared/components/tooltip/tooltip.stories.tsx +++ b/packages/shared/components/tooltip/tooltip.stories.tsx @@ -31,6 +31,7 @@ import { Text } from "../text"; import { Tooltip } from "."; // import TooltipDocs from "./Tooltip.mdx"; +import { globalColors } from "../../themes"; const meta = { title: "Components/Tooltip", @@ -70,7 +71,7 @@ export const Default: Story = { {content} - + BobJohnston@gmail.com @@ -133,7 +134,7 @@ export const AllTooltip: Story = { Bob Johnston - + BobJohnston@gmail.com @@ -173,7 +174,7 @@ export const AllTooltip: Story = { {arrayUsers[+content].name} - + {arrayUsers[+content].email}