Navbar username/sign out display on login, code cleanup

src/Layouts/Logo/index.tsx

@@ -3,8 +3,8 @@ import './index.scss';
 
 function Logo() {
   return (
-    <Link to={'/'} className="flex items-center text-zinc-600">
-      <div className="heart mr-4"></div>
+    <Link to={'/'} className="flex items-center text-zinc-600 font-serif text-2xl">
+      {/* <div className="heart mr-4"></div> */}
       Employee Pulse
     </Link>
   );

src/Layouts/Navigation/index.tsx

@@ -1,10 +1,28 @@
+import { useAuthState } from 'react-firebase-hooks/auth';
+import { Link } from 'react-router-dom';
+import Button, { ButtonSize, ButtonVariant } from '../../Components/Button';
+import { auth, logout } from '../../firebase';
 import Logo from '../Logo';
 
 function Navigation() {
+  const [user, loading] = useAuthState(auth);
+
   return (
-    <nav className="py-5 border-b border-neutral-200 top-0 absolute w-full z-10 bg-white">
-      <div className="container m-auto flex px-4 md:px-8">
+    <nav className="py-5 border-b border-neutral-200">
+      <div className="flex justify-between px-4 md:px-8">
         <Logo />
+        {!loading && user ? (
+          <div className='flex space-x-2'>
+            <p className='sm:flex truncate items-center justify-left hidden sm:w-fit'>{user.email}</p>
+            <Button onClick={logout} sizeType={ButtonSize.MEDIUM} variant={ButtonVariant.OUTLINE_PRIMARY}>
+              Sign Out
+            </Button>
+          </div>
+        ) : (
+          <Link to={'/login'}>
+            <Button variant={ButtonVariant.OUTLINE_PRIMARY}>Sign In</Button>
+          </Link>
+        )}
       </div>
     </nav>
   );

src/Pages/CreatePage/index.tsx

@@ -55,7 +55,6 @@ function CreatePage() {
           className="mt-8"
           disabled={!title.length}
           variant={ButtonVariant.PRIMARY}
-          sizeType={ButtonSize.NORMAL}
         >
           Create
         </Button>

src/Pages/HomePage/index.tsx

@@ -1,9 +1,13 @@
+import { useAuthState } from 'react-firebase-hooks/auth';
 import { Link } from 'react-router-dom';
 import emote from '../../Assets/emote.svg';
 import emote3 from '../../Assets/emote3.svg';
 import Button, { ButtonSize, ButtonVariant } from '../../Components/Button';
+import { auth } from '../../firebase';
 
 function HomePage() {
+  const [user, loading] = useAuthState(auth);
+
   return (
     <div className="flex flex-col overflow-hidden">
       <section className="relative mt-5">
@@ -68,13 +72,23 @@ function HomePage() {
                 <p className="text-xl text-zinc-600 mb-8">
                   There is no better way to find out than Employee Pulse
                 </p>
-                <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center">
-                  <Link to={'/login'}>
+                <div className="max-w-xs mx-auto sm:max-w-none flex flex-col sm:flex-row sm:space-y-0 space-y-2 sm:justify-center md:space-x-4">
+                  {!loading && !user && (
+                    <Link to={'/login'}>
+                      <Button
+                        variant={ButtonVariant.PRIMARY}
+                        sizeType={ButtonSize.LARGE}
+                      >
+                        Sign In
+                      </Button>
+                    </Link>
+                  )}
+
+                  <Link to={'/create'}>
                     <Button
-                      variant={ButtonVariant.PRIMARY}
-                      sizeType={ButtonSize.MEDIUM}
+                      variant={ButtonVariant.OUTLINE_PRIMARY}
                     >
-                      Sign In
+                      Create Survey
                     </Button>
                   </Link>
                 </div>

src/Pages/LoginPage/index.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
 import Github from '../../Assets/github.svg';
 import Google from '../../Assets/google.svg';
 import LoginButton from '../../Components/LoginButton';
@@ -13,10 +14,11 @@ import Button, { ButtonVariant } from '../../Components/Button';
 
 function LoginPage() {
   const [user, loading, error] = useAuthState(auth);
+  const navigate = useNavigate();
 
   useEffect(() => {
     if (user) {
-      console.log('user', user);
+      navigate('/');
     }
   }, [user, loading]);
 
@@ -39,16 +41,6 @@ function LoginPage() {
           Error: {error.message}
         </div>
       )}
-      {user && (
-        <div className="m-4">
-          <div className="text-center text-zinc-600 text-sm">
-            Logged in as {user.displayName} ({user.email})
-          </div>
-          <Button variant={ButtonVariant.DANGER} onClick={logout}>
-            Logout
-          </Button>
-        </div>
-      )}
     </div>
   );
 }

src/Pages/PageWrapper.tsx

@@ -11,7 +11,7 @@ function PageWrapper() {
   return (
     <BrowserRouter>
       <Navigation />
-      <div className="min-h-screen px-8 pt-16 m-auto sm:px-4 bg-zinc-50">
+      <div className="min-h-screen px-8 pt-16 m-auto sm:px-4">
         <Suspense
           fallback={
             <div className="flex items-center justify-center transition-all duration-250 animate-pulse">

src/index.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=fallback');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Pacifico&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -11,10 +11,10 @@
     @apply box-border antialiased;
   }
   * {
-    font-family: 'Inter', 'sans-serif';
+    font-family: 'Montserrat', 'sans-serif';
   }
   body {
-    @apply text-zinc-900;
+    @apply text-zinc-900 bg-zinc-100;
   }
 }
 

tailwind.config.js

@@ -1,7 +1,11 @@
 module.exports = {
   content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        serif: 'Pacifico',
+      },
+    },
   },
   plugins: [],
 };