diff --git a/src/app/App.js b/src/app/App.js index 618c37c..19dac47 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -55,7 +55,7 @@ function App() { - + diff --git a/src/app/PageLayout.js b/src/app/PageLayout.js index 9e62219..0d67ad2 100644 --- a/src/app/PageLayout.js +++ b/src/app/PageLayout.js @@ -1,16 +1,25 @@ import React from "react"; -import { Box, Button, IconButton, useColorMode } from "@chakra-ui/core"; +import { Box, Button, HStack, IconButton, useColorMode } from "@chakra-ui/core"; import { Link } from "react-router-dom"; import { useAuth0 } from "@auth0/auth0-react"; -import { MoonIcon, SunIcon } from "@chakra-ui/icons"; +import { ChevronLeftIcon, MoonIcon, SunIcon } from "@chakra-ui/icons"; import useCurrentUser from "./components/useCurrentUser"; -function PageLayout({ children }) { +// TODO: Replace with lower-res version +import HomepageSplashImg from "../images/homepage-splash.png"; + +function PageLayout({ children, hideHomeLink }) { return ( - - + + {!hideHomeLink && } @@ -19,6 +28,47 @@ function PageLayout({ children }) { ); } +function HomeLink() { + return ( + + + + + + + + ); +} + function UserLoginLogout() { const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0(); const { id, username } = useCurrentUser(); @@ -29,15 +79,15 @@ function UserLoginLogout() { if (isAuthenticated) { return ( - + {username && Hi, {username}!} + {id && ( @@ -46,17 +96,19 @@ function UserLoginLogout() { size="sm" variant="outline" onClick={() => logout({ returnTo: window.location.origin })} - marginLeft="2" > Log out - + ); } else { return ( - + + + + ); } } @@ -71,7 +123,8 @@ function ColorModeToggleButton() { } icon={colorMode === "light" ? : } onClick={toggleColorMode} - variant="ghost" + variant="outline" + size="sm" /> ); }