fix: fourth suggestion for infobox (#316)

* fix: third suggestion for expanded infobox with expandable grey box at the top and blue teaser to link to most important page * fix: small restyling * fix: another small restyling * Restyled by prettier (#313) Co-authored-by: Restyled.io <[email protected]> * fix: remove "normal" text on not yet available feature * fix: replace accordion with fixed text * fix: remove elevation of non-clickable element, show whole text on chips, use typography for risk badge * fix: use proper typography variant for risk badge Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <[email protected]>
CovOpen · Oct 31, 2020 · 5f118dd · 5f118dd
1 parent 111c51b
commit 5f118dd
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 163 deletions.
diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx
@@ -2,14 +2,14 @@ import React from "react";
 import { FeatureInfoProps } from "../../../src/app-config.types";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import {
-  Button,
   Card,
   CardContent,
   CardHeader,
   Chip,
   Drawer,
   Grid,
   IconButton,
+  Paper,
   Theme,
   Typography,
   useTheme,
@@ -46,18 +46,19 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
   },
   card: {
     // TODO: Extract into theme
-    "backgroundColor": "#FCFCFC",
-    "position": "relative",
-    "padding": theme.spacing(4, 2),
-    "overflow": "visible",
-    "&:last-child": {
-      paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom
-    },
+    backgroundColor: "#FCFCFC",
+    position: "relative",
+    padding: theme.spacing(2, 2),
+    overflow: "visible",
+  },
+  bluePaper: {
+    backgroundColor: "#2979ff",
+    color: "white",
+    padding: theme.spacing(2),
   },
-
   drawerPaper: {
     width: (props) => (props.fullScreen ? "100%" : "450px"),
-    maxHeight: "100%",
+    maxHeight: "calc(100% - 100px)",
     overflow: "hidden",
   },
   drawerRoot: {
@@ -73,17 +74,6 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
     width: "100%",
     overflow: "auto",
   },
-  recommendationsLink: {
-    "textAlign": "center",
-    "& p": {
-      fontWeight: "bold",
-      margin: theme.spacing(1, 0),
-    },
-    "& a": {
-      padding: theme.spacing(1.4, 8),
-      borderRadius: theme.shape.borderRadius * 2,
-    },
-  },
   centerIcon: {
     margin: "0 auto",
     display: "block",
@@ -97,9 +87,12 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
     position: "absolute",
     top: -12, // half height of the badge
   },
+  chipLabel: {
+    overflow: "visible",
+  },
 }));
 
