fix(Faq): DOM validation fixed by setting the typography component to… (#362)

* fix(Faq): DOM validation fixed by setting the typography component to div

* fix(NavigationTitle): trimes down the grid soup in navigationTitle makes only the arrow clickable and aligns it left instead of center

* Restyled by prettier (#363)

Co-authored-by: Restyled.io <[email protected]>

Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com>
Co-authored-by: Restyled.io <[email protected]>

Author: 3 people

apps/official/components/NavigationTitle.tsx

@@ -1,25 +1,20 @@
 import React from "react";
-import { Grid, Typography } from "@material-ui/core";
+import { Box, Typography } from "@material-ui/core";
 import ArrowBackIosIcon from "@material-ui/icons/ArrowBackIos";
 import { useQueryPreservingHistoryPush } from "app-config/components/customHistoryHooks";
 
 export const NavigationTitle: React.FC<{ title: string; backToExpandedFeatureInfo?: boolean }> = (props) => {
   const customHistoryPush = useQueryPreservingHistoryPush();
 
   return (
-    <a
-      onClick={() => customHistoryPush("/", { expanded: props.backToExpandedFeatureInfo ? "true" : undefined })}
-      style={{ textDecoration: "none", cursor: "pointer" }}
-      aria-label="go back to map"
-    >
-      <Grid container direction="row" alignItems="center" style={{ marginTop: "8px" }}>
-        <Grid item xs={1}>
-          <ArrowBackIosIcon color="action" />
-        </Grid>
-        <Grid item xs={11}>
-          <Typography variant="h1">{props.title}</Typography>
-        </Grid>
-      </Grid>
-    </a>
+    <Box display="flex" flex={1} alignItems="center" style={{ marginTop: "8px", width: "100%" }}>
+      <ArrowBackIosIcon
+        style={{ textDecoration: "none", cursor: "pointer", padding: "8px" }}
+        aria-label="go back to map"
+        onClick={() => customHistoryPush("/", { expanded: props.backToExpandedFeatureInfo ? "true" : undefined })}
+        color="action"
+      />
+      <Typography variant="h1">{props.title}</Typography>
+    </Box>
   );
 };

apps/official/components/pages/Faq.tsx

@@ -56,7 +56,7 @@ export const Faq: React.FC = () => {
 
       <section>
         <FaqAccordion title={t("faq.what-is-covmap.title")}>
-          <Typography style={{ width: "100%" }}>
+          <Typography style={{ width: "100%" }} component="div">
             <div style={{ display: "flex", flexDirection: "column" }}>
               <div className={classes.textBlock}>{t("faq.what-is-covmap.text")}</div>
               <div className={classes.textBlock}>
@@ -146,7 +146,7 @@ export const Faq: React.FC = () => {
         </FaqAccordion>
 
         <FaqAccordion title={t("faq.advantages.title")}>
-          <Typography style={{ width: "100%" }}>
+          <Typography style={{ width: "100%" }} component="div">
             <div style={{ display: "flex", flexDirection: "column" }}>
               <div className={classes.textBlock}>{t("faq.advantages.text-1")}</div>
               <div className={classes.textBlock}>{t("faq.advantages.text-2")}</div>