feat(layout): more buttons in header

ComposableWeb · Mar 30, 2020 · 9e65697 · 9e65697
1 parent e8bd352
commit 9e65697
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 25 deletions.
diff --git a/packages/poolbase-app/design-system/assets/svg/plus-square.svg b/packages/poolbase-app/design-system/assets/svg/plus-square.svg
diff --git a/packages/poolbase-app/design-system/theme/index.ts b/packages/poolbase-app/design-system/theme/index.ts
@@ -151,7 +151,8 @@ export const colors = {
   grayDark: baseColors.gray[8],
   text: baseColors.gray[8],
   textInverted: baseColors.gray[2],
-  background: baseColors.white,
+  background: baseColors.gray[2],
+  backgroundInverted: baseColors.gray[8],
   primary: baseColors.blue[7],
   primaryHover: baseColors.blue[8],
   secondary: baseColors.gray[6],
@@ -165,9 +166,10 @@ export const colors = {
   textMuted: baseColors.gray[6],
   modes: {
     dark: {
-      text: baseColors.gray[2],
-      textInverted: baseColors.gray[3],
+      text: baseColors.gray[4],
+      textInverted: baseColors.gray[5],
       background: baseColors.gray[9],
+      backgroundInverted: baseColors.black,
       primary: '#0cf',
       secondary: '#90c',
     },
@@ -380,6 +382,7 @@ const heading = {
   lineHeight: 'heading',
   m: 0,
   mb: 1,
+  color: 'text',
 };
 
 export const styles = {

diff --git a/packages/poolbase-app/src/app/components/Header.tsx b/packages/poolbase-app/src/app/components/Header.tsx
@@ -7,32 +7,46 @@ import logout from '../utils/auth/logout';
 import Moon from '../../../design-system/assets/svg/moon.svg';
 import Sun from '../../../design-system/assets/svg/sun.svg';
 import Logout from '../../../design-system/assets/svg/log-out.svg';
+import Add from '../../../design-system/assets/svg/plus-square.svg';
 
 interface PropsWithAuthUser {
   AuthUser: AuthUser;
 }
 
+const NaviIconButton = props => (
+  <IconButton
+    {...props}
+    sx={{
+      color: 'textInverted',
+      width: 10,
+      height: 10,
+      display: 'flex',
+      my: 1,
+    }}
+  />
+);
 export default function Header({ AuthUser }: PropsWithAuthUser): JSX.Element {
   const [colorMode, setColorMode] = useColorMode();
   return (
     <header
       sx={{
-        bg: 'grayDark',
+        bg: 'backgroundInverted',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
       }}
     >
-      <IconButton
-        aria-label="Log out"
-        sx={{
-          color: 'textInverted',
-          width: 10,
-          height: 10,
-          display: 'flex',
-          my: 1,
+      <NaviIconButton
+        aria-label="Add URL"
+        onClick={(): void => {
+          Router.push('/add-url');
         }}
+      >
+        <Add />
+      </NaviIconButton>
+      <NaviIconButton
+        aria-label="Log out"
         onClick={async (): Promise<void> => {
           try {
             await logout();
@@ -43,20 +57,13 @@ export default function Header({ AuthUser }: PropsWithAuthUser): JSX.Element {
         }}
       >
         <Logout />
-      </IconButton>
-      <IconButton
-        sx={{
-          color: 'textInverted',
-          width: 10,
-          height: 10,
-          display: 'flex',
-          my: 1,
-        }}
+      </NaviIconButton>
+      <NaviIconButton
         onClick={(): void => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
         aria-label={`Toggle ${colorMode === 'light' ? 'Dark' : 'Light'}`}
       >
         {colorMode === 'light' ? <Moon /> : <Sun />}
-      </IconButton>
+      </NaviIconButton>
     </header>
   );
 }
diff --git a/packages/poolbase-app/src/app/components/PageLayout.tsx b/packages/poolbase-app/src/app/components/PageLayout.tsx
@@ -25,13 +25,13 @@ const PageLayout: NextPage<PropsWithAuthUserInfo> = (
       ) : (
         <Grid
           gap={0}
-          columns={[0, '200px 1fr']}
+          columns={[0, '150px 1fr']}
           sx={{
             height: '100%',
           }}
         >
           <Header AuthUser={AuthUser} />
-          <div>{children}</div>
+          <main sx={{ px: 4 }}>{children}</main>
         </Grid>
       )}
     </>

diff --git a/packages/poolbase-app/src/app/pages/_document.tsx b/packages/poolbase-app/src/app/pages/_document.tsx
@@ -51,7 +51,7 @@ export default class CustomDocument extends Document<CustomDocumentProps> {
             height: '100%',
             '& > div': {
               height: '100%',
-            }
+            },
           }}
         >
           <Main />