Improve styles and readability v2

package.json

@@ -82,6 +82,7 @@
     "prop-types": "15.7.2",
     "raf": "3.4.1",
     "react": "16.13.0",
+    "react-children-utilities": "2.0.12",
     "react-dates": "21.8.0",
     "react-dom": "16.13.0",
     "react-error-boundary": "1.2.5",

src/components/Form/CardWithDropdown.tsx

@@ -6,6 +6,7 @@ import { FormDropdownOption } from './FormDropdownOption'
 
 export interface CardWithDropdownProps {
   children?: React.ReactNode | React.ReactNode[]
+  className?: string
   identifier: string
   label: string | React.ReactNode
   help?: string | React.ReactNode
@@ -19,6 +20,7 @@ export interface CardWithDropdownProps {
 
 export function CardWithDropdown({
   children,
+  className,
   identifier,
   label,
   help,
@@ -30,8 +32,8 @@ export function CardWithDropdown({
   onBlur,
 }: CardWithDropdownProps) {
   return (
-    <Card className="h-100">
-      <CardHeader className="p-1">
+    <Card className={`h-100 ${className || ''}`}>
+      <CardHeader className="py-1 px-2">
         <FormDropdownStateless<string>
           identifier={identifier}
           label={label}

src/components/Form/CardWithoutDropdown.tsx

@@ -9,12 +9,13 @@ export interface CardWithDropdownProps {
   label: string | React.ReactNode
   help?: string | React.ReactNode
   onBlur?<T>(e: React.FocusEvent<T>): void
+  className?: string
 }
 
-export function CardWithoutDropdown({ children, identifier, label, help, onBlur }: CardWithDropdownProps) {
+export function CardWithoutDropdown({ children, className, identifier, label, help, onBlur }: CardWithDropdownProps) {
   return (
-    <Card className="h-100">
-      <CardHeader className="p-1">
+    <Card className={`h-100 ${className || ''}`}>
+      <CardHeader className="py-1 px-2">
         <FormLabel identifier={identifier} label={label} help={help} />
       </CardHeader>
       <CardBody>{children}</CardBody>

src/components/Form/CollapsibleCard.tsx

@@ -11,15 +11,23 @@ export interface CollapsibleCardProps {
   help?: string | React.ReactNode
   children?: React.ReactNode | React.ReactNode[]
   defaultCollapsed?: boolean
+  className?: string
 }
 
-export function CollapsibleCard({ identifier, title, help, children, defaultCollapsed = true }: CollapsibleCardProps) {
+export function CollapsibleCard({
+  className,
+  identifier,
+  title,
+  help,
+  children,
+  defaultCollapsed = true,
+}: CollapsibleCardProps) {
   const [collapsed, setCollapsed] = useState(defaultCollapsed)
   const toggle = () => setCollapsed(!collapsed)
 
   return (
-    <Card className="h-100">
-      <CardHeader onClick={toggle}>
+    <Card className={`h-100 ${className || ''}`}>
+      <CardHeader className="py-1 px-2" onClick={toggle}>
         <div className="w-100 h-100 text-left p-0" color="default">
           <div className="d-flex">
             <span className="mx-1 my-auto">

src/components/Form/FormHelpButton.scss

@@ -1,13 +1,15 @@
 $radius: 16px;
-$color: #8b9dbe;
+$color: #787878;
 
 .help-button {
+  align-items: center;
+  background-color: $color;
+  border: none;
+  display: flex;
   width: $radius;
   height: $radius;
+  justify-content: center;
   padding: 0;
-  line-height: 0.5; // adjust this if you change the radius
-  background-color: $color;
-  border: none;
   border-radius: $radius / 2;
 }
 

src/components/Form/FormHelpButton.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 
-import { Button, Card, CardBody, CardHeader, UncontrolledPopover } from 'reactstrap'
+import { Button, Card, CardBody, UncontrolledPopover } from 'reactstrap'
+
+import { onlyText } from 'react-children-utilities'
 
 import { FaQuestion } from 'react-icons/fa'
 
@@ -21,7 +23,7 @@ export default function FormHelpButton({ identifier, label, help }: FormHelpButt
     <>
       <Button
         id={safeId(identifier)}
-        className="help-button"
+        className="help-button ml-2"
         type="button"
         aria-label="help"
         onClick={(e) => {
@@ -32,9 +34,11 @@ export default function FormHelpButton({ identifier, label, help }: FormHelpButt
         <FaQuestion className="help-button-icon" />
       </Button>
       <UncontrolledPopover placement="right" target={safeId(identifier)} trigger="legacy" hideArrow>
-        <Card>
-          <CardHeader>{label}</CardHeader>
-          <CardBody>{help}</CardBody>
+        <Card className="card--help">
+          <CardBody>
+            {label && <h4>{onlyText(label)}</h4>}
+            <p>{help}</p>
+          </CardBody>
         </Card>
       </UncontrolledPopover>
     </>

src/components/Form/HelpLabel.tsx

@@ -11,8 +11,8 @@ export interface HelpLabelProps {
 export default function HelpLabel({ identifier, label, help }: HelpLabelProps) {
   return (
     <div className="d-flex align-items-center">
+      <span className="my-auto text-truncate">{label}</span>
       <FormHelpButton identifier={`${identifier}_help`} label={label} help={help} />
-      <span className="ml-2 my-auto text-truncate">{label}</span>
     </div>
   )
 }

src/components/Layout/Layout.tsx

@@ -19,9 +19,9 @@ interface LayoutProps {
 function Layout({ location }: LayoutProps) {
   return (
     <div className="container-fluid">
-      <div className="row">
+      <header className="row">
         <NavigationBar navLinks={links} />
-      </div>
+      </header>
 
       <div className="row">
         <main className="container-fluid absolute" role="main">

src/components/Main/Main.tsx

@@ -164,7 +164,7 @@ function Main() {
   }
 
   return (
-    <Row noGutters>
+    <Row>
       <Col md={12}>
         <Formik
           enableReinitialize
@@ -178,8 +178,8 @@ function Main() {
 
             return (
               <Form className="form">
-                <Row noGutters>
-                  <Col lg={4} xl={6} className="py-1 px-1">
+                <Row>
+                  <Col lg={4} xl={6} className="py-1">
                     <ScenarioCard
                       severity={severity}
                       setSeverity={setSeverity}
@@ -190,7 +190,7 @@ function Main() {
                     />
                   </Col>
 
-                  <Col lg={8} xl={6} className="py-1 px-1">
+                  <Col lg={8} xl={6} className="py-1">
                     <ResultsCard
                       canRun={canRun}
                       autorunSimulation={autorunSimulation}

src/components/Main/Results/AgeBarChart.tsx

@@ -80,7 +80,7 @@ export function AgeBarChart({ showHumanized, data, rates }: SimProps) {
 
           return (
             <>
-              <h5>{t('Distribution across age groups')}</h5>
+              <h3>{t('Distribution across age groups')}</h3>
 
               <div ref={casesChartRef} />
               <BarChart

src/components/Main/Results/DeterministicLinePlot.tsx

@@ -226,7 +226,7 @@ export function DeterministicLinePlot({ data, userResult, logScale, showHumanize
 
           return (
             <>
-              <h5>{t('Cases through time')}</h5>
+              <h3>{t('Cases through time')}</h3>
 
               <div ref={chartRef} />
               <ComposedChart

src/components/Main/Results/OutcomeRatesTable.tsx

@@ -68,7 +68,7 @@ export function OutcomeRatesTable({ showHumanized, result, rates }: TableProps)
   return (
     <Row data-testid="OutcomeRatesTable">
       <Col lg={6}>
-        <h5>{t('Proportions')}</h5>
+        <h3>{t('Proportions')}</h3>
         <table>
           <thead>
             <tr>
@@ -97,7 +97,7 @@ export function OutcomeRatesTable({ showHumanized, result, rates }: TableProps)
         </table>
       </Col>
       <Col lg={6}>
-        <h5>{t('Totals/Peak')}</h5>
+        <h3>{t('Totals/Peak')}</h3>
         <table>
           <thead>
             <tr>

src/components/Main/Results/ResultsCard.scss

@@ -1,3 +1,59 @@
+.btn-container {
+  display: flex;
+
+  button {
+    margin: 0 0.5em 0 0;
+    text-transform: uppercase;
+  }
+
+  button:last-of-type {
+    margin: 0;
+  }
+
+  button:not([hidden]) {
+    flex: 100%;
+  }
+}
+
+.form-check-label {
+  font-size: 80%;
+  margin-bottom: 1.5rem;
+}
+
+.form-check-input {
+  margin-top: 0.2rem;
+}
+
+@media (min-width: 768px) {
+  .btn-container {
+    flex-direction: column;
+
+    button {
+      margin: 0 0 0.5em;
+      width: 100%;
+    }
+
+    button:last-of-type {
+      margin: 0;
+    }
+  }
+
+  .form-check-label {
+    margin-bottom: 0;
+  }
+}
+
+.caution-text {
+  font-size: 0.9rem;
+  max-width: 32em;
+  text-align: left;
+}
+
+.custom-switch {
+  border: none;
+  box-shadow: none;
+}
+
 .goToResultsBtn {
   position: fixed;
   right: 0;