From 9e6569717949ded7505fb4be39879ff05aebcd6d Mon Sep 17 00:00:00 2001
From: Andreas Sahle <andreas.sahle@gmail.com>
Date: Mon, 30 Mar 2020 12:33:57 +0200
Subject: [PATCH] feat(layout): more buttons in header

---
 .../design-system/assets/svg/plus-square.svg  |  1 +
 .../poolbase-app/design-system/theme/index.ts |  9 ++--
 .../src/app/components/Header.tsx             | 45 +++++++++++--------
 .../src/app/components/PageLayout.tsx         |  4 +-
 .../poolbase-app/src/app/pages/_document.tsx  |  2 +-
 5 files changed, 36 insertions(+), 25 deletions(-)
 create mode 100644 packages/poolbase-app/design-system/assets/svg/plus-square.svg

diff --git a/packages/poolbase-app/design-system/assets/svg/plus-square.svg b/packages/poolbase-app/design-system/assets/svg/plus-square.svg
new file mode 100644
index 0000000..c380e24
--- /dev/null
+++ b/packages/poolbase-app/design-system/assets/svg/plus-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
\ No newline at end of file
diff --git a/packages/poolbase-app/design-system/theme/index.ts b/packages/poolbase-app/design-system/theme/index.ts
index acc25f0..1906807 100644
--- 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
index 7545071..0887c74 100644
--- 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
index a816d5e..0834619 100644
--- 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
index ad96158..a9323e7 100755
--- 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 />