diff --git a/src/components/Connection/GRDFConnect/StepConsent.tsx b/src/components/Connection/GRDFConnect/StepConsent.tsx index d5c8dc9bd031dc32dc504e8ffb9bef3b5afec84c..988a84c685c5a5b663af1b1b60feafe403483ce9 100644 --- a/src/components/Connection/GRDFConnect/StepConsent.tsx +++ b/src/components/Connection/GRDFConnect/StepConsent.tsx @@ -1,3 +1,4 @@ +import { Checkbox } from '@material-ui/core' import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' import React from 'react' @@ -29,10 +30,8 @@ const StepConsent = ({ <li>{t('auth.grdfgrandlyon.consentLi2')}</li> </ul> <label htmlFor="dataConsentGrdf" className="inline"> - <input + <Checkbox id="dataConsentGrdf" - type="checkbox" - className="inputCheckbox" checked={formConsent.dataConsent} onChange={e => setFormConsent(prev => ({ ...prev, dataConsent: e.target.checked })) @@ -46,10 +45,8 @@ const StepConsent = ({ /> </label> <label htmlFor="pceConfirm" className="inline"> - <input + <Checkbox id="pceConfirm" - type="checkbox" - className="inputCheckbox" checked={formConsent.pceConfirm} onChange={e => setFormConsent(prev => ({ ...prev, pceConfirm: e.target.checked })) diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx index 25ebb86766ade222562054695f903476050c1248..500c3b0b4886de9a3eb42471be7b799c387575b0 100644 --- a/src/components/Connection/SGEConnect/StepConsent.tsx +++ b/src/components/Connection/SGEConnect/StepConsent.tsx @@ -1,3 +1,4 @@ +import { Checkbox } from '@material-ui/core' import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' import { SgeStore } from 'models' import React from 'react' @@ -25,10 +26,8 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => { <li>{t('auth.enedissgegrandlyon.consentLi4')}</li> </ul> <label htmlFor="dataConsentSge" className="inline"> - <input + <Checkbox id="dataConsentSge" - type="checkbox" - className="inputCheckbox" onChange={e => onChange('dataConsent', e.target.checked)} checked={sgeState.dataConsent} required @@ -40,10 +39,8 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => { /> </label> <label htmlFor="pdlConfirm" className="inline"> - <input + <Checkbox id="pdlConfirm" - type="checkbox" - className="inputCheckbox" onChange={e => onChange('pdlConfirm', e.target.checked)} checked={sgeState.pdlConfirm} required diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap index 15ee2a27708c1fc5068d9e81c4be12098ab43427..a2655d98873bd021555082fb5dfa12ea70622cdd 100644 --- a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap +++ b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap @@ -35,12 +35,36 @@ exports[`StepConsent component should be rendered correctly 1`] = ` class="inline" for="dataConsentSge" > - <input - class="inputCheckbox" - id="dataConsentSge" - required="" - type="checkbox" - /> + <span + aria-disabled="false" + class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" + > + <span + class="MuiIconButton-label" + > + <input + class="PrivateSwitchBase-input-4" + data-indeterminate="false" + id="dataConsentSge" + required="" + type="checkbox" + value="" + /> + <svg + aria-hidden="true" + class="MuiSvgIcon-root" + focusable="false" + viewBox="0 0 24 24" + > + <path + d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </span> <span> auth.enedissgegrandlyon.consentCheck1 </span> @@ -49,12 +73,36 @@ exports[`StepConsent component should be rendered correctly 1`] = ` class="inline" for="pdlConfirm" > - <input - class="inputCheckbox" - id="pdlConfirm" - required="" - type="checkbox" - /> + <span + aria-disabled="false" + class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" + > + <span + class="MuiIconButton-label" + > + <input + class="PrivateSwitchBase-input-4" + data-indeterminate="false" + id="pdlConfirm" + required="" + type="checkbox" + value="" + /> + <svg + aria-hidden="true" + class="MuiSvgIcon-root" + focusable="false" + viewBox="0 0 24 24" + > + <path + d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </span> <span> auth.enedissgegrandlyon.consentCheck2 </span> diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss index 45672fe10ed8d854adca9737cb44792e6e5e7da6..ca34a3ae309c71f946d441f3020d6f35fe5657e4 100644 --- a/src/components/Connection/connection.scss +++ b/src/components/Connection/connection.scss @@ -111,7 +111,7 @@ } cursor: pointer; - span span { + span.gold { color: $gold-shadow; } } diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx index fb33e386b6c39ccc12a2476a2d976a2bbd5785c8..4a282b461713d2a063998d3f4fc6fca9f4a0fe95 100644 --- a/src/components/Options/ExportData/ExportData.tsx +++ b/src/components/Options/ExportData/ExportData.tsx @@ -3,6 +3,7 @@ import { AccordionDetails, AccordionSummary, Button, + Checkbox, } from '@material-ui/core' import chevronDown from 'assets/icons/ico/chevron-down.svg' import exportIcon from 'assets/icons/ico/export.svg' @@ -63,21 +64,6 @@ const ExportData = () => { } }, [consumptionService]) - const fluidCheckbox = () => - exportableFluids.map(fluidType => ( - <label htmlFor={`export-${fluidType}`} key={fluidType}> - <input - id={`export-${fluidType}`} - type="checkbox" - className="inputCheckbox" - value={fluidType} - onChange={() => handleChange(fluidType)} - checked={answer.includes(fluidType)} - /> - {t(`FLUID.${FluidType[fluidType]}.LABEL`)} - </label> - )) - const handleDone = (e?: unknown) => { if (e) { setHasError(true) @@ -123,7 +109,17 @@ const ExportData = () => { <div className="text-15-normal grey">{t('export.no_data')}</div> ) : ( <> - {fluidCheckbox()} + {exportableFluids.map(fluidType => ( + <label htmlFor={`export-${fluidType}`} key={fluidType}> + <Checkbox + id={`export-${fluidType}`} + value={fluidType} + onChange={() => handleChange(fluidType)} + checked={answer.includes(fluidType)} + /> + {t(`FLUID.${FluidType[fluidType]}.LABEL`)} + </label> + ))} <Button aria-label={t( 'profile_type.accessibility.button_export_data' diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx index 2fe23fa17f37b8dd1f728184ef9850f3a4540526..5521249aa30d09ccd3c33b450646421ccdcb2017 100644 --- a/src/components/Terms/TermsView.tsx +++ b/src/components/Terms/TermsView.tsx @@ -1,4 +1,4 @@ -import { Button } from '@material-ui/core' +import { Button, Checkbox } from '@material-ui/core' import { useClient } from 'cozy-client' import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n' import React, { useCallback, useState } from 'react' @@ -54,10 +54,8 @@ const TermsView = () => { <div className="terms-content"> <DataShareConsentContent /> <label htmlFor="dataConsent" className="inline"> - <input + <Checkbox id="dataConsent" - type="checkbox" - className="inputCheckbox" onChange={e => setDataConsentValidation(e.target.checked)} checked={dataConsentValidation} required @@ -65,10 +63,8 @@ const TermsView = () => { {t('dataShare.validDataConsent')} </label> <label htmlFor="gcu" className="inline"> - <input + <Checkbox id="gcu" - type="checkbox" - className="inputCheckbox" onChange={e => setGCUValidation(e.target.checked)} checked={GCUValidation} required @@ -96,10 +92,8 @@ const TermsView = () => { </label> {!sendAnalysisNotification && ( <label htmlFor="newsletter" className="inline"> - <input + <Checkbox id="newsletter" - type="checkbox" - className="inputCheckbox" onChange={e => setAcceptNewsletter(e.target.checked)} checked={acceptNewsletter} /> diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap index 7652987e460702ec4bd09dd8ecc41dc71c248a0b..179095095f100cf6168e34701f9b6f4a8e71d91c 100644 --- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap +++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap @@ -104,24 +104,72 @@ exports[`TermsView component should be rendered correctly 1`] = ` class="inline" for="dataConsent" > - <input - class="inputCheckbox" - id="dataConsent" - required="" - type="checkbox" - /> + <span + aria-disabled="false" + class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" + > + <span + class="MuiIconButton-label" + > + <input + class="PrivateSwitchBase-input-4" + data-indeterminate="false" + id="dataConsent" + required="" + type="checkbox" + value="" + /> + <svg + aria-hidden="true" + class="MuiSvgIcon-root" + focusable="false" + viewBox="0 0 24 24" + > + <path + d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </span> dataShare.validDataConsent </label> <label class="inline" for="gcu" > - <input - class="inputCheckbox" - id="gcu" - required="" - type="checkbox" - /> + <span + aria-disabled="false" + class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiCheckbox-root MuiCheckbox-colorSecondary MuiIconButton-colorSecondary" + > + <span + class="MuiIconButton-label" + > + <input + class="PrivateSwitchBase-input-4" + data-indeterminate="false" + id="gcu" + required="" + type="checkbox" + value="" + /> + <svg + aria-hidden="true" + class="MuiSvgIcon-root" + focusable="false" + viewBox="0 0 24 24" + > + <path + d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" + /> + </svg> + </span> + <span + class="MuiTouchRipple-root" + /> + </span> <div> <span> dataShare.validCGU diff --git a/src/components/Terms/termsView.scss b/src/components/Terms/termsView.scss index 4c4c64281fae0cf2874a67ebdbf9314c2b9be681..50d40e2c6646e7c178c0dc13609598aef42046b0 100644 --- a/src/components/Terms/termsView.scss +++ b/src/components/Terms/termsView.scss @@ -5,13 +5,6 @@ box-sizing: border-box; width: 100vw; overflow-x: hidden; - p, - ul, - li, - label, - span { - color: $grey-bright; - } h1 { color: $gold-shadow; font-weight: 800; diff --git a/src/components/theme.ts b/src/components/theme.ts index 9f08839f031ef6da09636a558b98e59e6d0226f7..0d900f018f4bc247c2cd50952ed9e960099bd328 100644 --- a/src/components/theme.ts +++ b/src/components/theme.ts @@ -7,6 +7,9 @@ export const theme = createTheme({ main: '#F1C017', '500': '#579eff', }, + secondary: { + main: '#F1C017', + }, }, typography: { fontFamily: ['Lato'].join(',') }, overrides: { @@ -36,5 +39,10 @@ export const theme = createTheme({ color: '#e0e0e0', }, }, + MuiCheckbox: { + root: { + padding: 0, + }, + }, }, }) diff --git a/src/locales/fr.json b/src/locales/fr.json index 5748f650309d1319f7960fb8c400feec263288fe..37841a9abf094b7f6488d829cad909f13df55b97 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -214,7 +214,7 @@ "consentLi2": "L'historique et le relevé de vos consommations au pas de temps 30 minutes", "consentLi3": "Les puissances maximales atteintes quotidiennement", "consentLi4": "Les données contractuelles (début de contrat et puissance souscrite)", - "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span> *", + "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span class='gold'>un\u00a0an</span> *", "consentCheck2": "J’atteste être le titulaire du point de livraison (PDL) renseigné à l’étape précédente *" }, "grdfgrandlyon": { @@ -243,7 +243,7 @@ "textConsent": "Afin de vous offrir des fonctionnalités de visualisation et d'analyse, Ecolyo a besoin des données suivantes\u00a0:", "consentLi1": "L'historique de vos consommations (jusqu’à 36 mois) et le relevé quotidien de vos consommations", "consentLi2": "Les données contractuelles (type de compteur, date de début de contrat)", - "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span>un\u00a0an</span> *", + "consentCheck1": "Je consens à partager les données personnelles ci-dessus pour une durée d'<span class='gold'>un\u00a0an</span> *", "consentCheck2": "J’atteste être le titulaire du point de livraison (PCE) renseigné à l’étape précédente *", "waiting": { "mailSent": "Un mail vous a été envoyé...", diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss index bb10dab58b0eb7169ac10ae24f17ff7de2661842..51dd2d1253bdd7c0af9c173fb2865ce3d7059185 100644 --- a/src/styles/base/_mixins.scss +++ b/src/styles/base/_mixins.scss @@ -20,46 +20,3 @@ } transition: all 150ms ease-in-out; } - -@mixin checkBox($foreground, $background) { - width: 24px; - min-width: 24px; - height: 24px; - display: flex; - align-items: center; - border-radius: 4px; - - cursor: pointer; - appearance: none; - background: $background; - position: relative; - border: solid 1px $grey-dark; - - &:checked { - background: $foreground; - border-color: $foreground; - // Custom check mark - &:before, - &:after { - content: ''; - position: absolute; - display: inline-block; - background: $dark-light-2; - border-radius: 0.5rem; - } - &:before { - width: 3px; - height: 12px; - left: 10px; - top: 4px; - transform: rotate(41deg); - } - &:after { - width: 3px; - height: 6px; - left: 5px; - top: 8px; - transform: rotate(133deg); - } - } -} diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index 18a7a9be78df766853ffe9bfdad93522961ca7a8..3a97f7fe47e59b2d3613fed7a546137ba4cdf574 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -13,7 +13,6 @@ h4, h5, h6, p { - color: $soft-grey; font-family: $text-font; } diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss index a9817361e3d26f447bdebe332e567183e4d96f76..5342054c9ba1a936d584480313336931ee5d67ba 100644 --- a/src/styles/components/_input.scss +++ b/src/styles/components/_input.scss @@ -28,10 +28,6 @@ input.inputNumber { text-align: center; } -input.inputCheckbox { - @include checkBox($gold-shadow, $dark-light-2); -} - input:focus-visible { outline: 2px solid $blue-accessibility; outline-offset: 2px;