highlight hints via orange/red; red if hike_rating>=5

Author: karussell

src/sidebar/RoutingResult.module.css

@@ -183,6 +183,14 @@
     color: black;
 }
 
+.redButton {
+    color: red !important;
+}
+
+.orangeButton {
+    color: orange !important;
+}
+
 .routeHintButton,
 .routeHintButton span {
     color: gray;

src/sidebar/RoutingResults.tsx

@@ -76,12 +76,17 @@ function RoutingResult({
     )
     const ferryInfo = getInfoFor(path.points, path.details.road_environment, s => s === 'ferry')
     const accessCondInfo = getInfoFor(path.points, path.details.access_conditional, s => s != null && s.length > 0)
+
     const footAccessCondInfo = !ApiImpl.isFootLike(profile)
         ? new RouteInfo()
         : getInfoFor(path.points, path.details.foot_conditional, s => s != null && s.length > 0)
+
     const hikeRatingInfo = !ApiImpl.isFootLike(profile)
         ? new RouteInfo()
-        : getInfoFor(path.points, path.details.hike_rating, s => s > 1)
+        : getInfoFor(path.points, path.details.hike_rating, s => s > 1 && s < 5)
+    const dangerousHikeRatingInfo = !ApiImpl.isFootLike(profile)
+        ? new RouteInfo()
+        : getInfoFor(path.points, path.details.hike_rating, s => s >= 5)
 
     const bikeAccessCondInfo = !ApiImpl.isBikeLike(profile)
         ? new RouteInfo()
@@ -137,6 +142,7 @@ function RoutingResult({
         getOffBikeInfo.distance > 0 ||
         mtbRatingInfo.distance > 0 ||
         hikeRatingInfo.distance > 0 ||
+        dangerousHikeRatingInfo.distance > 0 ||
         steepInfo.distance > 0
 
     return (
@@ -194,6 +200,7 @@ function RoutingResult({
                             selected={selectedRH}
                             segments={fordInfo.segments}
                             values={[]}
+                            addClassName={styles.orangeButton}
                         />
                         <RHButton
                             setDescription={b => setDescriptionRH(b)}
@@ -299,7 +306,7 @@ function RoutingResult({
                         />
                         <RHButton
                             setDescription={b => setDescriptionRH(b)}
-                            description={tr('way_contains', [tr('challenging_sections')])}
+                            description={tr('challenging_sections')}
                             setType={t => setSelectedRH(t)}
                             type={'mtb_rating'}
                             child={<DangerousIcon />}
@@ -310,10 +317,11 @@ function RoutingResult({
                             selected={selectedRH}
                             segments={mtbRatingInfo.segments}
                             values={mtbRatingInfo.values}
+                            addClassName={styles.orangeButton}
                         />
                         <RHButton
                             setDescription={b => setDescriptionRH(b)}
-                            description={tr('way_contains', [tr('challenging_sections')])}
+                            description={tr('challenging_sections')}
                             setType={t => setSelectedRH(t)}
                             type={'hike_rating'}
                             child={<DangerousIcon />}
@@ -324,6 +332,22 @@ function RoutingResult({
                             selected={selectedRH}
                             segments={hikeRatingInfo.segments}
                             values={hikeRatingInfo.values}
+                            addClassName={styles.orangeButton}
+                        />
+                        <RHButton
+                            setDescription={b => setDescriptionRH(b)}
+                            description={tr('dangerous_sections')}
+                            setType={t => setSelectedRH(t)}
+                            type={'hike_rating'}
+                            child={<DangerousIcon />}
+                            value={
+                                dangerousHikeRatingInfo.distance > 0 &&
+                                metersToShortText(dangerousHikeRatingInfo.distance, showDistanceInMiles)
+                            }
+                            selected={selectedRH}
+                            segments={dangerousHikeRatingInfo.segments}
+                            values={dangerousHikeRatingInfo.values}
+                            addClassName={styles.redButton}
                         />
                         <RHButton
                             setDescription={b => setDescriptionRH(b)}
@@ -360,6 +384,7 @@ function RoutingResult({
                             selected={selectedRH}
                             segments={trunkInfo.segments}
                             values={[]}
+                            addClassName={styles.orangeButton}
                         />
                         <RHButton
                             setDescription={b => setDescriptionRH(b)}
@@ -412,12 +437,13 @@ function RHButton(p: {
     selected: string
     segments: Coordinate[][]
     values: string[]
+    addClassName?: string
 }) {
     let [index, setIndex] = useState(0)
     if (p.value === false) return null
     return (
         <PlainButton
-            className={p.selected == p.type ? styles.selectedRouteHintButton : styles.routeHintButton}
+            className={(p.addClassName || "") + " " + (p.selected == p.type ? styles.selectedRouteHintButton : styles.routeHintButton)}
             onClick={() => {
                 p.setType(p.type)