Web:Client:Fix styles Apperance.
This commit is contained in:
parent
c71dc0ca6a
commit
44da3f9a5d
@ -29,7 +29,6 @@ const Appearance = (props) => {
|
||||
sendAppearanceTheme,
|
||||
getAppearanceTheme,
|
||||
currentColorScheme,
|
||||
|
||||
tReady,
|
||||
t,
|
||||
} = props;
|
||||
@ -373,14 +372,9 @@ const Appearance = (props) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* <div className="add-theme box" onClick={onAddTheme}>
|
||||
<img src="/static/images/plus.theme.svg" />
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div onClick={onClickEdit}>Edit color scheme</div> */}
|
||||
<ColorSchemeDialog
|
||||
nodeButtonsColor={nodeButtonsColor}
|
||||
nodeAccentColor={nodeAccentColor}
|
||||
|
@ -1,22 +1,21 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
padding-top: 5px;
|
||||
padding-top: 3px;
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.theme-standard {
|
||||
padding-top: 16px;
|
||||
padding-top: 21px;
|
||||
}
|
||||
|
||||
.theme-name {
|
||||
@ -26,7 +25,7 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.theme-container {
|
||||
padding: 16px 0 16px 0;
|
||||
padding: 12px 0 24px 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -50,7 +49,7 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
padding-top: 32px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -59,12 +59,13 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.main-button-container {
|
||||
margin: 0px 20px 24px;
|
||||
margin: 0px 20px 23px;
|
||||
}
|
||||
|
||||
.main-button-preview {
|
||||
cursor: auto;
|
||||
background-color: ${(props) => props.colorPreview};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.color-badge > div {
|
||||
@ -106,7 +107,7 @@ const StyledComponent = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: 10px 20px 0px;
|
||||
padding: 10px 32px 0px;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 10px;
|
||||
@ -120,7 +121,7 @@ const StyledComponent = styled.div`
|
||||
|
||||
.title-section {
|
||||
height: 12px;
|
||||
margin: 0px 20px 4px;
|
||||
margin: 0px 32px 4px;
|
||||
}
|
||||
|
||||
.menu-badge {
|
||||
@ -130,6 +131,8 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.select {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px !important;
|
||||
background: ${(props) =>
|
||||
props.themePreview === "Light" ? "#f0f0f0" : "#333333"};
|
||||
}
|
||||
@ -147,7 +150,7 @@ const StyledComponent = styled.div`
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.background {
|
||||
@ -159,7 +162,7 @@ const StyledComponent = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 22px 16px 16px;
|
||||
padding: 16px 16px 14px 16px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
@ -173,7 +176,7 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 66px;
|
||||
width: 72px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
@ -198,11 +201,12 @@ const StyledComponent = styled.div`
|
||||
.section-badge {
|
||||
border: none;
|
||||
cursor: auto;
|
||||
padding-right: 10px;
|
||||
padding-right: 12px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.pin {
|
||||
padding-right: 4px;
|
||||
padding-right: 14px;
|
||||
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
|
@ -83,9 +83,6 @@ const ColorSchemeDialog = (props) => {
|
||||
</ModalDialog.Body>
|
||||
|
||||
<ModalDialog.Footer>
|
||||
{viewMobile && openHexColorPickerAccent && nodeHexColorPickerAccent}
|
||||
{viewMobile && openHexColorPickerButtons && nodeHexColorPickerButtons}
|
||||
|
||||
<>
|
||||
{showSaveButtonDialog && (
|
||||
<Button
|
||||
|
Loading…
Reference in New Issue
Block a user