Client: use colors from theme
This commit is contained in:
parent
01cf496eed
commit
f1f56677ae
@ -57,10 +57,12 @@ const StyledComponent = styled(ModalDialog)`
|
|||||||
padding-bottom: 20px;
|
padding-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
${!isMobile() &&
|
${
|
||||||
|
!isMobile() &&
|
||||||
css`
|
css`
|
||||||
max-width: 448px;
|
max-width: 448px;
|
||||||
`}
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.name-color {
|
.name-color {
|
||||||
@ -77,19 +79,13 @@ const StyledComponent = styled(ModalDialog)`
|
|||||||
background: ${(props) =>
|
background: ${(props) =>
|
||||||
props.currentColorAccent
|
props.currentColorAccent
|
||||||
? props.currentColorAccent
|
? props.currentColorAccent
|
||||||
: props.theme.isBase
|
: `${props.theme.client.settings.common.appearance.accentBoxBackground} url(${PlusThemeSvgUrl}) no-repeat center`}
|
||||||
? `#eceef1 url(${PlusThemeSvgUrl}) no-repeat center`
|
|
||||||
: `#474747 url(${PlusThemeSvgUrl}) no-repeat center`};
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons-box {
|
.buttons-box {
|
||||||
background: ${(props) =>
|
background: ${(props) =>
|
||||||
props.currentColorButtons
|
props.currentColorButtons
|
||||||
? props.currentColorButtons
|
? props.currentColorButtons
|
||||||
: props.theme.isBase
|
: `${props.theme.client.settings.common.appearance.buttonBoxBackground} url(${PlusThemeSvgUrl}) no-repeat center`}
|
||||||
? `#eceef1 url(${PlusThemeSvgUrl}) no-repeat center`
|
|
||||||
: `#474747 url(${PlusThemeSvgUrl}) no-repeat center`};
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-add-theme {
|
.modal-add-theme {
|
||||||
width: 46px;
|
width: 46px;
|
||||||
@ -99,23 +95,28 @@ const StyledComponent = styled(ModalDialog)`
|
|||||||
}
|
}
|
||||||
|
|
||||||
.drop-down-container-hex {
|
.drop-down-container-hex {
|
||||||
${isMobileOnly &&
|
${
|
||||||
|
isMobileOnly &&
|
||||||
css`
|
css`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`}
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-down-item-hex {
|
.drop-down-item-hex {
|
||||||
${isMobileOnly &&
|
${
|
||||||
|
isMobileOnly &&
|
||||||
css`
|
css`
|
||||||
width: calc(100vw - 32px);
|
width: calc(100vw - 32px);
|
||||||
`}
|
`
|
||||||
|
}
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
${!isMobile() &&
|
${
|
||||||
|
!isMobile() &&
|
||||||
css`
|
css`
|
||||||
max-width: 227px;
|
max-width: 227px;
|
||||||
|
|
||||||
@ -126,7 +127,8 @@ const StyledComponent = styled(ModalDialog)`
|
|||||||
.react-colorful__interactive {
|
.react-colorful__interactive {
|
||||||
max-width: 183px;
|
max-width: 183px;
|
||||||
}
|
}
|
||||||
`}
|
`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@ export const DeleteDataLayout = styled.div`
|
|||||||
hr {
|
hr {
|
||||||
margin: 24px 0;
|
margin: 24px 0;
|
||||||
border: none;
|
border: none;
|
||||||
border-top: 1px solid #eceef1;
|
border-top: ${(props) => props.theme.client.settings.deleteData.borderTop};
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -68,7 +68,7 @@ const LargePayloadStub = styled.div`
|
|||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
background: #f8f9f9;
|
background: #f8f9f9;
|
||||||
border: 1px solid #eceef1;
|
border: ${(props) => props.theme.client.settings.webhooks.border};
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|
||||||
${isMobile() &&
|
${isMobile() &&
|
||||||
|
Loading…
Reference in New Issue
Block a user