IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared: use colors from theme

Browse Source
This commit is contained in:
Viktor Fomin 2024-06-24 16:05:10 +03:00
parent 64e41eb0e4
commit 7f19622a28
14 changed files with 102 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/shared/.storybook/darkTheme.js
View File

@ -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",

10
packages/shared/components/calendar/calendar.test.tsx
View File

@ -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
// <Calendar {...baseCalendarProps} themeColor={"#fff"} />,
// <Calendar {...baseCalendarProps} themeColor={""} />,
// );
// expect(wrapper.props().themeColor).toEqual("#fff");
// expect(wrapper.props().themeColor).toEqual("");
// });
// it("Calendar locale test", () => {

3
packages/shared/components/headline/Headline.stories.tsx
View File

@ -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<HeadlineProps>;
@ -41,7 +42,7 @@ export default meta;
export const Default: StoryObj<HeadlineType> = {
args: {
color: "#333",
color: globalColors.black,
type: "content",
children: "Sample text heading",
},

12
packages/shared/components/media-viewer/MediaViewer.styled.ts
View File

@ -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};
}
}

3
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts
View File

@ -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;

3
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts
View File

@ -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")};

15
packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts
View File

@ -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};
}
`;

4
packages/shared/components/public-room-bar/PublicRoomBar.styled.ts
View File

@ -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;

6
packages/shared/components/room-icon/index.tsx
View File

@ -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 &&

18
packages/shared/components/row-container/RowContainer.stories.tsx
View File

@ -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 (
<Row
@ -169,10 +173,16 @@ const Template = (args: RowContainerProps) => {
</Link>
<>
{user.status === "pending" && (
<SendClockIcon size={IconSizeType.small} color="#3B72A7" />
<SendClockIcon
size={IconSizeType.small}
color={globalColors.lightIcons}
/>
)}
{user.status === "disabled" && (
<CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
<CatalogSpamIcon
size={IconSizeType.small}
color={globalColors.lightIcons}
/>
)}
</>
{user.isHead ? (

54
packages/shared/components/row-content/RowContent.stories.tsx
View File

@ -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
</Link>
<>
<SendClockIcon size={IconSizeType.small} color="#3B72A7" />
<CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
<SendClockIcon
size={IconSizeType.small}
color={globalColors.lightIcons}
/>
<CatalogSpamIcon
size={IconSizeType.small}
color={globalColors.lightIcons}
/>
</>
<Link type={LinkType.page} title="Demo" fontSize="12px" color="#A3A9AE">
<Link
type={LinkType.page}
title="Demo"
fontSize="12px"
color={globalColors.gray}
>
Demo
</Link>
<Link
@ -71,7 +83,7 @@ const Template = (args: RowContentProps) => {
type={LinkType.action}
title="Demo"
fontSize="12px"
color="#A3A9AE"
color={globalColors.gray}
>
Demo
</Link>
@ -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
</Link>
@ -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
</Link>
@ -98,14 +110,17 @@ const Template = (args: RowContentProps) => {
Demo Demo
</Link>
<CatalogSpamIcon size={IconSizeType.small} color="#3B72A7" />
<CatalogSpamIcon
size={IconSizeType.small}
color={globalColors.lightIcons}
/>
<Link
// containerWidth="160px"
type={LinkType.action}
title="Demo Demo"
fontSize="12px"
color="#A3A9AE"
color={globalColors.gray}
>
Demo Demo
</Link>
@ -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
</Link>
@ -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
</Link>
@ -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
</Link>
@ -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
</Link>
@ -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
</Link>
@ -174,13 +189,16 @@ const Template = (args: RowContentProps) => {
Demo Demo Demo Demo
</Link>
<SendClockIcon size={IconSizeType.small} color="#3B72A7" />
<SendClockIcon
size={IconSizeType.small}
color={globalColors.lightIcons}
/>
<Link
type={LinkType.action}
title="Demo"
fontSize="12px"
color="#A3A9AE"
color={globalColors.gray}
>
Demo
</Link>
@ -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
</Link>
@ -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
</Link>
@ -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
</Link>

88
packages/shared/components/row-content/RowContent.test.tsx
View File

@ -31,6 +31,7 @@ import "@testing-library/jest-dom";
import { Link, LinkType } from "../link";
import { RowContent } from "./RowContent";
import { globalColors } from "../../themes";
describe("<RowContent />", () => {
it("renders without error", () => {
@ -41,18 +42,23 @@ describe("<RowContent />", () => {
title="Demo"
isBold
fontSize="15px"
color="#333333"
color={globalColors.black}
>
Demo
</Link>
<Link type={LinkType.page} title="Demo" fontSize="12px" color="#A3A9AE">
<Link
type={LinkType.page}
title="Demo"
fontSize="12px"
color={globalColors.gray}
>
Demo
</Link>
<Link
type={LinkType.action}
title="Demo"
fontSize="12px"
color="#A3A9AE"
color={globalColors.gray}
>
Demo
</Link>
@ -60,7 +66,7 @@ describe("<RowContent />", () => {
type={LinkType.page}
title="0 000 0000000"
fontSize="12px"
color="#A3A9AE"
color={globalColors.gray}
>
0 000 0000000
</Link>
@ -68,7 +74,7 @@ describe("<RowContent />", () => {
type={LinkType.page}
title="demo@demo.com"
fontSize="12px"
color="#A3A9AE"
color={globalColors.gray}
>
demo@demo.com
</Link>
@ -77,76 +83,4 @@ describe("<RowContent />", () => {
expect(screen.getByTestId("row-content")).toBeInTheDocument();
});
// it("accepts id", () => {
// const wrapper = mount(
// <RowContent id="testId">
// <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
// Demo
// </Link>
// <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
// Demo
// </Link>
// <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
// Demo
// </Link>
// <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
// 0 000 0000000
// </Link>
// <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
// demo@demo.com
// </Link>
// </RowContent>,
// );
// expect(wrapper.prop("id")).toEqual("testId");
// });
// it("accepts className", () => {
// const wrapper = mount(
// <RowContent className="test">
// <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
// Demo
// </Link>
// <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
// Demo
// </Link>
// <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
// Demo
// </Link>
// <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
// 0 000 0000000
// </Link>
// <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
// demo@demo.com
// </Link>
// </RowContent>,
// );
// expect(wrapper.prop("className")).toEqual("test");
// });
// it("accepts style", () => {
// const wrapper = mount(
// <RowContent style={{ color: "red" }}>
// <Link type="page" title="Demo" isBold fontSize="15px" color="#333333">
// Demo
// </Link>
// <Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
// Demo
// </Link>
// <Link type="action" title="Demo" fontSize="12px" color="#A3A9AE">
// Demo
// </Link>
// <Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
// 0 000 0000000
// </Link>
// <Link type="page" title="demo@demo.com" fontSize="12px" color="#A3A9AE">
// demo@demo.com
// </Link>
// </RowContent>,
// );
// expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
// });
});

7
packages/shared/components/snackbar/Snackbar.styled.ts
View File

@ -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} {

7
packages/shared/components/tooltip/tooltip.stories.tsx
View File

@ -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}
</Text>
<Text color="#A3A9AE" fontSize="13px">
<Text color={globalColors.gray} fontSize="13px">
BobJohnston@gmail.com
</Text>
@ -133,7 +134,7 @@ export const AllTooltip: Story = {
Bob Johnston
</Text>
<Text color="#A3A9AE" fontSize="13px">
<Text color={globalColors.gray} fontSize="13px">
BobJohnston@gmail.com
</Text>
@ -173,7 +174,7 @@ export const AllTooltip: Story = {
{arrayUsers[+content].name}
</Text>
<Text color="#A3A9AE" fontSize="13px">
<Text color={globalColors.gray} fontSize="13px">
{arrayUsers[+content].email}
</Text>