Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/header adjustments #25

Merged
merged 5 commits into from
Sep 2, 2023
Merged

Fix/header adjustments #25

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
070fc36
feat: change colors in header (button and name)
eduardaguterres Aug 22, 2023
ec59f41
fix: hover button
eduardaguterres Aug 23, 2023
1258d7a
fix: adjustments in navbar
eduardaguterres Aug 23, 2023
07f2d06
fix: comments
eduardaguterres Aug 23, 2023
571be41
fix: button
eduardaguterres Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions src/components/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,35 +54,54 @@ export const Nav = () => {
keycloak?.login({ redirectUri: `${JAMIE_UI_BASE_URL}${location.pathname}` });
};

/* The `renderLoginButton` function is responsible for rendering the login button based on the
authentication status of the user. */
const renderLoginButton = () => {
if (keycloak?.authenticated) {
return (
<Box>
<Button onClick={onLogoutClickHandler}>Logout</Button>
<Button sx={{
backgroundColor: '#ffffff',
maxHeight: '2rem',
maxWidth: '6rem',
transition: 'background-color 0.3s, color 0.3s', // add soft transition
'&:hover': {
backgroundColor: '#e4e4e4', // background color when mouse is over button
},
}} onClick={onLogoutClickHandler}>Logout</Button>
</Box>
);
}
return (
<Box>
<Button onClick={onLoginClickHandler}>Login</Button>
<Button sx={{
backgroundColor: '#ffffff',
maxHeight: '2rem',
maxWidth: '6rem',
transition: 'background-color 0.3s, color 0.3s', // add soft transition
'&:hover': {
backgroundColor: '#e4e4e4'} // background color when mouse is over button
}} onClick={onLoginClickHandler}>Login</Button>
</Box>
);
};

/* Return a element that represents the navigation bar component. */
return (
<Box
component="nav"
sx={{
display: 'flex',
alignItems: 'center',
px: '2rem',
minHeight: '5rem',
minHeight: '3rem',
backgroundColor: 'black',
}}
className="shadow"
>
<Box>
<Box >
<Link to="/">
<Typography variant="h6" component="h6" sx={{ fontSize: '1.5rem' }}>
<Typography variant="h6" component="h6" sx={{ fontSize: '1.25rem', color: 'white'}}>
Jamie
</Typography>
</Link>
Expand All @@ -91,7 +110,6 @@ export const Nav = () => {
sx={{ display: 'flex', justifyContent: 'flex-end', flex: 1, alignItems: 'center' }}
className="space-x-4"
>
{renderLanguageSwitcher()}
{renderLoginButton()}
</Box>
</Box>
Expand Down