345 Remove bar next to the app name (#372)

* Remove ProjectChip from Status bar * Remove Status component * Simplify logo CSS * Restore elevation CSS
okfn · May 7, 2024 · 96b593c · 96b593c
1 parent 4c18bde
commit 96b593c
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 170 deletions.
diff --git a/client/components/Application/Header.tsx b/client/components/Application/Header.tsx
@@ -1,6 +1,4 @@
-import { useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
 import AppBar from '@mui/material/AppBar'
 import Toolbar from '@mui/material/Toolbar'
 import Button from '@mui/material/Button'
@@ -9,75 +7,52 @@ import SettingsIcon from '@mui/icons-material/Settings'
 import GithubIcon from '@mui/icons-material/GitHub'
 import HelpIcon from '@mui/icons-material/Help'
 import LightTooltip from '../Parts/Tooltips/Light'
-import Status from './Status'
+import ReportChip from '../Parts/Chips/Report'
 import { useStore } from './store'
 
 export default function Header() {
-  const theme = useTheme()
-  const height = theme.spacing(8)
   const closeFile = useStore((state) => state.closeFile)
+  const measure = useStore((state) => state.measure)
   const updateState = useStore((state) => state.updateState)
   return (
-    <Box sx={{ height, flexGrow: 1 }}>
-      <AppBar position="static" color="secondary" elevation={0}>
-        <Toolbar disableGutters>
-          <Grid container>
-            <Grid item xs={4} lg={3}>
-              <LightTooltip title="Show the project page">
-                <Typography
-                  variant="h5"
-                  sx={{
-                    paddingLeft: 4,
-                    fontSize: '28px',
-                    ml: 2,
-                    mt: '4px',
-                    cursor: 'pointer',
-                    whiteSpace: 'nowrap',
-                  }}
-                  onClick={() => closeFile()}
-                >
-                  <strong>Open Data Editor</strong>
-                </Typography>
-              </LightTooltip>
-            </Grid>
-            <Grid item xs={5} lg={7}>
-              <Status />
-            </Grid>
-            <Grid item xs={3} lg={2}>
-              <Grid container justifyContent="flex-end">
-                <LightTooltip title="Open config dialog">
-                  <Box>
-                    <Button
-                      color="inherit"
-                      onClick={() => updateState({ dialog: 'config' })}
-                    >
-                      <SettingsIcon />
-                    </Button>
-                  </Box>
-                </LightTooltip>
-                <LightTooltip title="Report an issue">
-                  <Button
-                    color="inherit"
-                    href="https://github.com/okfn/opendataeditor/issues"
-                    target="_blank"
-                  >
-                    <GithubIcon />
-                  </Button>
-                </LightTooltip>
-                <LightTooltip title="Open documentation">
-                  <Button
-                    color="inherit"
-                    href="https://opendataeditor.okfn.org"
-                    target="_blank"
-                  >
-                    <HelpIcon />
-                  </Button>
-                </LightTooltip>
-              </Grid>
-            </Grid>
-          </Grid>
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <AppBar position="static" elevation={0}>
+      <Toolbar disableGutters>
+        <LightTooltip title="Show the project page">
+          <Typography
+            sx={{
+              fontSize: '28px',
+              ml: 2,
+              cursor: 'pointer',
+            }}
+            onClick={() => closeFile()}
+          >
+            <strong>Open Data Editor</strong>
+          </Typography>
+        </LightTooltip>
+        <Box sx={{ ml: 'auto' }}></Box>
+        <ReportChip errorCount={measure ? measure.errors : undefined} />
+        <LightTooltip title="Open config dialog">
+          <Box>
+            <Button color="inherit" onClick={() => updateState({ dialog: 'config' })}>
+              <SettingsIcon />
+            </Button>
+          </Box>
+        </LightTooltip>
+        <LightTooltip title="Report an issue">
+          <Button
+            color="inherit"
+            href="https://github.com/okfn/opendataeditor/issues"
+            target="_blank"
+          >
+            <GithubIcon />
+          </Button>
+        </LightTooltip>
+        <LightTooltip title="Open documentation">
+          <Button color="inherit" href="https://opendataeditor.okfn.org" target="_blank">
+            <HelpIcon />
+          </Button>
+        </LightTooltip>
+      </Toolbar>
+    </AppBar>
   )
 }
diff --git a/client/components/Application/Status.tsx b/client/components/Application/Status.tsx
diff --git a/client/components/Parts/Chips/Report.tsx b/client/components/Parts/Chips/Report.tsx
@@ -33,8 +33,8 @@ export default function ValidationChip(props: ValidationChipProps) {
         size="medium"
         sx={{
           width: '8vw',
-          height: '100%',
-          borderLeft: 'solid 1px #ddd',
+          height: '2.5rem',
+          border: 'solid 1px #ddd',
           borderRadius: '3px',
           cursor: 'pointer',
         }}