add logo to login page (header not available then)

src/Header.tsx

@@ -3,7 +3,7 @@ import { useSession } from "./Session";
 import { useState } from "react";
 
 export default function Header() {
-  const { user, teams, players } = useSession();
+  const { user, teams, setTeams, players, onLogout } = useSession();
   const [burgerActive, setBurgerActive] = useState(false);
   return (
     <nav className="navbar" role="navigation" aria-label="main navigation">
@@ -36,6 +36,7 @@ export default function Header() {
         className={"navbar-menu" + (burgerActive ? " is-active" : "")}
         id="navbar"
       >
+        {user?.scopes.includes(`team:${teams?.activeTeam}`) && (
           <div className="navbar-start">
             <Link className="navbar-item" to="/network">
               <span>Sociogram</span>
@@ -47,20 +48,34 @@ export default function Header() {
               <span>Team</span>
             </Link>
           </div>
+        )}
         <div className="navbar-end">
+          {teams && (
+            <div className="navbar-item has-dropdown is-hoverable">
+              <a className="navbar-link">my teams</a>
+              <div className="navbar-dropdown">
+                {teams.teams.map((team, index) => (
+                  <a
+                    onClick={() => setTeams({ ...teams, activeTeam: team.id })}
+                    className={
+                      "navbar-item" +
+                      (team.id === teams.activeTeam
+                        ? " is-bold has-text-weight-extrabold"
+                        : "")
+                    }
+                  >
+                    {team.name}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
           <div className="navbar-item">
             {user?.username}
             <div className="buttons">
-              {user ? (
+              <button className="button is-light" onClick={onLogout}>
-                <button className="button is-light">Log out</button>
+                Log out
-              ) : (
-                <>
-                  <button className="button is-success">
-                    <strong>Sign up</strong>
               </button>
-                  <button className="button is-light">Log in</button>
-                </>
-              )}
             </div>
           </div>
         </div>

src/Session.tsx

@@ -108,6 +108,16 @@ export function SessionProvider(props: SessionProviderProps) {
     content = (
       <section className="section is-medium">
         <div className="container is-max-tablet">
+          <div className="block">
+            <p className="level-item has-text-centered">
+              <img
+                className="image"
+                alt="cool ultimate team tool"
+                src="cutt.svg"
+                style={{ width: 200 }}
+              />
+            </p>
+          </div>
           <Login onLogin={onLogin} />
         </div>
       </section>