fix: address header wrapping issues (#504)

* style: fix header wrapping issue * chore: remove unused imports in TranslationSelecT
CodeForBoulder · Dec 2, 2021 · 36be1a1 · 36be1a1
1 parent ae5d73c
commit 36be1a1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 40 deletions.
diff --git a/packages/web/src/components/Header.tsx b/packages/web/src/components/Header.tsx
@@ -24,23 +24,35 @@ const Header = () => {
       <AppBar color="transparent" elevation={0} position="static">
         <Toolbar disableGutters>
           <Container>
-            <Grid alignItems="center" container wrap="nowrap">
-              <Grid item>
-                <IconButton edge="start" onClick={() => setIsMenuOpen(true)}>
-                  <Typography variant="srOnly">{t("menu")}</Typography>
-                  <MenuIcon />
-                </IconButton>
-              </Grid>
-              <Grid alignItems="center" justify="flex-start" container item>
+            <Grid
+              alignItems="center"
+              container
+              justify="space-between"
+              wrap="nowrap"
+            >
+              <Grid alignItems="center" container item wrap="nowrap" xs={5}>
+                <Grid item>
+                  <IconButton edge="start" onClick={() => setIsMenuOpen(true)}>
+                    <Typography variant="srOnly">{t("menu")}</Typography>
+                    <MenuIcon />
+                  </IconButton>
+                </Grid>
                 <Grid item>
                   <Link to="/">
-                    <Box component={Logo} height={40} width="auto" />
+                    <Box component={Logo} height={40} maxWidth="100%" />
                   </Link>
                 </Grid>
               </Grid>
-              <Grid alignItems="center" justify="flex-end" container item>
-                <Grid item component={Temperature} xs={6} />
-                <Grid item xs={6}>
+              <Grid
+                alignItems="center"
+                container
+                item
+                justify="flex-end"
+                wrap="nowrap"
+                xs={7}
+              >
+                <Grid item component={Temperature} />
+                <Grid item>
                   <TranslationSelect />
                 </Grid>
               </Grid>

diff --git a/packages/web/src/components/Temperature.tsx b/packages/web/src/components/Temperature.tsx
@@ -17,6 +17,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     flexDirection: "column",
     marginRight: "12px",
     padding: "5px 10px",
+    textAlign: "right",
   },
   degrees: {
     fontSize: font.helpers.convertPixelsToRems(18),

diff --git a/packages/web/src/components/TranslationSelect.tsx b/packages/web/src/components/TranslationSelect.tsx
@@ -1,27 +1,11 @@
-import { createStyles, makeStyles } from "@material-ui/core/styles";
-import FormControl from "@material-ui/core/FormControl";
 import MenuItem from "@material-ui/core/MenuItem";
 import React from "react";
 import Select from "@material-ui/core/Select";
-import { Theme } from "@material-ui/core/styles";
 import i18n from "../i18n";
 import { useTranslation } from "react-i18next";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    formControl: {
-      margin: theme.spacing(1),
-      minWidth: 120,
-    },
-    selectEmpty: {
-      marginTop: theme.spacing(2),
-    },
-  })
-);
-
 const TranslationSelect = () => {
   const { t } = useTranslation("glossary");
-  const classes = useStyles();
   const [translationUsed, setTranslationUsed] = React.useState("en");
 
   const changeTranslation = (translation: string) => {
@@ -35,18 +19,14 @@ const TranslationSelect = () => {
   };
 
   return (
-    <div>
-      <FormControl className={classes.formControl}>
-        <Select
-          value={translationUsed}
-          onChange={handleChange}
-          aria-label={t("selectLanguage")}
-        >
-          <MenuItem value="en">English</MenuItem>
-          <MenuItem value="es">Español</MenuItem>
-        </Select>
-      </FormControl>
-    </div>
+    <Select
+      value={translationUsed}
+      onChange={handleChange}
+      aria-label={t("selectLanguage")}
+    >
+      <MenuItem value="en">English</MenuItem>
+      <MenuItem value="es">Español</MenuItem>
+    </Select>
   );
 };