fix: use new icons in drawer (#276)

* fix: use new icons in drawer

* add icon to risk level page

* add new symptom icons

* add explanation in faq

* remove from risk level page

apps/official/components/CovMapFeatureInfo.tsx

@@ -88,6 +88,11 @@ const useStyles = makeStyles<Theme, { fullScreen: boolean }>((theme) => ({
     margin: "0 auto",
     display: "block",
   },
+  center: {
+    "display": "flex",
+    "flex-flow": "column",
+    "align-items": "center",
+  },
   chipTop: {
     position: "absolute",
     top: -12, // half height of the badge
@@ -116,6 +121,7 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
     drawerScrollContainer,
     centerIcon,
     chipTop,
+    center,
   } = useStyles({
     fullScreen,
   });
@@ -150,9 +156,19 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
   const ContactsIcon = ({ score }: { score: ContactScore }) => {
     switch (score) {
       case ContactScore.Low:
-        return <ContactsLowIcon />;
+        return (
+          <div className={center}>
+            <ContactsLowIcon />
+            <Typography variant="body2">reduziert</Typography>
+          </div>
+        );
       case ContactScore.Medium:
-        return <ContactsMediumIcon />;
+        return (
+          <div className={center}>
+            <ContactsMediumIcon />
+            <Typography variant="body2">erhöht</Typography>
+          </div>
+        );
       default:
         return null;
     }
@@ -186,7 +202,10 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => {
             <Typography variant="h3">Symptomlast der Bevölkerung</Typography>
           </Grid>
           <Grid item xs={2}>
-            <SymptomsLowIcon />
+            <div className={center}>
+              <SymptomsLowIcon />
+              <Typography variant="body2">normal</Typography>
+            </div>
           </Grid>
           <Grid item xs={2}>
             <ArrowForwardIosIcon className={centerIcon} color="action" fontSize="small" />

apps/official/components/pages/Faq.tsx

@@ -5,6 +5,7 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { makeStyles } from "@material-ui/core/styles";
 import { RiskBadge } from "../RiskBadge";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import ContactsMediumBackgroundIcon from "../../static/images/contacts-medium-background.svg";
 
 const useStyles = makeStyles(() => ({
   textBlock: {
@@ -77,8 +78,8 @@ export const Faq: React.FC = () => {
                   </ul>
                 </div>
                 <div className={classes.textBlock}>
-                  Mit der CovMap möchten wir zu einer freiwilligen Reduzierung von Kontakten aufrufen und 
-                  aufzeigen, wo dies besonders notwendig ist.
+                  Mit der CovMap möchten wir zu einer freiwilligen Reduzierung von Kontakten aufrufen und aufzeigen, wo
+                  dies besonders notwendig ist.
                 </div>
               </div>
             </Typography>
@@ -106,13 +107,13 @@ export const Faq: React.FC = () => {
           content={
             <Box display="flex" flexDirection="column">
               <Typography>Auf der Karte stellen wir ein normales, mittleres und hohes Risiko dar.</Typography>
-                            <RiskHeading risk={1} />
+              <RiskHeading risk={1} />
 
               <Typography>
-                Ein normales Risiko liegt vor, wenn die 7-Tages-Inzidenz des Robert-Koch-Instituts geringer als 20 Neuinfektionen pro 100.000
-                Einwohner ist und unser Vorhersagemodell keinen Anstieg vermuten lässt. Bitte beachte, dass das Virus
-                derzeit überall in Deutschland zirkuliert und daher eine Ansteckung auch in einer Region mit einem
-                normalen Risiko möglich ist.
+                Ein normales Risiko liegt vor, wenn die 7-Tages-Inzidenz des Robert-Koch-Instituts geringer als 20
+                Neuinfektionen pro 100.000 Einwohner ist und unser Vorhersagemodell keinen Anstieg vermuten lässt. Bitte
+                beachte, dass das Virus derzeit überall in Deutschland zirkuliert und daher eine Ansteckung auch in
+                einer Region mit einem normalen Risiko möglich ist.
               </Typography>
 
               <RiskHeading risk={2} />
@@ -122,11 +123,29 @@ export const Faq: React.FC = () => {
                 pro 100.000 Einwohnern liegt oder unser Vorhersagemodell auf einen Anstieg der Neuinfektionen hindeutet.
                 Eine Region mit mittlerem Risiko kann in Zukunft eine Region mit hohem Risiko werden.
               </Typography>
-                            <RiskHeading risk={3} />
+              <RiskHeading risk={3} />
               <Typography>
-                Ein hohes Risiko leiten wir von der 7-Tages-Inzidenz ab, wenn die Schwelle von 50 Neuinfektionen pro 100.000 Einwohner überschritten wurde.
+                Ein hohes Risiko leiten wir von der 7-Tages-Inzidenz ab, wenn die Schwelle von 50 Neuinfektionen pro
+                100.000 Einwohner überschritten wurde.
               </Typography>
 
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <ContactsMediumBackgroundIcon />
+                </div>
+                <Typography variant="h3" style={{ margin: "0 1rem" }}>
+                  Erhöhtes Kontaktverhalten in der Bevölkerung
+                </Typography>
+              </div>
+              <Typography>
+                Unsere Vorhersage sagt hier vermehrten Kontakt in der Bevölkerung voraus. Dies kann dazu führen, dass
+                sich bald die Fallzahlen erhöhen.
+              </Typography>
             </Box>
           }
         />

apps/official/components/risk-levels-page/RiskLevelsPage.tsx

@@ -6,6 +6,7 @@ import RiskScoreNormalIcon from "../../static/images/risk-score-1.svg";
 import RiskScoreMediumIcon from "../../static/images/risk-score-2.svg";
 import RiskScoreHighIcon from "../../static/images/risk-score-3.svg";
 import { NavigationTitle } from "app-config/components/NavigationTitle";
+import ContactsMediumBackgroundIcon from "../../static/images/contacts-medium-background.svg";
 
 const useStyles = makeStyles({
   leftText: {