diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx index 16a0268d..ee1503d4 100644 --- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx +++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx @@ -130,10 +130,13 @@ const SafeHeader = ({ return ( <> + {/* Network */} {networkInfo.label} + + {/* Identicon */} @@ -142,6 +145,7 @@ const SafeHeader = ({ + {/* SafeInfo */} {safeName} diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx index 673b994d..ff2b29d3 100644 --- a/src/components/AppLayout/Sidebar/index.tsx +++ b/src/components/AppLayout/Sidebar/index.tsx @@ -16,7 +16,7 @@ const HelpContainer = styled.div` const HelpCenterLink = styled.a` height: 30px; width: 166px; - padding: 6px 0 0 16px; + padding: 8px 0 8px 16px; margin: 14px 0px; text-decoration: none; display: block; diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx index 4ac72c9e..63c2c1ba 100644 --- a/src/components/AppLayout/index.tsx +++ b/src/components/AppLayout/index.tsx @@ -6,53 +6,62 @@ import Header from './Header' import Footer from './Footer' import Sidebar from './Sidebar' -const Grid = styled.div` - height: 100%; - overflow: auto; +const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + background-color: ${({ theme }) => theme.colors.background}; - display: grid; - grid-template-columns: 200px 1fr; - grid-template-rows: 54px 1fr; - grid-template-areas: - 'topbar topbar' - 'sidebar body'; ` -const GridTopbarWrapper = styled.nav` +const HeaderWrapper = styled.nav` + height: 54px; + width: 100%; + z-index: 1; + background-color: white; - box-shadow: 0 2px 4px 0 rgba(212, 212, 211, 0.59); - border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; - z-index: 999; - grid-area: topbar; + box-shadow: 0 0 4px 0 rgba(212, 212, 211, 0.59); ` -const GridSidebarWrapper = styled.aside` - width: 200px; - padding: 62px 8px 0 8px; +const BodyWrapper = styled.div` + height: calc(100% - 54px); + width: 100%; + display: flex; + flex-direction: row; +` + +const SidebarWrapper = styled.aside` height: 100%; + width: 200px; + display: flex; + flex-direction: column; + z-index: 1; + + padding: 8px; background-color: ${({ theme }) => theme.colors.white}; border-right: 2px solid ${({ theme }) => theme.colors.separator}; +` + +const ContentWrapper = styled.section` + width: 100%; display: flex; flex-direction: column; - box-sizing: border-box; - position: fixed; - grid-area: sidebar; -` + overflow-x: auto; -const GridBodyWrapper = styled.section` - margin: 0 16px 0 16px; - grid-area: body; - display: flex; - flex-direction: column; - align-content: stretch; -` + padding: 0 16px; -export const BodyWrapper = styled.div` - flex: 1 100%; -` + > :nth-child(1) { + flex-grow: 1; + width: 100%; + align-items: center; + justify-content: center; + } -export const FooterWrapper = styled.footer` - margin: 0 16px; + > :nth-child(2) { + width: 100%; + height: 59px; + } ` type Props = { @@ -77,29 +86,29 @@ const Layout: React.FC = ({ children, sidebarItems, }): React.ReactElement => ( - - + +
- - - - - - {children} - + + + + + + +
{children}