From 65b1bbe8109ab7edc8502bf1019788e4d4ab1815 Mon Sep 17 00:00:00 2001 From: Eduardo Herrera Date: Tue, 24 Oct 2023 14:21:12 -0700 Subject: [PATCH 1/2] PSP-7032 : FT:HelpDesk:Header UI(Font and Icon size) is not displaying accurately for Help and User text --- .../src/components/layout/Header/Header.tsx | 41 +++++++++++++------ .../components/layout/Header/HeaderStyled.tsx | 9 ++-- .../components/layout/Header/UserProfile.tsx | 14 +++---- .../help/containers/HelpContainer.tsx | 2 +- 4 files changed, 40 insertions(+), 26 deletions(-) diff --git a/source/frontend/src/components/layout/Header/Header.tsx b/source/frontend/src/components/layout/Header/Header.tsx index dd94a1715f..b0602d00b6 100644 --- a/source/frontend/src/components/layout/Header/Header.tsx +++ b/source/frontend/src/components/layout/Header/Header.tsx @@ -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'; @@ -44,20 +45,27 @@ export const Header = () => { return ( - - - - - - - + + + + +
+ +
+ + + +
+ + +
+ - +
@@ -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; diff --git a/source/frontend/src/components/layout/Header/HeaderStyled.tsx b/source/frontend/src/components/layout/Header/HeaderStyled.tsx index d292e26198..c2fdde3158 100644 --- a/source/frontend/src/components/layout/Header/HeaderStyled.tsx +++ b/source/frontend/src/components/layout/Header/HeaderStyled.tsx @@ -20,6 +20,7 @@ export const HeaderStyled = styled(Navbar)` .brand-box { padding: 1rem 0; + align-items: center; flex-grow: 1; .pims-logo { margin: 0 1rem; @@ -27,9 +28,11 @@ export const HeaderStyled = styled(Navbar)` } .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; diff --git a/source/frontend/src/components/layout/Header/UserProfile.tsx b/source/frontend/src/components/layout/Header/UserProfile.tsx index 953aaebee1..3d28a8f554 100644 --- a/source/frontend/src/components/layout/Header/UserProfile.tsx +++ b/source/frontend/src/components/layout/Header/UserProfile.tsx @@ -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; @@ -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; `; @@ -65,7 +61,7 @@ export const UserProfile: React.FC> = () => { return ( <> - + {!!keycloak.roles.length && ( diff --git a/source/frontend/src/features/help/containers/HelpContainer.tsx b/source/frontend/src/features/help/containers/HelpContainer.tsx index 82d1999bfe..4de2be302c 100644 --- a/source/frontend/src/features/help/containers/HelpContainer.tsx +++ b/source/frontend/src/features/help/containers/HelpContainer.tsx @@ -24,7 +24,7 @@ export function HelpContainer() { setShowHelp(true)}> - + From d95a9728789cb41126eb54de3b29f6bf427e4298 Mon Sep 17 00:00:00 2001 From: Eduardo Herrera Date: Tue, 24 Oct 2023 14:28:53 -0700 Subject: [PATCH 2/2] - test updates --- .../__snapshots__/EmptyHeader.test.tsx.snap | 15 ++- .../Header/__snapshots__/Header.test.tsx.snap | 116 ++++++++++-------- .../__snapshots__/HelpContainer.test.tsx.snap | 4 +- 3 files changed, 79 insertions(+), 56 deletions(-) diff --git a/source/frontend/src/components/layout/Header/__snapshots__/EmptyHeader.test.tsx.snap b/source/frontend/src/components/layout/Header/__snapshots__/EmptyHeader.test.tsx.snap index c89e9dbd7e..561372eef3 100644 --- a/source/frontend/src/components/layout/Header/__snapshots__/EmptyHeader.test.tsx.snap +++ b/source/frontend/src/components/layout/Header/__snapshots__/EmptyHeader.test.tsx.snap @@ -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; @@ -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; diff --git a/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap b/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap index 02d0f650d9..63a7db6036 100644 --- a/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap +++ b/source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap @@ -14,7 +14,7 @@ exports[`App Header renders correctly 1`] = ` }
- .c1 { + .c2 { border-left: 1px solid white; font-size: 3.4rem; margin: 0 36px 0 36px; @@ -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; @@ -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; @@ -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; @@ -111,55 +129,57 @@ exports[`App Header renders correctly 1`] = ` > - - Government of BC logo - - - - - - -
-

+ Government of BC logo + +
+ +
+ - Property Information Management System -

-

+ +
- PIMS -

+ + +
-
+