Client: Profile: InterfaceTheme: add preview body
This commit is contained in:
parent
ee5d036981
commit
aad98ea600
@ -3,17 +3,18 @@ import styled from "styled-components";
|
||||
export const StyledWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #eceef1;
|
||||
border: ${(props) => props.theme.profile.themePreview.border};
|
||||
border-radius: 12px;
|
||||
|
||||
.header {
|
||||
padding: 12px 20px;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
border-bottom: ${(props) => props.theme.profile.themePreview.border};
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledPreview = styled.div`
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.article {
|
||||
width: 211px;
|
||||
@ -64,9 +65,45 @@ export const StyledPreview = styled.div`
|
||||
}
|
||||
|
||||
.body {
|
||||
width: 69px;
|
||||
width: 49px;
|
||||
background: ${(props) => props.theme.backgroundColor};
|
||||
border: none;
|
||||
border-radius: 0 0 12px 0;
|
||||
padding-left: 20px;
|
||||
padding-top: 22px;
|
||||
|
||||
.search-input {
|
||||
width: 40px;
|
||||
margin-top: 28px;
|
||||
margin-bottom: 4px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid ${(props) => props.theme.input.borderColor};
|
||||
border-radius: 3px;
|
||||
background: ${(props) => props.theme.input.backgroundColor};
|
||||
|
||||
.placeholder {
|
||||
color: ${(props) => props.theme.input.borderColor};
|
||||
}
|
||||
}
|
||||
|
||||
.row-header {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-top: 1px solid ${(props) => props.theme.row.borderBottom};
|
||||
|
||||
.icon {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
@ -41,29 +41,62 @@ const ThemePreview = (props) => {
|
||||
</Text>
|
||||
<img src="/static/images/triangle-main-button.svg" />
|
||||
</button>
|
||||
<Text fontSize="11px" fontWeight={600} className="catalog-header">
|
||||
<Text
|
||||
fontSize="11px"
|
||||
fontWeight={600}
|
||||
noSelect
|
||||
className="catalog-header"
|
||||
>
|
||||
{t("Common:Rooms")}
|
||||
</Text>
|
||||
<div className="item">
|
||||
<img src="/static/images/catalog.user.react.svg" />
|
||||
<Text className="label" fontWeight={600}>
|
||||
<Text className="label" fontWeight={600} noSelect>
|
||||
Personal
|
||||
</Text>
|
||||
</div>
|
||||
<div className="item item-active">
|
||||
<img src="/static/images/catalog.folder.react.svg" />
|
||||
<Text className="label" fontWeight={600}>
|
||||
<Text className="label" fontWeight={600} noSelect>
|
||||
Shared
|
||||
</Text>
|
||||
</div>
|
||||
<div className="item">
|
||||
<img src="/static/images/catalog.archive.react.svg" />
|
||||
<Text className="label" fontWeight={600}>
|
||||
<Text className="label" fontWeight={600} noSelect>
|
||||
Archived
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
<div className="body"></div>
|
||||
<div className="body">
|
||||
<Text fontSize="18px" fontWeight={700} noSelect>
|
||||
Shared
|
||||
</Text>
|
||||
<div className="search-input">
|
||||
<Text className="placeholder" fontWeight={600} noSelect>
|
||||
Find
|
||||
</Text>
|
||||
</div>
|
||||
<div className="row-header">
|
||||
<Text fontSize="12px" fontWeight={600} noSelect>
|
||||
Name
|
||||
</Text>
|
||||
<img src="/static/images/sort.desc.react.svg" />
|
||||
</div>
|
||||
|
||||
<div className="row">
|
||||
<img className="icon" src="images/icons/32/room/review.svg" />
|
||||
<Text fontWeight={600} noSelect>
|
||||
Room
|
||||
</Text>
|
||||
</div>
|
||||
<div className="row">
|
||||
<img className="icon" src="images/icons/32/room/custom.svg" />
|
||||
<Text fontWeight={600} noSelect>
|
||||
Room
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
</StyledPreview>
|
||||
</ThemeProvider>
|
||||
</StyledWrapper>
|
||||
|
Loading…
Reference in New Issue
Block a user