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

PSP-7032 : FT:HelpDesk:Header UI(Font and Icon size) is not displaying accurately for Help and User text #3539

Merged
merged 3 commits into from
Oct 27, 2023
Merged

PSP-7032 : FT:HelpDesk:Header UI(Font and Icon size) is not displaying accurately for Help and User text #3539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65b1bbe
PSP-7032 : FT:HelpDesk:Header UI(Font and Icon size) is not displayin…
Oct 24, 2023
d95a972
- test updates
Oct 24, 2023
89896ba
Merge branch 'dev' into psp-7032
asanchezr Oct 27, 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
41 changes: 28 additions & 13 deletions source/frontend/src/components/layout/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { FaBomb } from 'react-icons/fa';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

import { BCGovLogo } from '@/components/common/BCGovLogo';
import { VerticalBar } from '@/components/common/VerticalBar';
Expand Down Expand Up @@ -44,20 +45,27 @@ export const Header = () => {
return (
<HeaderStyled expand className="App-header">
<Navbar.Brand className="brand-box">
<a target="_blank" rel="noopener noreferrer" href="https://www2.gov.bc.ca/gov/content/home">
<BCGovLogo />
</a>
<VerticalBar />
<Link to="/mapview">
<Logo height={50} />
</Link>
<StyledContainer>
<a
target="_blank"
rel="noopener noreferrer"
href="https://www2.gov.bc.ca/gov/content/home"
>
<BCGovLogo />
</a>
<div>
<VerticalBar />
</div>
<Link to="/mapview">
<Logo height={50} />
</Link>
<div className="title">
<label className="longAppName">{tenant.title}</label>
<label className="shortAppName">{tenant.shortName}</label>
</div>
</StyledContainer>
</Navbar.Brand>
<Nav className="title mr-auto">
<Nav.Item>
<h1 className="longAppName">{tenant.title}</h1>
<h1 className="shortAppName">{tenant.shortName}</h1>
</Nav.Item>
</Nav>

<HelpContainer />
<div>
<VerticalBar />
Expand All @@ -81,4 +89,11 @@ export const Header = () => {
const isNetworkError = (action: any): action is IGenericNetworkAction =>
(action as IGenericNetworkAction).type === 'ERROR';

const StyledContainer = styled.div`
display: flex;
align-items: center;
flex-direction: row;
margin-left: 36px;
`;

export default Header;
9 changes: 6 additions & 3 deletions source/frontend/src/components/layout/Header/HeaderStyled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,19 @@ export const HeaderStyled = styled(Navbar)`

.brand-box {
padding: 1rem 0;
align-items: center;
flex-grow: 1;
.pims-logo {
margin: 0 1rem;
}
}

.title {
flex-grow: 2;
h1 {
margin-top: 1rem;
margin-left: 8px;
display: inline-block;
label {
margin: 0;
color: #ffffff;
padding-left: 0px;
text-align: center;
font-size: 2.4rem;
Expand Down
14 changes: 5 additions & 9 deletions source/frontend/src/components/layout/Header/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
import React from 'react';
import Image from 'react-bootstrap/Image';
import NavDropdown from 'react-bootstrap/NavDropdown';
import { FaSignOutAlt } from 'react-icons/fa';
import { FaSignOutAlt, FaUserCircle } from 'react-icons/fa';
import styled from 'styled-components';

import profileUrl from '@/assets/images/profile.svg';
import variables from '@/assets/scss/_variables.module.scss';
import { useConfiguration } from '@/hooks/useConfiguration';
import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';

/** the styling for the dropdown menu that appears after clicking the user's name */
const StyleDropDown = styled(NavDropdown)`
font-size: 1.4rem;
font-size: 16px;
.dropdown-menu {
width: 30rem;
padding: 0rem;
Expand Down Expand Up @@ -39,10 +37,8 @@ const LogoutText = styled.p`
margin-left: 12rem;
`;

/** the styling for the avatar next to user's name */
const ProfileAvatar = styled(Image)`
height: 3rem;
width: 3rem;
const StyledUserAvatar = styled(FaUserCircle)`
cursor: pointer;
margin-right: 10px;
`;

Expand All @@ -65,7 +61,7 @@ export const UserProfile: React.FC<React.PropsWithChildren<unknown>> = () => {

return (
<>
<ProfileAvatar src={profileUrl} rounded />
<StyledUserAvatar size="24px" />
<StyleDropDown className="px-0" title={displayName} id="user-dropdown" alignRight>
{!!keycloak.roles.length && (
<RolesBox>
Expand Down
15 changes: 9 additions & 6 deletions source/frontend/src/components/layout/Header/__snapshots__/EmptyHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ exports[`Empty Header renders 1`] = `

.c0 .brand-box {
padding: 1rem 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
Expand All @@ -35,14 +39,13 @@ exports[`Empty Header renders 1`] = `
}

.c0 .title {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
margin-left: 8px;
display: inline-block;
}

.c0 .title h1 {
margin-top: 1rem;
.c0 .title label {
margin: 0;
color: #ffffff;
padding-left: 0px;
text-align: center;
font-size: 2.4rem;
Expand Down
116 changes: 68 additions & 48 deletions source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`App Header renders correctly 1`] = `
}

<div />
.c1 {
.c2 {
border-left: 1px solid white;
font-size: 3.4rem;
margin: 0 36px 0 36px;
Expand All @@ -37,6 +37,10 @@ exports[`App Header renders correctly 1`] = `

.c0 .brand-box {
padding: 1rem 0;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
Expand All @@ -48,14 +52,13 @@ exports[`App Header renders correctly 1`] = `
}

.c0 .title {
-webkit-box-flex: 2;
-webkit-flex-grow: 2;
-ms-flex-positive: 2;
flex-grow: 2;
margin-left: 8px;
display: inline-block;
}

.c0 .title h1 {
margin-top: 1rem;
.c0 .title label {
margin: 0;
color: #ffffff;
padding-left: 0px;
text-align: center;
font-size: 2.4rem;
Expand Down Expand Up @@ -94,6 +97,21 @@ exports[`App Header renders correctly 1`] = `
font-weight: 700;
}

.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
margin-left: 36px;
}

@media (min-width:99.2rem) {
.c0 .longAppName {
display: block;
Expand All @@ -111,55 +129,57 @@ exports[`App Header renders correctly 1`] = `
>
<span
class="brand-box navbar-brand"
>
<a
href="https://www2.gov.bc.ca/gov/content/home"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="Government of BC logo"
class="bc-gov-icon"
height="43"
src="logo-banner.svg"
width="156"
/>
</a>
<span
class="c1"
/>
<a
href="/mapview"
>
<img
alt="PIMS logo"
class="pims-logo"
height="50"
src="/tenants/MOTI/PIMS-logo.png"
/>
</a>
</span>
<div
class="title mr-auto navbar-nav"
>
<div
class="nav-item"
class="c1"
>
<h1
class="longAppName"
<a
href="https://www2.gov.bc.ca/gov/content/home"
rel="noopener noreferrer"
target="_blank"
>
<img
alt="Government of BC logo"
class="bc-gov-icon"
height="43"
src="logo-banner.svg"
width="156"
/>
</a>
<div>
<span
class="c2"
/>
</div>
<a
href="/mapview"
>
Property Information Management System
</h1>
<h1
class="shortAppName"
<img
alt="PIMS logo"
class="pims-logo"
height="50"
src="/tenants/MOTI/PIMS-logo.png"
/>
</a>
<div
class="title"
>
PIMS
</h1>
<label
class="longAppName"
>
Property Information Management System
</label>
<label
class="shortAppName"
>
PIMS
</label>
</div>
</div>
</div>
</span>
<div>
<span
class="c1"
class="c2"
/>
</div>
<div
Expand Down
2 changes: 1 addition & 1 deletion source/frontend/src/features/help/containers/HelpContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function HelpContainer() {
<Nav.Item>
<TooltipWrapper toolTipId="help-tooltip" toolTip="Ask for Help">
<StyledContainer onClick={() => setShowHelp(true)}>
<StyledHelpIcon />
<StyledHelpIcon size="24px" />
<label>Help</label>
</StyledContainer>
</TooltipWrapper>
Expand Down
4 changes: 2 additions & 2 deletions source/frontend/src/features/help/containers/__snapshots__/HelpContainer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Array [
<svg
className="c1"
fill="currentColor"
height="1em"
height="24px"
stroke="currentColor"
strokeWidth="0"
style={
Expand All @@ -56,7 +56,7 @@ Array [
}
}
viewBox="0 0 512 512"
width="1em"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path
Expand Down
Loading