From 5f118dd388387a50707d5d25b30c724f83f5e0db Mon Sep 17 00:00:00 2001 From: ChristophWersal <45358216+ChristophWersal@users.noreply.github.com> Date: Sat, 31 Oct 2020 21:09:37 +0100 Subject: [PATCH] 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 * 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 --- .../official/components/CovMapFeatureInfo.tsx | 77 ++++++++++--------- apps/official/components/RiskBadge.tsx | 11 ++- .../risk-levels-page/RiskLevelsPage.tsx | 77 ------------------- .../RiskRecommendation.tsx | 38 ++------- apps/official/index.ts | 8 -- apps/official/static/texts/RiskTexts.ts | 5 -- 6 files changed, 53 insertions(+), 163 deletions(-) delete mode 100644 apps/official/components/risk-levels-page/RiskLevelsPage.tsx delete mode 100644 apps/official/static/texts/RiskTexts.ts diff --git a/apps/official/components/CovMapFeatureInfo.tsx b/apps/official/components/CovMapFeatureInfo.tsx index 299e2a3d..5c5ee017 100644 --- a/apps/official/components/CovMapFeatureInfo.tsx +++ b/apps/official/components/CovMapFeatureInfo.tsx @@ -2,7 +2,6 @@ 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, @@ -10,6 +9,7 @@ import { Drawer, Grid, IconButton, + Paper, Theme, Typography, useTheme, @@ -46,18 +46,19 @@ const useStyles = makeStyles((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) => ({ 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) => ({ 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 => ( - + Kontaktverhalten der Bevölkerung @@ -193,18 +187,33 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { ); + const link = `/recommendations?IdDistrict=${IdDistrict}`; + const HowShouldIBehave = (): JSX.Element => ( + + + + + Wie kann ich mich verhalten? + + + + + + + + ); + const SymptomLoadCategory = (): JSX.Element => ( - - + + Symptomlast der Bevölkerung
- normal
@@ -239,17 +248,15 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { ); }; - const link = `/recommendations?IdDistrict=${IdDistrict}`; const cardContent = ( - {/* TODO: Comment this back in once the risk descriptions are updated */} - {/**/} - {/* {riskDescription}*/} - {/**/} + + + @@ -259,12 +266,6 @@ export const CovMapFeatureInfo = ({ rawData }: FeatureInfoProps) => { - - Wie kann ich mich verhalten? - - ); diff --git a/apps/official/components/RiskBadge.tsx b/apps/official/components/RiskBadge.tsx index 649f4453..b900892e 100644 --- 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) => { 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 = ({ riskScore }) => { - const { box, medium } = useStyles({ riskScore }); - return
{riskNumberByRiskScore[riskScore]}
; + const classes = useStyles({ riskScore }); + return ( +
+ {riskNumberByRiskScore[riskScore]} +
+ ); }; diff --git a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx b/apps/official/components/risk-levels-page/RiskLevelsPage.tsx deleted file mode 100644 index d46193af..00000000 --- a/apps/official/components/risk-levels-page/RiskLevelsPage.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; -import { makeStyles } from "@material-ui/core/styles"; -import { Grid, Typography } from "@material-ui/core"; -import { RiskTexts } from "../../static/texts/RiskTexts"; -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: { - textAlign: "left", - }, -}); - -export const RiskLevelsPage = () => { - const classes = useStyles(); - - return ( - <> -
-
- -
- -
- - - - Normales Risiko - - - - - - - - {RiskTexts.NORMAL} - -
- -
- - - - Mittleres Risiko - - - - - - - - {RiskTexts.MEDIUM} - -
- -
- - - - Hohes Risiko - - - - - - - - {RiskTexts.HIGH} - -
-
- - ); -}; diff --git a/apps/official/components/risk-recommendation/RiskRecommendation.tsx b/apps/official/components/risk-recommendation/RiskRecommendation.tsx index e4ae9396..0681178f 100644 --- 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 ( - - - - - {riscExplanation(contactScore, incidence)} - - - - - - - + + {riscExplanation(contactScore, incidence)} + ); }; diff --git a/apps/official/index.ts b/apps/official/index.ts index c745a1f7..31b80bba 100644 --- 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 deleted file mode 100644 index fdaacd23..00000000 --- a/apps/official/static/texts/RiskTexts.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum RiskTexts { - NORMAL = "Die Zahl der Neuinfektionen ist niedrig, das Kontaktverhalten ist ausreichend reduziert und die Symptomlast ist normal. Ein normales Risiko bedeutet allerdings nicht, dass gar keine Infektionen in der Region möglich sind", - MEDIUM = "Die Zahl der Neuinfektionen oder das Kontaktverhalten bzw. die Symptomlast der Bevölkerung ist erhöht, so dass die Zahl der Neuinfektionen demnächst weiter ansteigen könnte. Wir rufen dazu auf, die Anzahl der Kontakte freiwillig zu reduzieren.", - HIGH = "Die Zahl der Neuinfektionen ist stark erhöht. Wir rufen dazu auf, die Anzahl der Kontakte freiwillig weitestgehend zu reduzieren.", -}