From 85795068a3bf75d1373c6d4c8c5ad643fcf3802e Mon Sep 17 00:00:00 2001 From: Vansh Baghel <103327712+Vansh-Baghel@users.noreply.github.com> Date: Thu, 27 Apr 2023 13:37:21 +0530 Subject: [PATCH] feat(client): Customized Radio Buttons in settings page (#50094) Co-authored-by: Bruce B --- client/src/assets/icons/toggle-check.tsx | 1 + .../src/components/helpers/toggle-button.tsx | 74 ----------------- .../settings/toggle-button-setting.tsx | 9 +-- .../settings/toggle-radio-setting.tsx | 6 +- .../components/settings/toggle-setting.css | 79 ++++++++++--------- cypress/support/commands.ts | 3 +- 6 files changed, 51 insertions(+), 121 deletions(-) delete mode 100644 client/src/components/helpers/toggle-button.tsx diff --git a/client/src/assets/icons/toggle-check.tsx b/client/src/assets/icons/toggle-check.tsx index 79b768cd7b7..2c160666f70 100644 --- a/client/src/assets/icons/toggle-check.tsx +++ b/client/src/assets/icons/toggle-check.tsx @@ -1,4 +1,5 @@ import React from 'react'; + function ToggleCheck( props: JSX.IntrinsicAttributes & React.SVGProps ): JSX.Element { diff --git a/client/src/components/helpers/toggle-button.tsx b/client/src/components/helpers/toggle-button.tsx deleted file mode 100644 index 89e1892f2b3..00000000000 --- a/client/src/components/helpers/toggle-button.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { - ToggleButtonGroup as BSBG, - ToggleButton as TB -} from '@freecodecamp/react-bootstrap'; -import React from 'react'; - -import './toggle-button.css'; -import Spacer from '../../assets/icons/spacer'; -import ToggleCheck from '../../assets/icons/toggle-check'; - -interface ButtonProps { - name: string; - offLabel: string; - onChange: (value: string) => void; - onLabel: string; - value: boolean; - condition?: boolean; -} - -type ActiveClass = Pick; - -function getActiveClass(condition: ActiveClass | unknown) { - return condition ? 'active' : 'not-active'; -} - -export default function ToggleButton({ - name, - onChange, - value, - onLabel = 'On', - offLabel = 'Off' -}: ButtonProps): JSX.Element { - const checkIconStyle = { - height: '15px', - paddingTop: '5', - width: '20px' - }; - return ( - - - {value ? ( - - ) : ( - - )} - {onLabel} - - - {offLabel} - {!value ? ( - - ) : ( - - )} - - - ); -} - -ToggleButton.displayName = 'ToggleButton'; diff --git a/client/src/components/settings/toggle-button-setting.tsx b/client/src/components/settings/toggle-button-setting.tsx index 46a4ee600d6..1adc758a575 100644 --- a/client/src/components/settings/toggle-button-setting.tsx +++ b/client/src/components/settings/toggle-button-setting.tsx @@ -4,11 +4,6 @@ import type { ToggleSettingProps } from './toggle-radio-setting'; import '../helpers/toggle-button.css'; import './toggle-setting.css'; -const checkIconStyle = { - height: '1rem', - width: '1.25rem' -}; - export default function ToggleButtonSetting({ action, explain, @@ -43,7 +38,7 @@ export default function ToggleButtonSetting({ > {restProps.onLabel} - {flag ? : null} + {flag ? : null} diff --git a/client/src/components/settings/toggle-radio-setting.tsx b/client/src/components/settings/toggle-radio-setting.tsx index a6b67d075a1..336367514a0 100644 --- a/client/src/components/settings/toggle-radio-setting.tsx +++ b/client/src/components/settings/toggle-radio-setting.tsx @@ -41,7 +41,7 @@ export default function ToggleRadioSetting({ {explain ?

{explain}

: null}
-
diff --git a/client/src/components/settings/toggle-setting.css b/client/src/components/settings/toggle-setting.css index a530e67c77a..906a2912e8b 100644 --- a/client/src/components/settings/toggle-setting.css +++ b/client/src/components/settings/toggle-setting.css @@ -78,52 +78,57 @@ cursor: default; } -.toggle-radio-group { - display: flex; - align-items: start; -} - .toggle-radio-group label { - font-weight: normal; - display: flex; + display: inline-flex; align-items: center; } -.toggle-radio-group input { - -webkit-appearance: none; - appearance: none; - height: 0.8rem; - width: 0.8rem; - border-radius: 50%; - background: transparent; - border: 2px solid var(--secondary-color); - margin: 0; -} - -.toggle-radio-group [data-checked='true'] input { - background: var(--secondary-color); -} - -.toggle-radio-group [data-checked='true'] span { - font-weight: 700; -} - -.toggle-radio-group input:focus-visible { - outline-offset: 1px; -} - -.toggle-radio-group label[data-checked='false']:hover, -.toggle-radio-group label[data-checked='false'] input:hover { - cursor: pointer; -} - .toggle-radio-group label + label { margin-inline-start: 2rem; } .toggle-radio-group input { - margin-inline-end: 0.35rem; - accent-color: var(--secondary-color); + position: absolute; + left: -9999px; +} + +.custom-circle { + margin-inline-end: 8px; + position: relative; + display: inline-block; + min-width: calc(0.889em + 4px); + min-height: calc(0.889em + 4px); + max-width: calc(0.889em + 4px); + max-height: calc(0.889em + 4px); + border-radius: 50%; + background-color: var(--secondary-background); + border: 2px solid var(--primary-color); +} + +.toggle-radio-group input:focus-visible + .custom-circle { + outline: 3px solid var(--focus-outline-color); +} + +.toggle-radio-group input:checked + .custom-circle:after { + content: ''; + width: 0.556rem; + height: 0.556rem; + position: absolute; + top: 50%; + left: 50%; + background-color: var(--primary-color); + border-radius: 50%; + transform: translate(-50%, -50%); +} + +.toggle-radio-group span { + font-weight: 500; +} + +/* checkIconStyle css */ +.checkIcon { + height: 1rem; + width: 1.25rem; } @media (max-width: 35rem) { diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 0907b0bbde3..13e49992413 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -17,7 +17,8 @@ const setPrivacyTogglesToPublic = () => { cy.get('#privacy-settings') .find('[type=radio][value=2]') .each(element => { - cy.wrap(element).click().should('be.checked'); + cy.wrap(element).parent().click(); + cy.wrap(element).should('be.checked'); }); cy.get('[data-cy=save-privacy-settings]').click(); cy.get('#honesty-policy').find('button').click();