[DRTII-1518] Header design tweaks (#40)

* Design tweaks * Version bump * Logo strap size --------- Co-authored-by: jackson <Jackson Hyde>
UKHomeOffice · Sep 13, 2024 · 4af0e47 · 4af0e47
1 parent f4d29e8
commit 4af0e47
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@drt/drt-react-components",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React components for DRT applications",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -45,6 +45,7 @@ const Header = ({
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const [selectedPortOption, setSelectedPortOption] = React.useState<string>(initialSelectedPortMenuItem);
   const open = Boolean(anchorEl);
+
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -58,30 +59,83 @@ const Header = ({
   return (
     <AppBar sx={{backgroundColor: '#fff'}} elevation={0} position={"sticky"}>
       <Box>
-        <Grid container sx={{maxWidth, margin: '0 auto'}} maxWidth={'none'}>
+        <Grid container sx={{maxWidth, margin: '0 auto', padding: '12px'}} maxWidth={'none'}>
           <Grid item xs={8}>
             <Box display="flex" mr={'auto'} sx={{
-              padding: 2,
+              padding: {
+                xs: 0,
+                md: 2,
+              },
               '& svg': {
                 width: '35px'
               }
             }}>
-              <Link href="https://drt.homeoffice.gov.uk/"><Crest data-testid="crest"/></Link>
-              <Typography color="inherit" noWrap sx={{flexGrow: 0, fontSize: '1.3rem', mr: 2, color: '#000'}}>Border
-                Force</Typography>
-              <Typography color="inherit" noWrap sx={{flexGrow: 0, lineHeight: '2rem', fontSize: '1rem', color: '#000'}}
-                          display={{xs: 'none', md: 'block'}}>Dynamic Response Tool</Typography>
+              <Link href="https://drt.homeoffice.gov.uk/" style={{
+                display: 'flex',
+                textDecoration: 'none',
+              }}>
+                <Crest data-testid="crest"/>
+                <Grid container sx={{
+                  flexWrap: {
+                    xs: 'wrap',
+                    md: 'nowrap',
+                  }
+                }}>
+                  <Grid item>
+                    <Typography color="inherit" noWrap sx={{
+                      flexGrow: 0, 
+                      fontSize: {
+                        xs: '1rem',
+                        sm: '1.3rem',
+                      }, 
+                      lineHeight: {
+                        xs: '1.2rem',
+                        sm: '2rem',
+                      }, 
+                      mr: 2, 
+                      color: '#000'
+                    }}>
+                      Border Force
+                    </Typography>
+                  </Grid>
+                  <Grid item sx={{
+                    width: {
+                      xs: '100%',
+                      sm: 'auto',
+                    }
+                  }}>
+                    <Typography color="inherit" noWrap 
+                      sx={{
+                        flexGrow: 0, 
+                        color: '#404252',
+                        fontSize: {
+                          xs: '0.7rem',
+                          sm: '1rem',
+                        }, 
+                        lineHeight: {
+                          xs: '1rem',
+                          sm: '2.1rem',
+                        },
+                      }}>
+                        Dynamic Response Tool
+                    </Typography>
+                  </Grid>
+                </Grid>
+              </Link>
             </Box>
           </Grid>
           <Grid item xs={4} sx={{padding: 2}} display={{xs: 'none', md: 'block'}}>
             <Box display="flex" ml={'auto'}>
-              <Typography variant="body1" color="inherit" noWrap
+              <Typography variant="body1" noWrap color={'#000'}
                           sx={{flexGrow: 1, textAlign: 'right'}}><strong>Contact:</strong>&nbsp;<Link
                 href="mailto:[email protected]">[email protected]</Link></Typography>
             </Box>
           </Grid>
           {hasAdminMenuRoles &&
-            <Grid item xs={4} sx={{padding: 2, textAlign: 'right'}} display={{xs: 'block', md: 'none'}}>
+            <Grid item xs={4} sx={{padding: {
+              xs: 0,
+              md: 2,
+            }, textAlign: 'right'}} display={{xs: 'block', md: 'none'}}>
 
               <Button
                 data-testid="mobile-admin-menu-trigger"
@@ -99,14 +153,6 @@ const Header = ({
                 anchorEl={anchorEl}
                 open={open}
                 onClose={handleClose}
-                anchorOrigin={{
-                  vertical: 'top',
-                  horizontal: 'left',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'left',
-                }}
               >
                 {adminMenuItems.map((item) => {
                   const hasRole = item.roles && (item.roles.filter(role => userRoles.includes(role)).length > 0);
@@ -123,7 +169,10 @@ const Header = ({
       </Box>
       <Box sx={{backgroundColor: '#f3f5f9', flexWrap: 'nowrap'}}>
         <Grid container sx={{maxWidth, margin: '0 auto'}}>
-          <Grid item xs={12} sx={{backgroundColor: '#f3f5f9', padding: 2, flexWrap: 'nowrap'}}>
+          <Grid item xs={12} sx={{backgroundColor: '#f3f5f9', px: 2, py: {
+            xs: '6px',
+            md: '12px',
+          }, flexWrap: 'nowrap'}}>
             <Grid container spacing={3}>
               <Grid item flexGrow={{xs: 1, md: 0}}>
                 <PortSelector options={portMenuItems} handleChangePort={routingFunction}

diff --git a/src/components/Header/PortSelector.tsx b/src/components/Header/PortSelector.tsx
@@ -31,7 +31,7 @@ const StyledSelect = styled(Select)<SelectProps>(({ theme }) => ({
       }
     }
   },
-  '& .MuiListItemText-root *': {
+  '& .MuiListItemText-root': {
     fontWeight: 'bold !important',
     fontSize: '0.875rem !important',
     marginTop: '6px !important',
@@ -66,7 +66,7 @@ const PortSelector = ({handleChangePort, options, selectedOption}: IPortSelector
         variant="standard" 
         onChange={onChange}>
           <MenuItem value={""} disabled>
-            <ListItemText><em>Select an airport...</em></ListItemText>
+            <ListItemText><em>Select a location...</em></ListItemText>
           </MenuItem> 
         {options?.map((option) => {
           return (