Web: Changed adding a theme using a class, moved the picture to a component, removed it from Common.

This commit is contained in:
Vlada Gazizova 2023-05-25 11:53:52 +03:00
parent b2a623a91e
commit 1ef9ad529c
3 changed files with 36 additions and 59 deletions

View File

@ -1,7 +1,35 @@
import React from "react";
import styled, { css } from "styled-components";
import Text from "@docspace/components/text";
import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
import VersionMarkIcon from "@docspace/common/components/VersionMarkIcon";
import VersionSvg from "PUBLIC_DIR/images/versionrevision_active.react.svg";
const VersionMarkIcon = styled(VersionSvg)`
path {
fill: ${(props) =>
!props.$isVersion
? props.theme.filesVersionHistory.badge.defaultFill
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke: ${(props) =>
!props.$isVersion
? props.theme.filesVersionHistory.badge.stroke
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke-dasharray: ${(props) => (props.$isVersion ? "2 0" : "3 1")};
stroke-linejoin: ${(props) => (props.$isVersion ? "unset" : "round")};
${(props) =>
props.$isVersion &&
css`
stroke-width: 2;
`}
}
`;
const VersionBadge = ({
className,
isVersion,
@ -21,7 +49,12 @@ const VersionBadge = ({
index={index}
{...rest}
>
<VersionMarkIcon $isVersion={isVersion} theme={theme} index={index} />
<VersionMarkIcon
className="version-mark-icon"
$isVersion={isVersion}
theme={theme}
index={index}
/>
<Text
className="version_badge-text"

View File

@ -1,30 +0,0 @@
import styled, { css } from "styled-components";
import VersionSvg from "PUBLIC_DIR/images/versionrevision_active.react.svg";
const VersionMarkIcon = styled(VersionSvg)`
path {
fill: ${(props) =>
!props.$isVersion
? props.theme.filesVersionHistory.badge.defaultFill
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke: ${(props) =>
!props.$isVersion
? props.theme.filesVersionHistory.badge.stroke
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke-dasharray: ${(props) => (props.$isVersion ? "2 0" : "3 1")};
stroke-linejoin: ${(props) => (props.$isVersion ? "unset" : "round")};
${(props) =>
props.$isVersion &&
css`
stroke-width: 2;
`}
}
`;
export default VersionMarkIcon;

View File

@ -1,36 +1,10 @@
import styled, { css } from "styled-components";
import Box from "@docspace/components/box";
import VersionSvg from "PUBLIC_DIR/images/versionrevision_active.react.svg";
const VersionMarkIcon = styled(VersionSvg)`
path {
fill: ${(props) =>
!props.$isVersion
? props.theme.filesVersionHistory.badge.defaultFill
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke: ${(props) =>
!props.$isVersion
? props.theme.filesVersionHistory.badge.stroke
: props.index === 0
? props.theme.filesVersionHistory.badge.fill
: props.theme.filesVersionHistory.badge.badgeFill};
stroke-dasharray: ${(props) => (props.$isVersion ? "2 0" : "3 1")};
stroke-linejoin: ${(props) => (props.$isVersion ? "unset" : "round")};
${(props) =>
props.$isVersion &&
css`
stroke-width: 2;
`}
}
`;
const getDefaultStyles = ({ $currentColorScheme, $isVersion, theme, index }) =>
$currentColorScheme &&
css`
${VersionMarkIcon} {
.version-mark-icon {
path {
fill: ${!$isVersion
? theme.filesVersionHistory.badge.defaultFill