From 9c7eed651af1ecab882317e796a2c40cf4e1aec6 Mon Sep 17 00:00:00 2001 From: DanielHabenicht Date: Thu, 29 Oct 2020 17:53:46 +0100 Subject: [PATCH] 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 --- .../official/components/CovMapFeatureInfo.tsx | 25 +++++++++++-- apps/official/components/pages/Faq.tsx | 37 ++++++++++++++----- .../risk-levels-page/RiskLevelsPage.tsx | 1 + apps/official/static/images/contacts-low.svg | 21 +++++++---- .../images/contacts-medium-background.svg | 11 ++++++ .../static/images/contacts-medium.svg | 18 +++++---- apps/official/static/images/symptoms high.svg | 6 +++ .../static/images/symptoms-low-background.svg | 5 +++ apps/official/static/images/symptoms-low.svg | 8 ++-- 9 files changed, 101 insertions(+), 31 deletions(-) create mode 100644 apps/official/static/images/contacts-medium-background.svg create mode 100644 apps/official/static/images/symptoms high.svg create mode 100644 apps/official/static/images/symptoms-low-background.svg diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index fc404ae2..299e2a3d 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -88,6 +88,11 @@ const useStyles = makeStyles((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 ; + return ( +
+ + reduziert +
+ ); case ContactScore.Medium: - return ; + return ( +
+ + erhöht +
+ ); default: return null; } @@ -186,7 +202,10 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { Symptomlast der Bevölkerung - +
+ + normal +
diff --git a/apps/official/components/pages/Faq.tsx b/apps/official/components/pages/Faq.tsx index b95db0c1..2d46f1fd 100644 --- a/apps/official/components/pages/Faq.tsx +++ b/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 = () => {
- 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.
@@ -106,13 +107,13 @@ export const Faq: React.FC = () => { content={ Auf der Karte stellen wir ein normales, mittleres und hohes Risiko dar. - + - 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. @@ -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. - + - 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. +
+
+ +
+ + Erhöhtes Kontaktverhalten in der Bevölkerung + +
+ + Unsere Vorhersage sagt hier vermehrten Kontakt in der Bevölkerung voraus. Dies kann dazu führen, dass + sich bald die Fallzahlen erhöhen. + } /> diff --git a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx b/apps/official/components/risk-levels-page/RiskLevelsPage.tsx index 4ef70cd0..d46193af 100644 --- a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx +++ b/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: { diff --git a/apps/official/static/images/contacts-low.svg b/apps/official/static/images/contacts-low.svg index 24467119..f4080ccf 100644 --- a/apps/official/static/images/contacts-low.svg +++ b/apps/official/static/images/contacts-low.svg @@ -1,8 +1,15 @@ - - - - - - - + + + + + + + + + + + + + diff --git a/apps/official/static/images/contacts-medium-background.svg b/apps/official/static/images/contacts-medium-background.svg new file mode 100644 index 00000000..598298eb --- /dev/null +++ b/apps/official/static/images/contacts-medium-background.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/apps/official/static/images/contacts-medium.svg b/apps/official/static/images/contacts-medium.svg index 726c734b..661be5a4 100644 --- a/apps/official/static/images/contacts-medium.svg +++ b/apps/official/static/images/contacts-medium.svg @@ -1,9 +1,11 @@ - - - - - - - - + + + + + + + + + diff --git a/apps/official/static/images/symptoms high.svg b/apps/official/static/images/symptoms high.svg new file mode 100644 index 00000000..cc36abf8 --- /dev/null +++ b/apps/official/static/images/symptoms high.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/official/static/images/symptoms-low-background.svg b/apps/official/static/images/symptoms-low-background.svg new file mode 100644 index 00000000..d363c6ae --- /dev/null +++ b/apps/official/static/images/symptoms-low-background.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/official/static/images/symptoms-low.svg b/apps/official/static/images/symptoms-low.svg index d8197849..b677019c 100644 --- a/apps/official/static/images/symptoms-low.svg +++ b/apps/official/static/images/symptoms-low.svg @@ -1,5 +1,5 @@ - - - - + + +