OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

fix wrapping when username is too long for the header bar

Browse source
This commit is contained in:
Emi Matchu 2020-09-06 18:52:56 -07:00
parent c9ef20edf7
commit 0a6a9121f0
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/app/PageLayout.js
View file

@ -20,8 +20,7 @@ function PageLayout({ children, hideHomeLink }) {
marginBottom="6" marginBottom="6"
> >
{!hideHomeLink && <HomeLink />} {!hideHomeLink && <HomeLink />}
<Box flex="1 0 0" /> <UserLoginLogout marginLeft="auto" />
<UserLoginLogout />
</Box> </Box>
{children} {children}
</Box> </Box>
@ -69,7 +68,7 @@ function HomeLink() {
); );
} }
function UserLoginLogout() { function UserLoginLogout(props) {
const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0(); const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { id, username } = useCurrentUser(); const { id, username } = useCurrentUser();
@ -79,8 +78,12 @@ function UserLoginLogout() {
if (isAuthenticated) { if (isAuthenticated) {
return ( return (
<HStack align="center" spacing="2"> <HStack align="center" spacing="2" {...props}>
{username && <Box fontSize="sm">Hi, {username}!</Box>} {username && (
<Box fontSize="sm" textAlign="right">
Hi, {username}!
</Box>
)}
<ColorModeToggleButton /> <ColorModeToggleButton />
{id && ( {id && (
<Button <Button
@ -103,7 +106,7 @@ function UserLoginLogout() {
); );
} else { } else {
return ( return (
<HStack align="center" spacing="2"> <HStack align="center" spacing="2" {...props}>
<ColorModeToggleButton /> <ColorModeToggleButton />
<Button size="sm" variant="outline" onClick={() => loginWithRedirect()}> <Button size="sm" variant="outline" onClick={() => loginWithRedirect()}>
Log in Log in