status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

(Bugfix) - #1286 Fix Sidebar position (#1340) 

* 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:
Agustín Longoni 2020-09-14 08:29:54 -03:00 committed by GitHub
parent 9ead8ef95b
commit 5b99ceaa6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppLayout/Sidebar/SafeHeader/index.tsx
View File

@ -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>

6
src/components/AppLayout/Sidebar/index.tsx
View File

@ -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;

7
src/components/AppLayout/index.tsx
View File

@ -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`

15
src/components/List/index.tsx
View File

@ -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),