Skip to content

Commit

Permalink
refactor(NotificationPrefsPane): Improve CSS and markup.
Browse files Browse the repository at this point in the history
  • Loading branch information
binh-dam-ibigroup committed Feb 8, 2023
1 parent d7e0de0 commit 8868da6
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 21 deletions.
27 changes: 6 additions & 21 deletions lib/components/user/notification-prefs-pane.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// @ts-expect-error Package yup does not have type declarations.
import * as yup from 'yup'
import { ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
import { Field, Formik, FormikProps } from 'formik'
import { FormattedMessage } from 'react-intl'
import { Formik, FormikProps } from 'formik'
import React, { Fragment } from 'react'
import styled from 'styled-components'

Expand Down Expand Up @@ -50,8 +50,6 @@ const codeValidationSchema = yup.object({
* User notification preferences pane.
*/
const NotificationPrefsPane = ({
handleBlur, // Formik prop
handleChange, // Formik prop
loggedInUser,
onRequestPhoneVerificationCode,
onSendPhoneVerificationCode,
Expand All @@ -74,38 +72,25 @@ const NotificationPrefsPane = ({
<legend>
<FormattedMessage id="components.NotificationPrefsPane.notificationChannelPrompt" />
</legend>
{allowedNotificationChannels.map((type, index) => {
{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 (
<Fragment key={type}>
{/* Note: labels are placed after inputs so that the CSS focus selector can be easily applied. */}
<input
checked={isChecked}
<Field
id={inputId}
name="notificationChannel"
onBlur={handleBlur}
onChange={handleChange}
type="radio"
value={type}
/>
<label
className={`btn ${
isChecked ? 'btn-primary active' : 'btn-default'
}`}
htmlFor={inputId}
// An inline style needs to be used for the first element.
// The bootstrap CSS will other override .btn:first-child content.
style={
index === 0
? {
borderBottomLeftRadius: '4px',
borderTopLeftRadius: '4px'
}
: {}
className={
isChecked ? 'btn btn-primary active' : 'btn btn-default'
}
htmlFor={inputId}
>
{type === 'email' ? (
<FormattedMessage id="common.notifications.email" />
Expand Down
11 changes: 11 additions & 0 deletions lib/components/util/button-group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,17 @@ const ButtonGroup = styled.fieldset.attrs({
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
/* Without !important, round borders get overwritten by bootstrap's CSS. */
label:first-of-type {
border-bottom-left-radius: 4px !important;
border-top-left-radius: 4px !important;
}
/* This is to have the between-labels border to be 1px. */
label:not(label:first-of-type) {
margin-left: -1px;
}
`

export default ButtonGroup

0 comments on commit 8868da6

Please sign in to comment.