fix(header): structured navigation header (#1240)

* feat(header): optional buttons in header * feat(header): add AdminHeader to all pages * fix(pages): refactor contrast * feat(header): add icons * fix(create board): change button to primary button * feat(create board): remove create board component from boards * fix(style): gap between header and body * fix(header): icons before text * chore(header): remove options prop from header * chore(header): icon to create board * chore(header): remove prop from create board
entur · Sep 26, 2023 · cc97354 · cc97354
1 parent 54e0211
commit cc97354
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 29 deletions.
diff --git a/next-tavla/pages/edit/[id].tsx b/next-tavla/pages/edit/[id].tsx
@@ -57,12 +57,14 @@ function AdminPage({
     id: string
 }) {
     return (
-        <Contrast className={classes.root}>
-            <ToastProvider>
-                <AdminHeader user={user} />
-                <Edit initialBoard={board} documentId={id} user={user} />
-            </ToastProvider>
-        </Contrast>
+        <div className={classes.root}>
+            <AdminHeader user={user} />
+            <Contrast>
+                <ToastProvider>
+                    <Edit initialBoard={board} documentId={id} user={user} />
+                </ToastProvider>
+            </Contrast>
+        </div>
     )
 }
 

diff --git a/next-tavla/pages/edit/boards.tsx b/next-tavla/pages/edit/boards.tsx
@@ -1,12 +1,13 @@
 import classes from 'styles/pages/admin.module.css'
 import { Contrast } from '@entur/layout'
 import { ToastProvider } from '@entur/alert'
-import { Header } from 'components/Header'
 import { Boards } from 'Admin/scenarios/Boards'
 import { TBoard } from 'types/settings'
 import { getBoardsForUser } from 'Admin/utils/firebase'
 import { verifyUserSession } from 'Admin/utils/auth'
 import { IncomingNextMessage } from 'types/next'
+import { AdminHeader } from 'Admin/components/AdminHeader'
+import { DecodedIdToken } from 'firebase-admin/lib/auth/token-verifier'
 
 export async function getServerSideProps({
     req,
@@ -27,18 +28,27 @@ export async function getServerSideProps({
     return {
         props: {
             boards: boards,
+            user: user,
         },
     }
 }
 
-function OverviewPage({ boards }: { boards: TBoard[] }) {
+function OverviewPage({
+    boards,
+    user,
+}: {
+    boards: TBoard[]
+    user: DecodedIdToken | null
+}) {
     return (
-        <Contrast className={classes.root}>
-            <ToastProvider>
-                <Header />
-                <Boards boards={boards} />
-            </ToastProvider>
-        </Contrast>
+        <div className={classes.root}>
+            <AdminHeader user={user} />
+            <Contrast>
+                <ToastProvider>
+                    <Boards boards={boards} />
+                </ToastProvider>
+            </Contrast>
+        </div>
     )
 }
 

diff --git a/next-tavla/src/Admin/components/AdminHeader/index.tsx b/next-tavla/src/Admin/components/AdminHeader/index.tsx
@@ -6,6 +6,8 @@ import dynamic from 'next/dynamic'
 import { PrimaryButton } from '@entur/button'
 import Link from 'next/link'
 import classes from './styles.module.css'
+import { CreateBoard } from '../CreateBoard'
+import { UserIcon } from '@entur/icons'
 
 function AdminHeader({ user }: { user: DecodedIdToken | null }) {
     return (
@@ -21,9 +23,13 @@ function AdminHeader({ user }: { user: DecodedIdToken | null }) {
             </Link>
             <div className={classes.buttons}>
                 {user && (
-                    <PrimaryButton as={Link} href="/edit/boards">
-                        Mine Tavler
-                    </PrimaryButton>
+                    <>
+                        <CreateBoard />
+                        <PrimaryButton as={Link} href="/edit/boards">
+                            <UserIcon />
+                            Mine Tavler
+                        </PrimaryButton>
+                    </>
                 )}
                 <Login user={user} />
             </div>

diff --git a/next-tavla/src/Admin/components/CreateBoard/index.tsx b/next-tavla/src/Admin/components/CreateBoard/index.tsx
@@ -1,21 +1,22 @@
-import { Button } from '@entur/button'
+import { PrimaryButton } from '@entur/button'
 import { useState } from 'react'
 import Link from 'next/link'
+import { AddIcon } from '@entur/icons'
 
 function CreateBoard() {
     const [loading, isLoading] = useState(false)
     return (
-        <Button
+        <PrimaryButton
             as={Link}
             href="/api/board"
             replace
             onClick={() => isLoading(true)}
-            variant="primary"
             disabled={loading}
             loading={loading}
         >
+            <AddIcon />
             Opprett ny tavle
-        </Button>
+        </PrimaryButton>
     )
 }
 export { CreateBoard }
diff --git a/next-tavla/src/Admin/scenarios/Boards/index.tsx b/next-tavla/src/Admin/scenarios/Boards/index.tsx
@@ -14,7 +14,6 @@ import { isEmpty } from 'lodash'
 import { IllustratedInfo } from 'Admin/components/IllustratedInfo'
 import { TableHeader } from './components/TableHeader'
 import { TableRows } from './components/TableRows'
-import { CreateBoard } from 'Admin/components/CreateBoard'
 
 function Boards({ boards }: { boards: TBoard[] }) {
     const [settings, dispatch] = useReducer(settingsReducer, {
@@ -28,10 +27,7 @@ function Boards({ boards }: { boards: TBoard[] }) {
         <SettingsContext.Provider value={settings}>
             <SettingsDispatchContext.Provider value={dispatch}>
                 <div className={classes.boards}>
-                    <div className={classes.header}>
-                        <Heading1>Mine Tavler</Heading1>
-                        <CreateBoard />
-                    </div>
+                    <Heading1>Mine Tavler</Heading1>
                     <Search />
                     <BoardTable />
                 </div>

diff --git a/next-tavla/src/Admin/scenarios/Login/index.tsx b/next-tavla/src/Admin/scenarios/Login/index.tsx
@@ -1,5 +1,5 @@
 import { PrimaryButton, SecondarySquareButton } from '@entur/button'
-import { BackArrowIcon, CloseIcon } from '@entur/icons'
+import { BackArrowIcon, CloseIcon, LogOutIcon, UserIcon } from '@entur/icons'
 import { Modal } from '@entur/modal'
 import { TLoginPage } from 'Admin/types/login'
 import { DecodedIdToken } from 'firebase-admin/lib/auth/token-verifier'
@@ -19,7 +19,11 @@ function Login({ user }: { user: DecodedIdToken | null }) {
 
     if (user) {
         // return early if user is already logged in
-        return <PrimaryButton onClick={logout}>Logg ut</PrimaryButton>
+        return (
+            <PrimaryButton onClick={logout}>
+                <LogOutIcon /> Logg ut
+            </PrimaryButton>
+        )
     }
 
     const pushPage = (page: TLoginPage) => {
@@ -34,7 +38,9 @@ function Login({ user }: { user: DecodedIdToken | null }) {
 
     return (
         <>
-            <PrimaryButton onClick={open}>Logg inn</PrimaryButton>
+            <PrimaryButton onClick={open}>
+                <UserIcon /> Logg inn
+            </PrimaryButton>
             <Modal
                 open={isOpen}
                 size="small"

diff --git a/next-tavla/src/Shared/styles/pages/admin.module.css b/next-tavla/src/Shared/styles/pages/admin.module.css
@@ -1,4 +1,7 @@
 .root {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
     padding: 1em;
     margin: 0 5em;
 }