IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Client: Profile: InterfaceTheme: add preview article

Browse Source
This commit is contained in:
Viktor Fomin 2022-09-02 04:10:14 +03:00
parent 86e35b2f82
commit 06562a2b73
2 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/styled-preview.js
View File

@ -16,10 +16,11 @@ export const StyledPreview = styled.div`
display: flex;
.article {
width: 251px;
width: 211px;
background: ${(props) => props.theme.article.background};
padding: 0 20px;
border-radius: 0 0 12px 12px;
border: none;
border-radius: 0 0 0 12px;
.logo {
padding: 22px 0;
@ -39,5 +40,33 @@ export const StyledPreview = styled.div`
color: ${(props) => props.theme.mainButton.textColor};
}
}
.catalog-header {
color: ${(props) => props.theme.article.catalogItemHeader};
padding-left: 12px;
padding-bottom: 4px;
}
.item {
display: flex;
gap: 8px;
padding: 10px 0 10px 10px;
border-radius: 3px;
.label {
color: ${(props) => props.theme.article.catalogItemText};
}
}
.item-active {
background: ${(props) => props.theme.article.catalogItemActiveBackground};
}
}
.body {
width: 69px;
background: ${(props) => props.theme.backgroundColor};
border: none;
border-radius: 0 0 12px 0;
}
`;

22
packages/client/src/pages/Profile/Section/Body/sub-components/interface-theme/theme-preview.js
View File

@ -41,7 +41,29 @@ const ThemePreview = (props) => {
</Text>
<img src="/static/images/triangle-main-button.svg" />
</button>
<Text fontSize="11px" fontWeight={600} className="catalog-header">
{t("Common:Rooms")}
</Text>
<div className="item">
<img src="/static/images/catalog.user.react.svg" />
<Text className="label" fontWeight={600}>
Personal
</Text>
</div>
<div className="item item-active">
<img src="/static/images/catalog.folder.react.svg" />
<Text className="label" fontWeight={600}>
Shared
</Text>
</div>
<div className="item">
<img src="/static/images/catalog.archive.react.svg" />
<Text className="label" fontWeight={600}>
Archived
</Text>
</div>
</div>
<div className="body"></div>
</StyledPreview>
</ThemeProvider>
</StyledWrapper>