Client: use colors from theme

This commit is contained in:
Viktor Fomin 2024-06-18 10:10:21 +03:00
parent 3df44723d4
commit e3002249cd
12 changed files with 25 additions and 27 deletions

View File

@ -44,7 +44,7 @@ const StyledPlugin = styled.div`
height: 1px;
width: 100%;
background-color: #858585;
background-color: ${(props) => props.theme.plugins.color};
}
`;

View File

@ -58,7 +58,7 @@ const StyledInfo = styled.div`
gap: 16px;
.row-name {
color: #858585;
color: ${(props) => props.theme.plugins.color};
}
}
`;

View File

@ -53,7 +53,7 @@ const StyledModalDialog = styled(ModalDialog)`
}
a {
color: #4781d1;
color: ${(props) => props.theme.dialogs.linkColor};
}
.debug-info-body,

View File

@ -58,6 +58,10 @@ const WorkspacesContainer = styled.div`
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
.link {
color: ${(props) => props.theme.client.settings.migration.linkColor};
}
}
.workspace-item {
@ -75,7 +79,8 @@ const WorkspacesContainer = styled.div`
cursor: pointer;
&:hover {
border-color: #4781d1;
border-color: ${(props) =>
props.theme.client.settings.migration.workspaceHover};
}
&:active {

View File

@ -150,9 +150,9 @@ const DataImport = ({
>
<ReactSVG src={workspace.logo} className="workspace-logo" />
<Link
className="link"
type="page"
fontWeight="600"
color="#4781D1"
isHovered
isTextOverflow
>

View File

@ -46,12 +46,13 @@ const BarWrapper = styled.div`
margin-top: 25px;
background: ${(props) => (props.theme.isBase ? "#f8f9f9" : "#3D3D3D")};
background: ${(props) => props.theme.client.settings.webhooks.barBackground};
border-radius: 3px;
flex-wrap: wrap;
.barItemHeader {
margin-bottom: 10px;
color: ${(props) => props.theme.client.settings.webhooks.color};
}
`;
@ -72,13 +73,7 @@ const BarItem = styled.div`
`;
const BarItemHeader = ({ children }) => (
<Text
as="h3"
color="#A3A9AE"
fontSize="12px"
fontWeight={600}
className="barItemHeader"
>
<Text as="h3" fontSize="12px" fontWeight={600} className="barItemHeader">
{children}
</Text>
);

View File

@ -81,8 +81,7 @@ const FilterButton = styled.div`
z-index: ${(props) => (props.isGroupMenuVisible ? 199 : 201)};
border: 1px solid;
border-color: ${(props) =>
props.theme.isBase ? "#d0d5da" : "rgb(71, 71, 71)"};
border-color: ${(props) => props.theme.client.settings.webhooks.filterBorder};
border-radius: 3px;
cursor: pointer;
@ -91,7 +90,7 @@ const FilterButton = styled.div`
}
:hover {
border-color: #a3a9ae;
border-color: ${(props) => props.theme.client.settings.webhooks.color};
svg {
path {
fill: ${(props) => props.theme.iconButton.hoverColor};
@ -103,7 +102,8 @@ const FilterButton = styled.div`
z-index: 203;
width: 8px;
height: 8px;
background-color: #4781d1;
background-color: ${(props) =>
props.theme.client.settings.webhooks.spanBackground};
border-radius: 50%;
position: absolute;
bottom: -2px;

View File

@ -245,11 +245,6 @@ const HistoryHeader = (props) => {
<Headline type="content" truncate={true} className="headline">
{t("InfoPanel:SubmenuHistory")}
</Headline>
{/* <Hint
backgroundColor={theme.isBase ? "#F8F9F9" : "#3D3D3D"}
color={theme.isBase ? "#555F65" : "#FFFFFF"}>
{t("EventHint")}
</Hint> */}
</>
);

View File

@ -48,7 +48,7 @@ const StyledRowContainer = styled(RowContainer)`
.row-list-item:has(.selected-row-item) {
background-color: ${(props) =>
props.theme.isBase ? "#f3f4f4" : "#3D3D3D"};
props.theme.client.settings.webhooks.historyRowBackground};
}
`;

View File

@ -66,7 +66,8 @@ const StyledTableRow = styled(TableRow)`
props.isHighlight &&
css`
.table-container_cell {
background-color: #f3f4f4;
background-color: ${(props) =>
props.theme.client.settings.webhooks.tableCellBackground};
}
`}
`;

View File

@ -51,9 +51,10 @@ const InfoText = styled(Text)`
InfoText.defaultProps = { theme: Base };
const StyledGuideLink = styled(Link)`
color: ${(props) => (props.theme.isBase ? "#316DAA" : "#4781D1")};
color: ${(props) => props.theme.client.settings.webhooks.linkColor};
&:hover {
color: ${(props) => (props.theme.isBase ? "#316DAA" : "#4781D1")};
color: ${(props) => props.theme.client.settings.webhooks.linkColor};
}
`;

View File

@ -44,7 +44,8 @@ const StyledCertificatesTable = styled.div`
display: flex;
align-items: center;
border-left: 1px solid #d0d5da;
border-left: ${(props) =>
props.theme.client.settings.integration.sso.border};
height: 13px;
padding-left: 8px;
}