style: Update text and styling on settings page (#2270)

mbta · Nov 7, 2023 · f8fc4c4 · f8fc4c4
1 parent 96deac8
commit f8fc4c4
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 61 deletions.
diff --git a/assets/css/_settings_page.scss b/assets/css/_settings_page.scss
@@ -1,8 +1,10 @@
 .c-settings-page__section-header {
-  @include font-label;
-  padding: 0.5rem 0rem 0.625rem 1.25rem;
+  padding: 0.5rem 0rem 0.625rem 0rem;
   margin-top: 0;
   margin-bottom: 0;
+  color: $color-gray-900;
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
 .c-settings-page__setting {
@@ -29,12 +31,11 @@
 }
 
 .c-settings-page__setting-label {
-  @include font-body;
+  font-size: 1rem;
   flex: 1 1 6rem;
 }
 
 .c-settings-page__options-container {
-  margin-left: 1.3125rem;
   display: flex;
   justify-content: flex-start;
 }
@@ -49,6 +50,7 @@
 
 .c-settings-page__option-label-unselected {
   @include toggle-unselected;
+  color: $color-gray-600;
 }
 
 .c-settings-page__vehicle-adherence-setting-row {

diff --git a/assets/src/components/settingsPage.tsx b/assets/src/components/settingsPage.tsx
@@ -1,11 +1,6 @@
 import React, { ReactElement, useContext } from "react"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
-import {
-  LadderIcon,
-  MapIcon,
-  TriangleUpIcon,
-  TriangleUpLargeIcon,
-} from "../helpers/icon"
+import { TriangleUpIcon } from "../helpers/icon"
 import {
   setLadderVehicleLabelSetting,
   setShuttleVehicleLabelSetting,
@@ -31,12 +26,14 @@ const SettingsPage = (): ReactElement<HTMLDivElement> => {
       <Notifications />
       <div className="c-page__container">
         <h1 className="c-page__title">Settings</h1>
-
         <div className="c-page__section">
           <h2 className="c-settings-page__section-header">Vehicle Settings</h2>
           <ToggleSetting
-            icon={<MapIcon />}
-            label="Vehicle labels on map"
+            label={
+              <>
+                Vehicle labels on <strong>regular</strong> buses
+              </>
+            }
             settingName="shuttle-vehicle-label"
             value={userSettings.shuttleVehicleLabel}
             onChange={(value) => {
@@ -58,8 +55,11 @@ const SettingsPage = (): ReactElement<HTMLDivElement> => {
             ]}
           />
           <ToggleSetting
-            icon={<LadderIcon />}
-            label="Vehicle labels on route ladder"
+            label={
+              <>
+                Vehicle labels on <strong>shuttle</strong> buses
+              </>
+            }
             settingName="ladder-vehicle-label"
             value={userSettings.ladderVehicleLabel}
             onChange={(value) => {
@@ -81,8 +81,7 @@ const SettingsPage = (): ReactElement<HTMLDivElement> => {
             ]}
           />
           <ToggleSetting
-            icon={<TriangleUpLargeIcon />}
-            label="Adherence colors"
+            label={<>Adherence colors</>}
             settingName="vehicle-adherence-colors"
             value={userSettings.vehicleAdherenceColors}
             onChange={(value) => {
@@ -143,15 +142,13 @@ const SettingsPage = (): ReactElement<HTMLDivElement> => {
 }
 
 const ToggleSetting = ({
-  icon,
   label,
   settingName,
   value,
   onChange,
   options,
 }: {
-  icon: ReactElement
-  label: string
+  label: ReactElement
   settingName: string
   value: string | number
   onChange: (value: string) => void
@@ -163,9 +160,6 @@ const ToggleSetting = ({
 }) => (
   <div className="c-settings-page__setting">
     <div className="c-settings-page__setting_header">
-      <div className="c-settings-page__icon">
-        {React.cloneElement(icon, { className: "c-settings-page__icon-path" })}
-      </div>
       <div className="c-settings-page__setting-label">{label}</div>
     </div>
     <div className="c-settings-page__options-container">

diff --git a/assets/tests/components/__snapshots__/settingsPage.test.tsx.snap b/assets/tests/components/__snapshots__/settingsPage.test.tsx.snap
@@ -29,22 +29,14 @@ exports[`SettingsPage renders 1`] = `
         <div
           className="c-settings-page__setting_header"
         >
-          <div
-            className="c-settings-page__icon"
-          >
-            <span
-              className="c-settings-page__icon-path"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg/>",
-                }
-              }
-            />
-          </div>
           <div
             className="c-settings-page__setting-label"
           >
-            Vehicle labels on map
+            Vehicle labels on 
+            <strong>
+              regular
+            </strong>
+             buses
           </div>
         </div>
         <div
@@ -86,22 +78,14 @@ exports[`SettingsPage renders 1`] = `
         <div
           className="c-settings-page__setting_header"
         >
-          <div
-            className="c-settings-page__icon"
-          >
-            <span
-              className="c-settings-page__icon-path"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg/>",
-                }
-              }
-            />
-          </div>
           <div
             className="c-settings-page__setting-label"
           >
-            Vehicle labels on route ladder
+            Vehicle labels on 
+            <strong>
+              shuttle
+            </strong>
+             buses
           </div>
         </div>
         <div
@@ -143,18 +127,6 @@ exports[`SettingsPage renders 1`] = `
         <div
           className="c-settings-page__setting_header"
         >
-          <div
-            className="c-settings-page__icon"
-          >
-            <span
-              className="c-settings-page__icon-path"
-              dangerouslySetInnerHTML={
-                {
-                  "__html": "<svg/>",
-                }
-              }
-            />
-          </div>
           <div
             className="c-settings-page__setting-label"
           >