* Please change the step value for the slider from 100 to 10 so it's …

…smoother

* If the number in the total population box is changed from 100,000, then the label for the box above it should change to "total weekly new cases"
* At mobile screen width, the explanatory labels on the slider no longer work. Please set them to wrap properly.
* Please send the instructions on how to edit the presets and their labels.
* See if you can fix #1839 (text boxes are unusable and widths between phone and desktop)
* Change the text in the pink bar from "Step 1: Characterize community infection" to "Step 1: Enter COVID rate"
* Change the instructions to:
Use the slider or text box to enter weekly new COVID cases per 100,000 people in your area. You can also estimate whether cases are relatively low or high and use the preset options on the slider.
In the US you can look up weekly new cases on covidactnow.org by clicking your state on the map, and then your county. The first number on the screen is "weekly new reported cases per 100k"

src/components/calculator/prevalence/ManualPrevalenceDetails.tsx

@@ -1,7 +1,7 @@
 import { isNumber } from 'lodash'
 import Slider from 'rc-slider'
 import 'rc-slider/assets/index.css'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Card, Form, InputGroup, Row, Tooltip } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 
@@ -43,7 +43,7 @@ const PrevalenceField: React.FunctionComponent<{
 }): React.ReactElement => {
   let body: React.ReactElement = (
     <Form.Control
-      className={'form-control form-control-lg col-md-3 col-lg-6 ' + className}
+      className={'form-control form-control-lg col-md-6' + className}
       data-testid={id}
       type={inputType}
       value={value}
@@ -96,6 +96,20 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
   data: CalculatorData
   setter: (newData: CalculatorData) => void
 }> = (props): React.ReactElement => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   const { t } = useTranslation()
   return (
     <Card id={props.id}>
@@ -112,9 +126,9 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
           </Trans>
         </div>
         <PrevalenceResult data={props.data} />
-
         <Slider
           className="my-5 pb-5"
+          step={0.01}
           trackStyle={{
             height: '8px',
           }}
@@ -142,27 +156,39 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
           marks={{
             0: {
               style: {
-                fontSize: '1.2em',
+                paddingTop: '1em',
+                fontSize: !isMobile ? '1.2em' : '1em',
                 fontWeight: 'bold',
               },
               label: '0%',
             },
             4: {
               style: {
+                paddingTop: '1em',
                 color: 'green',
-                fontSize: '1.2em',
+                fontSize: !isMobile ? '1.2em' : '1em',
                 fontWeight: 'bold',
               },
-              label: (
-                <>
+              label: !isMobile ? (
+                <div className="px-4">
+                  Low
+                  <br/>
+                  (similar to US
+                  during late 2022)
+                </div>
+              ) : (
+                <div className="px-4">
                   Low
                   <br/>
-                  (similar to US during late 2022)
-                </>
+                  (similar to US
+                  <br/>
+                  during late 2022)
+                </div>
               ),
             },
             8: {
               style: {
+                paddingTop: '1em',
                 color: 'cornflowerblue',
                 fontSize: '1.2em',
                 fontWeight: 'bold',
@@ -171,6 +197,7 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
             },
             12: {
               style: {
+                paddingTop: '1em',
                 color: 'orange',
                 fontSize: '1.2em',
                 fontWeight: 'bold',
@@ -179,6 +206,7 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
             },
             16: {
               style: {
+                paddingTop: '1em',
                 color: 'red',
                 fontSize: '1.2em',
                 fontWeight: 'bold',
@@ -187,6 +215,7 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
             },
             20: {
               style: {
+                paddingTop: '1em',
                 fontSize: '1.2em',
                 fontWeight: 'bold',
               },
@@ -196,7 +225,11 @@ export const ManualPrevalenceDetails: React.FunctionComponent<{
         />
         <PrevalenceField
           id="reported-cases"
-          label={t('calculator.prevalence.last_week_cases')}
+          label={
+            parseInt(props.data.population) === 100000
+              ? t('calculator.prevalence.last_week_cases')
+              : t('calculator.prevalence.last_week_cases_no_pop')
+          }
           value={props.data.casesPastWeek || 0}
           setter={(value) =>
             props.setter({

src/locales/en.json

@@ -47,7 +47,7 @@
     "category_very_high": "Very High",
     "category_very_low": "Very Low",
     "change_interaction_type": "Clear",
-    "characterize_community_infection_header": "Step 1: Characterize community infection",
+    "characterize_community_infection_header": "Step 1: Enter COVID rate",
     "distance_header": "Distance",
     "distance_question": "How close are these nearby people, on average?",
     "duration_header": "Duration",
@@ -185,8 +185,9 @@
       "completed_vaccinations_tooltip": "This field is only editable if we are missing vaccination data for your location",
       "data_last_updated": "Data last updated",
       "details_header": "Details",
-      "instructions": "<p>The microCOVID calculator's data source is no longer providing updates on COVID rates. To use the calculator, please look up <strong>weekly new cases per 100k</strong> in your area and enter it below. Then enter \"100,000\" in the \"total population\" box.</p><p>We hope to have a more usable version of the interface in place soon. Contact info@microcovid.org with any questions.</p><p><i>If you are in the US, go to <0>covidactnow.org</0>, click your state on the map, then your county. The first number on the screen is \"weekly new reported cases per 100k\".</p>",
+      "instructions": "<p>Use the slider or text box to enter weekly new COVID cases per 100,000 people in your area. You can also estimate whether cases are relatively low or high and use the preset options on the slider.<br/>In the US you can look up weekly new cases on covidactnow.org by clicking your state on the map, and then your county. The first number on the screen is \"weekly new reported cases per 100k\".</p>",
       "last_week_cases": "Weekly new cases / 100k population",
+      "last_week_cases_no_pop": "Weekly new cases",
       "percent_increase_in_cases": "Percent increase in cases from last week to this week",
       "population": "Total population",
       "positive_case_percentage": "Percent of tests that come back positive",