Client: Profile: InterfaceTheme: add preview article
This commit is contained in:
parent
86e35b2f82
commit
06562a2b73
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user