* fix Sidebar position * fix padding * fix padding and margin Help Center and Not connected Icon * add scroll to Sidebar List menu Co-authored-by: nicolas <nicosampler@users.noreply.github.com>
This commit is contained in:
parent
9ead8ef95b
commit
5b99ceaa6d
|
@ -102,9 +102,7 @@ const SafeHeader = ({
|
||||||
<Container>
|
<Container>
|
||||||
<IdenticonContainer>
|
<IdenticonContainer>
|
||||||
<FlexSpacer />
|
<FlexSpacer />
|
||||||
<div>
|
<FixedIcon type="notConnected" />
|
||||||
<FixedIcon type="notConnected" />
|
|
||||||
</div>
|
|
||||||
<UnStyledButton onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
|
<UnStyledButton onClick={onToggleSafeList} data-testid={TOGGLE_SIDEBAR_BTN_TESTID}>
|
||||||
<Icon size="md" type="circleDropdown" />
|
<Icon size="md" type="circleDropdown" />
|
||||||
</UnStyledButton>
|
</UnStyledButton>
|
||||||
|
|
|
@ -10,14 +10,14 @@ const StyledDivider = styled(Divider)`
|
||||||
`
|
`
|
||||||
|
|
||||||
const HelpContainer = styled.div`
|
const HelpContainer = styled.div`
|
||||||
height: 58px;
|
margin-top: auto;
|
||||||
`
|
`
|
||||||
|
|
||||||
const HelpCenterLink = styled.a`
|
const HelpCenterLink = styled.a`
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: 166px;
|
width: 166px;
|
||||||
padding: 10px 0 0 16px;
|
padding: 6px 0 0 16px;
|
||||||
margin: 10px 0px;
|
margin: 14px 0px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
|
|
@ -28,18 +28,15 @@ const GridTopbarWrapper = styled.nav`
|
||||||
|
|
||||||
const GridSidebarWrapper = styled.aside`
|
const GridSidebarWrapper = styled.aside`
|
||||||
width: 200px;
|
width: 200px;
|
||||||
padding: 8px;
|
padding: 62px 8px 0 8px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: ${({ theme }) => theme.colors.white};
|
background-color: ${({ theme }) => theme.colors.white};
|
||||||
border-right: 2px solid ${({ theme }) => theme.colors.separator};
|
border-right: 2px solid ${({ theme }) => theme.colors.separator};
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
position: fixed;
|
||||||
grid-area: sidebar;
|
grid-area: sidebar;
|
||||||
|
|
||||||
div:last-of-type {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
`
|
`
|
||||||
|
|
||||||
const GridBodyWrapper = styled.section`
|
const GridBodyWrapper = styled.section`
|
||||||
|
|
|
@ -70,6 +70,21 @@ const useStyles = makeStyles((theme: Theme) =>
|
||||||
width: '100%',
|
width: '100%',
|
||||||
maxWidth: 200,
|
maxWidth: 200,
|
||||||
backgroundColor: theme.palette.background.paper,
|
backgroundColor: theme.palette.background.paper,
|
||||||
|
overflowX: 'auto',
|
||||||
|
margin: '8px 0 -4px 0',
|
||||||
|
'&::-webkit-scrollbar': {
|
||||||
|
width: '0.5em',
|
||||||
|
},
|
||||||
|
'&::-webkit-scrollbar-track': {
|
||||||
|
boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
|
||||||
|
webkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
|
||||||
|
borderRadius: '20px',
|
||||||
|
},
|
||||||
|
'&::-webkit-scrollbar-thumb': {
|
||||||
|
backgroundColor: 'darkgrey',
|
||||||
|
outline: '1px solid #dadada',
|
||||||
|
borderRadius: '20px',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
nested: {
|
nested: {
|
||||||
paddingLeft: theme.spacing(3),
|
paddingLeft: theme.spacing(3),
|
||||||
|
|
Loading…
Reference in New Issue