feat(navigation): logout button svg

ComposableWeb · Mar 29, 2020 · ae12f3d · ae12f3d
1 parent 90ae037
commit ae12f3d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 18 deletions.
diff --git a/packages/poolbase-app/design-system/assets/svg/log-out.svg b/packages/poolbase-app/design-system/assets/svg/log-out.svg
diff --git a/packages/poolbase-app/design-system/theme/index.ts b/packages/poolbase-app/design-system/theme/index.ts
@@ -125,12 +125,32 @@ export const buttons = {
       backgroundColor: `gray.1`,
     },
   },
+  icon: {
+    ...commonButtonStyles,
+    borderRadius: `full`,
+    color: `text`,
+    p: 0,
+    px: 0,
+    width: 4,
+    height: 4,
+    position: 'relative',
+    '& > svg': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: '100%',
+      height: '100%',
+    },
+  },
 };
 
 export const colors = {
   ...baseColors,
   grayDark: baseColors.gray[8],
   text: baseColors.gray[8],
+  textInverted: baseColors.gray[2],
   background: baseColors.white,
   primary: baseColors.blue[7],
   primaryHover: baseColors.blue[8],
@@ -146,6 +166,7 @@ export const colors = {
   modes: {
     dark: {
       text: baseColors.gray[2],
+      textInverted: baseColors.gray[3],
       background: baseColors.gray[9],
       primary: '#0cf',
       secondary: '#90c',

diff --git a/packages/poolbase-app/src/app/components/Header.tsx b/packages/poolbase-app/src/app/components/Header.tsx
@@ -4,8 +4,9 @@ import Router from 'next/router';
 
 import { AuthUser } from '../interfaces';
 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 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';
 
 interface PropsWithAuthUser {
   AuthUser: AuthUser;
@@ -17,17 +18,20 @@ export default function Header({ AuthUser }: PropsWithAuthUser): JSX.Element {
     <header
       sx={{
         bg: 'grayDark',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
-      <p sx={{
-        color: 'white',
-      }}>You're signed in. Email: {AuthUser.email}</p>
-      <p
-        style={{
-          display: 'inlinelock',
-          color: 'blue',
-          textDecoration: 'underline',
-          cursor: 'pointer',
+      <IconButton
+        aria-label="Log out"
+        sx={{
+          color: 'textInverted',
+          width: 10,
+          height: 10,
+          display: 'flex',
+          my: 1,
         }}
         onClick={async (): Promise<void> => {
           try {
@@ -38,11 +42,19 @@ export default function Header({ AuthUser }: PropsWithAuthUser): JSX.Element {
           }
         }}
       >
-        Log out
-      </p>
-      <IconButton sx={{
-        color: 'white',
-      }} onClick={(): void => setColorMode(colorMode === 'light' ? 'dark' : 'light')} aria-label={`Toggle ${colorMode === 'light' ? 'Dark' : 'Light'}`}>
+        <Logout />
+      </IconButton>
+      <IconButton
+        sx={{
+          color: 'textInverted',
+          width: 10,
+          height: 10,
+          display: 'flex',
+          my: 1,
+        }}
+        onClick={(): void => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
+        aria-label={`Toggle ${colorMode === 'light' ? 'Dark' : 'Light'}`}
+      >
         {colorMode === 'light' ? <Moon /> : <Sun />}
       </IconButton>
     </header>

diff --git a/packages/poolbase-app/src/app/pages/_app.tsx b/packages/poolbase-app/src/app/pages/_app.tsx
@@ -2,13 +2,13 @@ import React from 'react';
 import App from 'next/app';
 import { ThemeProvider } from 'theme-ui';
 
-import theme from '../../../design-system/theme';
+import { poolbaseTheme } from '../../../design-system/theme';
 
 class MyApp extends App {
   public render(): JSX.Element {
     const { Component, pageProps } = this.props;
     return (
-      <ThemeProvider theme={theme}>
+      <ThemeProvider theme={poolbaseTheme}>
         <Component {...pageProps} />
       </ThemeProvider>
     );