diff --git a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
index 28e9510e66f420f7dab59e1f579e1fce3a1f8e79..ae38608769b3585d68ab1cbec8cc1f5769fcbafb 100644
--- a/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/TemperatureComparisonModal/__snapshots__/TemperatureComparisonModal.spec.tsx.snap
@@ -37,7 +37,7 @@ exports[`TemperatureComparisonModal component should be rendered correctly 1`] =
>
<button
aria-label="analysis.temperature_comparison.modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
index aaed24d5e5e9bf53c37613ee6aa0273fabe43245..c2588b10f69b1481b6cbdf17f431ba9ca71ec57c 100644
--- a/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
+++ b/src/components/Analysis/Comparison/__snapshots__/TemperatureComparison.spec.tsx.snap
@@ -40,7 +40,7 @@ exports[`TemperatureComparison component should be rendered correctly with cold
>
<button
aria-label="analysis.temperature_comparison.info_button"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 info-icon"
+ class="MuiButtonBase-root MuiIconButton-root info-icon"
tabindex="0"
type="button"
>
@@ -105,7 +105,7 @@ exports[`TemperatureComparison component should be rendered correctly with hot r
>
<button
aria-label="analysis.temperature_comparison.info_button"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 info-icon"
+ class="MuiButtonBase-root MuiIconButton-root info-icon"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 3f664b18461dbb87fd1ec8913499d57ed754fa3f..fdd25bb41103a0e031ea62934c9f3501a7623401 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -54,7 +54,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
>
<button
aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-prev"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
tabindex="0"
type="button"
>
@@ -95,7 +95,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
</div>
<button
aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-next"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
index 6d81eae0ff120a7df104fe1503f24d5b7a4759ef..8de384b77ddb9029ac0b808979db62710bbf9887 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecInfoModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ElecInfoModal component should be rendered correctly with off-peak hour
</div>
<button
aria-label="elec_info_modal.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
@@ -143,7 +143,7 @@ exports[`ElecInfoModal component should be rendered correctly without off-peak h
</div>
<button
aria-label="elec_info_modal.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
index d27330fb31ec6cf5b3223492a01a6498b154e06a..4839bb3492eca9e99483242c111061088c5a73d4 100644
--- a/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
+++ b/src/components/Analysis/MaxConsumptionCard/__snapshots__/MaxConsumptionCard.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
>
<button
aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-prev"
+ class="MuiButtonBase-root MuiIconButton-root arrow-prev"
tabindex="0"
type="button"
>
@@ -54,7 +54,7 @@ exports[`MaxConsumptionCard component should be rendered correctly 1`] = `
</div>
<button
aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 arrow-next"
+ class="MuiButtonBase-root MuiIconButton-root arrow-next"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 369ab0598bcc9da761899e2d5198a2bab857af49..266ca39cea142d2df12dacd3c4dca7b43c1cdee4 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparator.scss
@@ -28,7 +28,7 @@
margin: 1rem 0;
}
div.expansion-panel-root {
- border: solid 2px $blue-grey;
+ border: solid 1px $blue-grey;
color: $blue-grey;
margin-block: 0 !important;
box-shadow: 0px 4px 16px 0px $black-shadow;
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index b1ea160cc50701868690e969df3217d5bfed7117..443595f6f6344022216ebd7be782f4aeb263fff2 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -268,7 +268,9 @@ const ChallengeCardOnGoing = ({
<>
<div className="finalDuel result">
<span>{t('challenge.card.ongoing.result')}</span>
- <span>{t('challenge.card.ongoing.duelDone')}</span>
+ <span className="lowercase">
+ {t('challenge.card.ongoing.duelDone')}
+ </span>
</div>
<div className="notifChallenge">1</div>
</>,
diff --git a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
index 64325543a8cf93f098d8ab8ffce8333bd790e6b1..9d1f4da02c5f1a1f1d11b38e51964bd18b7c5958 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
+++ b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
@@ -157,6 +157,9 @@
font-size: 1rem;
}
}
+ .lowercase {
+ text-transform: lowercase;
+ }
}
}
}
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index 0f0c1a5cb86a6d1aa750d9fccde498df95890c96..9461e866e7ddacb59a97bba6053b0b596d5a3ceb 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -65,7 +65,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
>
<button
aria-label="challenge.accessibility.button_slider_previous"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
@@ -89,7 +89,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
</button>
<button
aria-label="challenge.accessibility.button_slider_next"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/components/CommonKit/IconButton/StyledIconButton.tsx b/src/components/CommonKit/IconButton/StyledIconButton.tsx
index b71760b5d51353f9fa129037822d0efb0fca476d..d67dd55fb724c4617828fa4e9270e7f64a831545 100644
--- a/src/components/CommonKit/IconButton/StyledIconButton.tsx
+++ b/src/components/CommonKit/IconButton/StyledIconButton.tsx
@@ -1,14 +1,7 @@
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton'
-import { withStyles } from '@material-ui/core/styles'
import StyledIconProps from 'components/CommonKit/Icon/StyledIcon'
import React from 'react'
-const IconButtonBase = withStyles({
- root: {
- outline: 'none !important',
- },
-})(IconButton) as React.FC<IconButtonProps>
-
interface StyledIconButtonProps extends IconButtonProps {
icon: string
sized?: number
@@ -20,9 +13,9 @@ const StyledIconButton = ({
...props
}: StyledIconButtonProps) => {
return (
- <IconButtonBase {...props}>
+ <IconButton {...props}>
<StyledIconProps icon={icon} size={sized} />
- </IconButtonBase>
+ </IconButton>
)
}
diff --git a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
index 1b037586548e7a7a42b743ff6f58d07f5747cf2e..3a6db811c26f836e6ad8649a65335a74e3f095a6 100644
--- a/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
+++ b/src/components/CommonKit/IconButton/__snapshots__/StyledIconButton.spec.tsx.snap
@@ -3,7 +3,7 @@
exports[`StyledIconButton component test should render correctly StyledIconButton 1`] = `
<div>
<button
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1"
+ class="MuiButtonBase-root MuiIconButton-root"
tabindex="0"
type="button"
>
diff --git a/src/components/CommonKit/Switch/StyledSwitch.tsx b/src/components/CommonKit/Switch/StyledSwitch.tsx
index bd890d435fe1ef6051610d1ef4280a411016843b..2e7b46a6ddaed99dbdc45766c688c290423e211d 100644
--- a/src/components/CommonKit/Switch/StyledSwitch.tsx
+++ b/src/components/CommonKit/Switch/StyledSwitch.tsx
@@ -20,6 +20,10 @@ const SwitchBase = withStyles({
backgroundColor: 'var(--multiColor)',
},
},
+ '&.Mui-focusVisible': {
+ outline: '2px solid #1976d2',
+ outlineOffset: '2px',
+ },
},
checked: {},
track: {
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index 100fa6d1ff70691c87544524e2d7cfd3b34d43eb..83702bba20fe80bfae05ce21739775e02cce36fc 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="consent_outdated.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 35d1e2900882af499fac29f8fd38d2201cc297a7..40c5b30077281bf55d6315f38dd120577601f24d 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -25,7 +25,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 header-feedbacks-button"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
tabindex="0"
type="button"
>
@@ -125,10 +125,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
/>
<fieldset
aria-hidden="true"
- class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
>
<legend
- class="PrivateNotchedOutline-legendLabelled-4"
+ class="PrivateNotchedOutline-legendLabelled-3"
>
<span>
auth.enedissgegrandlyon.firstName
@@ -170,10 +170,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
/>
<fieldset
aria-hidden="true"
- class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
>
<legend
- class="PrivateNotchedOutline-legendLabelled-4"
+ class="PrivateNotchedOutline-legendLabelled-3"
>
<span>
auth.enedissgegrandlyon.lastName
@@ -220,10 +220,10 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
/>
<fieldset
aria-hidden="true"
- class="PrivateNotchedOutline-root-2 MuiOutlinedInput-notchedOutline"
+ class="PrivateNotchedOutline-root-1 MuiOutlinedInput-notchedOutline"
>
<legend
- class="PrivateNotchedOutline-legendLabelled-4"
+ class="PrivateNotchedOutline-legendLabelled-3"
>
<span>
auth.enedissgegrandlyon.pdlLabel
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index 335b1622261b4ed3244ca4e9ca1dfd685eeb26d7..45adc444c765eeb371a0d11a51c3f8dbcf0be75d 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
</div>
<button
aria-label="auth.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
index 9d4da4b3efa239861ac034fa8779a2cfa045a443..6f79fffa991e5ea667f6ee2a4e58f20c728a0f76 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/EstimatedConsumptionModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EstimatedConsumptionModal component should render correctly 1`] = `
</div>
<button
aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index a15d8b061d7ef889f00d00d47dbb84a68c5bd93a..c3145b9318cb1ab0698ee473c6f1627a8f0f414a 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`NoDataModal component should render correctly 1`] = `
</div>
<button
aria-label="consumption_visualizer.modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index e83cba2c0c8b5053a5f90dc9c92f06888fc09f5d..8acb6fa60c9f0515e2a047484a4f323125a61f8a 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
index 3f7c7423293eb71bf9241ddfa354e2296a8f72ef..f56eb23830f9226fefadb567ea4dbd0e6e8c52ab 100644
--- a/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
+++ b/src/components/DateNavigator/__snapshots__/DateNavigator.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
>
<button
aria-label="consumption.accessibility.button_previous_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
+ class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
tabindex="0"
type="button"
>
@@ -47,7 +47,7 @@ exports[`DateNavigator component should be rendered correctly 1`] = `
</div>
<button
aria-label="consumption.accessibility.button_next_value"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 date-navigator-button"
+ class="MuiButtonBase-root MuiIconButton-root date-navigator-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
index 4897a8101470c6cedd6e04b29a676e724e02f01e..f242546792eb2c27d80b64111897dc0196dbf588 100644
--- a/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
+++ b/src/components/Duel/LastDuelModal/__snapshots__/lastDuelModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`lastDuelModal component should render correctly 1`] = `
>
<button
aria-label="last_duel_modal.close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index 6f55268684a852fa80786fd6f50bd0faa469b83c..a9f9d04742decea5edcf5f6d091218e2d87f20ff 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureInitModal component should render correctly when open is true
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Ecogesture/EcogestureList/ecogestureList.scss b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
index 0380ee61055442ed5baa898e1b1dad1e1bb217a8..ae851825811769e6c56536ee22d40ead6887b718 100644
--- a/src/components/Ecogesture/EcogestureList/ecogestureList.scss
+++ b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
@@ -121,6 +121,10 @@ div.filter-menu {
&.item-active {
font-weight: 700;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
}
.filter-menu-icon {
margin-left: auto;
diff --git a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
index dbb5c320ec979eec2e63365d8c44f0ae41e5b17b..c8e3570d53e98a167adff9aed4a22ddd120af42e 100644
--- a/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureResetModal/__snapshots__/EcogestureResetModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureResetModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index 313bf71d75b7813132e146c6cf2ee84398093635..d73e5d4fceded904e3ef5f6070dd589f7a199a51 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="ecogesture_selection.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index c0ee001c3cee54ccc17a1f2c7efc104aea6d07da..905bfadd3e8f5df8cac1745a9f6b23aa10b459e3 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`FeedbackModal component should render the component 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index e08a8da858902eaeb82b81b194d8580d8c73820e..d41cb3344de86a7ee77a8a2f924ef34bc70ecffb 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -48,6 +48,10 @@
left: -14px;
top: -15px;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
}
.text {
position: relative;
diff --git a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
index 62521bfb18e6bd75e9438a5e7a5c2d1dce331a96..f793b20f4f782c61c5e36f580d7238526fdbed1c 100644
--- a/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/CozyBar.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`CozyBar component should be rendered correctly without without left arr
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -42,7 +42,7 @@ exports[`CozyBar component should test displayBackArrow should call backFunction
<div>
<button
aria-label="header.accessibility.button_back"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -75,7 +75,7 @@ exports[`CozyBar component should test displayBackArrow should call backFunction
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-3 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -104,7 +104,7 @@ exports[`CozyBar component should test displayBackArrow should call navigate(-1)
<div>
<button
aria-label="header.accessibility.button_back"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
@@ -137,7 +137,7 @@ exports[`CozyBar component should test displayBackArrow should call navigate(-1)
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 cv-button"
+ class="MuiButtonBase-root MuiIconButton-root cv-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 10fd9d80a25771d01d880008ed4e5aae2ad053d8..2b060bac40e27596a9dae81d405bc37b8b3cf350 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`Header component should be rendered correctly on desktop 1`] = `
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 header-feedbacks-button"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
tabindex="0"
type="button"
>
@@ -74,7 +74,7 @@ exports[`Header component should be rendered correctly on mobile 1`] = `
</div>
<button
aria-label="header.accessibility.button_open_feedbacks"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 header-feedbacks-button"
+ class="MuiButtonBase-root MuiIconButton-root header-feedbacks-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/Accessibility/Accessibility.tsx b/src/components/Options/Accessibility/Accessibility.tsx
deleted file mode 100644
index 383cef8c7284986b2bfd8c61c37da2c0ee69257e..0000000000000000000000000000000000000000
--- a/src/components/Options/Accessibility/Accessibility.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Link from '@material-ui/core/Link'
-import AccessibilityIcon from 'assets/icons/ico/accessibility.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import React from 'react'
-import '../GCU/gcuLink.scss'
-
-const Accessibility = () => {
- const { t } = useI18n()
- return (
- <div className="gcu-link-root">
- <div className="gcu-link-content">
- <Link
- className="gcu-link-card-link"
- href="https://ecolyo.com/accessibilite.html"
- target="_blank"
- >
- <div className="card">
- <div className="gcu-link-card">
- <div className="gcu-link-card-content">
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon={AccessibilityIcon}
- size={42}
- />
- <div className="gcu-link-card-content-title">
- {t('common.title_accessibility')}
- </div>
- </div>
- </div>
- </div>
- </Link>
- </div>
- </div>
- )
-}
-
-export default Accessibility
diff --git a/src/components/Options/AccessibilityLink/AccessibilityLink.tsx b/src/components/Options/AccessibilityLink/AccessibilityLink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba304a0c0c5e75ddf7e3a29ccc4936a4a72db791
--- /dev/null
+++ b/src/components/Options/AccessibilityLink/AccessibilityLink.tsx
@@ -0,0 +1,27 @@
+import AccessibilityIcon from 'assets/icons/ico/accessibility.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import '../OptionsView.scss'
+
+const AccessibilityLink = () => {
+ const { t } = useI18n()
+
+ const goToAccessibility = () => {
+ window.open('https://ecolyo.com/accessibilite.html')
+ }
+
+ return (
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <StyledCard onClick={goToAccessibility}>
+ <StyledIcon icon={AccessibilityIcon} size={38} />
+ {t('common.title_accessibility')}
+ </StyledCard>
+ </div>
+ </div>
+ )
+}
+
+export default AccessibilityLink
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
index afc4719f720a12ec32b27355edc7b3d0089fb352..a057c53700ae6c9688e271366dff865bc41a1c19 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
@@ -158,7 +158,7 @@ exports[`exportDoneModal component should display error message 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-2 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
index 87ed15eef71459661e160feecee01830fa618b7e..2f9b5cf5f52b622b1d3d4146ad32e41db92d629d 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
index ceeae77c5f9bcc149f823ba51154641db6d22310..8d325403f6d63a376930aec11d62eff44078efae 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -42,7 +42,7 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 38965f5bda1dfdb3df48e6da1c58ed4bc7f6c841..416f123b3caa3f5cd74e5e426f6f30e46629fa50 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -10,7 +10,6 @@ div.expansion-panel-root.Mui-expanded:last-child {
flex-direction: column;
align-items: center;
justify-content: center;
- margin-top: 0.5rem;
padding: 0 1.5rem;
.export-option-content {
diff --git a/src/components/Options/GCU/GCULink.tsx b/src/components/Options/GCU/GCULink.tsx
index bb43da2363560215ab6f66536e1f85d1f51394bf..ec9ad5a5c097afbdd318f94bb26dd39d2006f604 100644
--- a/src/components/Options/GCU/GCULink.tsx
+++ b/src/components/Options/GCU/GCULink.tsx
@@ -1,36 +1,26 @@
-import Link from '@material-ui/core/Link'
import GCUIcon from 'assets/icons/ico/gcu.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './gcuLink.scss'
+import { useNavigate } from 'react-router-dom'
+import '../OptionsView.scss'
const GCULink = () => {
const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goToGCU = () => {
+ navigate(`/options/gcu`)
+ }
+
return (
- <div className="gcu-link-root">
- <div className="gcu-link-content">
- <Link
- className="gcu-link-card-link"
- component={RouterLink}
- to="/options/gcu"
- >
- <div className="card">
- <div className="gcu-link-card">
- <div className="gcu-link-card-content">
- <StyledIcon
- className="gcu-link-card-content-icon"
- icon={GCUIcon}
- size={42}
- />
- <div className="gcu-link-card-content-title">
- {t('common.title_gcu')}
- </div>
- </div>
- </div>
- </div>
- </Link>
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <StyledCard onClick={goToGCU}>
+ <StyledIcon icon={GCUIcon} size={38} />
+ {t('common.title_gcu')}
+ </StyledCard>
</div>
</div>
)
diff --git a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
index 915df297b184ee301fcd67fe248cc8bafd0441bd..a2e75eca8fe83baac4e4c7a6b7f7d25d4c0e4cde 100644
--- a/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
+++ b/src/components/Options/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -3,48 +3,43 @@
exports[`LegalNoticeLink component should be rendered correctly 1`] = `
<div>
<div
- class="legal-notice-root"
+ class="styled-card-root"
>
<div
- class="legal-notice-content"
+ class="styled-card-content"
>
<div
- class="legal-notice-header text-16-normal-uppercase"
+ class="styled-card-header text-16-normal-uppercase"
>
legal.title_legal
</div>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
- href="/options/legalnotice"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="card"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <div
- class="legal-notice-card"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
- <div
- class="legal-notice-card-content"
- >
- <svg
- aria-hidden="true"
- class="legal-notice-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="legal-notice-card-content-title"
- >
- legal.read_legal
- </div>
- </div>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ legal.read_legal
</div>
- </a>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
</div>
diff --git a/src/components/Options/GCU/gcuLink.scss b/src/components/Options/GCU/gcuLink.scss
deleted file mode 100644
index 3a88a80d9508fa3a7c92a992ae35bcae66fdb6da..0000000000000000000000000000000000000000
--- a/src/components/Options/GCU/gcuLink.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@import 'src/styles/base/color';
-
-.gcu-link-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: $white;
- padding: 0 1.5rem 0;
- margin-top: 0.5rem;
- .gcu-link-header {
- margin-bottom: 1.25rem;
- }
- .gcu-link-content {
- p {
- color: $white;
- }
- a {
- color: $white;
- text-decoration: none;
- }
- li {
- margin: 1rem 0;
- }
- h2 {
- color: $white;
- }
- h3 {
- color: $white;
- margin: 2.5rem 0 1rem;
- }
- .ln-contact {
- color: $multi-color;
- }
- max-width: 45.75rem;
- width: 100%;
- }
-}
-
-.gcu-link-card-link {
- color: black;
-}
-.gcu-link-card {
- display: flex;
- flex-direction: row;
- margin: -0.75rem 0;
- width: 100%;
- .gcu-link-card-content {
- display: flex;
- flex-direction: row;
- .gcu-link-card-content-icon {
- margin: 0.5rem 0;
- }
- .gcu-link-card-content-title {
- margin: 0 1rem;
- align-self: center;
- }
- }
-}
diff --git a/src/components/Options/HelpLink/HelpLink.scss b/src/components/Options/HelpLink/HelpLink.scss
deleted file mode 100644
index 453d742a2340d847f201ad000603aa2bc2ec0c34..0000000000000000000000000000000000000000
--- a/src/components/Options/HelpLink/HelpLink.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import 'src/styles/base/color';
-
-.help-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0 1.5rem;
- margin-top: 2rem;
- .help-content {
- max-width: 45.75rem;
- width: 100%;
- a {
- color: $white;
- text-decoration: none;
- }
-
- .help-header {
- color: $grey-bright;
- margin-bottom: 1rem;
- }
- }
-}
-
-.help-card-link {
- color: $white;
- cursor: pointer;
-}
-.help-card {
- display: flex;
- flex-direction: row;
- margin: -0.75rem 0;
- width: 100%;
- .help-card-content {
- display: flex;
- flex-direction: row;
- .help-card-content-icon {
- margin: 0.5rem 0;
- min-width: 42px;
- }
- .help-card-content-title {
- margin: 0 1rem;
- align-self: center;
- text-decoration: none;
- }
- }
-}
diff --git a/src/components/Options/HelpLink/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
index 864a1a7bbc1378be88d2c2678426ee4b476f53db..8f298ab0a6b690d377350e4cec416fc6367ef86a 100644
--- a/src/components/Options/HelpLink/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -1,44 +1,26 @@
-import Link from '@material-ui/core/Link'
import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
import { useAppDispatch } from 'store/hooks'
import { openFeedbackModal } from 'store/modal/modal.slice'
-import './HelpLink.scss'
+import '../OptionsView.scss'
const HelpLink = () => {
const { t } = useI18n()
const dispatch = useAppDispatch()
return (
- <div className="help-root">
- <div className="help-content">
- <div className="help-header text-16-normal-uppercase">
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <div className="styled-card-header text-16-normal-uppercase">
{t('help.title_help')}
</div>
- <Link
- className="help-card-link"
- component={RouterLink}
- onClick={() => dispatch(openFeedbackModal(true))}
- to=""
- >
- <div className="card">
- <div className="help-card">
- <div className="help-card-content">
- <StyledIcon
- className="help-card-content-icon"
- icon={QuestionMarkIcon}
- size={42}
- />
- <div className="help-card-content-title">
- {t('help.read_help')}
- </div>
- </div>
- </div>
- </div>
- </Link>
+ <StyledCard onClick={() => dispatch(openFeedbackModal(true))}>
+ <StyledIcon icon={QuestionMarkIcon} size={38} />
+ {t('help.read_help')}
+ </StyledCard>
</div>
</div>
)
diff --git a/src/components/Options/LegalNotice/LegalNoticeLink.tsx b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
index e158282f8124c1fa85b8f6c266666369297426fc..9b7e1adfcb4df288668d5838105851e2e2b0eed0 100644
--- a/src/components/Options/LegalNotice/LegalNoticeLink.tsx
+++ b/src/components/Options/LegalNotice/LegalNoticeLink.tsx
@@ -1,40 +1,29 @@
-import Link from '@material-ui/core/Link'
import LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import { Link as RouterLink } from 'react-router-dom'
-import './legalNoticeLink.scss'
+import { useNavigate } from 'react-router-dom'
+import '../OptionsView.scss'
const LegalNoticeLink = () => {
const { t } = useI18n()
+ const navigate = useNavigate()
+
+ const goToLegalNotice = () => {
+ navigate(`/options/legalnotice`)
+ }
return (
- <div className="legal-notice-root">
- <div className="legal-notice-content">
- <div className="legal-notice-header text-16-normal-uppercase">
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <div className="styled-card-header text-16-normal-uppercase">
{t('legal.title_legal')}
</div>
- <Link
- className="legal-notice-card-link"
- component={RouterLink}
- to="/options/legalnotice"
- >
- <div className="card">
- <div className="legal-notice-card">
- <div className="legal-notice-card-content">
- <StyledIcon
- className="legal-notice-card-content-icon"
- icon={LegalNoticeIcon}
- size={42}
- />
- <div className="legal-notice-card-content-title">
- {t('legal.read_legal')}
- </div>
- </div>
- </div>
- </div>
- </Link>
+ <StyledCard onClick={goToLegalNotice}>
+ <StyledIcon icon={LegalNoticeIcon} size={38} />
+ {t('legal.read_legal')}
+ </StyledCard>
</div>
</div>
)
diff --git a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
index f75c9392adbd35e4372187d1a121b5a9603f2216..026de87e117e51acdb9f2185eea03baf1a925bdb 100644
--- a/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
+++ b/src/components/Options/LegalNotice/__snapshots__/LegalNoticeLink.spec.tsx.snap
@@ -3,43 +3,38 @@
exports[`GCULink component should be rendered correctly 1`] = `
<div>
<div
- class="gcu-link-root"
+ class="styled-card-root"
>
<div
- class="gcu-link-content"
+ class="styled-card-content"
>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
- href="/options/gcu"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="card"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <div
- class="gcu-link-card"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
- <div
- class="gcu-link-card-content"
- >
- <svg
- aria-hidden="true"
- class="gcu-link-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="gcu-link-card-content-title"
- >
- common.title_gcu
- </div>
- </div>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ common.title_gcu
</div>
- </a>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
</div>
</div>
diff --git a/src/components/Options/LegalNotice/legalNoticeLink.scss b/src/components/Options/LegalNotice/legalNoticeLink.scss
deleted file mode 100644
index c6eb9a42feb3c3b3f235ebbbc247001e65395bf0..0000000000000000000000000000000000000000
--- a/src/components/Options/LegalNotice/legalNoticeLink.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/color';
-
-// LegalContainer
-.legal-notice-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- color: $white;
- padding: 0 1.5rem;
- margin-top: 2rem;
- .legal-notice-header {
- color: $grey-bright;
- margin-bottom: 1rem;
- }
- .legal-notice-content {
- max-width: 45.75rem;
- width: 100%;
- @media #{$large-phone} {
- width: 100%;
- }
- }
-}
-.legal-notice-card-link {
- color: black;
-}
-.legal-notice-card {
- display: flex;
- flex-direction: row;
- margin: -0.75rem 0;
- width: 100%;
- @media #{$large-phone} {
- width: 100%;
- }
- .legal-notice-card-content {
- display: flex;
- flex-direction: row;
- .legal-notice-card-content-icon {
- margin: 0.5rem 0;
- }
- .legal-notice-card-content-title {
- margin: 0 1rem;
- align-self: center;
- color: white;
- }
- }
-}
diff --git a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 3589de6222a5a385bedd1af0332222aed9a5308b..0a96ad0a5f114b0732834bbe07902f980dba9673 100644
--- a/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -1,6 +1,6 @@
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import './matomoOptOut.scss'
+import '../OptionsView.scss'
declare let __PIWIK_TRACKER_URL__: string
@@ -9,14 +9,15 @@ const MatomoOptOut = () => {
const baseUrl = __PIWIK_TRACKER_URL__
return (
- <div className="matomo-opt-out-container">
- <div className="matomo-opt-out">
- <div className="opt-out-header text-16-normal-uppercase">
+ <div className="styled-card-root">
+ <div className="styled-card-content">
+ <div className="styled-card-header text-16-normal-uppercase">
{t('matomo.matomo_title')}
</div>
<iframe
title="opt-out"
style={{ height: '250px' }}
+ className="matomo-content"
src={`${baseUrl}index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif`}
/>
</div>
diff --git a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
index 4e821bbf7d2a9b766176578195e820bb88cf36a7..f9b02a664fa3d91d7e805b657ecf85d19f39ec3e 100644
--- a/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
+++ b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
@@ -3,17 +3,18 @@
exports[`MatomoOptOut component should be rendered correctly 1`] = `
<div>
<div
- class="matomo-opt-out-container"
+ class="styled-card-root"
>
<div
- class="matomo-opt-out"
+ class="styled-card-content"
>
<div
- class="opt-out-header text-16-normal-uppercase"
+ class="styled-card-header text-16-normal-uppercase"
>
matomo.matomo_title
</div>
<iframe
+ class="matomo-content"
src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
style="height: 250px;"
title="opt-out"
diff --git a/src/components/Options/MatomoOptOut/matomoOptOut.scss b/src/components/Options/MatomoOptOut/matomoOptOut.scss
deleted file mode 100644
index 0c4754fbe8456e6802f8c6232b27c586ee52ef17..0000000000000000000000000000000000000000
--- a/src/components/Options/MatomoOptOut/matomoOptOut.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/typo-variables';
-
-.matomo-opt-out-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0 1.5rem;
- margin: 2rem 0;
-
- .matomo-opt-out {
- margin: 0 auto;
- max-width: 45.75rem;
- width: 100%;
- .opt-out-header {
- color: $grey-bright;
- }
-
- * {
- font-family: $text-font;
- }
- }
-}
diff --git a/src/components/Options/OptionsView.scss b/src/components/Options/OptionsView.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9cfe87eccb6cdfecd95fe126a3c45c8e9c6f3dc9
--- /dev/null
+++ b/src/components/Options/OptionsView.scss
@@ -0,0 +1,38 @@
+@import 'src/styles/base/color';
+@import 'src/styles/base/typo-variables';
+
+.options-root {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.info-links {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.styled-card-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+
+ .styled-card-content {
+ max-width: 45.75rem;
+ width: 100%;
+
+ .styled-card-header {
+ color: $grey-bright;
+ margin-bottom: 1rem;
+ }
+
+ .matomo-content {
+ * {
+ font-family: $text-font;
+ }
+ }
+ }
+}
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index efe08aa6f042af7d5cb00fb81c78f99acabf7fe8..6a6c1962cefec5991bf685385e55109ec139c7c2 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -4,12 +4,13 @@ import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React from 'react'
-import Accessibility from './Accessibility/Accessibility'
+import AccessibilityLink from './AccessibilityLink/AccessibilityLink'
import ExportData from './ExportData/ExportData'
import GCULink from './GCU/GCULink'
import HelpLink from './HelpLink/HelpLink'
import LegalNoticeLink from './LegalNotice/LegalNoticeLink'
import MatomoOptOut from './MatomoOptOut/MatomoOptOut'
+import './OptionsView.scss'
import ProfileTypeOptions from './ProfileTypeOptions/ProfileTypeOptions'
import ReportOptions from './ReportOptions/ReportOptions'
import Version from './Version/Version'
@@ -25,14 +26,20 @@ const OptionsView = () => {
<CozyBar titleKey="common.title_options" />
<Header desktopTitleKey="common.title_options" />
<Content>
- <ProfileTypeOptions />
- <ExportData />
- <ReportOptions />
- <HelpLink />
- <LegalNoticeLink />
- <GCULink />
- <Accessibility />
- <MatomoOptOut />
+ <div className="options-root">
+ <div>
+ <ProfileTypeOptions />
+ <ExportData />
+ </div>
+ <ReportOptions />
+ <HelpLink />
+ <div className="info-links">
+ <LegalNoticeLink />
+ <GCULink />
+ <AccessibilityLink />
+ </div>
+ <MatomoOptOut />
+ </div>
<div className="parameters-logos">
<img src={logos} alt={t(`common.funders_logo`)} />
</div>
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index 58ab12b6b0aaa790e6c71101041272ca86361267..aa8cd00d10027bffb40b33e6732bc73486101dcd 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -7,7 +7,6 @@
align-items: center;
justify-content: center;
padding: 0 1.5rem;
- margin-top: 2rem;
.report-option-content {
max-width: 45.75rem;
width: 100%;
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index eae45e01e2054ecf858c957873eed31dee5f63bf..135c90533a5d6542b27fd3bc6861a129656661a8 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -10,139 +10,145 @@ exports[`OptionsView component should be rendered correctly 1`] = `
/>
<mock-content>
<div
- class="profile-type-root"
+ class="options-root"
>
- <div
- class="profile-type-content"
- >
- <div
- class="head text-16-normal-uppercase"
- >
- profile_type.title_profile
- </div>
- <button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
- tabindex="0"
- type="button"
- >
- <div
- class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
- >
- <svg
- aria-hidden="true"
- class="profile-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <span
- class="link-label text-16-normal"
- >
- profile_type.read_profile
- </span>
- </div>
- <span
- class="MuiCardActionArea-focusHighlight"
- />
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- </div>
- <div
- class="export-option-root"
- >
- <div
- class="export-option-content"
- >
+ <div>
<div
- class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
+ class="profile-type-root"
>
<div
- aria-disabled="false"
- aria-expanded="false"
- aria-label="profile_type.accessibility.button_toggle_export"
- class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
- role="button"
- tabindex="0"
+ class="profile-type-content"
>
<div
- class="MuiAccordionSummary-content expansion-panel-content"
+ class="head text-16-normal-uppercase"
>
- <svg
- aria-hidden="true"
- class="export-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="text-16-normal accordion-title"
- >
- export.title_export
- </div>
+ profile_type.title_profile
</div>
- <div
- aria-disabled="false"
- aria-hidden="true"
- class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 profile-link"
+ tabindex="0"
+ type="button"
>
- <span
- class="MuiIconButton-label"
+ <div
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="accordion-icon styles__icon___23x3R"
- height="16"
- width="16"
+ class="profile-icon styles__icon___23x3R"
+ height="42"
+ width="42"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- </span>
+ <span
+ class="link-label text-16-normal"
+ >
+ profile_type.read_profile
+ </span>
+ </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
<span
class="MuiTouchRipple-root"
/>
- </div>
+ </button>
</div>
+ </div>
+ <div
+ class="export-option-root"
+ >
<div
- class="MuiCollapse-root MuiCollapse-hidden"
- style="min-height: 0px;"
+ class="export-option-content"
>
<div
- class="MuiCollapse-wrapper"
+ class="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
>
<div
- class="MuiCollapse-wrapperInner"
+ aria-disabled="false"
+ aria-expanded="false"
+ aria-label="profile_type.accessibility.button_toggle_export"
+ class="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary"
+ role="button"
+ tabindex="0"
>
<div
- role="region"
+ class="MuiAccordionSummary-content expansion-panel-content"
>
+ <svg
+ aria-hidden="true"
+ class="export-icon styles__icon___23x3R"
+ height="42"
+ width="42"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
<div
- class="MuiAccordionDetails-root expansion-panel-details"
+ class="text-16-normal accordion-title"
>
- <div
- class="text-15-normal grey"
- >
- export.text1
- </div>
- <div
- class="text-16-bold"
+ export.title_export
+ </div>
+ </div>
+ <div
+ aria-disabled="false"
+ aria-hidden="true"
+ class="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ aria-hidden="true"
+ class="accordion-icon styles__icon___23x3R"
+ height="16"
+ width="16"
>
- export.fluid_select
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </div>
+ </div>
+ <div
+ class="MuiCollapse-root MuiCollapse-hidden"
+ style="min-height: 0px;"
+ >
+ <div
+ class="MuiCollapse-wrapper"
+ >
+ <div
+ class="MuiCollapse-wrapperInner"
+ >
<div
- class="text-15-normal grey"
+ role="region"
>
- export.no_data
+ <div
+ class="MuiAccordionDetails-root expansion-panel-details"
+ >
+ <div
+ class="text-15-normal grey"
+ >
+ export.text1
+ </div>
+ <div
+ class="text-16-bold"
+ >
+ export.fluid_select
+ </div>
+ <div
+ class="text-15-normal grey"
+ >
+ export.no_data
+ </div>
+ </div>
</div>
</div>
</div>
@@ -151,248 +157,232 @@ exports[`OptionsView component should be rendered correctly 1`] = `
</div>
</div>
</div>
- </div>
- <div
- class="report-option-root"
- >
<div
- class="report-option-content"
+ class="report-option-root"
>
<div
- class="reportCard"
+ class="report-option-content"
>
<div
- class="row"
+ class="reportCard"
>
- <span
- class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
+ <div
+ class="row"
>
<span
- aria-disabled="false"
- class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
+ class="MuiSwitch-root WithStyles(ForwardRef(Switch))-root-3"
>
<span
- class="MuiIconButton-label"
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-7 MuiSwitch-switchBase WithStyles(ForwardRef(Switch))-switchBase-4 MuiSwitch-colorSecondary PrivateSwitchBase-checked-8 Mui-checked WithStyles(ForwardRef(Switch))-checked-5"
>
- <input
- checked=""
- class="PrivateSwitchBase-input-10 MuiSwitch-input"
- type="checkbox"
- value=""
- />
<span
- class="MuiSwitch-thumb"
+ class="MuiIconButton-label"
+ >
+ <input
+ checked=""
+ class="PrivateSwitchBase-input-10 MuiSwitch-input"
+ type="checkbox"
+ value=""
+ />
+ <span
+ class="MuiSwitch-thumb"
+ />
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
</span>
<span
- class="MuiTouchRipple-root"
+ class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
/>
</span>
<span
- class="MuiSwitch-track WithStyles(ForwardRef(Switch))-track-6"
- />
- </span>
+ class="text-16-normal-uppercase"
+ >
+ profile.report.title_bilan
+ </span>
+ </div>
<span
- class="text-16-normal-uppercase"
+ class="text-16-normal"
>
- profile.report.title_bilan
+ profile.report.switch_label_bilan
</span>
</div>
- <span
- class="text-16-normal"
- >
- profile.report.switch_label_bilan
- </span>
</div>
</div>
- </div>
- <div
- class="help-root"
- >
<div
- class="help-content"
+ class="styled-card-root"
>
<div
- class="help-header text-16-normal-uppercase"
- >
- help.title_help
- </div>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover help-card-link MuiTypography-colorPrimary"
- href="/"
+ class="styled-card-content"
>
<div
- class="card"
+ class="styled-card-header text-16-normal-uppercase"
+ >
+ help.title_help
+ </div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="help-card"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- <div
- class="help-card-content"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
- <svg
- aria-hidden="true"
- class="help-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- <div
- class="help-card-content-title"
- >
- help.read_help
- </div>
- </div>
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ help.read_help
</div>
- </div>
- </a>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
- </div>
- <div
- class="legal-notice-root"
- >
<div
- class="legal-notice-content"
+ class="info-links"
>
<div
- class="legal-notice-header text-16-normal-uppercase"
- >
- legal.title_legal
- </div>
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover legal-notice-card-link MuiTypography-colorPrimary"
- href="/options/legalnotice"
+ class="styled-card-root"
>
<div
- class="card"
+ class="styled-card-content"
>
<div
- class="legal-notice-card"
+ class="styled-card-header text-16-normal-uppercase"
+ >
+ legal.title_legal
+ </div>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="legal-notice-card-content"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="legal-notice-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="legal-notice-card-content-title"
- >
- legal.read_legal
- </div>
+ legal.read_legal
</div>
- </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </a>
- </div>
- </div>
- <div
- class="gcu-link-root"
- >
- <div
- class="gcu-link-content"
- >
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
- href="/options/gcu"
+ </div>
+ <div
+ class="styled-card-root"
>
<div
- class="card"
+ class="styled-card-content"
>
- <div
- class="gcu-link-card"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="gcu-link-card-content"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="gcu-link-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="gcu-link-card-content-title"
- >
- common.title_gcu
- </div>
+ common.title_gcu
</div>
- </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </a>
- </div>
- </div>
- <div
- class="gcu-link-root"
- >
- <div
- class="gcu-link-content"
- >
- <a
- class="MuiTypography-root MuiLink-root MuiLink-underlineHover gcu-link-card-link MuiTypography-colorPrimary"
- href="https://ecolyo.com/accessibilite.html"
- target="_blank"
+ </div>
+ <div
+ class="styled-card-root"
>
<div
- class="card"
+ class="styled-card-content"
>
- <div
- class="gcu-link-card"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 undefined"
+ tabindex="0"
+ type="button"
>
<div
- class="gcu-link-card-content"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
<svg
aria-hidden="true"
- class="gcu-link-card-content-icon styles__icon___23x3R"
- height="42"
- width="42"
+ class="styles__icon___23x3R"
+ height="38"
+ width="38"
>
<use
xlink:href="#test-file-stub"
/>
</svg>
- <div
- class="gcu-link-card-content-title"
- >
- common.title_accessibility
- </div>
+ common.title_accessibility
</div>
- </div>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
</div>
- </a>
+ </div>
</div>
- </div>
- <div
- class="matomo-opt-out-container"
- >
<div
- class="matomo-opt-out"
+ class="styled-card-root"
>
<div
- class="opt-out-header text-16-normal-uppercase"
+ class="styled-card-content"
>
- matomo.matomo_title
+ <div
+ class="styled-card-header text-16-normal-uppercase"
+ >
+ matomo.matomo_title
+ </div>
+ <iframe
+ class="matomo-content"
+ src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
+ style="height: 250px;"
+ title="opt-out"
+ />
</div>
- <iframe
- src="http://localhost:9800/index.php?module=CoreAdminHome&action=optOut&language=fr&backgroundColor=121212&fontColor=e0e0e0&fontSize=&fontFamily=sans-serif"
- style="height: 250px;"
- title="opt-out"
- />
</div>
</div>
<div
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index 3f2d19fd53ce78fdb02d220530eae54f47bb6c49..2da3a371021ada8c3ae39dce5ca2d9d014b5daf3 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index 3c7e8fbc6245a8eca3416e27019ec67ac1effb5b..f69973105e2cbc74de85d13dc090441c4242e447 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index ba890dd86ad74c9ff36d78898bfebb2378c5c2c9..12f39a089ab591baf0fda9b7c671d1807d647f13 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index ecd108864ca1ddd60fb139c48994f465aa4cffc4..7f96a2ea50d0f1b608eef4e5d093391c97902a71 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- class="MuiButtonBase-root MuiIconButton-root WithStyles(ForwardRef(IconButton))-root-1 modal-paper-close-button"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
tabindex="0"
type="button"
>
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index b27f6f4409913063e2a68024e365ce5e0a8a950f..eb1e924e65d8dc58dc725ae5a2c9f8a39346a0d8 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -43,6 +43,7 @@ $blue-radial-gradient-transparent: radial-gradient(
rgba(255, 255, 255, 0) 100%
);
$blue-grey: #bfcce4;
+$blue-accessibility: #1b8bff;
/** GREEN **/
$green: #7fd771;
diff --git a/src/styles/components/_barchart.scss b/src/styles/components/_barchart.scss
index 87ac7032d8dfb650bdf65d618f287f0f9a2e2271..3ce54187b6ba08978c2553a292b8c5f1f9ddd7e3 100644
--- a/src/styles/components/_barchart.scss
+++ b/src/styles/components/_barchart.scss
@@ -169,7 +169,8 @@
.barValue {
outline: none;
&:focus-visible {
- outline: 1px solid;
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
}
}
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 3a8f0feb4ef0b737d97fb2f0daf824056364274b..ca1f7f8345d38588776604f15624d94da96903fe 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -6,6 +6,10 @@ button {
font-size: 1rem;
font-weight: 700;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
&.btnPrimary {
@include button($dark-light-2, transparent, $multi-color-radial-gradient) {
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index b7a3fd566b52189d24f81ab8b24ebe03cdaadb56..5fa2f1df183a45ca61f5e9416630db0b325ae68e 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -26,6 +26,10 @@ div.expansion-panel-summary {
background-color: unset;
box-shadow: 0 0 0 1px $grey-bright;
}
+ &:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+ }
&.Mui-expanded {
min-height: 4rem;
&.small {
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index 66759a556b309fc6956a2b95c0b855c390379449..a9817361e3d26f447bdebe332e567183e4d96f76 100644
--- a/src/styles/components/_input.scss
+++ b/src/styles/components/_input.scss
@@ -9,11 +9,6 @@ input.inputNumber {
background: transparent;
transition: all 300ms ease;
color: $grey-bright;
- &:focus,
- &:focus-visible {
- border-color: $gold-shadow;
- outline: none;
- }
}
input.inputText {
@@ -36,3 +31,8 @@ input.inputNumber {
input.inputCheckbox {
@include checkBox($gold-shadow, $dark-light-2);
}
+
+input:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+}
diff --git a/src/styles/components/_link.scss b/src/styles/components/_link.scss
index c3331e239bc9a2bace876c6fc809ad76e3f6a68a..077d3c00763e25795f573f513b6fc3517f7c2886 100644
--- a/src/styles/components/_link.scss
+++ b/src/styles/components/_link.scss
@@ -13,6 +13,10 @@ a:focus {
box-shadow: 0 0 0 1px $grey-bright;
}
}
+a:focus-visible {
+ outline: 2px solid $blue-accessibility;
+ outline-offset: 2px;
+}
a.MuiLink-underlineHover:hover {
text-decoration: none;
}