From 48018933c84b4f85f9f3f97aafa256cfd002b25a Mon Sep 17 00:00:00 2001
From: Daniel Haselhan <daniel.haselhan@quartech.com>
Date: Thu, 5 Dec 2024 13:07:44 -0800
Subject: [PATCH] fix: Change Header padding and sizing

* Add max width to name and set it to truncate to ...
* Drop padding to make more room for name
* Delete old unused header
* Set menu items to not wrap text
---
 .../BCNavbar/components/DefaultNavbarLink.jsx |  9 ++++----
 .../BCNavbar/components/MenuBar.jsx           |  7 +++---
 frontend/src/components/Header.jsx            | 23 -------------------
 .../layouts/MainLayout/components/Logout.jsx  | 16 +++++++++++--
 4 files changed, 23 insertions(+), 32 deletions(-)
 delete mode 100644 frontend/src/components/Header.jsx

diff --git a/frontend/src/components/BCNavbar/components/DefaultNavbarLink.jsx b/frontend/src/components/BCNavbar/components/DefaultNavbarLink.jsx
index 2d488647b..347b5d6b3 100644
--- a/frontend/src/components/BCNavbar/components/DefaultNavbarLink.jsx
+++ b/frontend/src/components/BCNavbar/components/DefaultNavbarLink.jsx
@@ -31,7 +31,7 @@ function DefaultNavbarLink({
       mb={isMobileView ? 0.2 : -1}
       mr={isMobileView ? 2 : 1}
       py={1}
-      px={2}
+      px={1}
       display="flex"
       alignItems="center"
       sx={({ transitions, palette }) => ({
@@ -54,8 +54,7 @@ function DefaultNavbarLink({
           backgroundColor: isMobileView
             ? 'rgba(0, 0, 0, 0.2)'
             : 'rgba(0, 0, 0, 0.3)',
-          paddingBottom: isMobileView ? '11px' : '12px',
-          paddingLeft: isMobileView ? '13px' : 2
+          paddingBottom: isMobileView ? '11px' : '12px'
         },
         transform: 'translateX(0)',
         transition: transitions.create('transform', {
@@ -87,7 +86,9 @@ function DefaultNavbarLink({
           lineHeight: 0,
           '&:hover': {
             textDecoration: 'none'
-          }
+          },
+          whiteSpace: 'nowrap',
+          flexShrink: 0
         }}
       >
         {name}
diff --git a/frontend/src/components/BCNavbar/components/MenuBar.jsx b/frontend/src/components/BCNavbar/components/MenuBar.jsx
index 0e9f738fd..5844d82b4 100644
--- a/frontend/src/components/BCNavbar/components/MenuBar.jsx
+++ b/frontend/src/components/BCNavbar/components/MenuBar.jsx
@@ -17,18 +17,19 @@ const MenuBar = (props) => {
         backdropFilter: `saturate(200%) blur(30px)`,
         color: white.main,
         maxHeight: '50px',
-        display: { xs: 'none', sm: 'flex' }
+        display: { xs: 'none', sm: 'flex' },
+        justifyContent: 'space-between'
       })}
       disableGutters
       variant="dense"
     >
       <BCBox
         sx={{
-          flexGrow: 1,
           display: { xs: 'none', lg: 'flex' },
           flexDirection: 'row',
           margin: 0,
-          padding: 0
+          padding: 0,
+          marginLeft: 1
         }}
       >
         {routes.map(
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
deleted file mode 100644
index 49c90cb5e..000000000
--- a/frontend/src/components/Header.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import logo from '@/assets/images/gov3_bc_logo.png'
-import { Logout } from './Logout'
-
-const Header = () => {
-  return (
-    <div className="page-header">
-      <div className="lcfs-banner">
-        <div className="left">
-          <a href="http://www.gov.bc.ca" rel="noopener noreferrer">
-            <img src={logo} alt="Government of B.C." />
-          </a>
-        </div>
-        <div className="right">
-          <Logout />
-        </div>
-      </div>
-      <div className="title">
-        <h1>Low Carbon Fuel Standard</h1>
-      </div>
-    </div>
-  )
-}
-export default Header
diff --git a/frontend/src/layouts/MainLayout/components/Logout.jsx b/frontend/src/layouts/MainLayout/components/Logout.jsx
index cc5fd5c22..87c2bf676 100644
--- a/frontend/src/layouts/MainLayout/components/Logout.jsx
+++ b/frontend/src/layouts/MainLayout/components/Logout.jsx
@@ -18,15 +18,27 @@ export const Logout = () => {
       <BCBox
         display="flex"
         alignItems="center"
-        justifyContent="space-around"
+        justifyContent="space-between"
         mr={3}
       >
         {currentUser?.firstName && (
-          <BCTypography variant="subtitle1" color="light" mx={3}>
+          <BCTypography
+            style={{
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              flexShrink: 1,
+              marginRight: '12px',
+              maxWidth: '17vw'
+            }}
+            variant="subtitle1"
+            color="light"
+          >
             {currentUser?.firstName + ' ' + currentUser?.lastName}
           </BCTypography>
         )}
         <BCButton
+          style={{ whiteSpace: 'nowrap', flexShrink: 0 }}
           onClick={() => {
             logout()
           }}