From 57bb8b1f04cdb925321dcc6b921b8249264b84fb Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 11 May 2023 16:38:01 -0400 Subject: [PATCH 01/80] refactor(NotificationPrefsPane): Remove redundant header --- i18n/en-US.yml | 1 - i18n/es.yml | 30 +++++++------------ i18n/fr.yml | 3 -- i18n/ko.yml | 1 - i18n/vi.yml | 3 -- i18n/zh.yml | 1 - .../user/notification-prefs-pane.tsx | 3 -- 7 files changed, 10 insertions(+), 32 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index b2e036689..e8b46ea69 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -356,7 +356,6 @@ components: description: The content you requested is not available. header: Content not found NotificationPrefsPane: - description: You can receive notifications about trips you frequently take. noneSelect: Don't notify me notificationChannelPrompt: How would you like to receive notifications? notificationEmailDetail: "Notification emails will be sent to:" diff --git a/i18n/es.yml b/i18n/es.yml index 08c82b945..29a962b6d 100644 --- a/i18n/es.yml +++ b/i18n/es.yml @@ -30,8 +30,7 @@ actions: No se puede guardar el plan: este plan no se pudo guardar debido a la falta de capacidad en uno o más vehículos. Por favor, vuelva a planificar su viaje. - maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados - válidos + maxTripRequestsExceeded: Número de solicitudes de viaje superadas sin resultados válidos saveItinerariesError: "No se pudieron guardar los itinerarios: {err}" setDateError: "Error al establecer la fecha:" setGroupSizeError: "No se pudo establecer el tamaño del grupo:" @@ -47,11 +46,9 @@ actions: authTokenError: Error al obtener un token de autorización. confirmDeleteMonitoredTrip: ¿Desea eliminar este viaje? confirmDeletePlace: ¿Quiere eliminar este lugar? - emailVerificationResent: El mensaje de verificación de correo electrónico ha sido - reenviado. + emailVerificationResent: El mensaje de verificación de correo electrónico ha sido reenviado. genericError: "Se ha encontrado un error: {err}" - itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado - es posible. + itineraryExistenceCheckFailed: Comprobación de errores para ver si el viaje seleccionado es posible. preferencesSaved: Sus preferencias se han guardado. smsInvalidCode: El código introducido no es válido. Por favor, inténtelo de nuevo. smsResendThrottled: >- @@ -113,6 +110,7 @@ common: {co2} de CO₂ en {isMore, select, true {más} other {menos} } que conducir solo transfers: "{transfers, plural, =0 {} one {# transferencia} other {# transferencias}}" + linkOpensNewWindow: (Abre una nueva ventana) modes: bicycle_rent: Compartir bicicleta bike: Bicicleta @@ -160,7 +158,6 @@ common: tripDurationFormat: >- {hours, plural, =0 {} other {# h }}{minutes} min { seconds, plural, =0 {} other {# s}} - linkOpensNewWindow: (Abre una nueva ventana) components: A11yPrefs: accessibilityRoutingByDefault: Prefiera los viajes accesibles por defecto @@ -237,8 +234,7 @@ components: origin: origen planTripTooltip: Planificar viaje settings: Preferencias de viaje - validationMessage: "Por favor, defina los siguientes campos para planificar un\ - \ viaje: {issues}" + validationMessage: "Por favor, defina los siguientes campos para planificar un viaje: {issues}" BeforeSignInScreen: mainTitle: Iniciando sesión message: > @@ -366,11 +362,9 @@ components: description: El contenido que ha solicitado no está disponible. header: No se encontró el contenido NotificationPrefsPane: - description: Puede recibir notificaciones sobre los viajes que realiza con frecuencia. noneSelect: No enviar notificaciones notificationChannelPrompt: ¿Cómo desea recibir las notificaciones? - notificationEmailDetail: "Los correos electrónicos de notificación se enviarán\ - \ a:" + notificationEmailDetail: "Los correos electrónicos de notificación se enviarán a:" PhoneNumberEditor: changeNumber: Cambiar número de teléfono invalidCode: Introduzca 6 dígitos para el código de validación. @@ -503,8 +497,7 @@ components: Opciones y Preferencias del viaje SimpleRealtimeAnnotation: - usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo - real + usingRealtimeInfo: Este viaje utiliza información de tráfico y retrasos en tiempo real StackedPaneDisplay: savePreferences: Guardar preferencias StopScheduleTable: @@ -566,19 +559,16 @@ components: travelingAt: Viajando a {milesPerHour} vehicleName: Vehículo {vehicleNumber} TripBasicsPane: - checkingItineraryExistence: Comprobación de la existencia de itinerarios para - cada día de la semana… + checkingItineraryExistence: Comprobación de la existencia de itinerarios para cada día de la semana… selectAtLeastOneDay: Por favor, seleccione al menos un día para el seguimiento. tripDaysPrompt: ¿Qué días hace este viaje? - tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana - indicados anteriormente. + tripIsAvailableOnDaysIndicated: Su viaje está disponible en los días de la semana indicados anteriormente. tripNamePrompt: "Por favor, indique un nombre para este viaje:" tripNotAvailableOnDay: El viaje no está disponible el {repeatedDay} unsavedChangesExistingTrip: >- Todavía no ha guardado su viaje. Si abandona la página, los cambios se perderán. - unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página, - se perderá. + unsavedChangesNewTrip: Todavía no ha guardado su nuevo viaje. Si abandona la página, se perderá. TripNotificationsPane: advancedSettings: Configuración avanzada altRouteRecommended: Se recomienda una ruta alternativa o un punto de transferencia diff --git a/i18n/fr.yml b/i18n/fr.yml index 925933b69..29c3ee110 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -368,9 +368,6 @@ components: description: Le contenu que vous avez demandé n'est pas disponible. header: Contenu introuvable NotificationPrefsPane: - description: >- - Vous pouvez recevoir des notifications sur les trajets que vous effectuez - fréquemment. noneSelect: Ne pas me notifier notificationChannelPrompt: Comment voulez-vous recevoir vos notifications ? notificationEmailDetail: "Les courriers de notification seront envoyés à :" diff --git a/i18n/ko.yml b/i18n/ko.yml index a4d9f9afa..605c75f7a 100644 --- a/i18n/ko.yml +++ b/i18n/ko.yml @@ -335,7 +335,6 @@ components: description: 요청한 콘텐츠를 사용할 수 없습니다. header: 콘텐츠를 찾을 수 없음 NotificationPrefsPane: - description: 자주 가는 트립에 대한 알림을 받을 수 있습니다. noneSelect: 알림 거부 notificationChannelPrompt: 알림을 어떻게 받고 싶습니까? notificationEmailDetail: "알림 이메일이 다음으로 전송됩니다:" diff --git a/i18n/vi.yml b/i18n/vi.yml index 854e37905..64f48d2d3 100644 --- a/i18n/vi.yml +++ b/i18n/vi.yml @@ -343,9 +343,6 @@ components: description: Nội dung bạn yêu cầu không có sẵn. header: Không tìm thấy nội dung NotificationPrefsPane: - description: >- - Bạn có thể nhận được thông báo về các chuyến đi bạn thường xuyên thực - hiện. noneSelect: Đừng thông báo cho tôi notificationChannelPrompt: Bạn muốn nhận thông báo như thế nào? notificationEmailDetail: "Email thông báo sẽ được gửi đến:" diff --git a/i18n/zh.yml b/i18n/zh.yml index e44e03592..bc32777c4 100644 --- a/i18n/zh.yml +++ b/i18n/zh.yml @@ -335,7 +335,6 @@ components: description: 您要求的内容不存在. header: 未找到内容 NotificationPrefsPane: - description: 你可以收到关于你常用行程的通知. noneSelect: 不要通知我 notificationChannelPrompt: 您希望如何接收通知? notificationEmailDetail: "通知邮件将被发送至:" diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx index 4bee1cca9..ac9ea0ca8 100644 --- a/lib/components/user/notification-prefs-pane.tsx +++ b/lib/components/user/notification-prefs-pane.tsx @@ -53,9 +53,6 @@ const NotificationPrefsPane = ({ return (
-

- -

From 18aa10220ff8dbbf1a3fa1381f5a39cbcb7e7e7b Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 11 May 2023 16:56:11 -0400 Subject: [PATCH 02/80] refactor(NotificationPrefsPane): Rephrase the notification selector prompt. --- i18n/en-US.yml | 2 +- i18n/es.yml | 2 +- i18n/fr.yml | 2 +- i18n/ko.yml | 2 +- i18n/vi.yml | 2 +- i18n/zh.yml | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index e8b46ea69..e13f71b32 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -357,7 +357,7 @@ components: header: Content not found NotificationPrefsPane: noneSelect: Don't notify me - notificationChannelPrompt: How would you like to receive notifications? + notificationChannelPrompt: "Receive notifications about your saved trips via:" notificationEmailDetail: "Notification emails will be sent to:" PhoneNumberEditor: changeNumber: Change number diff --git a/i18n/es.yml b/i18n/es.yml index 29a962b6d..e6142f4fc 100644 --- a/i18n/es.yml +++ b/i18n/es.yml @@ -363,7 +363,7 @@ components: header: No se encontró el contenido NotificationPrefsPane: noneSelect: No enviar notificaciones - notificationChannelPrompt: ¿Cómo desea recibir las notificaciones? + notificationChannelPrompt: "Recibir notificaciones para sus viajes guardados por :" notificationEmailDetail: "Los correos electrónicos de notificación se enviarán a:" PhoneNumberEditor: changeNumber: Cambiar número de teléfono diff --git a/i18n/fr.yml b/i18n/fr.yml index 29c3ee110..4133097ed 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -369,7 +369,7 @@ components: header: Contenu introuvable NotificationPrefsPane: noneSelect: Ne pas me notifier - notificationChannelPrompt: Comment voulez-vous recevoir vos notifications ? + notificationChannelPrompt: "Recevoir des notifications sur vos trajets enregistrés par :" notificationEmailDetail: "Les courriers de notification seront envoyés à :" PhoneNumberEditor: changeNumber: Changer de numéro diff --git a/i18n/ko.yml b/i18n/ko.yml index 605c75f7a..71434375c 100644 --- a/i18n/ko.yml +++ b/i18n/ko.yml @@ -336,7 +336,7 @@ components: header: 콘텐츠를 찾을 수 없음 NotificationPrefsPane: noneSelect: 알림 거부 - notificationChannelPrompt: 알림을 어떻게 받고 싶습니까? + notificationChannelPrompt: "저장된 여행의 알림을 받는 방법:" notificationEmailDetail: "알림 이메일이 다음으로 전송됩니다:" PhoneNumberEditor: changeNumber: 번호 변경 diff --git a/i18n/vi.yml b/i18n/vi.yml index 64f48d2d3..694873eb5 100644 --- a/i18n/vi.yml +++ b/i18n/vi.yml @@ -344,7 +344,7 @@ components: header: Không tìm thấy nội dung NotificationPrefsPane: noneSelect: Đừng thông báo cho tôi - notificationChannelPrompt: Bạn muốn nhận thông báo như thế nào? + notificationChannelPrompt: "Nhận thông báo về các chuyến đi đã lưu bằng:" notificationEmailDetail: "Email thông báo sẽ được gửi đến:" PhoneNumberEditor: changeNumber: Thay đổi số điện thoại diff --git a/i18n/zh.yml b/i18n/zh.yml index bc32777c4..c83ce0d63 100644 --- a/i18n/zh.yml +++ b/i18n/zh.yml @@ -336,7 +336,7 @@ components: header: 未找到内容 NotificationPrefsPane: noneSelect: 不要通知我 - notificationChannelPrompt: 您希望如何接收通知? + notificationChannelPrompt: "如何接收已保存行程的通知:" notificationEmailDetail: "通知邮件将被发送至:" PhoneNumberEditor: changeNumber: 更改电话号码 From 148190bb733d66597b139701b568b9c3b1531b66 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Thu, 11 May 2023 18:18:15 -0400 Subject: [PATCH 03/80] refactor(NotificationPrefsPane): Update layout to use checkboxes (rough) --- .../user/notification-prefs-pane.tsx | 99 +++++++++++-------- 1 file changed, 60 insertions(+), 39 deletions(-) diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx index ac9ea0ca8..38dc4713c 100644 --- a/lib/components/user/notification-prefs-pane.tsx +++ b/lib/components/user/notification-prefs-pane.tsx @@ -29,7 +29,7 @@ interface Props extends FormikProps { } } -const allowedNotificationChannels = ['email', 'sms', 'none'] +const allowedNotificationChannels = ['email', 'sms'] // Styles // HACK: Preserve container height. @@ -38,6 +38,22 @@ const Details = styled.div` margin-bottom: 15px; ` +const NotificationOption = styled.div` + align-items: flex-start; + display: flex; + gap: 1ch; + margin-bottom: 10px; + + label { + display: block; + font-weight: normal; + margin-bottom: 0; + } + label::first-letter { + text-transform: uppercase; + } +` + /** * User notification preferences pane. */ @@ -53,44 +69,49 @@ const NotificationPrefsPane = ({ return (
- - - - - - {allowedNotificationChannels.map((type) => { - // TODO: If removing the Save/Cancel buttons on the account screen, - // persist changes immediately when onChange is triggered. - const inputId = `notification-channel-${type}` - const isChecked = notificationChannel === type - return ( - - {/* Note: labels are placed after inputs so that the CSS focus selector can be easily applied. */} - - - - ) - })} - - +
+ + + + {allowedNotificationChannels.map((type) => { + // TODO: If removing the Save/Cancel buttons on the account screen, + // persist changes immediately when onChange is triggered. + const inputId = `notification-channel-${type}` + return ( + + {' '} + + {type === 'email' ? ( + <> + + {email} + + ) : ( + <> + + + + )} + + + ) + })} +
{notificationChannel === 'email' && ( From 5d04a3953567421558c8e9d6a52a0c1e20d2f66f Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 12 May 2023 11:00:09 -0400 Subject: [PATCH 04/80] refactor(NotificationPrefsPane): Improve layout for phone number description --- i18n/en-US.yml | 1 - i18n/es.yml | 1 - i18n/fr.yml | 1 - i18n/ko.yml | 1 - i18n/vi.yml | 1 - i18n/zh.yml | 1 - .../user/notification-prefs-pane.tsx | 51 +++++--------- lib/components/user/phone-number-editor.tsx | 66 +++++++++---------- 8 files changed, 49 insertions(+), 74 deletions(-) diff --git a/i18n/en-US.yml b/i18n/en-US.yml index e13f71b32..959eb6980 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -370,7 +370,6 @@ components: prompt: "Enter your phone number for SMS notifications:" requestNewCode: Request a new code sendVerificationText: Send verification text - smsDetail: "SMS notifications will be sent to:" verificationCode: "Verification code:" verificationInstructions: > Please check the SMS messaging app on your mobile phone for a text message diff --git a/i18n/es.yml b/i18n/es.yml index e6142f4fc..9cfc2d409 100644 --- a/i18n/es.yml +++ b/i18n/es.yml @@ -378,7 +378,6 @@ components: texto: requestNewCode: Solicitar un nuevo código sendVerificationText: Enviar texto de verificación - smsDetail: "Las notificaciones por mensaje de texto se enviarán a:" verificationCode: "Código de verificación:" verificationInstructions: > Por favor, compruebe en la aplicación de mensajería de texto de su diff --git a/i18n/fr.yml b/i18n/fr.yml index 4133097ed..e3bfde8e1 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -382,7 +382,6 @@ components: prompt: "Entrez votre numéro de téléphone pour les SMS de notification :" requestNewCode: Envoyer un nouveau code sendVerificationText: Envoyer le SMS de vérification - smsDetail: "Les SMS de notification seront envoyés au :" verificationCode: "Code de vérification :" verificationInstructions: > Un SMS vous a été envoyé avec un code de vérification. Veuillez taper ce diff --git a/i18n/ko.yml b/i18n/ko.yml index 71434375c..627b4a9de 100644 --- a/i18n/ko.yml +++ b/i18n/ko.yml @@ -348,7 +348,6 @@ components: prompt: "SMS 알림 수신을 위한 전화번호를 입력하세요:" requestNewCode: 새 코드 요청 sendVerificationText: 확인 텍스트 전송 - smsDetail: "SMS 알림이 다음으로 전송됩니다:" verificationCode: "확인 코드:" verificationInstructions: | 휴대폰의 SMS 메시지 앱에서 인증 코드를 확인하고 아래에 코드를 입력하세요(코드는 10분 후에 만료됩니다). diff --git a/i18n/vi.yml b/i18n/vi.yml index 694873eb5..7b582ca5c 100644 --- a/i18n/vi.yml +++ b/i18n/vi.yml @@ -356,7 +356,6 @@ components: prompt: "Nhập số điện thoại của bạn để nhận thông báo SMS:" requestNewCode: Yêu cầu một mã mới sendVerificationText: Gửi văn bản xác minh - smsDetail: "Thông báo SMS sẽ được gửi đến:" verificationCode: "Mã xác nhận:" verificationInstructions: > Vui lòng kiểm tra ứng dụng nhắn tin SMS trên điện thoại di động của bạn để diff --git a/i18n/zh.yml b/i18n/zh.yml index c83ce0d63..59f0f3fec 100644 --- a/i18n/zh.yml +++ b/i18n/zh.yml @@ -348,7 +348,6 @@ components: prompt: "输入你的电话号码以便收到短信通知:" requestNewCode: 申请一个新的代码 sendVerificationText: 发送验证短信 - smsDetail: "短信通知将被发送到:" verificationCode: "验证码:" verificationInstructions: | 请检查您手机上的短信应用查看是否有验证码的短信并输入以下代码 (代码在10分钟后失效). diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx index 38dc4713c..d929c512a 100644 --- a/lib/components/user/notification-prefs-pane.tsx +++ b/lib/components/user/notification-prefs-pane.tsx @@ -1,12 +1,9 @@ import { Field, FormikProps } from 'formik' import { FormattedMessage } from 'react-intl' -import { FormGroup } from 'react-bootstrap' import React, { Fragment } from 'react' import styled from 'styled-components' -import ButtonGroup from '../util/button-group' - -import { FakeLabel, InlineStatic } from './styled' +import { labelStyle } from './styled' import { PhoneVerificationSubmitHandler } from './phone-verification-form' import PhoneNumberEditor, { PhoneCodeRequestHandler @@ -32,12 +29,6 @@ interface Props extends FormikProps { const allowedNotificationChannels = ['email', 'sms'] // Styles -// HACK: Preserve container height. -const Details = styled.div` - min-height: 60px; - margin-bottom: 15px; -` - const NotificationOption = styled.div` align-items: flex-start; display: flex; @@ -54,6 +45,13 @@ const NotificationOption = styled.div` } ` +const NotificationOptions = styled.fieldset` + /* Format like labels. */ + legend { + ${labelStyle} + } +` + /** * User notification preferences pane. */ @@ -62,14 +60,13 @@ const NotificationPrefsPane = ({ onRequestPhoneVerificationCode, onSendPhoneVerificationCode, phoneFormatOptions, - values: userData // Formik prop + values: userData // Formik prop // TODO: remove }: Props): JSX.Element => { const { email, isPhoneNumberVerified, phoneNumber } = loggedInUser - const { notificationChannel } = userData return (
-
+ @@ -77,9 +74,11 @@ const NotificationPrefsPane = ({ // TODO: If removing the Save/Cancel buttons on the account screen, // persist changes immediately when onChange is triggered. const inputId = `notification-channel-${type}` + const inputDescriptionId = `${inputId}-description` return ( - {email} + + {email} + ) : ( <> @@ -99,6 +100,7 @@ const NotificationPrefsPane = ({ ) })} -
-
- {notificationChannel === 'email' && ( - - - - - {email} - - )} - {notificationChannel === 'sms' && ( - - )} -
+
) } diff --git a/lib/components/user/phone-number-editor.tsx b/lib/components/user/phone-number-editor.tsx index 7e9113a32..4fef908f4 100644 --- a/lib/components/user/phone-number-editor.tsx +++ b/lib/components/user/phone-number-editor.tsx @@ -10,7 +10,7 @@ import { isBlank } from '../../util/ui' import InvisibleA11yLabel from '../util/invisible-a11y-label' import SpanWithSpace from '../util/span-with-space' -import { ControlStrip, FakeLabel, InlineStatic } from './styled' +import { ControlStrip } from './styled' import PhoneChangeForm, { PhoneChangeSubmitHandler } from './phone-change-form' import PhoneVerificationForm, { PhoneVerificationSubmitHandler @@ -19,7 +19,7 @@ import PhoneVerificationForm, { export type PhoneCodeRequestHandler = (phoneNumber: string) => void const PlainLink = styled(SpanWithSpace)` - color: inherit; + color: #757575; &:hover { text-decoration: none; } @@ -34,6 +34,7 @@ const blankState = { } interface Props { + descriptorId: string initialPhoneNumber?: string initialPhoneNumberVerified?: boolean intl: IntlShape @@ -169,7 +170,7 @@ class PhoneNumberEditor extends Component { } render() { - const { initialPhoneNumber, phoneFormatOptions } = this.props + const { descriptorId, initialPhoneNumber, phoneFormatOptions } = this.props const { isEditing, phoneNumberReceived, @@ -220,9 +221,6 @@ class PhoneNumberEditor extends Component { return ( <> - - {ariaAlertContent} - {isEditing ? ( { /> ) : ( - - - - - - {shownPhoneNumber} - - {/* Invisible parentheses for no-CSS and screen readers */} - ( - {isPending ? ( - - - - ) : ( - - - - )} - ) - + + {shownPhoneNumber} + + {/* Invisible parentheses for no-CSS and screen readers */} + ( + {isPending ? ( + + + + ) : ( + + + + )} + ) )} + + {ariaAlertContent} + {isPending && !isEditing && ( Date: Fri, 12 May 2023 12:00:52 -0400 Subject: [PATCH 05/80] refactor(NotificationPrefsPane): Improve layout. --- .../user/notification-prefs-pane.tsx | 23 ++++++++++++------- lib/components/user/phone-number-editor.tsx | 10 +++----- 2 files changed, 18 insertions(+), 15 deletions(-) diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx index d929c512a..0e72a4db5 100644 --- a/lib/components/user/notification-prefs-pane.tsx +++ b/lib/components/user/notification-prefs-pane.tsx @@ -32,9 +32,14 @@ const allowedNotificationChannels = ['email', 'sms'] const NotificationOption = styled.div` align-items: flex-start; display: flex; - gap: 1ch; margin-bottom: 10px; + /* Use bootstrap's spacing between checkbox and label */ + & > span:first-child { + flex-shrink: 0; + width: 20px; + } + label { display: block; font-weight: normal; @@ -77,13 +82,15 @@ const NotificationPrefsPane = ({ const inputDescriptionId = `${inputId}-description` return ( - {' '} + + + {type === 'email' ? ( <> diff --git a/lib/components/user/phone-number-editor.tsx b/lib/components/user/phone-number-editor.tsx index 4fef908f4..62f9c33e4 100644 --- a/lib/components/user/phone-number-editor.tsx +++ b/lib/components/user/phone-number-editor.tsx @@ -8,7 +8,6 @@ import styled from 'styled-components' import { getAriaPhoneNumber } from '../../util/a11y' import { isBlank } from '../../util/ui' import InvisibleA11yLabel from '../util/invisible-a11y-label' -import SpanWithSpace from '../util/span-with-space' import { ControlStrip } from './styled' import PhoneChangeForm, { PhoneChangeSubmitHandler } from './phone-change-form' @@ -18,7 +17,7 @@ import PhoneVerificationForm, { export type PhoneCodeRequestHandler = (phoneNumber: string) => void -const PlainLink = styled(SpanWithSpace)` +const PlainLink = styled.a` color: #757575; &:hover { text-decoration: none; @@ -232,15 +231,12 @@ class PhoneNumberEditor extends Component { ) : ( + {/* Use an anchor so that the aria-label applies and phone actions can be performed, + if necessary. Styling will make the text appear plain (mostly). */} {shownPhoneNumber} From 08fee5bcf3db667ffe92626df52f1f4f090b3791 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 12 May 2023 12:33:14 -0400 Subject: [PATCH 06/80] refactor: Refactor fieldset and color styles. --- .../user/monitored-trip/trip-basics-pane.tsx | 9 ++------ .../trip-notifications-pane.tsx | 15 +++---------- .../user/notification-prefs-pane.tsx | 22 ++++++++----------- lib/components/user/phone-number-editor.tsx | 3 ++- lib/components/user/styled.ts | 15 ++++++------- lib/components/util/button-group.tsx | 11 ++-------- 6 files changed, 25 insertions(+), 50 deletions(-) diff --git a/lib/components/user/monitored-trip/trip-basics-pane.tsx b/lib/components/user/monitored-trip/trip-basics-pane.tsx index 3ab97bf9e..b2aa897cc 100644 --- a/lib/components/user/monitored-trip/trip-basics-pane.tsx +++ b/lib/components/user/monitored-trip/trip-basics-pane.tsx @@ -18,9 +18,9 @@ import styled from 'styled-components' import type { IntlShape, WrappedComponentProps } from 'react-intl' import * as userActions from '../../../actions/user' +import { FieldSet } from '../styled' import { getErrorStates } from '../../../util/ui' import { getFormattedDayOfWeekPlural } from '../../../util/monitored-trip' -import { labelStyle } from '../styled' import FormattedDayOfWeek from '../../util/formatted-day-of-week' import FormattedDayOfWeekCompact from '../../util/formatted-day-of-week-compact' import FormattedValidationError from '../../util/formatted-validation-error' @@ -65,12 +65,7 @@ const ALL_DAYS = [ ] as const // Styles. -const AvailableDays = styled.fieldset` - /* Format like labels. */ - legend { - ${labelStyle} - } - +const AvailableDays = styled(FieldSet)` & > span { border: 1px solid #ccc; border-left: none; diff --git a/lib/components/user/monitored-trip/trip-notifications-pane.tsx b/lib/components/user/monitored-trip/trip-notifications-pane.tsx index a6702f08a..1428b8c22 100644 --- a/lib/components/user/monitored-trip/trip-notifications-pane.tsx +++ b/lib/components/user/monitored-trip/trip-notifications-pane.tsx @@ -5,6 +5,7 @@ import { FormattedMessage, IntlShape, useIntl } from 'react-intl' import React, { Component, ComponentType, FormEvent, ReactNode } from 'react' import styled from 'styled-components' +import { FieldSet } from '../styled' import { IconWithText } from '../../util/styledIcon' // Element styles @@ -36,16 +37,6 @@ const Summary = styled.summary` margin-bottom: 5px; ` -const NotificationSettings = styled.fieldset` - /* Format like labels. */ - legend { - border: none; - font-size: inherit; - font-weight: 700; - margin-bottom: 5px; - } -` - /** * A label followed by a dropdown control. */ @@ -214,7 +205,7 @@ class TripNotificationsPane extends Component { ) } else { notificationSettingsContent = ( - +
{
- + ) } diff --git a/lib/components/user/notification-prefs-pane.tsx b/lib/components/user/notification-prefs-pane.tsx index 0e72a4db5..5d95db2d2 100644 --- a/lib/components/user/notification-prefs-pane.tsx +++ b/lib/components/user/notification-prefs-pane.tsx @@ -3,7 +3,9 @@ import { FormattedMessage } from 'react-intl' import React, { Fragment } from 'react' import styled from 'styled-components' -import { labelStyle } from './styled' +import { GRAY_ON_WHITE } from '../util/colors' + +import { FieldSet } from './styled' import { PhoneVerificationSubmitHandler } from './phone-verification-form' import PhoneNumberEditor, { PhoneCodeRequestHandler @@ -34,7 +36,7 @@ const NotificationOption = styled.div` display: flex; margin-bottom: 10px; - /* Use bootstrap's spacing between checkbox and label */ + /* Match bootstrap's spacing between checkbox and label */ & > span:first-child { flex-shrink: 0; width: 20px; @@ -48,12 +50,8 @@ const NotificationOption = styled.div` label::first-letter { text-transform: uppercase; } -` - -const NotificationOptions = styled.fieldset` - /* Format like labels. */ - legend { - ${labelStyle} + label + span { + color: ${GRAY_ON_WHITE}; } ` @@ -71,7 +69,7 @@ const NotificationPrefsPane = ({ return (
- +
@@ -97,9 +95,7 @@ const NotificationPrefsPane = ({ - - {email} - + {email} ) : ( <> @@ -120,7 +116,7 @@ const NotificationPrefsPane = ({ ) })} - +
) } diff --git a/lib/components/user/phone-number-editor.tsx b/lib/components/user/phone-number-editor.tsx index 62f9c33e4..b53d142de 100644 --- a/lib/components/user/phone-number-editor.tsx +++ b/lib/components/user/phone-number-editor.tsx @@ -6,6 +6,7 @@ import React, { Component, createRef, Fragment } from 'react' import styled from 'styled-components' import { getAriaPhoneNumber } from '../../util/a11y' +import { GRAY_ON_WHITE } from '../util/colors' import { isBlank } from '../../util/ui' import InvisibleA11yLabel from '../util/invisible-a11y-label' @@ -18,7 +19,7 @@ import PhoneVerificationForm, { export type PhoneCodeRequestHandler = (phoneNumber: string) => void const PlainLink = styled.a` - color: #757575; + color: ${GRAY_ON_WHITE}; &:hover { text-decoration: none; } diff --git a/lib/components/user/styled.ts b/lib/components/user/styled.ts index 092dfdbd8..ae2c07e0d 100644 --- a/lib/components/user/styled.ts +++ b/lib/components/user/styled.ts @@ -77,7 +77,7 @@ export const TripPanelFooter = styled(Panel.Footer)` ` /** Formats non-