feat(web/ui): Reduce height of application header

This change reduces the height of the application header to 3.5rem to
increase the screen real-estate that we can use for the application
content.

4 files changed, 15 insertions, 11 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
index 436c179b..059cfea8 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ContextSelector.js
@@ -23,9 +23,10 @@
 import PropTypes from 'prop-types'
 import { ContextSelector as PFContextSelector, ContextSelectorItem } from '@patternfly/react-core'
 import { useMemo, useState } from 'react'
+
 import styles from './ContextSelector.module.scss'
 
-function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label, isFullHeight, type = 'page' }) {
+function ContextSelector({ id, type = 'page', toggleText, items, onSelect, onToggle, isOpen, isFullHeight }) {
     const [searchValue, setSearchValue] = useState('')
     const filteredItems = useMemo(
         () => items.filter(({ name }) => name.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1) || items,
@@ -34,11 +35,11 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label,
 
     return (
         <PFContextSelector
+            id={id}
             className={type === 'page' && styles.pageSelector}
-            toggleText={activeItem ? `${label}: ${activeItem.name}` : label}
+            toggleText={toggleText}
             onSearchInputChange={(value) => setSearchValue(value)}
             searchInputValue={searchValue}
-            isOpen={isOpen}
             onToggle={(_, isOpen) => onToggle(isOpen)}
             onSelect={(event) => {
                 const targetId = +event.target.value
@@ -47,6 +48,7 @@ function ContextSelector({ activeItem, items, onSelect, onToggle, isOpen, label,
                 onSelect(target)
                 onToggle(!isOpen)
             }}
+            isOpen={isOpen}
             isFullHeight={isFullHeight}
         >
             {filteredItems.map((item) => (
@@ -64,14 +66,14 @@ const Item = PropTypes.shape({
 })
 
 ContextSelector.propTypes = {
-    activeItem: Item,
+    id: PropTypes.string,
+    type: PropTypes.oneOf(['app', 'page']),
     items: PropTypes.arrayOf(Item).isRequired,
+    toggleText: PropTypes.string,
     onSelect: PropTypes.func.isRequired,
     onToggle: PropTypes.func.isRequired,
     isOpen: PropTypes.bool,
-    label: PropTypes.string,
     isFullHeight: PropTypes.bool,
-    type: PropTypes.oneOf(['app', 'page']),
 }
 
 export default ContextSelector
diff --git a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
index c4f2d50e..e401e6fc 100644
--- a/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/PortfolioSelector.js
@@ -34,7 +34,8 @@ function PortfolioSelector({ activePortfolio }) {
 
     return (
         <ContextSelector
-            label="Portfolio"
+            id="portfolio"
+            toggleText={activePortfolio ? `Portfolio: ${activePortfolio.name}` : 'Select portfolio'}
             activeItem={activePortfolio}
             items={portfolios}
             onSelect={(portfolio) => router.push(`/projects/${portfolio.project.id}/portfolios/${portfolio.number}`)}
diff --git a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
index 5f47c798..f2791b38 100644
--- a/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/ProjectSelector.js
@@ -36,14 +36,14 @@ function ProjectSelector() {
 
     return (
         <ContextSelector
-            label="Project"
-            activeItem={activeProject}
+            id="project"
+            type="app"
+            toggleText={activeProject ? activeProject.name : 'Select project'}
             items={projects}
             onSelect={(project) => router.push(`/projects/${project.id}`)}
             onToggle={setOpen}
             isOpen={isOpen}
             isFullHeight
-            type="app"
         />
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
index 9cae4cbf..355d9f4b 100644
--- a/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
+++ b/opendc-web/opendc-web-ui/src/components/context/TopologySelector.js
@@ -34,7 +34,8 @@ function TopologySelector({ activeTopology }) {
 
     return (
         <ContextSelector
-            label="Topology"
+            id="topology"
+            toggleText={activeTopology ? `Topology: ${activeTopology.name}` : 'Select topology'}
             activeItem={activeTopology}
             items={topologies}
             onSelect={(topology) => router.push(`/projects/${topology.project.id}/topologies/${topology.number}`)}