Header fixes (#35)

* Header tweaks * Disabling label --------- Co-authored-by: jackson <Jackson Hyde>
UKHomeOffice · Aug 29, 2024 · 91b2285 · 91b2285
1 parent 72c2414
commit 91b2285
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
@@ -58,7 +58,7 @@ export const Header: Story = {
         icon: 'MenuBook',
       }
     ],
-    initialSelectedPortMenuItem: '/national-pressure',
+    initialSelectedPortMenuItem: '',
     routingFunction: (string) => console.log(string),
     logoutLink: () => {},
   },

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -44,8 +44,6 @@ const Header = ({userRoles, adminMenuItems, rightMenuItems, leftMenuItems, portM
   const adminMenuRoles = adminMenuItems.map(menuItem => menuItem.roles).flat(1);
   const hasAdminMenuRoles = userRoles.filter(role => adminMenuRoles.includes(role)).length > 0;
 
-  console.log(userRoles, hasAdminMenuRoles);
-
   return (
     <AppBar sx={{backgroundColor: '#fff'}} elevation={0} position={"sticky"}>
       <Box>

diff --git a/src/components/Header/PortSelector.tsx b/src/components/Header/PortSelector.tsx
@@ -15,8 +15,9 @@ const StyledSelect = styled(Select)<SelectProps>(({ theme }) => ({
   '& .MuiSelect-select': {
     borderWidth: '0 !important',
     display: 'flex',
-    padding: ` 0 40px 0 0 !important`,
+    padding: `5px 40px 5px 5px !important`,
     backgroundColor: 'transparent',
+    height: '1.25em !important',
     '& >*': {
       display: 'flex',  
       alignItems: 'center',
@@ -54,17 +55,21 @@ const PortSelector = ({handleChangePort, options, selectedOption}: IPortSelector
 
   return (
     <FormControl size="small">     
-      <StyledSelect 
+      <StyledSelect
+        displayEmpty
         data-testid={`port-selector-trigger`}
-        value={selected} 
+        value={selected}
+        label="Select a port..."
         variant="standard" 
         onChange={onChange}>
+          <MenuItem value={""} disabled>
+            <ListItemText><em>Select an airport...</em></ListItemText>
+          </MenuItem> 
         {options?.map((option) => {
           return (
             <MenuItem 
               key={`port-selector-${option.link}`} 
               data-testid={`port-selector-${option.link}`} 
-              selected={selected == option.link} 
               value={option.link}>
               <ListItemText><strong>{ option.label }</strong></ListItemText>
             </MenuItem>