-const titleByRiskScore = {
+export const titleByRiskScore = {
   [RiskScore.Low]: "Normales Risiko",
   [RiskScore.Medium]: "Mittleres Risiko",
   [RiskScore.High]: "Hohes Risiko",
@@ -109,7 +102,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
   const {
-    recommendationsLink,
     action,
     card,
     container,
@@ -121,7 +113,9 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     drawerScrollContainer,
     centerIcon,
     chipTop,
+    chipLabel,
     center,
+    bluePaper,
   } = useStyles({
     fullScreen,
   });
@@ -177,7 +171,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   const ContactBehaviorCategory = (): JSX.Element => (
     <RouterLink to="/contact-behavior" style={{ textDecoration: "none" }} aria-label="go to contacts explanation">
       <Card variant="outlined" className={card}>
-        <Chip size="small" label="beta" className={chipTop} />
+        <Chip size="small" label="beta" classes={{ root: chipTop, label: chipLabel }} />
         <Grid container direction="row" alignItems="center" spacing={2}>
           <Grid item xs={8}>
             <Typography variant="h3">Kontaktverhalten der Bevölkerung</Typography>
@@ -193,18 +187,33 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     </RouterLink>
   );
 
+  const link = `/recommendations?IdDistrict=${IdDistrict}`;
+  const HowShouldIBehave = (): JSX.Element => (
+    <RouterLink to={link} style={{ textDecoration: "none" }} aria-label="go to recommendations">
+      <Paper elevation={1} className={bluePaper}>
+        <Grid container direction="row" spacing={2}>
+          <Grid item xs={10}>
+            <Typography variant="h3">Wie kann ich mich verhalten?</Typography>
+          </Grid>
+          <Grid item xs={2}>
+            <ArrowForwardIosIcon className={centerIcon} fontSize="small" />
+          </Grid>
+        </Grid>
+      </Paper>
+    </RouterLink>
+  );
+
   const SymptomLoadCategory = (): JSX.Element => (
     <RouterLink to="/symptom-level" style={{ textDecoration: "none" }} aria-label="go to symptoms explanation">
       <Card variant="outlined" className={card}>
-        <Chip size="small" label="coming soon" className={chipTop} />
-        <Grid container direction="row" alignItems="center" spacing={2}>
+        <Chip size="small" label="bald verfügbar" classes={{ root: chipTop, label: chipLabel }} />
+        <Grid container direction="row" alignItems="center" spacing={2} style={{ color: "#828282" }}>
           <Grid item xs={8}>
             <Typography variant="h3">Symptomlast der Bevölkerung</Typography>
           </Grid>
           <Grid item xs={2}>
             <div className={center}>
               <SymptomsLowIcon />
-              <Typography variant="body2">normal</Typography>
             </div>
           </Grid>
           <Grid item xs={2}>
@@ -239,17 +248,15 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     );
   };
 
-  const link = `/recommendations?IdDistrict=${IdDistrict}`;
   const cardContent = (
     <CardContent>
       <Grid container direction="column" spacing={2}>
-        {/* TODO: Comment this back in once the risk descriptions are updated */}
-        {/*<Grid item>*/}
-        {/*  <Typography>{riskDescription}</Typography>*/}
-        {/*</Grid>*/}
         <Grid item xs={12}>
           <RiskRecommendation contactScore={contactScore} incidence={incidence} />
         </Grid>
+        <Grid item xs={12}>
+          <HowShouldIBehave />
+        </Grid>
         <Grid item xs={12}>
           <ContactBehaviorCategory />
         </Grid>
@@ -259,12 +266,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
         <Grid item xs={12}>
           <CaseNumbersCategory />
         </Grid>
-        <Grid item className={recommendationsLink}>
-          <Typography>Wie kann ich mich verhalten?</Typography>
-          <Button component={RouterLink} to={link} variant="contained" color="secondary">
-            Weiter
-          </Button>
-        </Grid>
       </Grid>
     </CardContent>
   );

diff --git a/apps/official/components/RiskBadge.tsx b/apps/official/components/RiskBadge.tsx
@@ -1,6 +1,7 @@
 import { makeStyles, Theme } from "@material-ui/core/styles";
 import React, { FunctionComponent } from "react";
 import { RiskScore } from "app-config/models";
+import { Typography } from "@material-ui/core";
 
 const boxColorsByRiskScore = (theme: Theme) => ({
   [RiskScore.Low]: theme.palette.lowRisk.main,
@@ -20,8 +21,6 @@ const useStyles = makeStyles<Theme, Props, string>((theme) => {
       borderRadius: "2px",
       height: "46px",
       width: "27px",
-      fontSize: "17px",
-      lineHeight: "20px",
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -36,6 +35,10 @@ export interface Props {
 }
 
 export const RiskBadge: FunctionComponent<Props> = ({ riskScore }) => {
-  const { box, medium } = useStyles({ riskScore });
-  return <div className={`${box} ${medium}`}>{riskNumberByRiskScore[riskScore]}</div>;
+  const classes = useStyles({ riskScore });
+  return (
+    <div className={classes.box}>
+      <Typography variant="h3">{riskNumberByRiskScore[riskScore]}</Typography>
+    </div>
+  );
 };
diff --git a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx b/apps/official/components/risk-levels-page/RiskLevelsPage.tsx
diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx
@@ -1,11 +1,7 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { Card, Grid } from "@material-ui/core";
-import ArrowForwardIosIcon from "@material-ui/icons/ArrowForwardIos";
-
+import { Paper } from "@material-ui/core";
 import Typography from "@material-ui/core/Typography";
-import { Link } from "react-router-dom";
-
 import { ContactScore } from "../../models";
 
 function riscExplanation(contactScore: number, incidence: number): string {
@@ -37,20 +33,9 @@ function riscExplanation(contactScore: number, incidence: number): string {
 }
 
 const useStyles = makeStyles((theme) => ({
-  teaser: {
-    "border": 0,
-    "background": "#2979ff",
-    "color": "white",
-    "textTransform": "none",
-    "padding": theme.spacing(4, 2),
-    "&:last-child": {
-      paddingBottom: theme.spacing(4, 2), // make the cards symmetric by removing the huge padding bottom
-    },
-  },
-
-  centerIcon: {
-    margin: "0 auto",
-    display: "block",
+  paper: {
+    background: "#F2F2F2",
+    padding: theme.spacing(2),
   },
 }));
 
@@ -61,17 +46,8 @@ export const RiskRecommendation: React.FC<{ contactScore: ContactScore; incidenc
   const classes = useStyles();
 
   return (
-    <Link to="/risk-levels" style={{ textDecoration: "none" }} aria-label="go to explanation">
-      <Card className={classes.teaser}>
-        <Grid container direction="row" alignItems="center" spacing={2}>
-          <Grid item xs={10}>
-            <Typography variant="body2">{riscExplanation(contactScore, incidence)}</Typography>
-          </Grid>
-          <Grid item xs={2}>
-            <ArrowForwardIosIcon className={classes.centerIcon} fontSize="small" />
-          </Grid>
-        </Grid>
-      </Card>
-    </Link>
+    <Paper className={classes.paper} elevation={0}>
+      <Typography>{riscExplanation(contactScore, incidence)}</Typography>
+    </Paper>
   );
 };
diff --git a/apps/official/index.ts b/apps/official/index.ts
@@ -12,7 +12,6 @@ import ContactBehavior from "./components/pages/ContactBehavior";
 import SymptomLevel from "./components/pages/SymptomLevel";
 import { BasicRecommendations } from "./components/basic-recommendations/BasicRecommendations";
 import { CovMapFeatureInfo } from "./components/CovMapFeatureInfo";
-import { RiskLevelsPage } from "./components/risk-levels-page/RiskLevelsPage";
 // TODO: Integrate CovQuestions
 // import { Questions } from './components/pages/Questions'
 
@@ -93,13 +92,6 @@ export const config: AppConfig = {
         Component: BasicRecommendations,
         hidden: true, // dont show this page in the navbar
       },
-      {
-        id: "risk-levels-page",
-        title: "Risikostufen",
-        route: "/risk-levels",
-        Component: RiskLevelsPage,
-        hidden: true,
-      },
       {
         id: "rki-page",
         title: "RKI",

diff --git a/apps/official/static/texts/RiskTexts.ts b/apps/official/static/texts/RiskTexts.ts