added items-panel header divider

This commit is contained in:
mushka 2022-02-11 18:19:15 +03:00
parent 6c22190b28
commit 9c815a76af
2 changed files with 30 additions and 20 deletions

View File

@ -13,11 +13,11 @@ const SubInfoPanelHeader = ({ children, toggleIsVisible }) => {
const StyledInfoPanelHeader = styled.div`
width: 100%;
height: 53px;
height: 52px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 8px 0;
margin: 8px -16px;
.close-btn {
@media ${tablet} {
@ -26,21 +26,31 @@ const SubInfoPanelHeader = ({ children, toggleIsVisible }) => {
}
`;
const StyledDivider = styled.div`
margin: 0 -16px;
width: calc(100% + 32px);
height: 1px;
background: #eceef1;
`;
return (
<StyledInfoPanelHeader>
<Text fontSize="21px" fontWeight="700">
{content}
</Text>
<IconButton
className="close-btn"
onClick={toggleIsVisible}
iconName="/static/images/cross.react.svg"
size="17"
color="#A3A9AE"
hoverColor="#657077"
isFill={true}
/>
</StyledInfoPanelHeader>
<>
<StyledInfoPanelHeader>
<Text className="header-text" fontSize="21px" fontWeight="700">
{content}
</Text>
<IconButton
className="close-btn"
onClick={toggleIsVisible}
iconName="/static/images/cross.react.svg"
size="17"
color="#A3A9AE"
hoverColor="#657077"
isFill={true}
/>
</StyledInfoPanelHeader>
<StyledDivider />
</>
);
};

View File

@ -21,12 +21,12 @@ const StyledContainer = styled.div`
${(props) =>
props.viewAs === "table"
? css`
margin: 0px -20px;
width: calc(100% + 40px);
margin: 0px -22px;
width: calc(100% + 44px);
`
: css`
margin: 0px -24px;
width: calc(100% + 48px);
margin: 0px -20px;
width: calc(100% + 40px);
`}
@media ${tablet} {
margin: 0 -16px;