Shared: use colors from theme
This commit is contained in:
parent
64e41eb0e4
commit
7f19622a28
@ -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",
|
||||
|
@ -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", () => {
|
||||
|
@ -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",
|
||||
},
|
||||
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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")};
|
||||
|
@ -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};
|
||||
}
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -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 &&
|
||||
|
@ -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 ? (
|
||||
|
@ -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>
|
||||
|
@ -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");
|
||||
// });
|
||||
});
|
||||
|
@ -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} {
|
||||
|
@ -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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user