please add banner style updates V2 (#507)

* please add banner style updates V2 * please add banner style updates V3 * please add banner style updates V4 * please add banner style updates V5 * please add banner style updates V6 Co-authored-by: Alpha Bah <[email protected]>
CodeForBoulder · Dec 21, 2021 · de376d3 · de376d3
1 parent 85d0800
commit de376d3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/web/src/components/BackButton.tsx b/packages/web/src/components/BackButton.tsx
@@ -19,6 +19,7 @@ const BackButton = ({ backButtonAction }: Props) => {
         backButtonAction ? backButtonAction() : history.push("/")
       }
       size="small"
+      edge="start"
     >
       <Typography variant="srOnly">{t("backToPrevious")}</Typography>
       <ArrowBackIcon fontSize="large" />

diff --git a/packages/web/src/components/PageBanner.tsx b/packages/web/src/components/PageBanner.tsx
@@ -1,7 +1,10 @@
 import BackButton from "./BackButton";
 import BannerColorContext from "./BannerColorContext";
 import Box from "@material-ui/core/Box";
-import Grid from "@material-ui/core/Grid";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
 import React from "react";
 import { colors } from "@upswyng/common";
 
@@ -21,13 +24,15 @@ const PageBanner = ({ children, color, backButtonAction }: Props) => {
   }, [color, updateCurrentBannerColor]);
 
   return (
-    <Box bgcolor={currentBannerColor || colors.black} mb={4} py={2}>
-      <Grid container wrap="nowrap" alignItems="center" spacing={1}>
-        <Grid item>
-          <BackButton backButtonAction={backButtonAction} />
-        </Grid>
-        <Grid item>{children}</Grid>
-      </Grid>
+    <Box bgcolor={currentBannerColor || colors.black} mb={4}>
+      <List disablePadding>
+        <ListItem>
+          <ListItemIcon>
+            <BackButton backButtonAction={backButtonAction} />
+          </ListItemIcon>
+          <ListItemText>{children}</ListItemText>
+        </ListItem>
+      </List>
     </Box>
   );
 };