diff --git a/src/components/Action/ActionBegin/ActionBegin.tsx b/src/components/Action/ActionBegin/ActionBegin.tsx
index 8394e17962bcd1cc02feb4b7ff0cc8baf84fa9f8..7750f3b15c8989ee02789a15d8a84561152aba6a 100644
--- a/src/components/Action/ActionBegin/ActionBegin.tsx
+++ b/src/components/Action/ActionBegin/ActionBegin.tsx
@@ -99,21 +99,12 @@ const ActionBegin = ({
{currentAction.actionName}
</div>
<div className="action-buttons">
- <Button
- onClick={toggleLaunchModal}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
+ <Button onClick={toggleLaunchModal} className="btnSecondary">
{t('action.apply')}
</Button>
<Button
onClick={() => setShowList(true)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('action.other')}
</Button>
diff --git a/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap b/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap
index 72c90f35e2cbce3c8ffb4a40d599b0ffc929dc63..38532ae8504f0068efbe0ca48f2719a2636cf3a6 100644
--- a/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap
+++ b/src/components/Action/ActionBegin/__snapshots__/ActionBegin.spec.tsx.snap
@@ -433,15 +433,11 @@ exports[`ActionBegin component should render correctly 1`] = `
className="action-buttons"
>
<WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -458,13 +454,13 @@ exports[`ActionBegin component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -478,7 +474,7 @@ exports[`ActionBegin component should render correctly 1`] = `
onClick={[Function]}
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -487,7 +483,7 @@ exports[`ActionBegin component should render correctly 1`] = `
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -503,7 +499,7 @@ exports[`ActionBegin component should render correctly 1`] = `
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -521,7 +517,7 @@ exports[`ActionBegin component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
action.apply
</span>
@@ -559,15 +555,11 @@ exports[`ActionBegin component should render correctly 1`] = `
</ForwardRef(Button)>
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -584,13 +576,13 @@ exports[`ActionBegin component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -604,7 +596,7 @@ exports[`ActionBegin component should render correctly 1`] = `
onClick={[Function]}
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -613,7 +605,7 @@ exports[`ActionBegin component should render correctly 1`] = `
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -629,7 +621,7 @@ exports[`ActionBegin component should render correctly 1`] = `
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -647,7 +639,7 @@ exports[`ActionBegin component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
action.other
</span>
diff --git a/src/components/Action/ActionBegin/actionBegin.scss b/src/components/Action/ActionBegin/actionBegin.scss
index 06c170409b17adcaaea2736f0c89dac2573d6dda..8f25e98d44f3ab866f9c330dbcf5240e81575dd8 100644
--- a/src/components/Action/ActionBegin/actionBegin.scss
+++ b/src/components/Action/ActionBegin/actionBegin.scss
@@ -69,13 +69,9 @@
}
}
.action-buttons {
- button {
- padding: 0.7rem;
- border-color: $grey-bright;
- margin-top: 0.5rem;
- span {
- font-weight: 700;
- }
- }
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
}
}
diff --git a/src/components/Action/ActionDone/ActionDone.tsx b/src/components/Action/ActionDone/ActionDone.tsx
index 0fb8bf669abe747d9cb6589a0ae79a38c5627ad6..13c0a8f689213662ecb05ca6bda88966d7bcf007 100644
--- a/src/components/Action/ActionDone/ActionDone.tsx
+++ b/src/components/Action/ActionDone/ActionDone.tsx
@@ -47,29 +47,15 @@ const ActionDone = ({
<div className="action-done-container">
<div className="action-done">
<div className="result-title"> {t('action.finished')}</div>
- <div className="result-text text-16-normal">
- {t('action.resultText1')}
- </div>
- <div className="result-text text-16-normal">
- {t('action.resultText2')}
- </div>
- <div className="result-text text-16-normal">
- {t('action.resultText3')}
- </div>
- <div className="result-text text-16-normal">
- {t('action.resultText4')}
- </div>
+ <div>{t('action.resultText1')}</div>
+ <div>{t('action.resultText2')}</div>
+ <div>{t('action.resultText3')}</div>
+ <div>{t('action.resultText4')}</div>
<div className="stars">
<span>5</span>
<StyledIcon icon={starFilled} size={33} />
</div>
- <Button
- classes={{
- root: 'btn-secondary-negative btn-detail',
- label: 'text-16-normal',
- }}
- onClick={handleEndAction}
- >
+ <Button className="btnSecondary" onClick={handleEndAction}>
{t('action.ok')}
</Button>
</div>
diff --git a/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap b/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap
index a2b535dc1d65d8f2051464b904be4b09efd62930..050de29fb4a7ff0751636a39c810843994f4c143 100644
--- a/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap
+++ b/src/components/Action/ActionDone/__snapshots__/ActionDone.spec.tsx.snap
@@ -170,24 +170,16 @@ exports[`ActionDone component should be rendered correctly 1`] = `
action.finished
</div>
- <div
- className="result-text text-16-normal"
- >
+ <div>
action.resultText1
</div>
- <div
- className="result-text text-16-normal"
- >
+ <div>
action.resultText2
</div>
- <div
- className="result-text text-16-normal"
- >
+ <div>
action.resultText3
</div>
- <div
- className="result-text text-16-normal"
- >
+ <div>
action.resultText4
</div>
<div
@@ -229,15 +221,11 @@ exports[`ActionDone component should be rendered correctly 1`] = `
</StyledIcon>
</div>
<WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative btn-detail",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -254,13 +242,13 @@ exports[`ActionDone component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn-detail",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -274,7 +262,7 @@ exports[`ActionDone component should be rendered correctly 1`] = `
onClick={[Function]}
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -283,7 +271,7 @@ exports[`ActionDone component should be rendered correctly 1`] = `
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -299,7 +287,7 @@ exports[`ActionDone component should be rendered correctly 1`] = `
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn-detail MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -317,7 +305,7 @@ exports[`ActionDone component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
action.ok
</span>
diff --git a/src/components/Action/ActionDone/actionDone.scss b/src/components/Action/ActionDone/actionDone.scss
index ce2f02bcfcc24ce0030964bb18aa0da532c267e4..3ddbc3295d3215f0768c5b9a36b4acf424e8d2ba 100644
--- a/src/components/Action/ActionDone/actionDone.scss
+++ b/src/components/Action/ActionDone/actionDone.scss
@@ -16,6 +16,7 @@
align-items: center;
justify-content: center;
text-align: center;
+ gap: 1rem;
padding: 3rem 1.2rem;
color: white;
background: $grey-linear-gradient-background;
@@ -26,9 +27,7 @@
color: white;
text-transform: uppercase;
}
- .result-text {
- padding: 0.7rem 0;
- }
+
.stars {
display: flex;
align-items: center;
@@ -39,7 +38,7 @@
margin-right: 0.5rem;
}
}
- button.btn-detail {
+ button {
max-width: 210px;
}
}
diff --git a/src/components/Action/ActionModal/ActionModal.tsx b/src/components/Action/ActionModal/ActionModal.tsx
index c8de7f28d15013698ac854b46ab1c4b21e31ac94..bcb5d019f257d63757f2bcebbfd25cd74a0c261b 100644
--- a/src/components/Action/ActionModal/ActionModal.tsx
+++ b/src/components/Action/ActionModal/ActionModal.tsx
@@ -65,20 +65,14 @@ const ActionModal = ({
<div className="buttons">
<Button
aria-label={t('action_modal.accessibility.button_accept')}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
onClick={launchAction}
>
{t('action_modal.accept')}
</Button>
<Button
aria-label={t('action_modal.accessibility.button_refuse')}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
onClick={handleCloseClick}
>
{t('action_modal.refuse')}
diff --git a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
index 0c8806398fa551f57e1bcda0c2843a113133186f..9e1d70dc3f92d0209b60d30796276111d63e12ce 100644
--- a/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
+++ b/src/components/Action/ActionModal/__snapshots__/ActionModal.spec.tsx.snap
@@ -620,12 +620,12 @@ exports[`ActionModal component should render correctly 1`] = `
>
<button
aria-label="action_modal.accessibility.button_accept"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-normal"
+ class="MuiButton-label"
>
action_modal.accept
</span>
@@ -635,12 +635,12 @@ exports[`ActionModal component should render correctly 1`] = `
</button>
<button
aria-label="action_modal.accessibility.button_refuse"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-normal"
+ class="MuiButton-label"
>
action_modal.refuse
</span>
@@ -903,16 +903,12 @@ exports[`ActionModal component should render correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="action_modal.accessibility.button_accept"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="action_modal.accessibility.button_accept"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -929,13 +925,13 @@ exports[`ActionModal component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -950,7 +946,7 @@ exports[`ActionModal component should render correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="action_modal.accessibility.button_accept"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -960,7 +956,7 @@ exports[`ActionModal component should render correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="action_modal.accessibility.button_accept"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -977,7 +973,7 @@ exports[`ActionModal component should render correctly 1`] = `
>
<button
aria-label="action_modal.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -995,7 +991,7 @@ exports[`ActionModal component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
action_modal.accept
</span>
@@ -1034,16 +1030,12 @@ exports[`ActionModal component should render correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="action_modal.accessibility.button_refuse"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="action_modal.accessibility.button_refuse"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1060,13 +1052,13 @@ exports[`ActionModal component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1081,7 +1073,7 @@ exports[`ActionModal component should render correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="action_modal.accessibility.button_refuse"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -1091,7 +1083,7 @@ exports[`ActionModal component should render correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="action_modal.accessibility.button_refuse"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1108,7 +1100,7 @@ exports[`ActionModal component should render correctly 1`] = `
>
<button
aria-label="action_modal.accessibility.button_refuse"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1126,7 +1118,7 @@ exports[`ActionModal component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
action_modal.refuse
</span>
diff --git a/src/components/Action/ActionModal/actionModal.scss b/src/components/Action/ActionModal/actionModal.scss
index ff9d610dd92a77744ee8286fee2793ae44da5f62..9fc0a38531134834ae1596bc99269650ac9f33cc 100644
--- a/src/components/Action/ActionModal/actionModal.scss
+++ b/src/components/Action/ActionModal/actionModal.scss
@@ -15,8 +15,11 @@
.action-text {
margin: 1.6rem 0;
}
- .buttons button {
- margin-top: 0.5rem;
+ .buttons {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
}
}
diff --git a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
index 5e869ec44ac786f1566741342d72d6b0f2030141..81d15d6abb3eaec8e75a98ac99d64f00f6799e3b 100644
--- a/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
+++ b/src/components/Action/ActionOnGoing/ActionOnGoing.tsx
@@ -88,13 +88,7 @@ const ActionOnGoing = ({ userAction }: { userAction: UserAction }) => {
</div>
<div className="result-title text-18-bold"> {t('action.result')}</div>
<div className="result-date text-24-bold">{getResultDate()}</div>
- <Button
- classes={{
- root: 'btn-secondary-negative btn-detail',
- label: 'text-16-normal',
- }}
- onClick={toggleEcogestureModal}
- >
+ <Button className="btnSecondary" onClick={toggleEcogestureModal}>
{t('action.details')}
</Button>
<EcogestureModal
diff --git a/src/components/Action/ActionOnGoing/actionOnGoing.scss b/src/components/Action/ActionOnGoing/actionOnGoing.scss
index 8aa859eb56f35ce0c9e9a2923e9b8ea8ddea80d2..bced79a459361957a10d0f1de56df14bd2538d87 100644
--- a/src/components/Action/ActionOnGoing/actionOnGoing.scss
+++ b/src/components/Action/ActionOnGoing/actionOnGoing.scss
@@ -24,9 +24,6 @@
color: $blue-light;
margin-bottom: 2rem;
}
- button.btn-detail {
- padding: 0.3rem;
- }
.duration-image {
position: relative;
padding: 1rem;
diff --git a/src/components/Analysis/Comparison/comparison.scss b/src/components/Analysis/Comparison/comparison.scss
index ad321b9c06d3afe6598b6c5d800ad3136736caa9..e19bbf60914f78b8c9b2f3136744b442608348d3 100644
--- a/src/components/Analysis/Comparison/comparison.scss
+++ b/src/components/Analysis/Comparison/comparison.scss
@@ -10,12 +10,14 @@
background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
linear-gradient(180deg, #323339 0%, #25262b 100%);
border-radius: 4px 4px 0px 0px;
- color: #ffffff;
- text-transform: none;
- font-size: 0.75rem;
- line-height: 1.3;
- padding: 0.5rem 0;
box-shadow: 6px 0px 12px rgba(0, 0, 0, 0.3);
+ padding: 0.5rem 0;
+ span {
+ color: #ffffff;
+ text-transform: none;
+ font-size: 0.75rem;
+ line-height: 1.3;
+ }
&.active {
background: #5e5e5e;
}
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 88c4aa8ec70d728fbe32848d9bc463299b0af6e5..57088eb6d58a8c290fcfd722290ff7cf01da4596 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -126,7 +126,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
</Provider>
)
await waitForComponentToPaint(wrapper)
- wrapper.find('.showmodal').first().simulate('click')
+ wrapper.find('.btnText').first().simulate('click')
await waitForComponentToPaint(wrapper)
expect(wrapper.find('mock-elecinfomodal').prop('open')?.valueOf()).toBe(
true
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index 362cfc35ad3ad2907fb2db7dcfe974675f658d17..4656b493d2289f96eab56868efd15bb8da8908b1 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import LeftArrowIcon from 'assets/icons/ico/left-arrow.svg'
import MaxPowerIcon from 'assets/icons/ico/maxPower.svg'
@@ -233,9 +234,9 @@ const ElecHalfHourMonthlyAnalysis = ({
</div>
</div>
- <div onClick={toggleOpenModal} className="showmodal">
+ <Button className="btnText" onClick={toggleOpenModal}>
{t('special_elec.showModal')}
- </div>
+ </Button>
</div>
)}
</>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 582ffd247a66d746c36f5af83ad4a139fa3f1638..3e0e4b36eeb61c61c7bc4a09ffe3ff483f5410c4 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -77,12 +77,9 @@
text-align: center;
color: white;
}
- .showmodal {
- cursor: pointer;
- margin: 1.5rem 0 0.5rem;
- text-align: center;
- color: $grey-bright;
- text-decoration: underline;
+ button {
+ display: flex;
+ margin: auto;
}
}
.graph-elec-half-hour {
diff --git a/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx b/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
index 09e0b8c749d2b0e44d236dc1870d29b0a3a9a834..c543f56bd904e0c4eae38680945db8f50aa2518b 100644
--- a/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
+++ b/src/components/Analysis/NoKonnector/NoAnalysisModal.tsx
@@ -46,27 +46,21 @@ const NoAnalysisModal = ({
<div className="analysis-error-button">
<Button
aria-label={t(
- 'analysis_error_modal.accessibility.button_understood'
+ 'analysis_error_modal.accessibility.button_goto_konnector'
)}
- onClick={close}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
+ onClick={goToConsumption}
+ className="btnPrimary"
>
- {t('analysis_error_modal.understood')}
+ {t('analysis_error_modal.go_to_conso')}
</Button>
<Button
aria-label={t(
- 'analysis_error_modal.accessibility.button_goto_konnector'
+ 'analysis_error_modal.accessibility.button_understood'
)}
- onClick={goToConsumption}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ onClick={close}
+ className="btnSecondary"
>
- {t('analysis_error_modal.go_to_conso')}
+ {t('analysis_error_modal.understood')}
</Button>
</div>
</div>
diff --git a/src/components/Analysis/NoKonnector/noAnalysisModal.scss b/src/components/Analysis/NoKonnector/noAnalysisModal.scss
index 4f89990b3f6f2be0af45c5f253e741fd9c5e9122..5e5986b88232eede2c7a6cb60e3f094bdb504808 100644
--- a/src/components/Analysis/NoKonnector/noAnalysisModal.scss
+++ b/src/components/Analysis/NoKonnector/noAnalysisModal.scss
@@ -12,20 +12,7 @@
}
.analysis-error-button {
display: flex;
- justify-content: space-between;
+ flex-wrap: wrap;
gap: 1rem;
- button {
- margin: 0;
- height: 45px;
- &.btn-secondary-positive {
- margin-bottom: 0;
- }
- }
- @media #{$large-phone} {
- flex-direction: column-reverse;
- button {
- width: 100%;
- }
- }
}
}
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
index 29ae370e40395e327ba1fa1a89fa5518dbd771fc..052085402dae779978c894671a7bd5bb0c815757 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparator.tsx
@@ -136,9 +136,10 @@ const ProfileComparator = ({
aria-label={t('analysis.accessibility.button_go_to_profil')}
onClick={() => navigate('/profileType')}
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
+ size="large"
>
{t('analysis.accessibility.button_go_to_profil')}
</Button>
@@ -251,10 +252,7 @@ const ProfileComparator = ({
<Button
aria-label={t('analysis.accessibility.button_go_to_profil')}
onClick={() => navigate('/profileType')}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnIcon"
>
<StyledIcon icon={ProfileEditIcon} size={40} />
</Button>
diff --git a/src/components/Analysis/ProfileComparator/profileComparator.scss b/src/components/Analysis/ProfileComparator/profileComparator.scss
index 65a183b8473c8bbe3e2f5f743bebdd8d8b813d9a..6ca14b923405df814f974b0c4906662aa26cf16a 100644
--- a/src/components/Analysis/ProfileComparator/profileComparator.scss
+++ b/src/components/Analysis/ProfileComparator/profileComparator.scss
@@ -62,6 +62,5 @@
}
button {
max-width: $width-small-phone;
- margin-top: 0;
}
}
diff --git a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
index f2b7e412e65a908505e1c4a28341377f72bde2d7..fd512fb31d2d47fd0ec432c8c6a64700f2b7b3d8 100644
--- a/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
+++ b/src/components/Analysis/TotalAnalysisChart/TotalAnalysisChart.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core'
import EstimatedConsumptionModal from 'components/ConsumptionVisualizer/EstimatedConsumptionModal'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
@@ -105,8 +106,8 @@ const TotalAnalysisChart = ({
{t('analysis_pie.month') +
getMonthNameWithPrep(analysisMonth.minus({ month: 1 }))}
</div>
- <div
- className="text-14-normal estimation-text"
+ <Button
+ className="btnText"
onClick={() => setOpenEstimationModal(true)}
>
<span
@@ -115,7 +116,7 @@ const TotalAnalysisChart = ({
__html: t('analysis_pie.estimation'),
}}
/>
- </div>
+ </Button>
</PieChart>
<EstimatedConsumptionModal
open={openEstimationModal}
diff --git a/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss b/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
index efe2023b8a502e6598304d6322a9a460b913d65b..7af8f1620cbcd0a5de0d99530f5504b009be1581 100644
--- a/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
+++ b/src/components/Analysis/TotalAnalysisChart/totalAnalysisChart.scss
@@ -44,11 +44,11 @@
text-transform: uppercase;
color: $soft-grey;
display: inline-block;
- margin: 0.5rem 0;
+ margin: 4px 0;
}
- .estimated {
- display: block;
- text-decoration: underline;
+ button .estimated {
+ line-height: 20px;
+ font-weight: 700;
}
.circle {
box-sizing: border-box;
@@ -96,7 +96,4 @@
font-size: 1rem;
}
}
- .estimation-text {
- cursor: pointer;
- }
}
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index 10241fe3a73757a53172831b2ae2bb92f351b897..15f293d72097d6eeab8e3212c9e6f473ae7679d0 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -35,7 +35,8 @@
display: flex;
justify-self: end;
}
- button.btn-secondary-negative {
+ button.btnIcon {
+ border: 1px solid $grey-bright;
min-width: 40px;
width: 40px;
height: 40px;
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5cfeb0f21cd9c288dd8b4c81fadedac567abdc3d..548c4ff7290146453390c3f12da617cdee647601 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from '@material-ui/core'
import Navbar from 'components/Navbar/Navbar'
import AppRoutes from 'components/Routes/Routes'
import SplashRoot from 'components/Splash/SplashRoot'
@@ -8,6 +9,7 @@ import React, { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import MatomoTracker from 'utils/matomoTracker'
+import { theme } from './theme'
interface AppProps {
tracker: undefined | MatomoTracker
@@ -36,17 +38,19 @@ export const App = ({ tracker }: AppProps) => {
return (
<Layout>
- <SplashRoot>
- {termsStatus.accepted && (
- <>
- <WelcomeModal open={!onboarding.isWelcomeSeen} />
- <Navbar />
- </>
- )}
- <main className="app-content">
- <AppRoutes termsStatus={termsStatus} />
- </main>
- </SplashRoot>
+ <ThemeProvider theme={theme}>
+ <SplashRoot>
+ {termsStatus.accepted && (
+ <>
+ <WelcomeModal open={!onboarding.isWelcomeSeen} />
+ <Navbar />
+ </>
+ )}
+ <main className="app-content">
+ <AppRoutes termsStatus={termsStatus} />
+ </main>
+ </SplashRoot>
+ </ThemeProvider>
</Layout>
)
}
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
index 21a0b674c6d80993b88513fccaa4060c288f00e6..99f3ed4c387981df137672e7fec13ecf6c771127 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.spec.tsx
@@ -80,7 +80,7 @@ describe('ChallengeCardDone component', () => {
)
await waitForComponentToPaint(wrapper)
const resetButton = wrapper.find('button').last()
- expect(resetButton.hasClass('btn-primary-challenge')).toBe(true)
+ expect(resetButton.hasClass('btnPrimaryNegative')).toBe(true)
})
it('should be secondary button is challenge is won', async () => {
const wrapper = mount(
@@ -90,7 +90,7 @@ describe('ChallengeCardDone component', () => {
)
await waitForComponentToPaint(wrapper)
const resetButton = wrapper.find('button').last()
- expect(resetButton.hasClass('btn-secondary-negative')).toBe(true)
+ expect(resetButton.hasClass('btnSecondary')).toBe(true)
})
})
})
diff --git a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
index 59e2c9e272a1334bd9a70876578837457e0601c3..ecd61187a90d559d0fac0a08f6d1b9319af8f0c1 100644
--- a/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
+++ b/src/components/Challenge/ChallengeCardDone/ChallengeCardDone.tsx
@@ -118,23 +118,18 @@ const ChallengeCardDone = ({
<Button
aria-label={t('challenge.card_done.final_defi_view')}
onClick={goDuel}
- classes={{
- root: 'btn-secondary-negative grey-border',
- label: 'text-15-bold',
- }}
+ className="btnSecondary"
>
{t('challenge.card_done.final_defi_view')}
</Button>
<Button
aria-label={t('challenge.card_done.reset_defi')}
onClick={handleChallengeReset}
- classes={{
- root:
- userChallenge.success === UserChallengeSuccess.WIN
- ? 'btn-secondary-negative grey-border'
- : 'btn-primary-challenge',
- label: 'text-15-bold',
- }}
+ className={
+ userChallenge.success === UserChallengeSuccess.WIN
+ ? 'btnSecondary'
+ : 'btnPrimaryNegative'
+ }
disabled={currentChallenge !== null}
>
{t('challenge.card_done.reset_defi')}
diff --git a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
index 5395d8e193876cc7176b2022e6717eac11544c5e..8f627a3f52a24cea6ecf613fb56804a203e0a4c9 100644
--- a/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardDone/__snapshots__/ChallengeCardDone.spec.tsx.snap
@@ -231,16 +231,12 @@ VEILLE
>
<WithStyles(ForwardRef(Button))
aria-label="challenge.card_done.final_defi_view"
- classes={
- Object {
- "label": "text-15-bold",
- "root": "btn-secondary-negative grey-border",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="challenge.card_done.final_defi_view"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -257,13 +253,13 @@ VEILLE
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-15-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative grey-border",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -278,7 +274,7 @@ VEILLE
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="challenge.card_done.final_defi_view"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -288,7 +284,7 @@ VEILLE
>
<ForwardRef(ButtonBase)
aria-label="challenge.card_done.final_defi_view"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -305,7 +301,7 @@ VEILLE
>
<button
aria-label="challenge.card_done.final_defi_view"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative grey-border MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -323,7 +319,7 @@ VEILLE
type="button"
>
<span
- className="MuiButton-label text-15-bold"
+ className="MuiButton-label"
>
challenge.card_done.final_defi_view
</span>
@@ -362,17 +358,13 @@ VEILLE
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="challenge.card_done.reset_defi"
- classes={
- Object {
- "label": "text-15-bold",
- "root": "btn-secondary-negative grey-border",
- }
- }
+ className="btnSecondary"
disabled={false}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="challenge.card_done.reset_defi"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -389,13 +381,13 @@ VEILLE
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-15-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative grey-border",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -411,7 +403,7 @@ VEILLE
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="challenge.card_done.reset_defi"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -421,7 +413,7 @@ VEILLE
>
<ForwardRef(ButtonBase)
aria-label="challenge.card_done.reset_defi"
- className="MuiButton-root btn-secondary-negative grey-border MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -438,7 +430,7 @@ VEILLE
>
<button
aria-label="challenge.card_done.reset_defi"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative grey-border MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -456,7 +448,7 @@ VEILLE
type="button"
>
<span
- className="MuiButton-label text-15-bold"
+ className="MuiButton-label"
>
challenge.card_done.reset_defi
</span>
diff --git a/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss b/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss
index d4ff21eb97b218ed8b8f6936b84a6d7bf176e641..ec6af5ef49933579459bc3a750a488169bcdc6af 100644
--- a/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss
+++ b/src/components/Challenge/ChallengeCardDone/challengeCardDone.scss
@@ -41,19 +41,12 @@
.statsResult {
text-align: center;
}
+
.buttons {
display: flex;
flex-direction: column;
- gap: 8px;
+ gap: 1rem;
width: 100%;
-
- button {
- padding: 0.625rem;
- margin: 0;
- &.grey-border {
- border: 1px solid $grey-bright;
- }
- }
}
}
}
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
index 7cd4d37df410927a86fa7683458f2d2a8465521e..06e3e75844dbef58fd1dcb812e0fabc229ed50ea 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.spec.tsx
@@ -16,7 +16,7 @@ describe('ChallengeCardLast component', () => {
global.open = jest.fn()
const wrapper = mount(<ChallengeCardLast />)
- wrapper.find('.btn_lastCard').first().simulate('click')
+ wrapper.find('.btnSecondary').first().simulate('click')
expect(window.open).toHaveBeenCalledTimes(1)
expect(global.open).toHaveBeenCalledWith(
`${__SAU_IDEA_DIRECT_LINK__}?version=0.0.0`
diff --git a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
index c811000446f86b208f252d79a020f4f2ce764516..2fef4046dc7682b742ff8e871321843be3dc119a 100644
--- a/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
+++ b/src/components/Challenge/ChallengeCardLast/ChallengeCardLast.tsx
@@ -21,22 +21,12 @@ const ChallengeCardLast = () => {
return (
<div className="cardLast">
<StyledIcon icon={ecolyoIcon} size={62} />
- <div className="content">
- <div className="text-22-bold title-last">
- {t('challenge.card_last.title')}
- </div>
- <div className="text-18-normal message">
- {t('challenge.card_last.message1')}
- </div>
- </div>
+ <div className="text-22-bold">{t('challenge.card_last.title')}</div>
+ <div className="text-18-normal">{t('challenge.card_last.message1')}</div>
<Button
aria-label={t('challenge.card_last.button')}
onClick={handleClickFeedbacks}
- className="btn1"
- classes={{
- root: 'btn-secondary-negative btn_lastCard',
- label: 'text-15-bold',
- }}
+ className="btnSecondary"
>
{t('challenge.card_last.button')}
</Button>
diff --git a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
index 2242865caf89c2e64c3b73bf1ffd5d778fcfb83a..1f2d1bd3346b62ebdc82ddf3d78b16f6be7801bd 100644
--- a/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeCardLast/__snapshots__/ChallengeCardLast.spec.tsx.snap
@@ -37,33 +37,23 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
</Icon>
</StyledIcon>
<div
- className="content"
+ className="text-22-bold"
>
- <div
- className="text-22-bold title-last"
- >
- challenge.card_last.title
- </div>
- <div
- className="text-18-normal message"
- >
- challenge.card_last.message1
- </div>
+ challenge.card_last.title
+ </div>
+ <div
+ className="text-18-normal"
+ >
+ challenge.card_last.message1
</div>
<WithStyles(ForwardRef(Button))
aria-label="challenge.card_last.button"
- className="btn1"
- classes={
- Object {
- "label": "text-15-bold",
- "root": "btn-secondary-negative btn_lastCard",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="challenge.card_last.button"
- className="btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -80,13 +70,13 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-15-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn_lastCard",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -101,7 +91,7 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="challenge.card_last.button"
- className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -111,7 +101,7 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="challenge.card_last.button"
- className="MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -128,7 +118,7 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
>
<button
aria-label="challenge.card_last.button"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn_lastCard MuiButton-text btn1"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -146,7 +136,7 @@ exports[`ChallengeCardLast component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-15-bold"
+ className="MuiButton-label"
>
challenge.card_last.button
</span>
diff --git a/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss b/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
index 261e1bd0c3943cf0963800bd0ab74fb3c9c95790..b4cdf2d1b932027afd3d32d79af767911ecb5f3b 100644
--- a/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
+++ b/src/components/Challenge/ChallengeCardLast/challengeCardLast.scss
@@ -2,40 +2,20 @@
@import 'src/styles/base/color';
.cardLast {
- width: 100%;
height: inherit;
box-sizing: border-box;
- padding: 5%;
+ padding: 1rem;
transition: all 300ms ease;
border: 1px solid $grey-bright;
border-radius: 4px;
- align-items: center;
text-align: center;
display: flex;
flex-direction: column;
- .content {
- max-height: 350px;
- flex-direction: column;
- display: flex;
- }
+ align-items: center;
+ justify-content: space-between;
+
svg {
max-height: 150px;
- }
- .title-last {
- padding: 1rem 2.3rem 1.5rem;
- }
- .message {
- margin: 0 0 0.7rem;
- }
- .btn_lastCard {
- padding: 8px;
- max-height: 40px;
- }
- .content,
- .title-last,
- .message,
- .btn_lastCard,
- svg {
flex: 1;
}
}
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index 9d449c427f23834fe7568d805ffb4982e8608e4f..e5996a0bdee258939f48357b3ce51c2abf23c28b 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -51,6 +51,10 @@ const ChallengeCardOnGoing = ({
duel,
} = userChallenge
+ const quizFinished = userChallenge.progress.quizProgress === 5
+ const explorationFinished = userChallenge.progress.explorationProgress === 5
+ const actionFinished = userChallenge.progress.actionProgress === 5
+
const toggleNoFluidModal = useCallback(() => {
setIsOneFluidUp(prev => !prev)
}, [])
@@ -157,19 +161,15 @@ const ChallengeCardOnGoing = ({
const quizButton = () => (
<Button
title={t('challenge.card.ongoing.quiz')}
- tabIndex={userChallenge.progress.quizProgress === 5 ? -1 : 0}
+ tabIndex={quizFinished ? -1 : 0}
className={classNames('smallCard', {
- ['finished']: userChallenge.progress.quizProgress === 5,
+ ['finished']: quizFinished,
})}
onClick={goQuiz}
>
<StyledIcon
className="cardIcon"
- icon={
- userChallenge.progress.quizProgress === 5
- ? circleChecked
- : circleUnchecked
- }
+ icon={quizFinished ? circleChecked : circleUnchecked}
size={25}
/>
<div className="content">
@@ -182,19 +182,15 @@ const ChallengeCardOnGoing = ({
const explorationButton = () => (
<Button
title={t('challenge.card.ongoing.exploration')}
- tabIndex={userChallenge.progress.explorationProgress === 5 ? -1 : 0}
+ tabIndex={explorationFinished ? -1 : 0}
className={classNames('smallCard explorationCard', {
- ['finished']: userChallenge.progress.explorationProgress === 5,
+ ['finished']: explorationFinished,
})}
onClick={goExploration}
>
<StyledIcon
className="cardIcon"
- icon={
- userChallenge.progress.explorationProgress === 5
- ? circleChecked
- : circleUnchecked
- }
+ icon={explorationFinished ? circleChecked : circleUnchecked}
size={25}
/>
{userChallenge.exploration.state ===
@@ -211,19 +207,15 @@ const ChallengeCardOnGoing = ({
const actionButton = () => (
<Button
title={t('challenge.card.ongoing.action')}
- tabIndex={userChallenge.progress.actionProgress === 5 ? -1 : 0}
+ tabIndex={actionFinished ? -1 : 0}
className={classNames('smallCard actionCard', {
- ['finished']: userChallenge.progress.actionProgress === 5,
+ ['finished']: actionFinished,
})}
onClick={goAction}
>
<StyledIcon
className="cardIcon"
- icon={
- userChallenge.progress.actionProgress === 5
- ? circleChecked
- : circleUnchecked
- }
+ icon={actionFinished ? circleChecked : circleUnchecked}
size={25}
/>
{userChallenge.action.state === UserActionState.NOTIFICATION && (
diff --git a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
index 7c00250c8078cc0077acb4a9ab0151b781e68a59..64325543a8cf93f098d8ab8ffce8333bd790e6b1 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
+++ b/src/components/Challenge/ChallengeCardOnGoing/challengeCardOnGoing.scss
@@ -14,6 +14,10 @@
flex-direction: column;
justify-content: center;
gap: 1rem;
+
+ button {
+ height: unset;
+ }
}
.titleBlock {
position: absolute;
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
index 04014cf96f27ac15071b2dab80342001f909dbdf..1d6e580a78ae6ef54c47062a317c4536572d1b73 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.spec.tsx
@@ -34,7 +34,7 @@ describe('ChallengeCardUnlocked component', () => {
</Provider>
)
expect(wrapper.find('.challengeTitle').text()).toEqual('Simone\nVEILLE')
- expect(wrapper.find('.btn-duel-active').exists()).toBeTruthy()
+ expect(wrapper.find('.btnPrimaryNegative').exists()).toBeTruthy()
expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
})
@@ -45,7 +45,7 @@ describe('ChallengeCardUnlocked component', () => {
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.btn-duel-active').first().simulate('click')
+ wrapper.find('.btnPrimaryNegative').first().simulate('click')
expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeTruthy()
})
@@ -63,7 +63,7 @@ describe('ChallengeCardUnlocked component', () => {
<ChallengeCardUnlocked userChallenge={userChallengeData[0]} />
</Provider>
)
- wrapper.find('.btn-duel-active').first().simulate('click')
+ wrapper.find('.btnPrimaryNegative').first().simulate('click')
expect(wrapper.find(ChallengeNoFluidModal).exists()).toBeTruthy()
expect(wrapper.find(ChallengeNoFluidModal).prop('open')).toBeFalsy()
expect(mockStartUserChallenge).toHaveBeenCalledWith(userChallengeData[0])
diff --git a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
index fb2e03e393890f33155d052fdb4a9dd1e2012505..be661f7eb8a4002db535d7d089470063483d0d97 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
+++ b/src/components/Challenge/ChallengeCardUnlocked/ChallengeCardUnlocked.tsx
@@ -87,10 +87,7 @@ const ChallengeCardUnlocked = ({
<Button
aria-label={t('challenge.accessibility.button_launch')}
onClick={launchChallenge}
- classes={{
- root: 'btn-duel-active',
- label: 'text-16-bold',
- }}
+ className="btnPrimaryNegative"
disabled={currentChallenge !== null}
>
{t('challenge.card_unlocked.button_launch')}
diff --git a/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss b/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss
index 8bfb434765f3c984b73688c66c7404f51adb41a1..13f1fb50eb5218856b079a985f2254d9fc596ef6 100644
--- a/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss
+++ b/src/components/Challenge/ChallengeCardUnlocked/challengeCardUnlocked.scss
@@ -9,13 +9,14 @@
background: linear-gradient(180deg, #323339 0%, $dark-light 100%);
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.55));
- button.btn-duel-active {
- padding: 1.2rem 1.5rem;
- }
.challengeIcon {
@media all and(max-height: 700px) {
width: 65%;
margin: auto;
}
}
+
+ button {
+ height: 60px;
+ }
}
diff --git a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
index b696d9722b077d6c40d0a711658e2a2f47fc215a..f59ef96d038a97a10d24ec3b4ef4e908f16b6649 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
+++ b/src/components/Challenge/ChallengeNoFluidModal/ChallengeNoFluidModal.tsx
@@ -43,10 +43,7 @@ const ChallengeNoFluidModal = ({
'challenge_no_fluid_modal.accessibility.button_validate'
)}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('challenge_no_fluid_modal.button_validate')}
</Button>
diff --git a/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap b/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
index 924173886a3f52fcf8ccf580a5407f05b7494f8d..ea6611f7d2bbdd825204d8a944950365c38f0028 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
+++ b/src/components/Challenge/ChallengeNoFluidModal/__snapshots__/ChallengeNoFluidModal.spec.tsx.snap
@@ -33,12 +33,7 @@ exports[`ChallengeNoFluidModal component should be rendered correctly opened 1`]
</div>
<WithStyles(ForwardRef(Button))
aria-label="challenge_no_fluid_modal.accessibility.button_validate"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
challenge_no_fluid_modal.button_validate
diff --git a/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss b/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss
index 01b40b1757680f8a4f4ecf4f5bcdd2fe6c5ec132..49dcc527410c785cfe834955e9e0e06dd8851595 100644
--- a/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss
+++ b/src/components/Challenge/ChallengeNoFluidModal/challengeNoFluidModal.scss
@@ -3,27 +3,17 @@
.noFluidModal {
padding: 1rem;
max-width: 20rem;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.no-fluid-title {
text-transform: uppercase;
font-size: 1.8rem;
- color: white;
- font-family: $text-font;
- margin: 0.5rem auto;
- text-align: center;
}
.no-fluid-content {
font-size: 1.1rem;
- color: white;
- font-family: $text-font;
- text-align: center;
- }
- button.btn-secondary-negative {
- display: block;
- text-align: center;
- margin: auto;
- margin-top: 3.5rem;
- margin-bottom: 0;
}
}
.nofluid-portal {
diff --git a/src/components/CommonKit/FormNavigation/FormNavigation.tsx b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
index 7669a380caa421d978f7225640163710e32ca60b..be6e49794736fb118e6d1215b314976f231b4c62 100644
--- a/src/components/CommonKit/FormNavigation/FormNavigation.tsx
+++ b/src/components/CommonKit/FormNavigation/FormNavigation.tsx
@@ -1,5 +1,4 @@
import Button from '@material-ui/core/Button'
-import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { EcogestureStepForm, ProfileTypeStepForm, SgeStep } from 'enums'
import React, { useCallback } from 'react'
@@ -50,7 +49,7 @@ const FormNavigation = ({
) {
return t('profile_type.form.button_end')
} else {
- return `${t('profile_type.form.button_next')} >`
+ return t('profile_type.form.button_next')
}
}, [isEcogesture, isLastConnectStep, isLoading, step, t])
@@ -59,16 +58,12 @@ const FormNavigation = ({
<Button
aria-label={t('profile_type.accessibility.button_previous')}
onClick={handlePreviousClick}
- className="profile-navigation-button"
+ className="btnSecondary"
disabled={
disablePrevButton || step === ProfileTypeStepForm.HOUSING_TYPE
}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
>
- {`< ${t('profile_type.form.button_previous')}`}
+ {t('profile_type.form.button_previous')}
</Button>
<Button
aria-label={
@@ -78,14 +73,8 @@ const FormNavigation = ({
: t('profile_type.accessibility.button_next')
}
onClick={handleNextClick}
- className={classNames('profile-navigation-button', {
- ['disabled']: disableNextButton,
- })}
+ className="btnPrimary"
disabled={disableNextButton}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
>
{getSecondButtonLabel()}
</Button>
diff --git a/src/components/CommonKit/FormNavigation/formNavigation.scss b/src/components/CommonKit/FormNavigation/formNavigation.scss
index 92c4c331090d526d53c4e9d77dfdd01a41c16be4..c954b8d9fa16d6c5cedec0b8ebf08792f4748418 100644
--- a/src/components/CommonKit/FormNavigation/formNavigation.scss
+++ b/src/components/CommonKit/FormNavigation/formNavigation.scss
@@ -3,7 +3,6 @@
.profile-navigation {
border-top: 1px solid $grey-dark;
- background: $dark-2;
display: flex;
justify-content: center;
align-items: center;
@@ -15,9 +14,7 @@
height: 3rem;
}
- button.profile-navigation-button {
+ button {
max-width: 12.5rem;
- margin: 0;
- padding: 0.5rem 1rem;
}
}
diff --git a/src/components/Connection/EPGLConnect/EpglBill.tsx b/src/components/Connection/EPGLConnect/EpglBill.tsx
index 2141111af9f9473bb61c88c65462e8dd4061918d..113c53dc041a033cc9ecb5b12e3de39feeccebee 100644
--- a/src/components/Connection/EPGLConnect/EpglBill.tsx
+++ b/src/components/Connection/EPGLConnect/EpglBill.tsx
@@ -31,19 +31,13 @@ const EpglBill = () => {
<Button
aria-label={t('auth.eglgrandlyon.accessibility.connect')}
onClick={() => dispatch(openConnectionModal(true))}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('auth.eglgrandlyon.connect')}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
- classes={{
- root: 'btn-secondary',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
onClick={() => dispatch(setShowOfflineData(true))}
>
{t('auth.button_showOfflineData')}
diff --git a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
index 31a63e9ac922cf8254ba27d623872b955c5c9dcd..3d17b4adb881229e024a767a57496c4e2edf94f5 100644
--- a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
+++ b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
@@ -1,6 +1,7 @@
import Button from '@material-ui/core/Button'
import * as Sentry from '@sentry/react'
import TrailingIcon from 'assets/icons/ico/trailing-icon.svg'
+import classNames from 'classnames'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import useKonnectorAuth from 'components/Hooks/useKonnectorAuth'
@@ -49,8 +50,7 @@ const FormLogin = () => {
setPassword(value)
}
- const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
- e.preventDefault()
+ const handleSubmit = async () => {
try {
setError('')
setLoading(true)
@@ -90,19 +90,12 @@ const FormLogin = () => {
}, [account, lastEpglLogin, t])
return (
- <form
- className="form"
- onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleSubmit(e)}
- >
+ <form>
<div className="form-group">
<input
id={'idFieldLogin' + fluidName}
type="number"
- className={
- error === ''
- ? 'form-control form-input'
- : 'form-control form-input --error'
- }
+ className={classNames('inputText', { error: error !== '' })}
aria-label={t(`auth.${konnectorSlug}.connect_form.login`)}
placeholder={t(`auth.${konnectorSlug}.connect_form.login`)}
name="login"
@@ -116,11 +109,7 @@ const FormLogin = () => {
id={'idFieldPassword' + fluidName}
name="password"
type={showPassword ? 'text' : 'password'}
- className={
- error === ''
- ? 'form-control form-input'
- : 'form-control form-input --error'
- }
+ className={classNames('inputText', { error: error !== '' })}
aria-label={t(`auth.${konnectorSlug}.connect_form.password`)}
placeholder={t(`auth.${konnectorSlug}.connect_form.password`)}
onChange={e => changePassword(e.target.value)}
@@ -139,13 +128,13 @@ const FormLogin = () => {
<div className="form-message">{error === '' ? null : error}</div>
<div className="connection-form-connect-button">
<Button
- type="submit"
aria-label={t('auth.accessibility.button_connect')}
disabled={loading}
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
+ onClick={handleSubmit}
>
<div className="connection-form-connect-button-content">
<div className="connection-form-connect-button-content-icon">
diff --git a/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss b/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
index 861494685a143dc12d1d0ec945f917e05372792f..92be631cd3d13a41bc390b45a8e520e2de1256ab 100644
--- a/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
+++ b/src/components/Connection/EPGLConnect/FormLogin/formLogin.scss
@@ -1,11 +1,13 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+@import 'src/styles/components/input';
+
+form {
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
-.form {
- margin: 0 1.3rem 1rem;
- @media #{$large-phone} {
- margin: 0 0 0.25rem;
- }
.form-info-provider {
padding: 0;
margin: 0;
@@ -19,25 +21,16 @@
color: $grey-bright;
margin-top: 0rem;
}
- .form-input {
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid #7b7b7b;
- border-radius: 4px;
- color: $grey-bright;
- padding: 0 5%;
- outline-offset: -1px;
- &.--error {
- border: 1px solid $red-primary;
- }
- }
- .form-input:focus {
- outline: none;
- border: 1px solid $gold-shadow;
- }
+
.form-group {
display: flex;
flex-direction: column;
- margin: 0.75rem 0 0 0;
+ input {
+ max-width: unset;
+ &.error {
+ border: 1px solid $red-primary;
+ }
+ }
.form-trailing-icon {
float: right;
position: relative;
@@ -45,22 +38,9 @@
margin-right: 15px;
}
}
- .form-control {
- height: 3rem;
- @media #{$large-phone} {
- max-width: 100vw;
- }
- }
.form-message {
color: $red-primary;
min-height: 1.25rem;
margin-top: 0.25rem;
}
- button.btn-highlight {
- margin-top: 0.75rem;
- }
- ::placeholder {
- color: $grey-bright;
- opacity: 0.6;
- }
}
diff --git a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
index 6060c4ecea8c7fcde90ac452a1816db1e4fa476b..6e9206ed479322b24a7b216fa0cef17c09245eab 100644
--- a/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
+++ b/src/components/Connection/ExpiredConsentModal/ExpiredConsentModal.tsx
@@ -90,20 +90,15 @@ const ExpiredConsentModal = ({
<div className={`text-20-bold title ${getFluidName(fluidType)}`}>
{t(`consent_outdated.title.${fluidType}`)}
</div>
- <div className="text-16-normal text1">
- {t(`consent_outdated.text1.${fluidType}`)}
- </div>
- <div className="text-16-normal justified-text">
+ <div>{t(`consent_outdated.text1.${fluidType}`)}</div>
+ <div className="text-16-bold">
{t(`consent_outdated.text2.${fluidType}`)}
</div>
<div className="buttons">
<Button
aria-label={t('consent_outdated.later')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{fluidType === FluidType.ELECTRICITY
? t('consent_outdated.no')
@@ -112,10 +107,7 @@ const ExpiredConsentModal = ({
<Button
aria-label={t('consent_outdated.go')}
onClick={launchUpdateConsent}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{fluidType === FluidType.ELECTRICITY
? t('consent_outdated.yes')
diff --git a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
index 4288ee9d7a22a3dfc207be38ea715fca1ae4b6cd..f1ff5a23d2181ea28a56a76fabd38ddabd670b36 100644
--- a/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
+++ b/src/components/Connection/ExpiredConsentModal/__snapshots__/ExpiredConsentModal.spec.tsx.snap
@@ -466,13 +466,11 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
consent_outdated.title.0
</div>
- <div
- class="text-16-normal text1"
- >
+ <div>
consent_outdated.text1.0
</div>
<div
- class="text-16-normal justified-text"
+ class="text-16-bold"
>
consent_outdated.text2.0
</div>
@@ -481,12 +479,12 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<button
aria-label="consent_outdated.later"
- class="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-normal"
+ class="MuiButton-label"
>
consent_outdated.no
</span>
@@ -496,12 +494,12 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
</button>
<button
aria-label="consent_outdated.go"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
consent_outdated.yes
</span>
@@ -883,13 +881,11 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
consent_outdated.title.0
</div>
- <div
- className="text-16-normal text1"
- >
+ <div>
consent_outdated.text1.0
</div>
<div
- className="text-16-normal justified-text"
+ className="text-16-bold"
>
consent_outdated.text2.0
</div>
@@ -898,16 +894,12 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="consent_outdated.later"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-positive",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="consent_outdated.later"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -924,13 +916,13 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-positive",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -945,7 +937,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="consent_outdated.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -955,7 +947,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="consent_outdated.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -972,7 +964,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<button
aria-label="consent_outdated.later"
- className="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -990,7 +982,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
consent_outdated.no
</span>
@@ -1029,16 +1021,12 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="consent_outdated.go"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="consent_outdated.go"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1055,13 +1043,13 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1076,7 +1064,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="consent_outdated.go"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1086,7 +1074,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="consent_outdated.go"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1103,7 +1091,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
>
<button
aria-label="consent_outdated.go"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -1121,7 +1109,7 @@ exports[`ExpiredConsentModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
consent_outdated.yes
</span>
diff --git a/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss b/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss
index c98e678e88aee9d88611af579fc0f3cfcfab04fc..929dea4460217dddf286f52f02f557ff0b8ec407 100644
--- a/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss
+++ b/src/components/Connection/ExpiredConsentModal/expiredConsentModal.scss
@@ -1,12 +1,18 @@
@import 'src/styles/base/color';
.expired-consent-modal {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ color: $grey-bright;
+
.icon-main {
display: flex;
svg {
margin: auto;
}
}
+
.title {
text-align: center;
&.electricity {
@@ -16,14 +22,10 @@
color: $gas-color;
}
}
- .text1 {
- color: $grey-bright;
- margin: 1rem 0;
- }
+
.buttons {
display: flex;
- button.btn-secondary-positive {
- margin-right: 1rem;
- }
+ flex-direction: column;
+ gap: 1rem;
}
}
diff --git a/src/components/Connection/GRDFConnect/GrdfBill.tsx b/src/components/Connection/GRDFConnect/GrdfBill.tsx
index 37a52dd2b6dbdb51127424dcc9ea802d408a1b7c..2ca3a67747bd2612f56271b14658dd7d388b5901 100644
--- a/src/components/Connection/GRDFConnect/GrdfBill.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfBill.tsx
@@ -30,19 +30,13 @@ const GrdfBill = () => {
<Button
aria-label={t('auth.grdfgrandlyon.accessibility.connect')}
onClick={() => dispatch(openConnectionModal(true))}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('auth.grdfgrandlyon.connect')}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
- classes={{
- root: 'btn-secondary',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
onClick={() => dispatch(setShowOfflineData(true))}
>
{t('auth.button_showOfflineData')}
diff --git a/src/components/Connection/GRDFConnect/GrdfForm.tsx b/src/components/Connection/GRDFConnect/GrdfForm.tsx
index 070083929ac756efb6df51a5af879f4d8b00ab2a..77dd226b7ab96be2a0d7c3c5f51ecdc9017371e3 100644
--- a/src/components/Connection/GRDFConnect/GrdfForm.tsx
+++ b/src/components/Connection/GRDFConnect/GrdfForm.tsx
@@ -25,7 +25,7 @@ const GrdfForm = () => {
aria-label={t('auth.accessibility.button_connect')}
onClick={() => dispatch(openConnectionModal(true))}
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
>
diff --git a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
index ace29175463e200c4de63077f52ecaf906930b70..83c2a10c80070a78b85d34a2aa9f36dbf4eaf7f3 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
+++ b/src/components/Connection/GRDFDeleteAccountModal/DeleteGRDFAccountModal.tsx
@@ -63,20 +63,14 @@ const DeleteGRDFAccountModal = ({
<Button
aria-label={t(`delete_grdf_modal.cancel`)}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t(`delete_grdf_modal.cancel`)}
</Button>
<Button
aria-label={t(`delete_grdf_modal.go`)}
onClick={handleDelete}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t(`delete_grdf_modal.go`)}
</Button>
diff --git a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
index a4e7f3907e8a2eb069fa1ead7e820147dc35f397..90f274f0100a4f18149d4d58a902a0a3c17ace14 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
+++ b/src/components/Connection/GRDFDeleteAccountModal/__snapshots__/DeleteGRDFAccountModal.spec.tsx.snap
@@ -468,12 +468,12 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<button
aria-label="delete_grdf_modal.cancel"
- class="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-normal"
+ class="MuiButton-label"
>
delete_grdf_modal.cancel
</span>
@@ -483,12 +483,12 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
</button>
<button
aria-label="delete_grdf_modal.go"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
delete_grdf_modal.go
</span>
@@ -885,16 +885,12 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="delete_grdf_modal.cancel"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-positive",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="delete_grdf_modal.cancel"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -911,13 +907,13 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-positive",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -932,7 +928,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="delete_grdf_modal.cancel"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -942,7 +938,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="delete_grdf_modal.cancel"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -959,7 +955,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<button
aria-label="delete_grdf_modal.cancel"
- className="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -977,7 +973,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
delete_grdf_modal.cancel
</span>
@@ -1016,16 +1012,12 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="delete_grdf_modal.go"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="delete_grdf_modal.go"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1042,13 +1034,13 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1063,7 +1055,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="delete_grdf_modal.go"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1073,7 +1065,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="delete_grdf_modal.go"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1090,7 +1082,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
>
<button
aria-label="delete_grdf_modal.go"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -1108,7 +1100,7 @@ exports[`DeleteGRDFAccountModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
delete_grdf_modal.go
</span>
diff --git a/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss b/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
index aafc248d0f1e42c872a9726d4401f4de802ed8c9..84b0d3caa520462824848fa9d933dc53e7f16d72 100644
--- a/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
+++ b/src/components/Connection/GRDFDeleteAccountModal/deleteGRDFAccountModal.scss
@@ -19,8 +19,6 @@
}
.buttons {
display: flex;
- button.btn-secondary-positive {
- margin-right: 1rem;
- }
+ gap: 1rem;
}
}
diff --git a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
index f32093cd6c8e96f72beb6a0a660eb86546f343dd..177e17066f67faa5c7585895fae4fe9088bc9be9 100644
--- a/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/EpglConnectModal.tsx
@@ -54,22 +54,13 @@ const EpglConnectModal = ({
leftButton: (
<Button
onClick={() => setCurrentStep(StepEnum.CreateAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('auth.button_create_account')}
</Button>
),
rightButton: (
- <Button
- onClick={handleShowForm}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
- >
+ <Button onClick={handleShowForm} className="btnPrimary">
{t('auth.button_connect')}
</Button>
),
@@ -79,22 +70,13 @@ const EpglConnectModal = ({
leftButton: (
<Button
onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
- {`< ${t('auth.button_previous')}`}
+ {t('auth.button_previous')}
</Button>
),
rightButton: (
- <Button
- onClick={handleGoToPartnerSite}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
- >
+ <Button onClick={handleGoToPartnerSite} className="btnPrimary">
{t('auth.eglgrandlyon.button_go_to_partner_site')}
</Button>
),
diff --git a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
index 20d12143ecc8e46692e03c81caf9f32a4c0fd192..7c4f3a658c16f1c45dca4dda59804bd1877e530e 100644
--- a/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
+++ b/src/components/Connection/PartnerConnectModal/GrdfConnectModal.tsx
@@ -59,10 +59,7 @@ const GrdfConnectModal = ({
leftButton: (
<Button
onClick={() => setCurrentStep(StepEnum.CreateAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('auth.button_create_account')}
</Button>
@@ -70,10 +67,7 @@ const GrdfConnectModal = ({
rightButton: (
<Button
onClick={() => setCurrentStep(StepEnum.GiveConsent)}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('auth.button_has_account')}
</Button>
@@ -84,22 +78,13 @@ const GrdfConnectModal = ({
leftButton: (
<Button
onClick={() => setCurrentStep(StepEnum.DoYouHaveAccount)}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
- {`< ${t('auth.button_previous')}`}
+ {t('auth.button_previous')}
</Button>
),
rightButton: (
- <Button
- onClick={handleGoToPartnerSite}
- classes={{
- root: 'btn-profile-next',
- label: 'text-16-bold',
- }}
- >
+ <Button onClick={handleGoToPartnerSite} className="btnPrimary">
{t('auth.grdfgrandlyon.button_go_to_partner_site')}
</Button>
),
@@ -107,14 +92,8 @@ const GrdfConnectModal = ({
[StepEnum.GiveConsent]: {
content: <GrdfGiveConsent />,
leftButton: (
- <Button
- onClick={handleGiveConsentPrevious}
- classes={{
- root: 'btn-profile-back',
- label: 'text-16-bold',
- }}
- >
- {`< ${t('auth.button_previous')}`}
+ <Button onClick={handleGiveConsentPrevious} className="btnSecondary">
+ {t('auth.button_previous')}
</Button>
),
rightButton: <GrdfFormOAuth onSuccess={handleSuccess} />,
diff --git a/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss b/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
index fcfc53632e881d38267a63d2486156bb06818933..e5394492ba08706b7c7b2151bc3dd98f27ea2c4f 100644
--- a/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
+++ b/src/components/Connection/PartnerConnectModal/PartnerConnectModal.scss
@@ -3,36 +3,14 @@
.partners-connection-step-content {
padding: 0.5rem 0.5rem 0;
text-align: center;
-
- .footer {
- button.btn-highlight {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- margin: 1.5rem 0 1rem;
- padding: 1rem 2rem;
- transition: all 300ms ease;
- }
- }
}
.partners-connection-step-navigation {
width: 100%;
display: flex;
justify-content: center;
+ flex-direction: column;
gap: 1rem;
-
- .disabled {
- opacity: 0;
- }
-
- button {
- max-width: 10rem;
- min-height: 2.5rem;
- margin-top: 0.5rem;
- padding: 0rem 1rem;
- }
}
#accessibility-title {
diff --git a/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx b/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
index 287f55d0d558879517fbc87f6f9a2b3612936975..30941eb12345ab546420212726d5f09d88f371fb 100644
--- a/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
+++ b/src/components/Connection/PartnerConnectModal/Steps/GrdfFormOAuth.tsx
@@ -71,10 +71,7 @@ const GrdfFormOAuth = ({
aria-label={t('auth.accessibility.button_connect')}
onClick={startOAuth}
disabled={isWaiting}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{isWaiting
? t('auth.connect_oauth.loading')
diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
index cc76bd39863df6426034ce80897757cbc033b146..3efc082c18f037e74ad35d53a50985fe47234b69 100644
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ b/src/components/Connection/SGEConnect/SgeConnect.scss
@@ -1,6 +1,7 @@
@import 'src/styles/base/color';
@import 'src/styles/base/mixins';
@import 'src/styles/base/breakpoint';
+@import 'src/styles/components/input';
.sge-view {
box-sizing: border-box;
@@ -14,16 +15,27 @@
padding: 1rem;
.sge-step-container {
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
color: $grey-bright;
- .title,
+
.head {
margin-top: 1rem;
}
label {
- display: block;
- margin-top: 1rem;
- margin-bottom: 0.625rem;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 10px;
+ &.inline {
+ flex-direction: row;
+ align-items: center;
+ gap: 0.5rem;
+ }
cursor: pointer;
+
span span {
color: $gold-shadow;
}
@@ -31,24 +43,7 @@
#zipCode {
max-width: 115px;
}
- @include checkBox();
- input:not([type='checkbox']) {
- appearance: none;
- max-width: 280px;
- width: 100%;
- height: 45px;
- border-radius: 4px;
- border: 1px solid $grey-dark;
- background: rgba(0, 0, 0, 0.3);
- transition: all 300ms ease;
- color: $grey-bright;
- padding: 0 0.5rem;
- &:focus,
- &:focus-visible {
- border: 1px solid $gold-shadow;
- outline: none;
- }
- }
+
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
@@ -59,18 +54,19 @@
input[type='number'] {
-moz-appearance: textfield;
}
+
.pdl-hint {
display: inline-block;
cursor: pointer;
border-bottom: solid 1px $grey-bright;
- text-align: center;
- margin: 1rem auto auto;
+ margin: 0 auto;
padding: 0.2rem;
@media (min-width: $width-tablet) {
margin-left: 0;
}
}
ul {
+ margin: 0;
padding: 0 1rem 1rem;
line-height: 130%;
border-bottom: 1px solid $grey-dark;
@@ -114,4 +110,7 @@
height: 80px;
}
}
+ button {
+ margin-top: 1rem;
+ }
}
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
index 30d79f957431c78317760898f2ea0b05bba533f6..8509b13414e275d467eb99d9b5a55c059940c56c 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.spec.tsx
@@ -97,7 +97,7 @@ describe('SgeConnectView component', () => {
<SgeConnectView />
</Provider>
)
- wrapper.find('.profile-navigation-button').last().simulate('click')
+ wrapper.find('.btnPrimary').last().simulate('click')
expect(mockAppDispatch).toHaveBeenCalled()
})
it('should not call disabled nextStep method', () => {
@@ -106,7 +106,7 @@ describe('SgeConnectView component', () => {
<SgeConnectView />
</Provider>
)
- wrapper.find('.profile-navigation-button').last().simulate('click')
+ wrapper.find('.btnPrimary').last().simulate('click')
expect(mockAppDispatch).toHaveBeenCalled()
})
})
diff --git a/src/components/Connection/SGEConnect/SgeInit.tsx b/src/components/Connection/SGEConnect/SgeInit.tsx
index c36fecbf61a44c02b469b72473c5870a1ca12600..5d349bc50929ef1bf6ec174a29abb81aacc1258e 100644
--- a/src/components/Connection/SGEConnect/SgeInit.tsx
+++ b/src/components/Connection/SGEConnect/SgeInit.tsx
@@ -58,19 +58,13 @@ const SgeInit = () => {
onClick={() => {
navigate('/sge-connect')
}}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t(`auth.${konnectorSlug}.connect`)}
</Button>
{currentFluidStatus.firstDataDate && (
<Button
- classes={{
- root: 'btn-secondary',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
onClick={() => dispatch(setShowOfflineData(true))}
>
{t('auth.button_showOfflineData')}
diff --git a/src/components/Connection/SGEConnect/SgeModalHint.tsx b/src/components/Connection/SGEConnect/SgeModalHint.tsx
index 9b2696e1d98ee16fd8be8385802ad8b9fac7a911..788896228f53ad018c000daeba9515d667e729be 100644
--- a/src/components/Connection/SGEConnect/SgeModalHint.tsx
+++ b/src/components/Connection/SGEConnect/SgeModalHint.tsx
@@ -56,11 +56,7 @@ const SgeModalHint = ({ open, handleCloseClick }: SgeModalHintProps) => {
'auth.enedissgegrandlyon.modalHint.button-accessibility'
)}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
{t('auth.enedissgegrandlyon.modalHint.button')}
</Button>
diff --git a/src/components/Connection/SGEConnect/StepAddress.tsx b/src/components/Connection/SGEConnect/StepAddress.tsx
index da040f5010bbc81bc832fd9af18beb223045ee85..0f5ef8712df848f61df65946a3d064c833e6cf4a 100644
--- a/src/components/Connection/SGEConnect/StepAddress.tsx
+++ b/src/components/Connection/SGEConnect/StepAddress.tsx
@@ -17,36 +17,39 @@ const StepAddress = ({ sgeState, onChange }: StepAddressProps) => {
</div>
<label htmlFor="address" className="text-16-normal">
{t('auth.enedissgegrandlyon.address')}
+ <input
+ type="text"
+ id="address"
+ name="address"
+ className="inputText"
+ value={sgeState.address}
+ onChange={e => onChange('address', e.target.value)}
+ />
</label>
- <input
- type="text"
- id="address"
- name="address"
- value={sgeState.address}
- onChange={e => onChange('address', e.target.value)}
- />
<label htmlFor="zipCode" className="text-16-normal">
{t('auth.enedissgegrandlyon.zipCode')}
+ <input
+ type="number"
+ min={0}
+ id="zipCode"
+ name="zipCode"
+ className="inputText"
+ value={sgeState.zipCode !== null ? sgeState.zipCode : undefined}
+ onChange={e => onChange('zipCode', e.target.value, 5)}
+ />
</label>
- <input
- type="number"
- min={0}
- id="zipCode"
- name="zipCode"
- value={sgeState.zipCode !== null ? sgeState.zipCode : undefined}
- onChange={e => onChange('zipCode', e.target.value, 5)}
- />
<label htmlFor="city" className="text-16-normal">
{t('auth.enedissgegrandlyon.city')}
+ <input
+ type="text"
+ id="city"
+ name="city"
+ className="inputText"
+ value={sgeState.city}
+ onChange={e => onChange('city', e.target.value)}
+ />
</label>
- <input
- type="text"
- id="city"
- name="city"
- value={sgeState.city}
- onChange={e => onChange('city', e.target.value)}
- />
</div>
)
}
diff --git a/src/components/Connection/SGEConnect/StepConsent.tsx b/src/components/Connection/SGEConnect/StepConsent.tsx
index c8dc887a81d7c938d9d26ea228109240375686d8..e320304fa1f7dbfddec4a4ef160c714a66ead0c5 100644
--- a/src/components/Connection/SGEConnect/StepConsent.tsx
+++ b/src/components/Connection/SGEConnect/StepConsent.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { SgeStore } from 'models'
import React from 'react'
@@ -25,18 +24,13 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
<li>{t('auth.enedissgegrandlyon.consentLi3')}</li>
<li>{t('auth.enedissgegrandlyon.consentLi4')}</li>
</ul>
- <label
- className={classNames('checkbox', {
- ['answer-checked']: sgeState.dataConsent,
- })}
- >
+ <label className="inline">
<input
id="dataConsent"
type="checkbox"
name="Data-consent-validation"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('dataConsent', e.target.checked)
- }
+ className="inputCheckbox"
+ onChange={e => onChange('dataConsent', e.target.checked)}
checked={sgeState.dataConsent}
/>
<span
@@ -45,18 +39,13 @@ const StepConsent = ({ sgeState, onChange }: StepConsentProps) => {
}}
/>
</label>
- <label
- className={classNames('checkbox', {
- ['answer-checked']: sgeState.pdlConfirm,
- })}
- >
+ <label className="inline">
<input
id="pdlConfirm"
type="checkbox"
name="Data-consent-validation"
- onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
- onChange('pdlConfirm', e.target.checked)
- }
+ className="inputCheckbox"
+ onChange={e => onChange('pdlConfirm', e.target.checked)}
checked={sgeState.pdlConfirm}
/>
<span
diff --git a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
index b0e067d66c88ff44b32814311e056a8f006b8ebe..d0bb45419f456d4b6919c9b2a9a55429fdd64347 100644
--- a/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
+++ b/src/components/Connection/SGEConnect/StepIdentityAndPdl.tsx
@@ -30,43 +30,45 @@ const StepIdentityAndPdl = ({
</div>
<label htmlFor="firstName" className="text-16-normal">
{t('auth.enedissgegrandlyon.firstName')}
+ <input
+ type="text"
+ id="firstName"
+ name="firstName"
+ className="inputText"
+ value={sgeState.firstName}
+ onChange={e => onChange('firstName', e.target.value)}
+ required
+ />
</label>
- <input
- type="text"
- id="firstName"
- name="firstName"
- value={sgeState.firstName}
- onChange={e => onChange('firstName', e.target.value)}
- required
- />
<label htmlFor="lastName" className="text-16-normal">
{t('auth.enedissgegrandlyon.lastName')}
+ <input
+ type="text"
+ id="lastName"
+ name="lastName"
+ className="inputText"
+ value={sgeState.lastName}
+ onChange={e => onChange('lastName', e.target.value)}
+ required
+ />
</label>
- <input
- type="text"
- id="lastName"
- name="lastName"
- value={sgeState.lastName}
- onChange={e => onChange('lastName', e.target.value)}
- required
- />
<div className="title text-22-bold">
{t('auth.enedissgegrandlyon.pdlTitle')}
</div>
<label htmlFor="pdl" className="text-16-normal">
{t('auth.enedissgegrandlyon.pdlLabel')}
+ <input
+ id="pdl"
+ name="pdl"
+ type="number"
+ min={0}
+ className="inputText"
+ value={sgeState.pdl ? sgeState.pdl : undefined}
+ onChange={e => onChange('pdl', e.target.value, 14)}
+ inputMode="numeric"
+ required
+ />
</label>
- <input
- id="pdl"
- name="pdl"
- type="number"
- min={0}
- value={sgeState.pdl ? sgeState.pdl : undefined}
- onChange={e => onChange('pdl', e.target.value, 14)}
- inputMode="numeric"
- required
- />
- <br />
<div onClick={toggleModal} className="pdl-hint text-16-normal">
{t('auth.enedissgegrandlyon.pdlHint')}
</div>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 7d7e809cf6dcae84cdda6e96df7c7a7c53340240..6c4db1b337fdf82cb0b628585b76aedcdf4d46e8 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -366,29 +366,31 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
htmlFor="firstName"
>
auth.enedissgegrandlyon.firstName
+ <input
+ className="inputText"
+ id="firstName"
+ name="firstName"
+ onChange={[Function]}
+ required={true}
+ type="text"
+ value=""
+ />
</label>
- <input
- id="firstName"
- name="firstName"
- onChange={[Function]}
- required={true}
- type="text"
- value=""
- />
<label
className="text-16-normal"
htmlFor="lastName"
>
auth.enedissgegrandlyon.lastName
+ <input
+ className="inputText"
+ id="lastName"
+ name="lastName"
+ onChange={[Function]}
+ required={true}
+ type="text"
+ value=""
+ />
</label>
- <input
- id="lastName"
- name="lastName"
- onChange={[Function]}
- required={true}
- type="text"
- value=""
- />
<div
className="title text-22-bold"
>
@@ -399,17 +401,17 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
htmlFor="pdl"
>
auth.enedissgegrandlyon.pdlLabel
+ <input
+ className="inputText"
+ id="pdl"
+ inputMode="numeric"
+ min={0}
+ name="pdl"
+ onChange={[Function]}
+ required={true}
+ type="number"
+ />
</label>
- <input
- id="pdl"
- inputMode="numeric"
- min={0}
- name="pdl"
- onChange={[Function]}
- required={true}
- type="number"
- />
- <br />
<div
className="pdl-hint text-16-normal"
onClick={[Function]}
@@ -808,19 +810,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
+ className="btnSecondary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -837,13 +833,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -859,7 +855,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -869,7 +865,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -886,7 +882,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -904,9 +900,9 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- < profile_type.form.button_previous
+ profile_type.form.button_previous
</span>
</button>
</ForwardRef(ButtonBase)>
@@ -915,19 +911,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
+ className="btnPrimary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -944,13 +934,13 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -966,7 +956,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -976,7 +966,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -993,7 +983,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -1011,9 +1001,9 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- profile_type.form.button_next >
+ profile_type.form.button_next
</span>
</button>
</ForwardRef(ButtonBase)>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
index d59746e33a69f42117eff9e6430a81fa8788b571..e73b224e23e5d74d20666692bf802fa4ee399fb0 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeInit.spec.tsx.snap
@@ -66,16 +66,12 @@ exports[`SgeInit component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="auth.enedissgegrandlyon.accessibility.connect"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="auth.enedissgegrandlyon.accessibility.connect"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -92,13 +88,13 @@ exports[`SgeInit component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -113,7 +109,7 @@ exports[`SgeInit component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="auth.enedissgegrandlyon.accessibility.connect"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -123,7 +119,7 @@ exports[`SgeInit component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="auth.enedissgegrandlyon.accessibility.connect"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -140,7 +136,7 @@ exports[`SgeInit component should be rendered correctly 1`] = `
>
<button
aria-label="auth.enedissgegrandlyon.accessibility.connect"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -158,7 +154,7 @@ exports[`SgeInit component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
auth.enedissgegrandlyon.connect
</span>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
index eff1752825bab266d4a25c487d26d8a29d4d18db..9392819652df47f5142e7feb2ba1b3af20c9c7ff 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeModalHint.spec.tsx.snap
@@ -495,13 +495,12 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
</div>
<button
aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
- style="height: 40px;"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
auth.enedissgegrandlyon.modalHint.button
</span>
@@ -929,21 +928,12 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
</div>
<WithStyles(ForwardRef(Button))
aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
>
<ForwardRef(Button)
aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -960,13 +950,13 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -978,30 +968,20 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
}
}
onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
type="button"
>
<ForwardRef(ButtonBase)
aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1014,16 +994,11 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- style={
- Object {
- "height": "40px",
- }
- }
type="button"
>
<button
aria-label="auth.enedissgegrandlyon.modalHint.button-accessibility"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1037,16 +1012,11 @@ exports[`SgeModalHint component should be rendered correctly 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
tabIndex={0}
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
auth.enedissgegrandlyon.modalHint.button
</span>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
index bffbbf9d0daf4c604fe6515786a9fa9d54a83c71..76a1438e468de8fba34a9b7ad2f5f9b43804e485 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepAddress.spec.tsx.snap
@@ -43,40 +43,43 @@ exports[`StepAddress component should be rendered correctly 1`] = `
htmlFor="address"
>
auth.enedissgegrandlyon.address
+ <input
+ className="inputText"
+ id="address"
+ name="address"
+ onChange={[Function]}
+ type="text"
+ value=""
+ />
</label>
- <input
- id="address"
- name="address"
- onChange={[Function]}
- type="text"
- value=""
- />
<label
className="text-16-normal"
htmlFor="zipCode"
>
auth.enedissgegrandlyon.zipCode
+ <input
+ className="inputText"
+ id="zipCode"
+ min={0}
+ name="zipCode"
+ onChange={[Function]}
+ type="number"
+ />
</label>
- <input
- id="zipCode"
- min={0}
- name="zipCode"
- onChange={[Function]}
- type="number"
- />
<label
className="text-16-normal"
htmlFor="city"
>
auth.enedissgegrandlyon.city
+ <input
+ className="inputText"
+ id="city"
+ name="city"
+ onChange={[Function]}
+ type="text"
+ value=""
+ />
</label>
- <input
- id="city"
- name="city"
- onChange={[Function]}
- type="text"
- value=""
- />
</div>
</StepAddress>
</Provider>
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
index d474fdf8d8147abb417524d5915fac4afaab15fe..a1fa0ab9b488fbb54bef040bec55fe65130c1280 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepConsent.spec.tsx.snap
@@ -60,10 +60,11 @@ exports[`StepConsent component should be rendered correctly 1`] = `
</li>
</ul>
<label
- className="checkbox"
+ className="inline"
>
<input
checked={false}
+ className="inputCheckbox"
id="dataConsent"
name="Data-consent-validation"
onChange={[Function]}
@@ -78,10 +79,11 @@ exports[`StepConsent component should be rendered correctly 1`] = `
/>
</label>
<label
- className="checkbox"
+ className="inline"
>
<input
checked={false}
+ className="inputCheckbox"
id="pdlConfirm"
name="Data-consent-validation"
onChange={[Function]}
diff --git a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
index 171bb6590ba3ba466e4d50f40aac68569570a4d6..cb5b351b967f6bed46b04985a69e35c7ac07c2bd 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/StepIdentityAndPdl.spec.tsx.snap
@@ -43,29 +43,31 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
htmlFor="firstName"
>
auth.enedissgegrandlyon.firstName
+ <input
+ className="inputText"
+ id="firstName"
+ name="firstName"
+ onChange={[Function]}
+ required={true}
+ type="text"
+ value=""
+ />
</label>
- <input
- id="firstName"
- name="firstName"
- onChange={[Function]}
- required={true}
- type="text"
- value=""
- />
<label
className="text-16-normal"
htmlFor="lastName"
>
auth.enedissgegrandlyon.lastName
+ <input
+ className="inputText"
+ id="lastName"
+ name="lastName"
+ onChange={[Function]}
+ required={true}
+ type="text"
+ value=""
+ />
</label>
- <input
- id="lastName"
- name="lastName"
- onChange={[Function]}
- required={true}
- type="text"
- value=""
- />
<div
className="title text-22-bold"
>
@@ -76,17 +78,17 @@ exports[`StepIdentityAndPdl component should be rendered correctly 1`] = `
htmlFor="pdl"
>
auth.enedissgegrandlyon.pdlLabel
+ <input
+ className="inputText"
+ id="pdl"
+ inputMode="numeric"
+ min={0}
+ name="pdl"
+ onChange={[Function]}
+ required={true}
+ type="number"
+ />
</label>
- <input
- id="pdl"
- inputMode="numeric"
- min={0}
- name="pdl"
- onChange={[Function]}
- required={true}
- type="number"
- />
- <br />
<div
className="pdl-hint text-16-normal"
onClick={[Function]}
diff --git a/src/components/Connection/connection.scss b/src/components/Connection/connection.scss
index dba6ead256a7f487f925308624793d2c3b135cfd..ae93a0111e53974968b023e1ebe562daee2f5f88 100644
--- a/src/components/Connection/connection.scss
+++ b/src/components/Connection/connection.scss
@@ -37,12 +37,6 @@
color: $grey-bright;
}
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
-
.connection-form-button {
display: flex;
flex-direction: column;
@@ -55,12 +49,9 @@
}
}
.connection-form-connect-button {
- margin: 0 0.5rem;
button {
- padding: 0.5rem;
- height: 5rem;
+ height: auto;
}
-
&.grdf {
margin-top: 2rem;
}
@@ -80,7 +71,7 @@
flex-direction: column;
align-items: flex-start;
text-align: left;
- max-width: 13.5rem;
+ max-width: 19.5rem;
}
}
}
diff --git a/src/components/ConsumptionVisualizer/NoDataModal.tsx b/src/components/ConsumptionVisualizer/NoDataModal.tsx
index 964bccfd787ee26252643056c3d339a3537f0884..8462aa25dbfde8220f91859007fa9c8b8dc50d33 100644
--- a/src/components/ConsumptionVisualizer/NoDataModal.tsx
+++ b/src/components/ConsumptionVisualizer/NoDataModal.tsx
@@ -55,10 +55,7 @@ const NoDataModal = ({ open, handleCloseClick }: NoDataModalProps) => {
<Button
aria-label={t('ecogesture_info_modal.button_close')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture_info_modal.button_close')}
</Button>
diff --git a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
index e36ce72786e54b7fb820a9a8c2c1a126fefef6ae..cb613b5dcfe136b0d2b70f2150d56c42546afc8d 100644
--- a/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
+++ b/src/components/ConsumptionVisualizer/__snapshots__/NoDataModal.spec.tsx.snap
@@ -473,12 +473,12 @@ exports[`NoDataModal component should render correctly 1`] = `
</ul>
<button
aria-label="ecogesture_info_modal.button_close"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture_info_modal.button_close
</span>
@@ -880,16 +880,12 @@ exports[`NoDataModal component should render correctly 1`] = `
</ul>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture_info_modal.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture_info_modal.button_close"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -906,13 +902,13 @@ exports[`NoDataModal component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -927,7 +923,7 @@ exports[`NoDataModal component should render correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_info_modal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -937,7 +933,7 @@ exports[`NoDataModal component should render correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_info_modal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -954,7 +950,7 @@ exports[`NoDataModal component should render correctly 1`] = `
>
<button
aria-label="ecogesture_info_modal.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -972,7 +968,7 @@ exports[`NoDataModal component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture_info_modal.button_close
</span>
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 3dcc5e49aa0597994118ab204e480c94a69df3c3..cebafcbc2f8d13eac4b1e41469a7edb850bb5a4b 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -59,13 +59,7 @@ const CustomPopupModal = ({
}}
/>
- <Button
- onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight ',
- label: 'text-16-bold',
- }}
- >
+ <Button onClick={handleCloseClick} className="btnPrimary">
{t('consumption.partner_issue_modal.ok')}
</Button>
</div>
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index 7a89a437bc8205c4758d0a148d7120fb50dcaf50..bd6ac538bdb5d010351c6dc939955baf8fbbca77 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -464,12 +464,12 @@ exports[`CustomPopupModal component should render correctly 1`] = `
Interesting description
</div>
<button
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
consumption.partner_issue_modal.ok
</span>
@@ -863,15 +863,11 @@ exports[`CustomPopupModal component should render correctly 1`] = `
}
/>
<WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight ",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -888,13 +884,13 @@ exports[`CustomPopupModal component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight ",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -908,7 +904,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
onClick={[MockFunction]}
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -917,7 +913,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -933,7 +929,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -951,7 +947,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
consumption.partner_issue_modal.ok
</span>
diff --git a/src/components/CustomPopup/customPopupModal.scss b/src/components/CustomPopup/customPopupModal.scss
index d0b9c013d1771554a0f0a10dc030c2c803424d1e..0933a3089e8a2e3bce8bb49977dafb72d6933afd 100644
--- a/src/components/CustomPopup/customPopupModal.scss
+++ b/src/components/CustomPopup/customPopupModal.scss
@@ -27,12 +27,6 @@
color: $gold-shadow;
}
}
-
- button.btn-highlight {
- padding: 0.65rem 2.5rem;
- margin-top: 1rem;
- width: unset;
- }
}
#accessibility-title {
diff --git a/src/components/DateNavigator/datenavigator.scss b/src/components/DateNavigator/datenavigator.scss
index 101639886b6f06d89edd528592c346d33e32ee3a..34451ece836569368a1c60fb1f3485cc438b4b62 100644
--- a/src/components/DateNavigator/datenavigator.scss
+++ b/src/components/DateNavigator/datenavigator.scss
@@ -10,15 +10,8 @@
padding-bottom: 0.6rem;
max-width: 45.75rem;
.date-navigator-button {
- border: none;
- background: none;
- color: $soft-grey;
- text-decoration: underline;
&.disable {
opacity: 0.3;
}
- &.disable:hover {
- cursor: default;
- }
}
}
diff --git a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
index 6eac38bd25668b6de9e1bc76c52e6565303bfa60..70e1f0261ac08777fe51fd2e49d15184c91da5a0 100644
--- a/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
+++ b/src/components/Duel/DuelEmptyValueModal/DuelEmptyValueModal.tsx
@@ -51,10 +51,7 @@ const DuelEmptyValueModal = ({
<Button
aria-label={t('duel_empty_value_modal.accessibility.button_validate')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel_empty_value_modal.button')}
</Button>
diff --git a/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss b/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss
index 1c515d4f2ced42d3491f45fc09b40843fdbf763f..088f10cf69e1a2b16a6bbd461983725cf1b3aead 100644
--- a/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss
+++ b/src/components/Duel/DuelEmptyValueModal/duelEmptyValueModal.scss
@@ -5,15 +5,9 @@
flex-direction: column;
justify-content: center;
align-items: center;
- padding: 1.5rem 0.5rem;
+ padding: 1.5rem 0.5rem 0;
text-align: center;
- .modal-empty-value-title {
- margin: 2rem 0 1rem;
- }
-
- button.btn-secondary-negative {
- margin: 2rem 0.25rem 1.5rem;
- }
+ gap: 1rem;
}
#accessibility-title {
diff --git a/src/components/Duel/DuelError/DuelError.tsx b/src/components/Duel/DuelError/DuelError.tsx
index 0ae106637ceb376670be433162cef6f663506916..6d9f119e6740e2b8bda49f8c02c8652400a3a524 100644
--- a/src/components/Duel/DuelError/DuelError.tsx
+++ b/src/components/Duel/DuelError/DuelError.tsx
@@ -19,10 +19,7 @@ const DuelError = () => {
<Button
aria-label={t('duel.accessibility.button_go_back')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel.button_go_back')}
</Button>
diff --git a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
index 98ad5aab1bde389e62d58636113233e0953c59e8..9274f35b21ddc379c85abaf5a643ec2b3dd3f535 100644
--- a/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
+++ b/src/components/Duel/DuelError/__snapshots__/DuelError.spec.tsx.snap
@@ -14,12 +14,7 @@ exports[`DuelError component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="duel.accessibility.button_go_back"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
duel.button_go_back
diff --git a/src/components/Duel/DuelResultModal/DuelResultModal.tsx b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
index b6d946bf69d5cdeac94f3439e7fafcef4f06bff2..7b23acb614d1cc6da4d9a060c55dc6fa2c60380b 100644
--- a/src/components/Duel/DuelResultModal/DuelResultModal.tsx
+++ b/src/components/Duel/DuelResultModal/DuelResultModal.tsx
@@ -54,7 +54,7 @@ const DuelResultModal = ({
<div id="accessibility-title">
{t('duel_result_modal.accessibility.window_title')}
</div>
- <div className="duel-result-modal-root ">
+ <div className="duel-result-modal-root">
<div className="imgResultContainer">
{win && (
<Icon className="challengeWon" icon={challengeWon} size={300} />
@@ -78,12 +78,8 @@ const DuelResultModal = ({
</div>
<Button
aria-label={t('duel_result_modal.accessibility.button_validate')}
- className="buttonCloseModal"
+ className="btnSecondary"
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
>
{t(`duel_result_modal.${statusKey}.button_validate`)}
</Button>
diff --git a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
index c56eab4eef66848d8bb71598d8b4557e534f5822..f8d9e72b69362e0156b0c3b5eb3bce59263180aa 100644
--- a/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
+++ b/src/components/Duel/DuelResultModal/__snapshots__/DuelResultModal.spec.tsx.snap
@@ -553,7 +553,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
duel_result_modal.accessibility.window_title
</div>
<div
- class="duel-result-modal-root "
+ class="duel-result-modal-root"
>
<div
class="imgResultContainer"
@@ -594,12 +594,12 @@ exports[`DuelResultModal component should render correctly 1`] = `
</div>
<button
aria-label="duel_result_modal.accessibility.button_validate"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-normal"
+ class="MuiButton-label"
>
duel_result_modal.success.button_validate
</span>
@@ -821,7 +821,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
duel_result_modal.accessibility.window_title
</div>
<div
- className="duel-result-modal-root "
+ className="duel-result-modal-root"
>
<div
className="imgResultContainer"
@@ -892,18 +892,12 @@ exports[`DuelResultModal component should render correctly 1`] = `
</div>
<WithStyles(ForwardRef(Button))
aria-label="duel_result_modal.accessibility.button_validate"
- className="buttonCloseModal"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="duel_result_modal.accessibility.button_validate"
- className="buttonCloseModal"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -920,13 +914,13 @@ exports[`DuelResultModal component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -941,7 +935,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="duel_result_modal.accessibility.button_validate"
- className="MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -951,7 +945,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="duel_result_modal.accessibility.button_validate"
- className="MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -968,7 +962,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
>
<button
aria-label="duel_result_modal.accessibility.button_validate"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text buttonCloseModal"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -986,7 +980,7 @@ exports[`DuelResultModal component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
duel_result_modal.success.button_validate
</span>
diff --git a/src/components/Duel/DuelResultModal/duelResultModal.scss b/src/components/Duel/DuelResultModal/duelResultModal.scss
index 0c34d5c749566b0d3ca14c16aef87a990e85d396..e8a2945eda2f011ff209d9cb7f1504dcf1666ad1 100644
--- a/src/components/Duel/DuelResultModal/duelResultModal.scss
+++ b/src/components/Duel/DuelResultModal/duelResultModal.scss
@@ -7,6 +7,10 @@
margin: 2rem 0 1rem;
color: $grey-bright;
}
+
+ button {
+ margin-top: 1rem;
+ }
}
#accessibility-title {
@@ -27,7 +31,3 @@
transform: translate(-50%, 32%);
}
}
-
-.buttonCloseModal {
- margin-top: 1rem !important;
-}
diff --git a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
index 60693ddd57f0991b1af885043dba05fca14c212a..27b865cea43441de5a0f32ebacdcb06433df7645 100644
--- a/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
+++ b/src/components/Duel/DuelUnlocked/DuelUnlocked.tsx
@@ -75,10 +75,7 @@ const DuelUnlocked = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('duel.accessibility.button_start_duel')}
onClick={launchDuel}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel.button_start')}
</Button>
diff --git a/src/components/Duel/DuelUnlocked/duelUnlocked.scss b/src/components/Duel/DuelUnlocked/duelUnlocked.scss
index a7a72ad803bc2bd2584c2ee865c954d14d4cf10a..36b7a4d4fce99ba9fda686833f7c5e3af0be92d6 100644
--- a/src/components/Duel/DuelUnlocked/duelUnlocked.scss
+++ b/src/components/Duel/DuelUnlocked/duelUnlocked.scss
@@ -28,7 +28,3 @@
width: 100%;
max-width: 175px;
}
-button.btn-secondary-negative {
- margin: 0;
- padding: 0.5rem;
-}
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
index d2cdc41219c4946089271ceae696567d599ad5a8..f1681bd29989772457cdc93c82980f7298244024 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.spec.tsx
@@ -57,7 +57,7 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- expect(wrapper.find('.text').first().text()).toBe(
+ expect(wrapper.find('.text-16-normal').first().text()).toBe(
'ecogesture.emptyList.doing1_done'
)
})
@@ -70,7 +70,7 @@ describe('EcogestureEmptyList component', () => {
handleReinitClick={mockHandleClick}
/>
)
- expect(wrapper.find('.text').first().text()).toBe(
+ expect(wrapper.find('.text-16-normal').first().text()).toBe(
'ecogesture.emptyList.obj1_done'
)
})
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
index 1da8419b28ab841651d1716c86ebe3df48f6c3aa..b51c6f032edcc8c9b68cbd4b0fe82ea13d842e18 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
@@ -31,20 +31,17 @@ const EcogestureEmptyList = ({
icon={isObjective ? objectiveIcon : doingIcon}
size={150}
/>
- <div className="text-16-normal text">
+ <div className="text-16-normal">
{t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
</div>
- <div className="text-16-normal text">
+ <div className="text-16-normal">
{t(`ecogesture.emptyList.${objOrDoing}2${isDone}`)}
</div>
- <div className="btn-container">
+ <div className="buttons">
<Button
aria-label={t('ecogesture.emptyList.btn1')}
onClick={() => setTab(2)}
- classes={{
- root: 'btn-secondary-negative btn1',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.emptyList.btn1')}
</Button>
@@ -53,10 +50,7 @@ const EcogestureEmptyList = ({
<Button
aria-label={t('ecogesture.reinit')}
onClick={handleReinitClick}
- classes={{
- root: 'reinit-button btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.reinit')}
</Button>
@@ -68,10 +62,7 @@ const EcogestureEmptyList = ({
onClick={() => {
navigate('/ecogesture-form')
}}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.emptyList.btn2')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
index d7e63538735ae0ed4c37e42a3cd0d8cab07eb0b0..ed4aae32b588201d413d319aabb63ce229524270 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -47,30 +47,26 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
</Icon>
</StyledIcon>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.emptyList.obj1
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.emptyList.obj2
</div>
<div
- className="btn-container"
+ className="buttons"
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative btn1",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.emptyList.btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -87,13 +83,13 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn1",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -108,7 +104,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -118,7 +114,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -135,7 +131,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -153,7 +149,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.emptyList.btn1
</span>
@@ -192,16 +188,12 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.emptyList.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -218,13 +210,13 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -239,7 +231,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -249,7 +241,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -266,7 +258,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -284,7 +276,7 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.emptyList.btn2
</span>
diff --git a/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss b/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
index 746d17b55f3de5c55a80ee82117a6843da3d17ab..f15fb9b7f8448154e14d2891bf9ab31b97c79f27 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
+++ b/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
@@ -21,16 +21,11 @@
max-width: 35%;
}
- .btn-container {
- margin-top: 1rem;
+ .buttons {
display: flex;
gap: 1rem;
- button {
- margin: 0;
- }
- }
- .reinit-button {
- margin-left: 15px;
+ flex-direction: column;
+ width: 100%;
}
}
}
diff --git a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
index 17894f0caa1bd2b827fecb408d2c83e3592e4148..9456da5891f9345b6b37302306b3a2939669bb6b 100644
--- a/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
+++ b/src/components/Ecogesture/EcogestureInitModal/EcogestureInitModal.tsx
@@ -42,30 +42,20 @@ const EcogestureInitModal = ({
<div className="title text-20-bold">
{t('ecogesture.initModal.title')}
</div>
- <div className="text-16-normal text">
- {t('ecogesture.initModal.text1')}
- </div>
- <div className="text-16-normal text">
- {t('ecogesture.initModal.text2')}
- </div>
+ <div className="text-16-normal">{t('ecogesture.initModal.text1')}</div>
+ <div className="text-16-normal">{t('ecogesture.initModal.text2')}</div>
<div className="buttons-container">
<Button
aria-label={t('ecogesture.initModal.btn1')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.initModal.btn1')}
</Button>
<Button
aria-label={t('ecogesture.initModal.btn2')}
onClick={handleLaunchForm}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.initModal.btn2')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
index 17cb411330be9a6b0aa4f5975b6646eb88d16879..60906791ed06582f143c96c29eff16b057ec25a6 100644
--- a/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureInitModal/__snapshots__/EcogestureInitModal.spec.tsx.snap
@@ -441,12 +441,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
ecogesture.initModal.title
</div>
<div
- class="text-16-normal text"
+ class="text-16-normal"
>
ecogesture.initModal.text1
</div>
<div
- class="text-16-normal text"
+ class="text-16-normal"
>
ecogesture.initModal.text2
</div>
@@ -455,12 +455,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.initModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.initModal.btn1
</span>
@@ -470,12 +470,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
</button>
<button
aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.initModal.btn2
</span>
@@ -831,12 +831,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
ecogesture.initModal.title
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.initModal.text1
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.initModal.text2
</div>
@@ -845,16 +845,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture.initModal.btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -871,13 +867,13 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -892,7 +888,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -902,7 +898,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -919,7 +915,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.initModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -937,7 +933,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.initModal.btn1
</span>
@@ -976,16 +972,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture.initModal.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1002,13 +994,13 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1023,7 +1015,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1033,7 +1025,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1050,7 +1042,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1068,7 +1060,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.initModal.btn2
</span>
diff --git a/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss b/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss
index b074b8d940c397c12d03cb3e3dc1e9f08c77fa32..4ba9caf623c069deca040382126c111158da68e9 100644
--- a/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss
+++ b/src/components/Ecogesture/EcogestureInitModal/ecogestureInitModal.scss
@@ -1,20 +1,17 @@
@import 'src/styles/base/color';
.eg-init-modal {
- color: $grey-bright;
- margin: 1rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.title {
text-align: center;
color: $gold-shadow;
}
- .text {
- margin: 1rem 0;
- }
+
.buttons-container {
display: flex;
+ flex-direction: column;
gap: 1rem;
- button {
- margin: 0;
- }
}
}
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
index 10780f017df3e596dc1cbbf8c8d4ed4c73fb1f2d..ca1e30237f57c3d658950d100824c3bef2866c7d 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.spec.tsx
@@ -58,7 +58,7 @@ describe('EcogesturesList component', () => {
</Provider>
)
await waitForComponentToPaint(wrapper)
- wrapper.find('.filter-button').simulate('click')
+ wrapper.find('.btnFilter').first().simulate('click')
wrapper.find(Button).first().simulate('click')
expect(wrapper.find('.filter-menu').exists()).toBeTruthy()
wrapper.find(MenuItem).at(1).simulate('click')
diff --git a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
index 37818161e5d62941bf12fd2ca89c3d0c3100bdb9..6769246697e82e644baca131428fd276e767d943 100644
--- a/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList/EcogestureList.tsx
@@ -73,86 +73,73 @@ const EcogestureList = ({
}
const selectFilters = () => (
- <div className="filters text-16-normal">
- <div
- className="filter-button"
- onClick={() => toggleDropDown()}
- tabIndex={0}
- onBlur={e => {
- if (e.relatedTarget === null) toggleDropDown()
+ <>
+ <Button
+ className="btnSecondary btnFilter"
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label={t(`ecogesture.MENU_TITLE`)}
+ onClick={toggleMenu}
+ size="small"
+ >
+ <StyledIcon icon={SortIcon} size={20} />
+ <span className={openDropDown ? 'opened' : ''}>
+ {ecogestureFilter === Usage.ALL
+ ? t(`ecogesture.MENU_TITLE`)
+ : t(`ecogesture.${Usage[ecogestureFilter]}`)}
+ </span>
+ </Button>
+ <Menu
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={() => closeMenu()}
+ PopoverClasses={{
+ paper: 'filter-menu',
}}
+ variant="menu"
+ MenuListProps={{ className: 'filter-menu-list' }}
>
- <Button
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label={t(`ecogesture.MENU_TITLE`)}
- onClick={toggleMenu}
- variant="contained"
- >
- <StyledIcon icon={SortIcon} size={20} />
- <span className={openDropDown ? 'ecogestures opened' : 'ecogestures'}>
- {ecogestureFilter === Usage.ALL
- ? t(`ecogesture.MENU_TITLE`)
- : t(`ecogesture.${Usage[ecogestureFilter]}`)}
- </span>
- </Button>
- <Menu
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={() => closeMenu()}
- PopoverClasses={{
- paper: 'filter-menu',
- }}
- variant="menu"
- MenuListProps={{ className: 'filter-menu-list' }}
- >
- {Object.values(Usage).map((usage, key) => {
- const active = usage === ecogestureFilter
- return (
- typeof usage === 'number' && (
- <MenuItem
- classes={{
- root: `${active ? 'item-active' : ''}`,
- }}
- key={key}
- selected={active}
- onClick={() => closeMenu(usage)}
- >
- {t(`ecogesture.${Usage[usage]}`)}
- {active && (
- <ListItemIcon classes={{ root: 'filter-menu-icon' }}>
- <StyledIcon icon={CheckIcon} size={13} />
- </ListItemIcon>
- )}
- </MenuItem>
- )
+ {Object.values(Usage).map((usage, key) => {
+ const active = usage === ecogestureFilter
+ return (
+ typeof usage === 'number' && (
+ <MenuItem
+ classes={{
+ root: `${active ? 'item-active' : ''}`,
+ }}
+ key={key}
+ selected={active}
+ onClick={() => closeMenu(usage)}
+ >
+ {t(`ecogesture.${Usage[usage]}`)}
+ {active && (
+ <ListItemIcon classes={{ root: 'filter-menu-icon' }}>
+ <StyledIcon icon={CheckIcon} size={13} />
+ </ListItemIcon>
+ )}
+ </MenuItem>
)
- })}
- </Menu>
- </div>
- </div>
+ )
+ })}
+ </Menu>
+ </>
)
const continueSelection = () => (
<Grow in={displaySelection}>
<div className="selection text-16-normal">
- <span>{t('ecogesture.selection')}</span>
- <span>
- {`(${selectionViewed} ${t(
- 'ecogesture.selection_2'
- )} ${selectionTotal})`}
- </span>
+ <div>
+ <div>{t('ecogesture.selection')}</div>
+ <div>
+ {`(${selectionViewed} ${t(
+ 'ecogesture.selection_2'
+ )} ${selectionTotal})`}
+ </div>
+ </div>
<Button
aria-label={t('ecogesture.accessibility.button_selection')}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
onClick={() => navigate('/ecogesture-selection')}
>
{t('ecogesture.button_selection')}
@@ -171,13 +158,7 @@ const EcogestureList = ({
<div className="ecogesture-content">
{renderEcogestureContent()}
{!displaySelection && handleReinitClick && (
- <Button
- onClick={handleReinitClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
+ <Button onClick={handleReinitClick} className="btnSecondary">
{t('ecogesture.reinit')}
</Button>
)}
diff --git a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
index e26cfd313fe94e7a2017bbdbcb37eccef2133469..ea409fa020bb3ae9e80654762abbcfeb1ee3f3a3 100644
--- a/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureList/__snapshots__/EcogestureList.spec.tsx.snap
@@ -158,513 +158,555 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
<div
className="efficiency-button-content"
>
- <div
- className="filters text-16-normal"
+ <WithStyles(ForwardRef(Button))
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ className="btnSecondary btnFilter"
+ onClick={[Function]}
+ size="small"
>
- <div
- className="filter-button"
- onBlur={[Function]}
+ <ForwardRef(Button)
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ aria-label="ecogesture.MENU_TITLE"
+ className="btnSecondary btnFilter"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
onClick={[Function]}
- tabIndex={0}
+ size="small"
>
- <WithStyles(ForwardRef(Button))
+ <WithStyles(ForwardRef(ButtonBase))
aria-controls="simple-menu"
aria-haspopup="true"
aria-label="ecogesture.MENU_TITLE"
- classes={
- Object {
- "label": "text-14-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- variant="contained"
+ type="button"
>
- <ForwardRef(Button)
+ <ForwardRef(ButtonBase)
aria-controls="simple-menu"
aria-haspopup="true"
aria-label="ecogesture.MENU_TITLE"
+ className="MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
classes={
Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
"disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
"focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-14-normal",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
+ "root": "MuiButtonBase-root",
}
}
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- variant="contained"
+ type="button"
>
- <WithStyles(ForwardRef(ButtonBase))
+ <button
aria-controls="simple-menu"
aria-haspopup="true"
aria-label="ecogesture.MENU_TITLE"
- className="MuiButton-root btn-secondary-negative MuiButton-contained"
- component="button"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary btnFilter MuiButton-textSizeSmall MuiButton-sizeSmall"
disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
type="button"
>
- <ForwardRef(ButtonBase)
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- className="MuiButton-root btn-secondary-negative MuiButton-contained"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- type="button"
+ <span
+ className="MuiButton-label"
>
- <button
- aria-controls="simple-menu"
- aria-haspopup="true"
- aria-label="ecogesture.MENU_TITLE"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-contained"
- disabled={false}
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
+ <StyledIcon
+ icon="test-file-stub"
+ size={20}
>
- <span
- className="MuiButton-label text-14-normal"
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={20}
+ spin={false}
>
- <StyledIcon
- icon="test-file-stub"
- size={20}
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={20}
+ style={Object {}}
+ width={20}
>
- <Icon
+ <svg
aria-hidden={true}
- icon="test-file-stub"
- size={20}
- spin={false}
+ className="styles__icon___23x3R"
+ height={20}
+ style={Object {}}
+ width={20}
>
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={20}
- style={Object {}}
- width={20}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={20}
- style={Object {}}
- width={20}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- <span
- className="ecogestures"
- >
- ecogesture.MENU_TITLE
- </span>
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
+ <use
+ xlinkHref="#test-file-stub"
/>
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Menu))
- MenuListProps={
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ <span
+ className=""
+ >
+ ecogesture.MENU_TITLE
+ </span>
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Menu))
+ MenuListProps={
+ Object {
+ "className": "filter-menu-list",
+ }
+ }
+ PopoverClasses={
+ Object {
+ "paper": "filter-menu",
+ }
+ }
+ anchorEl={null}
+ keepMounted={true}
+ onClose={[Function]}
+ open={false}
+ variant="menu"
+ >
+ <ForwardRef(Menu)
+ MenuListProps={
+ Object {
+ "className": "filter-menu-list",
+ }
+ }
+ PopoverClasses={
+ Object {
+ "paper": "filter-menu",
+ }
+ }
+ anchorEl={null}
+ classes={
+ Object {
+ "list": "MuiMenu-list",
+ "paper": "MuiMenu-paper",
+ }
+ }
+ keepMounted={true}
+ onClose={[Function]}
+ open={false}
+ variant="menu"
+ >
+ <WithStyles(ForwardRef(Popover))
+ PaperProps={
Object {
- "className": "filter-menu-list",
+ "classes": Object {
+ "root": "MuiMenu-paper",
+ },
}
}
- PopoverClasses={
+ TransitionProps={
Object {
- "paper": "filter-menu",
+ "onEntering": [Function],
}
}
anchorEl={null}
+ anchorOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
+ classes={
+ Object {
+ "paper": "filter-menu",
+ }
+ }
+ getContentAnchorEl={[Function]}
keepMounted={true}
onClose={[Function]}
open={false}
- variant="menu"
+ transformOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
+ transitionDuration="auto"
>
- <ForwardRef(Menu)
- MenuListProps={
+ <ForwardRef(Popover)
+ PaperProps={
Object {
- "className": "filter-menu-list",
+ "classes": Object {
+ "root": "MuiMenu-paper",
+ },
}
}
- PopoverClasses={
+ TransitionProps={
Object {
- "paper": "filter-menu",
+ "onEntering": [Function],
}
}
anchorEl={null}
+ anchorOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
+ }
+ }
classes={
Object {
- "list": "MuiMenu-list",
- "paper": "MuiMenu-paper",
+ "paper": "MuiPopover-paper filter-menu",
+ "root": "MuiPopover-root",
}
}
+ getContentAnchorEl={[Function]}
keepMounted={true}
onClose={[Function]}
open={false}
- variant="menu"
- >
- <WithStyles(ForwardRef(Popover))
- PaperProps={
- Object {
- "classes": Object {
- "root": "MuiMenu-paper",
- },
- }
- }
- TransitionProps={
- Object {
- "onEntering": [Function],
- }
- }
- anchorEl={null}
- anchorOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
+ transformOrigin={
+ Object {
+ "horizontal": "left",
+ "vertical": "top",
}
- classes={
+ }
+ transitionDuration="auto"
+ >
+ <ForwardRef(Modal)
+ BackdropProps={
Object {
- "paper": "filter-menu",
+ "invisible": true,
}
}
- getContentAnchorEl={[Function]}
+ className="MuiPopover-root"
keepMounted={true}
onClose={[Function]}
open={false}
- transformOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- transitionDuration="auto"
>
- <ForwardRef(Popover)
- PaperProps={
- Object {
- "classes": Object {
- "root": "MuiMenu-paper",
- },
- }
- }
- TransitionProps={
- Object {
- "onEntering": [Function],
- }
- }
- anchorEl={null}
- anchorOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- classes={
- Object {
- "paper": "MuiPopover-paper filter-menu",
- "root": "MuiPopover-root",
- }
- }
- getContentAnchorEl={[Function]}
- keepMounted={true}
- onClose={[Function]}
- open={false}
- transformOrigin={
- Object {
- "horizontal": "left",
- "vertical": "top",
- }
- }
- transitionDuration="auto"
+ <ForwardRef(Portal)
+ disablePortal={false}
>
- <ForwardRef(Modal)
- BackdropProps={
- Object {
- "invisible": true,
- }
- }
- className="MuiPopover-root"
- keepMounted={true}
- onClose={[Function]}
- open={false}
- >
- <ForwardRef(Portal)
- disablePortal={false}
- >
- <Portal
- containerInfo={
- <body>
- <div
- aria-hidden="true"
- class="MuiPopover-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;"
+ <Portal
+ containerInfo={
+ <body>
+ <div
+ aria-hidden="true"
+ class="MuiPopover-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px; visibility: hidden;"
+ >
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
+ style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
+ tabindex="-1"
+ >
+ <ul
+ class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
+ role="menu"
+ tabindex="-1"
>
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
- style="opacity: 0; transform: scale(0.75, 0.5625); visibility: hidden;"
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ role="menuitem"
tabindex="-1"
>
- <ul
- class="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
- role="menu"
- tabindex="-1"
+ ecogesture.ALL
+ <div
+ class="MuiListItemIcon-root filter-menu-icon"
>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.ALL
- <div
- class="MuiListItemIcon-root filter-menu-icon"
- >
- <svg
- aria-hidden="true"
- class="styles__icon___23x3R"
- height="13"
- width="13"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </div>
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.HEATING
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.AIR_CONDITIONING
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.ECS
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.COLD_WATER
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
+ <svg
+ aria-hidden="true"
+ class="styles__icon___23x3R"
+ height="13"
+ width="13"
>
- ecogesture.ELECTRICITY_SPECIFIC
- <span
- class="MuiTouchRipple-root"
+ <use
+ xlink:href="#test-file-stub"
/>
- </li>
- <li
- aria-disabled="false"
- class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- role="menuitem"
- tabindex="-1"
- >
- ecogesture.COOKING
- <span
- class="MuiTouchRipple-root"
- />
- </li>
- </ul>
- </div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
+ </svg>
+ </div>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.HEATING
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.AIR_CONDITIONING
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.ECS
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.COLD_WATER
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.ELECTRICITY_SPECIFIC
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ <li
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ role="menuitem"
+ tabindex="-1"
+ >
+ ecogesture.COOKING
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </li>
+ </ul>
+ </div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
+ </div>
+ </body>
+ }
+ >
+ <div
+ className="MuiPopover-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
+ Object {
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "visibility": "hidden",
+ "zIndex": 1300,
}
+ }
+ >
+ <ForwardRef(SimpleBackdrop)
+ invisible={true}
+ onClick={[Function]}
+ open={false}
+ />
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={false}
>
<div
- className="MuiPopover-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "visibility": "hidden",
- "zIndex": 1300,
- }
- }
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Grow)
+ appear={true}
+ in={false}
+ onEnter={[Function]}
+ onEntering={[Function]}
+ onExited={[Function]}
+ tabIndex="-1"
+ timeout="auto"
>
- <ForwardRef(SimpleBackdrop)
- invisible={true}
- onClick={[Function]}
- open={false}
- />
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={false}
+ <Transition
+ addEndListener={[Function]}
+ appear={true}
+ enter={true}
+ exit={true}
+ in={false}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ tabIndex="-1"
+ timeout={null}
+ unmountOnExit={false}
>
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Grow)
- appear={true}
- in={false}
- onEnter={[Function]}
- onEntering={[Function]}
- onExited={[Function]}
+ <WithStyles(ForwardRef(Paper))
+ className="MuiPopover-paper filter-menu"
+ classes={
+ Object {
+ "root": "MuiMenu-paper",
+ }
+ }
+ elevation={8}
+ style={
+ Object {
+ "opacity": 0,
+ "transform": "scale(0.75, 0.5625)",
+ "visibility": "hidden",
+ }
+ }
tabIndex="-1"
- timeout="auto"
>
- <Transition
- addEndListener={[Function]}
- appear={true}
- enter={true}
- exit={true}
- in={false}
- mountOnEnter={false}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
+ <ForwardRef(Paper)
+ className="MuiPopover-paper filter-menu"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root MuiMenu-paper",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={8}
+ style={
+ Object {
+ "opacity": 0,
+ "transform": "scale(0.75, 0.5625)",
+ "visibility": "hidden",
+ }
+ }
tabIndex="-1"
- timeout={null}
- unmountOnExit={false}
>
- <WithStyles(ForwardRef(Paper))
- className="MuiPopover-paper filter-menu"
- classes={
- Object {
- "root": "MuiMenu-paper",
- }
- }
- elevation={8}
+ <div
+ className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
style={
Object {
"opacity": 0,
@@ -674,1165 +716,1108 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
}
tabIndex="-1"
>
- <ForwardRef(Paper)
- className="MuiPopover-paper filter-menu"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root MuiMenu-paper",
- "rounded": "MuiPaper-rounded",
- }
- }
- elevation={8}
- style={
+ <ForwardRef(MenuList)
+ actions={
Object {
- "opacity": 0,
- "transform": "scale(0.75, 0.5625)",
- "visibility": "hidden",
+ "current": Object {
+ "adjustStyleForScrollbar": [Function],
+ },
}
}
- tabIndex="-1"
+ autoFocus={false}
+ autoFocusItem={false}
+ className="MuiMenu-list filter-menu-list"
+ onKeyDown={[Function]}
+ variant="menu"
>
- <div
- className="MuiPaper-root MuiMenu-paper MuiPopover-paper filter-menu MuiPaper-elevation8 MuiPaper-rounded"
- style={
- Object {
- "opacity": 0,
- "transform": "scale(0.75, 0.5625)",
- "visibility": "hidden",
- }
- }
- tabIndex="-1"
+ <WithStyles(ForwardRef(List))
+ className="MuiMenu-list filter-menu-list"
+ onKeyDown={[Function]}
+ role="menu"
+ tabIndex={-1}
>
- <ForwardRef(MenuList)
- actions={
+ <ForwardRef(List)
+ className="MuiMenu-list filter-menu-list"
+ classes={
Object {
- "current": Object {
- "adjustStyleForScrollbar": [Function],
- },
+ "dense": "MuiList-dense",
+ "padding": "MuiList-padding",
+ "root": "MuiList-root",
+ "subheader": "MuiList-subheader",
}
}
- autoFocus={false}
- autoFocusItem={false}
- className="MuiMenu-list filter-menu-list"
onKeyDown={[Function]}
- variant="menu"
+ role="menu"
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(List))
- className="MuiMenu-list filter-menu-list"
+ <ul
+ className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
onKeyDown={[Function]}
role="menu"
tabIndex={-1}
>
- <ForwardRef(List)
- className="MuiMenu-list filter-menu-list"
+ <WithStyles(ForwardRef(MenuItem))
classes={
Object {
- "dense": "MuiList-dense",
- "padding": "MuiList-padding",
- "root": "MuiList-root",
- "subheader": "MuiList-subheader",
+ "root": "item-active",
}
}
- onKeyDown={[Function]}
- role="menu"
- tabIndex={-1}
+ key=".$.$7"
+ onClick={[Function]}
+ selected={true}
>
- <ul
- className="MuiList-root MuiMenu-list filter-menu-list MuiList-padding"
- onKeyDown={[Function]}
- role="menu"
- tabIndex={-1}
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root item-active",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={true}
>
- <WithStyles(ForwardRef(MenuItem))
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
classes={
Object {
- "root": "item-active",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$7"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={true}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root item-active",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={true}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={true}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={true}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
+ ecogesture.ALL
+ <WithStyles(ForwardRef(ListItemIcon))
classes={
Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
+ "root": "filter-menu-icon",
}
}
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ key=".1"
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root item-active Mui-selected MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button Mui-selected"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
- >
- ecogesture.ALL
- <WithStyles(ForwardRef(ListItemIcon))
- classes={
- Object {
- "root": "filter-menu-icon",
- }
+ <ForwardRef(ListItemIcon)
+ classes={
+ Object {
+ "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
+ "root": "MuiListItemIcon-root filter-menu-icon",
}
- key=".1"
+ }
+ >
+ <div
+ className="MuiListItemIcon-root filter-menu-icon"
>
- <ForwardRef(ListItemIcon)
- classes={
- Object {
- "alignItemsFlexStart": "MuiListItemIcon-alignItemsFlexStart",
- "root": "MuiListItemIcon-root filter-menu-icon",
- }
- }
+ <StyledIcon
+ icon="test-file-stub"
+ size={13}
>
- <div
- className="MuiListItemIcon-root filter-menu-icon"
+ <Icon
+ aria-hidden={true}
+ icon="test-file-stub"
+ size={13}
+ spin={false}
>
- <StyledIcon
- icon="test-file-stub"
- size={13}
+ <Component
+ aria-hidden={true}
+ className="styles__icon___23x3R"
+ height={13}
+ style={Object {}}
+ width={13}
>
- <Icon
+ <svg
aria-hidden={true}
- icon="test-file-stub"
- size={13}
- spin={false}
+ className="styles__icon___23x3R"
+ height={13}
+ style={Object {}}
+ width={13}
>
- <Component
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={13}
- style={Object {}}
- width={13}
- >
- <svg
- aria-hidden={true}
- className="styles__icon___23x3R"
- height={13}
- style={Object {}}
- width={13}
- >
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </StyledIcon>
- </div>
- </ForwardRef(ListItemIcon)>
- </WithStyles(ForwardRef(ListItemIcon))>
- <WithStyles(memo)
- center={false}
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </StyledIcon>
+ </div>
+ </ForwardRef(ListItemIcon)>
+ </WithStyles(ForwardRef(ListItemIcon))>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$8"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "root": "",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$8"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ ecogesture.HEATING
+ <WithStyles(memo)
+ center={false}
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- ecogesture.HEATING
- <WithStyles(memo)
- center={false}
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$9"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "root": "",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$9"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ ecogesture.AIR_CONDITIONING
+ <WithStyles(memo)
+ center={false}
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- ecogesture.AIR_CONDITIONING
- <WithStyles(memo)
- center={false}
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$10"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "root": "",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$10"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ ecogesture.ECS
+ <WithStyles(memo)
+ center={false}
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- ecogesture.ECS
- <WithStyles(memo)
- center={false}
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$11"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "root": "",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$11"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ ecogesture.COLD_WATER
+ <WithStyles(memo)
+ center={false}
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- ecogesture.COLD_WATER
- <WithStyles(memo)
- center={false}
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$12"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "root": "",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$12"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ ecogesture.ELECTRICITY_SPECIFIC
+ <WithStyles(memo)
+ center={false}
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- ecogesture.ELECTRICITY_SPECIFIC
- <WithStyles(memo)
- center={false}
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- <WithStyles(ForwardRef(MenuItem))
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ <WithStyles(ForwardRef(MenuItem))
+ classes={
+ Object {
+ "root": "",
+ }
+ }
+ key=".$.$13"
+ onClick={[Function]}
+ selected={false}
+ >
+ <ForwardRef(MenuItem)
+ classes={
+ Object {
+ "dense": "MuiMenuItem-dense",
+ "gutters": "MuiMenuItem-gutters",
+ "root": "MuiMenuItem-root",
+ "selected": "Mui-selected",
+ }
+ }
+ onClick={[Function]}
+ selected={false}
+ >
+ <WithStyles(ForwardRef(ListItem))
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "root": "",
+ "dense": "MuiMenuItem-dense",
}
}
- key=".$.$13"
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <ForwardRef(MenuItem)
+ <ForwardRef(ListItem)
+ button={true}
+ className="MuiMenuItem-root MuiMenuItem-gutters"
classes={
Object {
- "dense": "MuiMenuItem-dense",
- "gutters": "MuiMenuItem-gutters",
- "root": "MuiMenuItem-root",
+ "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
+ "button": "MuiListItem-button",
+ "container": "MuiListItem-container",
+ "dense": "MuiListItem-dense MuiMenuItem-dense",
+ "disabled": "Mui-disabled",
+ "divider": "MuiListItem-divider",
+ "focusVisible": "Mui-focusVisible",
+ "gutters": "MuiListItem-gutters",
+ "root": "MuiListItem-root",
+ "secondaryAction": "MuiListItem-secondaryAction",
"selected": "Mui-selected",
}
}
+ component="li"
+ disableGutters={false}
onClick={[Function]}
+ role="menuitem"
selected={false}
+ tabIndex={-1}
>
- <WithStyles(ForwardRef(ListItem))
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
- classes={
- Object {
- "dense": "MuiMenuItem-dense",
- }
- }
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <ForwardRef(ListItem)
- button={true}
- className="MuiMenuItem-root MuiMenuItem-gutters"
+ <ForwardRef(ButtonBase)
+ className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
classes={
Object {
- "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart",
- "button": "MuiListItem-button",
- "container": "MuiListItem-container",
- "dense": "MuiListItem-dense MuiMenuItem-dense",
"disabled": "Mui-disabled",
- "divider": "MuiListItem-divider",
"focusVisible": "Mui-focusVisible",
- "gutters": "MuiListItem-gutters",
- "root": "MuiListItem-root",
- "secondaryAction": "MuiListItem-secondaryAction",
- "selected": "Mui-selected",
+ "root": "MuiButtonBase-root",
}
}
component="li"
- disableGutters={false}
+ disabled={false}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
role="menuitem"
- selected={false}
tabIndex={-1}
>
- <WithStyles(ForwardRef(ButtonBase))
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
+ <li
+ aria-disabled={false}
+ className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
+ onBlur={[Function]}
onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
role="menuitem"
tabIndex={-1}
>
- <ForwardRef(ButtonBase)
- className="MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
- component="li"
- disabled={false}
- focusVisibleClassName="Mui-focusVisible"
- onClick={[Function]}
- role="menuitem"
- tabIndex={-1}
+ ecogesture.COOKING
+ <WithStyles(memo)
+ center={false}
>
- <li
- aria-disabled={false}
- className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
- onBlur={[Function]}
- onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- role="menuitem"
- tabIndex={-1}
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- ecogesture.COOKING
- <WithStyles(memo)
- center={false}
+ <span
+ className="MuiTouchRipple-root"
>
- <ForwardRef(TouchRipple)
- center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
- >
- <span
- className="MuiTouchRipple-root"
- >
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </li>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(ListItem)>
- </WithStyles(ForwardRef(ListItem))>
- </ForwardRef(MenuItem)>
- </WithStyles(ForwardRef(MenuItem))>
- </ul>
- </ForwardRef(List)>
- </WithStyles(ForwardRef(List))>
- </ForwardRef(MenuList)>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </Transition>
- </ForwardRef(Grow)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Popover)>
- </WithStyles(ForwardRef(Popover))>
- </ForwardRef(Menu)>
- </WithStyles(ForwardRef(Menu))>
- </div>
- </div>
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </li>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(ListItem)>
+ </WithStyles(ForwardRef(ListItem))>
+ </ForwardRef(MenuItem)>
+ </WithStyles(ForwardRef(MenuItem))>
+ </ul>
+ </ForwardRef(List)>
+ </WithStyles(ForwardRef(List))>
+ </ForwardRef(MenuList)>
+ </div>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </Transition>
+ </ForwardRef(Grow)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Popover)>
+ </WithStyles(ForwardRef(Popover))>
+ </ForwardRef(Menu)>
+ </WithStyles(ForwardRef(Menu))>
</div>
<div
className="ecogesture-content"
@@ -1951,15 +1936,11 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
key="ECOGESTURE0013"
/>
<WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1976,13 +1957,13 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1996,7 +1977,7 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
onClick={[MockFunction]}
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -2005,7 +1986,7 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -2021,7 +2002,7 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -2039,7 +2020,7 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
ecogesture.reinit
</span>
diff --git a/src/components/Ecogesture/EcogestureList/ecogestureList.scss b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
index b2785b9d4711053f4e4ea958f56a931b54769add..fc2b9f6fcc2ba03e8b74b182e9fee25a9f8ca175 100644
--- a/src/components/Ecogesture/EcogestureList/ecogestureList.scss
+++ b/src/components/Ecogesture/EcogestureList/ecogestureList.scss
@@ -20,76 +20,19 @@
display: flex;
align-items: center;
flex-direction: column;
+ gap: 1rem;
color: white;
text-align: center;
- button.btn-highlight {
- padding: 0.625rem;
- }
}
- .filters {
- display: flex;
- align-items: center;
- height: 50px;
- color: white;
- position: relative;
- .filter {
- height: 45px;
- display: flex;
- align-items: center;
- justify-content: flex-start;
- cursor: pointer;
- svg {
- margin-right: 1rem;
- }
- .checkicon {
- opacity: 0;
- margin-left: auto;
- transition: all 300ms ease;
- &.active {
- opacity: 1;
- }
- }
- }
- .ecogestures {
- font-size: 0.95rem;
- text-transform: initial;
+ .btnFilter {
+ max-width: 12rem;
+ justify-content: flex-start;
+ span {
padding-left: 0.5rem;
&.opened {
color: $gold-shadow;
}
}
- .filter-button {
- display: flex;
- .button.btn-secondary-negative {
- margin: auto;
- display: flex;
- align-items: center;
- span {
- display: inline-flex;
- margin-bottom: 0;
- transition: all 300ms ease;
- }
- svg {
- margin-right: 1rem;
- margin-left: -0.5rem;
- }
- }
- }
- }
-
- button.btn-secondary-negative {
- margin: 0;
- padding: 0.3rem 0.5rem;
- min-width: 11rem;
- height: 2.25rem;
- justify-content: left;
- &.btn-info {
- margin: 0 0 0 1rem;
- padding: 0;
- width: 2.25rem;
- min-width: 2.25rem;
- justify-content: center;
- }
}
}
.ecogesture-content {
@@ -99,9 +42,6 @@
animation: appear 600ms ease;
width: 100%;
gap: 1rem;
- @media #{$tablet} {
- gap: 0.5rem;
- }
@keyframes appear {
from {
diff --git a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
index 7fa5418c050ce00a88afbfae0cb31fa04b18b9ba..940625a44899912b023b9fee13c3eb663665cc5e 100644
--- a/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal/EcogestureModal.tsx
@@ -112,10 +112,7 @@ const EcogestureModal = ({
aria-label={t(
'ecogesture_modal.accessibility.button_select_action'
)}
- classes={{
- root: 'btn-action-launch',
- label: 'text-16-bold',
- }}
+ className="btnPrimaryNegative"
onClick={selectEcogesture}
>
{t('ecogesture_modal.select_action')}
@@ -132,10 +129,7 @@ const EcogestureModal = ({
'ecogesture_modal.accessibility.button_see_more_detail'
)}
onClick={() => setShowDetails(prev => !prev)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
+ className="btnSecondary"
>
{t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
</Button>
diff --git a/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss b/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
index 1be2ce155464e3999491cf261bb78433fd904596..eced119a3f8059cb768e011ef12513ff3df71570 100644
--- a/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
+++ b/src/components/Ecogesture/EcogestureModal/ecogestureModal.scss
@@ -11,28 +11,16 @@
}
.em-root {
- overflow: auto;
- width: 100%;
display: flex;
- justify-content: center;
- /* width */
- &::-webkit-scrollbar {
- width: 10px;
- }
- /* Track */
- &::-webkit-scrollbar-track {
- background: $scrollbar-track;
- }
- /* Handle */
- &::-webkit-scrollbar-thumb {
- background: $scrollbar-thumb;
- }
+
.em-content {
padding: 1.5rem 2.5rem;
- width: 100%;
+
+ button {
+ margin-top: 1rem;
+ }
@media #{$large-phone} {
- width: 100%;
padding: 2rem;
}
.em-content-box-img {
@@ -84,17 +72,6 @@
text-align: center;
margin: 1.5rem 0 1rem;
}
-
- button.btn-action-launch {
- background: $blue-radial-gradient;
- border: none;
- border-radius: 2px;
- margin: 1.5rem 0 0;
- width: 100%;
- text-transform: none;
- cursor: pointer;
- padding: 0.6rem 0;
- }
}
}
.em-content-box-text {
@@ -117,14 +94,6 @@
margin-bottom: 0;
}
}
-.block {
- display: block !important;
-}
-.ecogesture-modal {
- button.btn-secondary-negative {
- margin: 1rem 0 1.5rem !important;
- }
-}
#accessibility-title {
display: none;
diff --git a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
index 3c1ac059eac4a6918cee3f152da6ee5628a524ec..78ef552bf893e62b384b11b20cb1274ab607098a 100644
--- a/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
+++ b/src/components/Ecogesture/EcogestureNotFound/EcogestureNotFound.tsx
@@ -35,12 +35,7 @@ const EcogestureNotFound = ({
<Button
aria-label={t('error_page.back')}
onClick={() => navigate(`/${returnPage}`)}
- variant="contained"
- classes={{
- root: 'btn-highlight',
- label: 'text-18-bold',
- }}
- type="submit"
+ className="btnPrimary"
>
{t('error_page.back')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
index fe29324f57d34c47b991df4cbeb5524913c797b5..3c2efdfc0cee38ccf7f38a71f72db085f1ff45f7 100644
--- a/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureNotFound/__snapshots__/EcogestureNotFound.spec.tsx.snap
@@ -58,18 +58,12 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
</div>
<WithStyles(ForwardRef(Button))
aria-label="error_page.back"
- classes={
- Object {
- "label": "text-18-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
- type="submit"
- variant="contained"
>
<ForwardRef(Button)
aria-label="error_page.back"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -86,13 +80,13 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-18-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -104,22 +98,20 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
}
}
onClick={[Function]}
- type="submit"
- variant="contained"
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="error_page.back"
- className="MuiButton-root btn-highlight MuiButton-contained"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- type="submit"
+ type="button"
>
<ForwardRef(ButtonBase)
aria-label="error_page.back"
- className="MuiButton-root btn-highlight MuiButton-contained"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -132,11 +124,11 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- type="submit"
+ type="button"
>
<button
aria-label="error_page.back"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -151,10 +143,10 @@ exports[`EcogestureNotFound component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
- type="submit"
+ type="button"
>
<span
- className="MuiButton-label text-18-bold"
+ className="MuiButton-label"
>
error_page.back
</span>
diff --git a/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss b/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss
index 3724f53ad83c13f77cf694c5c5e83a154b2effd8..3cfaff18738b48579f071013a053bbd744e8af3a 100644
--- a/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss
+++ b/src/components/Ecogesture/EcogestureNotFound/ecogestureNotFound.scss
@@ -5,6 +5,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ gap: 1rem;
max-width: 450px;
margin: auto;
padding: 2rem;
diff --git a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx
index c924c3e4d9c1fa90db03b4bd82faaf481593aebf..6fa3b3934dffa31e4bf02f7c1c259422ae54c2d9 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx
+++ b/src/components/Ecogesture/EcogestureReinitModal/EcogestureReinitModal.tsx
@@ -65,21 +65,14 @@ const EcogestureReinitModal = ({
<Button
aria-label={t('ecogesture.reinitModal.btn1')}
onClick={handleCloseClick}
- className="btn1"
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('ecogesture.reinitModal.btn1')}
</Button>
<Button
aria-label={t('ecogesture.reinitModal.btn2')}
onClick={handleLaunchReinit}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.reinitModal.btn2')}
</Button>
diff --git a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
index 12cb41c346cf16d5b767e330745da2065ccb2577..a34f440cd19320c31a7f4fe466f497b4b7f23970 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureReinitModal/__snapshots__/EcogestureReinitModal.spec.tsx.snap
@@ -481,12 +481,12 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.reinitModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.reinitModal.btn1
</span>
@@ -496,12 +496,12 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
</button>
<button
aria-label="ecogesture.reinitModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.reinitModal.btn2
</span>
@@ -911,18 +911,12 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.reinitModal.btn1"
- className="btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture.reinitModal.btn1"
- className="btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -939,13 +933,13 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -960,7 +954,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.reinitModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -970,7 +964,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.reinitModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -987,7 +981,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.reinitModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1005,7 +999,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.reinitModal.btn1
</span>
@@ -1044,16 +1038,12 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.reinitModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture.reinitModal.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1070,13 +1060,13 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1091,7 +1081,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.reinitModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1101,7 +1091,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.reinitModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1118,7 +1108,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.reinitModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1136,7 +1126,7 @@ exports[`EcogestureReinitModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.reinitModal.btn2
</span>
diff --git a/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss b/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss
index 5abb4e16a82c810101f570129d11d60611df53dc..d5f0ae349fb52fa9e1ccb1031db1ec374f864383 100644
--- a/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss
+++ b/src/components/Ecogesture/EcogestureReinitModal/ecogestureReinitModal.scss
@@ -18,9 +18,5 @@
display: flex;
gap: 1rem;
width: 100%;
- button {
- margin: 0;
- min-height: 45px;
- }
}
}
diff --git a/src/components/Ecogesture/SingleEcogestureView.spec.tsx b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
index 35e2ff90e7dcbe2855822c4b7922b3e43d04ddf1..4d889d7d5524c9f20f26fb605c25f052548f177d 100644
--- a/src/components/Ecogesture/SingleEcogestureView.spec.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.spec.tsx
@@ -82,6 +82,8 @@ describe('SingleEcogesture component', () => {
wrapper.find('.showMore').first().simulate('click')
await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.showMore').text()).toBe('ecogesture_modal.show_less')
+ expect(wrapper.find('.showMore').first().text()).toBe(
+ 'ecogesture_modal.show_less'
+ )
})
})
diff --git a/src/components/Ecogesture/SingleEcogestureView.tsx b/src/components/Ecogesture/SingleEcogestureView.tsx
index 3f9b7cefb326293d6dc88a4ff15f014c28a7a903..b8125e5587a20f378bd4470b70124b1fa4224da0 100644
--- a/src/components/Ecogesture/SingleEcogestureView.tsx
+++ b/src/components/Ecogesture/SingleEcogestureView.tsx
@@ -1,4 +1,4 @@
-import { Collapse } from '@material-ui/core'
+import { Button, Collapse } from '@material-ui/core'
import IconButton from '@material-ui/core/IconButton'
import * as Sentry from '@sentry/react'
import doingDisabledIcon from 'assets/icons/ico/doing-disabled.svg'
@@ -155,13 +155,15 @@ const SingleEcogestureView = () => {
<div className="long-name text-18-bold">
{ecogesture.longName}
</div>
- <div
- className="showMore text-15-normal"
+ <Button
+ classes={{
+ root: 'btnText showMore',
+ label: 'text-15-normal',
+ }}
onClick={() => setShowDetails(prev => !prev)}
- role="button"
>
{t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
- </div>
+ </Button>
<Collapse in={showDetails}>
<div className="longDescription text-16-normal-150">
@@ -175,9 +177,7 @@ const SingleEcogestureView = () => {
aria-label={t('ecogesture.objective')}
onClick={toggleObjective}
classes={{
- root: `btn-secondary-negative objective-btn ${
- isObjective && 'active'
- }`,
+ root: `btnSecondary objective-btn ${isObjective && 'active'}`,
label: 'text-15-normal',
}}
>
@@ -194,9 +194,7 @@ const SingleEcogestureView = () => {
aria-label={t('ecogesture.doing')}
onClick={toggleDoing}
classes={{
- root: `btn-secondary-negative doing-btn ${
- isDoing && 'active'
- }`,
+ root: `btnSecondary doing-btn ${isDoing && 'active'}`,
label: 'text-15-normal',
}}
>
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index f6432521d2f775a377e0f8cb56c35b1371064a41..ba9558c108d3adb28241bdad7ffd4fecbf231eeb 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -623,30 +623,26 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</Icon>
</StyledIcon>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.emptyList.obj1
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.emptyList.obj2
</div>
<div
- className="btn-container"
+ className="buttons"
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative btn1",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.emptyList.btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -663,13 +659,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn1",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -684,7 +680,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -694,7 +690,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -711,7 +707,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -729,7 +725,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.emptyList.btn1
</span>
@@ -768,16 +764,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.emptyList.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -794,13 +786,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -815,7 +807,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -825,7 +817,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -842,7 +834,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -860,7 +852,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.emptyList.btn2
</span>
@@ -959,30 +951,26 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</Icon>
</StyledIcon>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.emptyList.doing1
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.emptyList.doing2
</div>
<div
- className="btn-container"
+ className="buttons"
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.emptyList.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative btn1",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.emptyList.btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -999,13 +987,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative btn1",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1020,7 +1008,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -1030,7 +1018,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn1"
- className="MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1047,7 +1035,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative btn1 MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -1065,7 +1053,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.emptyList.btn1
</span>
@@ -1104,16 +1092,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.emptyList.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.emptyList.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1130,13 +1114,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1151,7 +1135,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1161,7 +1145,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.emptyList.btn2"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1178,7 +1162,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.emptyList.btn2"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -1196,7 +1180,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.emptyList.btn2
</span>
@@ -1690,12 +1674,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
ecogesture.initModal.title
</div>
<div
- class="text-16-normal text"
+ class="text-16-normal"
>
ecogesture.initModal.text1
</div>
<div
- class="text-16-normal text"
+ class="text-16-normal"
>
ecogesture.initModal.text2
</div>
@@ -1704,12 +1688,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.initModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.initModal.btn1
</span>
@@ -1719,12 +1703,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</button>
<button
aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.initModal.btn2
</span>
@@ -2080,12 +2064,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
ecogesture.initModal.title
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.initModal.text1
</div>
<div
- className="text-16-normal text"
+ className="text-16-normal"
>
ecogesture.initModal.text2
</div>
@@ -2094,16 +2078,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.initModal.btn1"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -2120,13 +2100,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -2141,7 +2121,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -2151,7 +2131,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -2168,7 +2148,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.initModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -2186,7 +2166,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.initModal.btn1
</span>
@@ -2225,16 +2205,12 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture.initModal.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -2251,13 +2227,13 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -2272,7 +2248,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -2282,7 +2258,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -2299,7 +2275,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -2317,7 +2293,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.initModal.btn2
</span>
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
index 49280df12fef51b78697af6bdcd84ea7ba2bb082..e0259df97fed4114ce85212198caec9bc31ceb14 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogestureView.spec.tsx.snap
@@ -95,13 +95,132 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
- <div
- className="showMore text-15-normal"
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-15-normal",
+ "root": "btnText showMore",
+ }
+ }
onClick={[Function]}
- role="button"
>
- ecogesture_modal.show_more
- </div>
+ <ForwardRef(Button)
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-15-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btnText showMore",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btnText showMore MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btnText showMore MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <button
+ className="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-15-normal"
+ >
+ ecogesture_modal.show_more
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Collapse))
in={false}
>
@@ -167,7 +286,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
classes={
Object {
"label": "text-15-normal",
- "root": "btn-secondary-negative objective-btn false",
+ "root": "btnSecondary objective-btn false",
}
}
onClick={[Function]}
@@ -183,7 +302,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
"edgeEnd": "MuiIconButton-edgeEnd",
"edgeStart": "MuiIconButton-edgeStart",
"label": "MuiIconButton-label text-15-normal",
- "root": "MuiIconButton-root btn-secondary-negative objective-btn false",
+ "root": "MuiIconButton-root btnSecondary objective-btn false",
"sizeSmall": "MuiIconButton-sizeSmall",
}
}
@@ -192,7 +311,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.objective"
centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative objective-btn false"
+ className="MuiIconButton-root btnSecondary objective-btn false"
disabled={false}
focusRipple={true}
onClick={[Function]}
@@ -200,7 +319,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<ForwardRef(ButtonBase)
aria-label="ecogesture.objective"
centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative objective-btn false"
+ className="MuiIconButton-root btnSecondary objective-btn false"
classes={
Object {
"disabled": "Mui-disabled",
@@ -214,7 +333,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.objective"
- className="MuiButtonBase-root MuiIconButton-root btn-secondary-negative objective-btn false"
+ className="MuiButtonBase-root MuiIconButton-root btnSecondary objective-btn false"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -300,7 +419,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
classes={
Object {
"label": "text-15-normal",
- "root": "btn-secondary-negative doing-btn false",
+ "root": "btnSecondary doing-btn false",
}
}
onClick={[Function]}
@@ -316,7 +435,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
"edgeEnd": "MuiIconButton-edgeEnd",
"edgeStart": "MuiIconButton-edgeStart",
"label": "MuiIconButton-label text-15-normal",
- "root": "MuiIconButton-root btn-secondary-negative doing-btn false",
+ "root": "MuiIconButton-root btnSecondary doing-btn false",
"sizeSmall": "MuiIconButton-sizeSmall",
}
}
@@ -325,7 +444,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.doing"
centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative doing-btn false"
+ className="MuiIconButton-root btnSecondary doing-btn false"
disabled={false}
focusRipple={true}
onClick={[Function]}
@@ -333,7 +452,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
<ForwardRef(ButtonBase)
aria-label="ecogesture.doing"
centerRipple={true}
- className="MuiIconButton-root btn-secondary-negative doing-btn false"
+ className="MuiIconButton-root btnSecondary doing-btn false"
classes={
Object {
"disabled": "Mui-disabled",
@@ -347,7 +466,7 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture.doing"
- className="MuiButtonBase-root MuiIconButton-root btn-secondary-negative doing-btn false"
+ className="MuiButtonBase-root MuiIconButton-root btnSecondary doing-btn false"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
diff --git a/src/components/Ecogesture/singleEcogestureView.scss b/src/components/Ecogesture/singleEcogestureView.scss
index c8c6d61f9064491e32ab600bb173bc7e476d5999..815bad7e800c560f58a4ecc443e0da49c8528d52 100644
--- a/src/components/Ecogesture/singleEcogestureView.scss
+++ b/src/components/Ecogesture/singleEcogestureView.scss
@@ -37,16 +37,21 @@
padding: 1rem;
margin: 1.5rem 0 1rem;
max-width: 500px;
+ display: flex;
+ flex-direction: column;
.long-name {
text-align: center;
color: white;
}
.showMore {
+ margin: auto;
text-align: center;
text-decoration: underline;
margin-top: 1.5rem;
- cursor: pointer;
+ span {
+ text-transform: none;
+ }
}
.longDescription {
margin: 1em 0.5rem;
@@ -59,8 +64,7 @@
gap: 0.5rem;
justify-content: center;
button {
- margin: 0;
- &.btn-secondary-negative {
+ &.btnSecondary {
height: 45px;
max-width: 160px;
width: 100%;
diff --git a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
index 541a06390317a40266289902a1be72a383bcfa3b..7381cda358b3b37d937a45c18608809ca5b83850 100644
--- a/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormEquipment/__snapshots__/EcogestureFormEquipment.spec.tsx.snap
@@ -315,19 +315,13 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
+ className="btnSecondary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -344,13 +338,13 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -366,7 +360,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -376,7 +370,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -393,7 +387,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -411,9 +405,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- < profile_type.form.button_previous
+ profile_type.form.button_previous
</span>
</button>
</ForwardRef(ButtonBase)>
@@ -422,19 +416,13 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
+ className="btnPrimary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -451,13 +439,13 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -473,7 +461,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -483,7 +471,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -500,7 +488,7 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -518,9 +506,9 @@ exports[`EcogestureFormEquipment component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- profile_type.form.button_next >
+ profile_type.form.button_next
</span>
</button>
</ForwardRef(ButtonBase)>
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index 3fc0bc2066d0d83a06be85c5e7e8d8c7b2c3154d..05bb4e6800a6069295cf4d642860c93be893dc93 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -89,19 +89,13 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
+ className="btnSecondary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -118,13 +112,13 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -140,7 +134,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -150,7 +144,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -167,7 +161,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<button
aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -185,9 +179,9 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- < profile_type.form.button_previous
+ profile_type.form.button_previous
</span>
</button>
</ForwardRef(ButtonBase)>
@@ -196,19 +190,13 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
+ className="btnPrimary"
disabled={false}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -225,13 +213,13 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -247,7 +235,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -257,7 +245,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -274,7 +262,7 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -292,9 +280,9 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- profile_type.form.button_next >
+ profile_type.form.button_next
</span>
<WithStyles(memo)
center={false}
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
index 328ec33efd44004193119a6044bf2fc3a21a0bf2..d7254529856ff6b6a18f6e67ee9ed18d0efe9f09 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/EcogestureLaunchFormModal.tsx
@@ -45,10 +45,7 @@ const EcogestureLaunchFormModal = ({
<Button
aria-label={t('ecogesture.initModal.btn2')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture.initModal.btn2')}
</Button>
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
index 11bbbe72d35769a15252dc8cee1606a0a411877d..ca980750bd1ba733062e700ba25b2b758063bf9e 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/__snapshots__/EcogestureLaunchFormModal.spec.tsx.snap
@@ -446,12 +446,12 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
</div>
<button
aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture.initModal.btn2
</span>
@@ -812,16 +812,12 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
</div>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture.initModal.btn2"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -838,13 +834,13 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -859,7 +855,7 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -869,7 +865,7 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -886,7 +882,7 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
>
<button
aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -904,7 +900,7 @@ exports[`EcogestureLaunchFormModal component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture.initModal.btn2
</span>
diff --git a/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss b/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
index 283ead71a2a4533f761d1001fbc010309fba75d3..cbbceeafb01e65e85a602d82ab98b821e1589047 100644
--- a/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
+++ b/src/components/EcogestureForm/EcogestureLaunchFormModal/ecogestureLaunchFormModal.scss
@@ -1,16 +1,11 @@
@import 'src/styles/base/color';
.eg-init-modal {
- color: $grey-bright;
- margin: 1rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.title {
text-align: center;
color: $gold-shadow;
}
- .text {
- margin: 1rem 0;
- }
- button {
- min-height: 45px;
- }
}
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index b343a1c9654cf7eae93c8fa31497c0ca862cc0a1..2c57d7f963939e01b5df8e1d90042f9bd43206ea 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -100,19 +100,13 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-back",
- }
- }
+ className="btnSecondary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_previous"
- className="profile-navigation-button"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -129,13 +123,13 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-back",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -151,7 +145,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -161,7 +155,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_previous"
- className="MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled"
+ className="MuiButton-root MuiButton-text btnSecondary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -178,7 +172,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_previous"
- className="MuiButtonBase-root MuiButton-root btn-profile-back MuiButton-text profile-navigation-button Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -196,9 +190,9 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- < profile_type.form.button_previous
+ profile_type.form.button_previous
</span>
</button>
</ForwardRef(ButtonBase)>
@@ -207,19 +201,13 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next",
- }
- }
+ className="btnPrimary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="profile_type.accessibility.button_next"
- className="profile-navigation-button disabled"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -236,13 +224,13 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -258,7 +246,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -268,7 +256,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="profile_type.accessibility.button_next"
- className="MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -285,7 +273,7 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
>
<button
aria-label="profile_type.accessibility.button_next"
- className="MuiButtonBase-root MuiButton-root btn-profile-next MuiButton-text profile-navigation-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -303,9 +291,9 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
- profile_type.form.button_next >
+ profile_type.form.button_next
</span>
</button>
</ForwardRef(ButtonBase)>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
index 33640fbccb586f68b29928f91c088f2bc9509660..4b3e8cc5e54204eb1b43ff03a299bd7faab765f5 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.spec.tsx
@@ -1,4 +1,3 @@
-import { Button } from '@material-ui/core'
import { mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import React from 'react'
@@ -34,7 +33,9 @@ describe('EcogestureSelectionDetail component', () => {
wrapper.find('.showMore').first().simulate('click')
await waitForComponentToPaint(wrapper)
- expect(wrapper.find('.showMore').text()).toBe('ecogesture_modal.show_less')
+ expect(wrapper.find('.showMore').first().text()).toBe(
+ 'ecogesture_modal.show_less'
+ )
})
it('should call validate with objective to true', async () => {
const wrapper = mount(
@@ -44,7 +45,7 @@ describe('EcogestureSelectionDetail component', () => {
title={mockedEcogesturesData[0].shortName}
/>
)
- wrapper.find(Button).at(0).simulate('click')
+ wrapper.find('.btnObjective').first().simulate('click')
await waitForComponentToPaint(wrapper)
expect(mockValidate).toHaveBeenCalledWith(true, false)
})
@@ -57,7 +58,7 @@ describe('EcogestureSelectionDetail component', () => {
title={mockedEcogesturesData[0].shortName}
/>
)
- wrapper.find(Button).at(1).simulate('click')
+ wrapper.find('.btnDoing').first().simulate('click')
await waitForComponentToPaint(wrapper)
expect(mockValidate).toHaveBeenCalledWith(false, true)
})
@@ -70,7 +71,7 @@ describe('EcogestureSelectionDetail component', () => {
title={mockedEcogesturesData[0].shortName}
/>
)
- wrapper.find(Button).at(2).simulate('click')
+ wrapper.find('.btnSkip').first().simulate('click')
await waitForComponentToPaint(wrapper)
expect(mockValidate).toHaveBeenCalledWith(false, false)
})
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
index cf50f528ddd004fde180ea4784756ade2190af07..b264060f6e2be8545e2291ace04f6664d303972c 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/EcogestureSelectionDetail.tsx
@@ -47,15 +47,17 @@ const EcogestureSelectionDetail = ({
<StyledIcon className="icon" icon={ecogestureIcon} size={240} />
</div>
<div className="text-22 title">{title}</div>
- <div className="text text-18-bold">{ecogesture.longName}</div>
+ <div className="text-18-bold">{ecogesture.longName}</div>
- <div
- className="showMore text-15-normal"
+ <Button
+ classes={{
+ root: 'btnText showMore',
+ label: 'text-15-normal',
+ }}
onClick={() => setShowDetails(prev => !prev)}
- role="button"
>
{t(`ecogesture_modal.show_${showDetails ? 'less' : 'more'}`)}
- </div>
+ </Button>
<Collapse in={showDetails} exit={false}>
<div className="longDescription text-16-normal-150">
@@ -67,9 +69,8 @@ const EcogestureSelectionDetail = ({
<Button
aria-label={t('ecogesture_selection.button_objective')}
classes={{
- root: 'btn-secondary-negative',
+ root: 'btnSecondary btnObjective',
label: 'text-14-bold',
- focusVisible: 'noFocus',
}}
onClick={() => validate(true, false)}
>
@@ -79,9 +80,8 @@ const EcogestureSelectionDetail = ({
<Button
aria-label={t('ecogesture_selection.button_doing')}
classes={{
- root: 'btn-secondary-negative',
+ root: 'btnSecondary btnDoing',
label: 'text-14-bold',
- focusVisible: 'noFocus',
}}
onClick={() => validate(false, true)}
>
@@ -91,9 +91,8 @@ const EcogestureSelectionDetail = ({
<Button
aria-label={t('ecogesture_selection.button_skip')}
classes={{
- root: 'btn-secondary-negative',
+ root: 'btnSecondary btnSkip',
label: 'text-14-bold',
- focusVisible: 'noFocus',
}}
onClick={() => validate(false, false)}
>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index 0b56a7a8e59162761f2850469f30d2328467c5db..1dbe3c0aa92185118481bbf67340a31ba4e912bf 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
@@ -87,17 +87,136 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
Bonhomme de neige
</div>
<div
- className="text text-18-bold"
+ className="text-18-bold"
>
Je baisse le chauffage en mode hors gel lorsque je m'absente plus de 2 jours.
</div>
- <div
- className="showMore text-15-normal"
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-15-normal",
+ "root": "btnText showMore",
+ }
+ }
onClick={[Function]}
- role="button"
>
- ecogesture_modal.show_more
- </div>
+ <ForwardRef(Button)
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-15-normal",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btnText showMore",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
+ onClick={[Function]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btnText showMore MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btnText showMore MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[Function]}
+ type="button"
+ >
+ <button
+ className="MuiButtonBase-root MuiButton-root btnText showMore MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
+ >
+ <span
+ className="MuiButton-label text-15-normal"
+ >
+ ecogesture_modal.show_more
+ </span>
+ <WithStyles(memo)
+ center={false}
+ >
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
+ >
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Collapse))
exit={false}
in={false}
@@ -164,9 +283,8 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
aria-label="ecogesture_selection.button_objective"
classes={
Object {
- "focusVisible": "noFocus",
"label": "text-14-bold",
- "root": "btn-secondary-negative",
+ "root": "btnSecondary btnObjective",
}
}
onClick={[Function]}
@@ -184,7 +302,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
"disableElevation": "MuiButton-disableElevation",
"disabled": "Mui-disabled",
"endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible noFocus",
+ "focusVisible": "Mui-focusVisible",
"fullWidth": "MuiButton-fullWidth",
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
@@ -195,7 +313,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root btnSecondary btnObjective",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -210,17 +328,17 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.button_objective"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root btnSecondary btnObjective MuiButton-text"
component="button"
disabled={false}
focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.button_objective"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root btnSecondary btnObjective MuiButton-text"
classes={
Object {
"disabled": "Mui-disabled",
@@ -231,13 +349,13 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
component="button"
disabled={false}
focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<button
aria-label="ecogesture_selection.button_objective"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btnSecondary btnObjective MuiButton-text"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -327,9 +445,8 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
aria-label="ecogesture_selection.button_doing"
classes={
Object {
- "focusVisible": "noFocus",
"label": "text-14-bold",
- "root": "btn-secondary-negative",
+ "root": "btnSecondary btnDoing",
}
}
onClick={[Function]}
@@ -347,7 +464,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
"disableElevation": "MuiButton-disableElevation",
"disabled": "Mui-disabled",
"endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible noFocus",
+ "focusVisible": "Mui-focusVisible",
"fullWidth": "MuiButton-fullWidth",
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
@@ -358,7 +475,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root btnSecondary btnDoing",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -373,17 +490,17 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.button_doing"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root btnSecondary btnDoing MuiButton-text"
component="button"
disabled={false}
focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.button_doing"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root btnSecondary btnDoing MuiButton-text"
classes={
Object {
"disabled": "Mui-disabled",
@@ -394,13 +511,13 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
component="button"
disabled={false}
focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<button
aria-label="ecogesture_selection.button_doing"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btnSecondary btnDoing MuiButton-text"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -490,9 +607,8 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
aria-label="ecogesture_selection.button_skip"
classes={
Object {
- "focusVisible": "noFocus",
"label": "text-14-bold",
- "root": "btn-secondary-negative",
+ "root": "btnSecondary btnSkip",
}
}
onClick={[Function]}
@@ -510,7 +626,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
"disableElevation": "MuiButton-disableElevation",
"disabled": "Mui-disabled",
"endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible noFocus",
+ "focusVisible": "Mui-focusVisible",
"fullWidth": "MuiButton-fullWidth",
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
@@ -521,7 +637,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root btnSecondary btnSkip",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -536,17 +652,17 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.button_skip"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root btnSecondary btnSkip MuiButton-text"
component="button"
disabled={false}
focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.button_skip"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root btnSecondary btnSkip MuiButton-text"
classes={
Object {
"disabled": "Mui-disabled",
@@ -557,13 +673,13 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
component="button"
disabled={false}
focusRipple={true}
- focusVisibleClassName="Mui-focusVisible noFocus"
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
type="button"
>
<button
aria-label="ecogesture_selection.button_skip"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btnSecondary btnSkip MuiButton-text"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
index 2bdb65ed0f31fdccb95994385e7831ad0ac782be..62a291ea844fbf09393241af8d7bb196163a8f39 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionDetail/ecogestureSelectionDetail.scss
@@ -47,26 +47,14 @@
flex-direction: row;
justify-content: center;
width: 100%;
- button.btn-secondary-negative {
- margin: 0;
+ button.btnSecondary {
padding: 0.75rem 0.25rem;
height: 7.375rem;
- border: 1px solid $grey-bright;
- border-radius: 0.25rem;
- &:focus,
- &.active,
- &:disabled,
- &:hover {
- background: transparent;
- }
+ border-radius: 4px;
span {
flex-direction: column;
- color: $grey-bright;
}
}
- button.noFocus {
- background: transparent;
- }
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
index 27c356afb667820e493cf7d7857d2169d057857e..4c34e154dc4436f60394c156f4f71b1d8396fbb6 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/EcogestureSelectionEnd.tsx
@@ -27,10 +27,7 @@ const EcogestureSelectionEnd = () => {
<div className="buttons">
<Button
aria-label={t('ecogesture_selection.accessibility.button_ok')}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
onClick={() => navigate('/ecogestures?tab=0')}
>
{t('ecogesture_selection.button_ok')}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
index 4e0248f1f278b5686a66e12daf41c7bfa28ab2bc..0879e9c3a9849a1e8481858f7a81df32433e87ef 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/__snapshots__/EcogestureSelectionEnd.spec.tsx.snap
@@ -60,16 +60,12 @@ exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture_selection.accessibility.button_ok"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture_selection.accessibility.button_ok"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -86,13 +82,13 @@ exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -107,7 +103,7 @@ exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.accessibility.button_ok"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -117,7 +113,7 @@ exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.accessibility.button_ok"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -134,7 +130,7 @@ exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture_selection.accessibility.button_ok"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -152,7 +148,7 @@ exports[`EcogestureSelectionEnd component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture_selection.button_ok
</span>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss b/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss
index 8a3cd1a42d0c3c4c44e66ca6ebc894e191e994dc..1abaaf1c38cac1e7759d60dc419b453c963b1dbe 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionEnd/ecogestureSelectionEnd.scss
@@ -37,10 +37,5 @@
flex-direction: row;
justify-content: center;
width: 100%;
- button.btn-highlight {
- padding: 0.75rem 0.5rem;
- margin: 0 0.5rem;
- max-width: 25rem;
- }
}
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
index f79f26a0263e91874ed4dd1f22d46a357ecd607c..b33c75ebb9b84f275d896bf0fd5cdaa407a47c08 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/EcogestureSelectionModal.tsx
@@ -47,10 +47,7 @@ const EcogestureSelectionModal = ({
<Button
aria-label={t('ecogesture_selection.selectionModal.button_close')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('ecogesture_selection.selectionModal.button_close')}
</Button>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
index aeaea3ddbcfd3f8f52b21262f05266c9d5fc18a4..c15aa65d3e0aa1778834ae74bde5cdcb1a7f9c6b 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/__snapshots__/EcogestureSelectionModal.spec.tsx.snap
@@ -446,12 +446,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="ecogesture_selection.selectionModal.button_close"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
ecogesture_selection.selectionModal.button_close
</span>
@@ -812,16 +812,12 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
</div>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture_selection.selectionModal.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture_selection.selectionModal.button_close"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -838,13 +834,13 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -859,7 +855,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.selectionModal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -869,7 +865,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.selectionModal.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -886,7 +882,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
>
<button
aria-label="ecogesture_selection.selectionModal.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -904,7 +900,7 @@ exports[`EcogestureInitModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture_selection.selectionModal.button_close
</span>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss b/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss
index 9093e9a2497a2e1420a808428b21956843c4d44a..34a934c5b542a77e71a6c6dc87a9e8b0527785b3 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionModal/ecogestureSelectionModal.scss
@@ -13,7 +13,4 @@
.text {
margin: 1rem 0;
}
- button.btn-highlight {
- padding: 0.75rem 0.5rem;
- }
}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
index 8482b95431ccfe35c6f2b587264b975c1e542c29..45dbe9188676dce804ff0975923172fa9f159390 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/EcogestureSelectionRestart.tsx
@@ -36,20 +36,14 @@ const EcogestureSelectionRestart = ({
aria-label={t(
'ecogesture_selection.accessibility.button_go_to_ecogesture'
)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
onClick={() => navigate('/ecogestures?tab=0')}
>
{t('ecogesture_selection.button_go_to_ecogesture')}
</Button>
<Button
aria-label={t('ecogesture_selection.accessibility.button_continue')}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
onClick={restart}
>
{t('ecogesture_selection.button_continue')}
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
index 4d8563d6d8af7c5aba8d3260662d5ba318404c94..fb482cd559b92f73ae0d29fe017aae4e545b4e22 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/__snapshots__/EcogestureSelectionRestart.spec.tsx.snap
@@ -58,16 +58,12 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- classes={
- Object {
- "label": "text-16-normal",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -84,13 +80,13 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-normal",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -105,7 +101,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -115,7 +111,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -132,7 +128,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<button
aria-label="ecogesture_selection.accessibility.button_go_to_ecogesture"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -150,7 +146,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-normal"
+ className="MuiButton-label"
>
ecogesture_selection.button_go_to_ecogesture
</span>
@@ -189,16 +185,12 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="ecogesture_selection.accessibility.button_continue"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="ecogesture_selection.accessibility.button_continue"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -215,13 +207,13 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -236,7 +228,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture_selection.accessibility.button_continue"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -246,7 +238,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<ForwardRef(ButtonBase)
aria-label="ecogesture_selection.accessibility.button_continue"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -263,7 +255,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
>
<button
aria-label="ecogesture_selection.accessibility.button_continue"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -281,7 +273,7 @@ exports[`EcogestureSelectionRestart component should be rendered correctly 1`] =
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
ecogesture_selection.button_continue
</span>
diff --git a/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss b/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss
index a68688b03d27a6335741cc82cddc71c6cb65c4ad..beb26c7fc094d5cf1952dec0c102fe02ff749cc9 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss
+++ b/src/components/EcogestureSelection/EcogestureSelectionRestart/ecogestureSelectionRestart.scss
@@ -38,14 +38,7 @@
display: flex;
flex-direction: row;
justify-content: space-between;
+ gap: 1rem;
width: 100%;
- button.btn-secondary-negative {
- padding: 0.75rem 0.5rem;
- margin: 0 0.25rem;
- }
- button.btn-highlight {
- padding: 0.75rem 0.5rem;
- margin: 0 0.5rem;
- }
}
}
diff --git a/src/components/Exploration/ExplorationError.tsx b/src/components/Exploration/ExplorationError.tsx
index 64702698d0f084c5ca80cc343423d7c7bf800726..4c75d0da78d8f1ffc524c2032fa7e6062e9b4607 100644
--- a/src/components/Exploration/ExplorationError.tsx
+++ b/src/components/Exploration/ExplorationError.tsx
@@ -17,10 +17,7 @@ const ExplorationError = () => {
<Button
aria-label={t('exploration.accessibility.button_go_back')}
onClick={() => navigate(-1)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_go_back')}
</Button>
diff --git a/src/components/Exploration/ExplorationFinished.tsx b/src/components/Exploration/ExplorationFinished.tsx
index e1251181a9918a1896d979231eacf183339d3594..eb883e7f945416fd0d4f2feeee85bc7c80933392 100644
--- a/src/components/Exploration/ExplorationFinished.tsx
+++ b/src/components/Exploration/ExplorationFinished.tsx
@@ -73,10 +73,7 @@ const ExplorationFinished = ({ userChallenge }: ExplorationFinishedProps) => {
<Button
aria-label={t('exploration.accessibility.button_confirm')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_confirm')}
</Button>
diff --git a/src/components/Exploration/ExplorationOngoing.spec.tsx b/src/components/Exploration/ExplorationOngoing.spec.tsx
index fd468838a054e0940ab340371fa5e0856548697f..6bc91fcb67a7a666f5eb2b0e117a75d4c17e83c5 100644
--- a/src/components/Exploration/ExplorationOngoing.spec.tsx
+++ b/src/components/Exploration/ExplorationOngoing.spec.tsx
@@ -28,6 +28,6 @@ describe('ExplorationOngoing component', () => {
expect(
wrapper.find('.exploration-explanation > div').last().text()
).toEqual(userChallengeData[1].exploration.complementary_description)
- expect(wrapper.find('.button-start').exists()).toBeTruthy()
+ expect(wrapper.find('.btnSecondary').exists()).toBeTruthy()
})
})
diff --git a/src/components/Exploration/ExplorationOngoing.tsx b/src/components/Exploration/ExplorationOngoing.tsx
index 9e817ec55e630e706c6aa3d69092b2dddc5061d5..380a389a114df1e89b947313fb8fc2db7b1207c5 100644
--- a/src/components/Exploration/ExplorationOngoing.tsx
+++ b/src/components/Exploration/ExplorationOngoing.tsx
@@ -63,20 +63,14 @@ const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
<Button
aria-label={t('exploration.accessibility.button_already_done')}
onClick={validExploration}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_already_done')}
</Button>
<Button
aria-label={t('exploration.accessibility.button_already_done')}
onClick={() => navigate(-1)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('exploration.button_come_back')}
</Button>
@@ -86,18 +80,13 @@ const ExplorationOngoing = ({ userChallenge }: ExplorationOngoingProps) => {
case UserExplorationType.ECOGESTURE:
case UserExplorationType.CONSUMPTION:
return (
- <div className="button-start">
- <Button
- aria-label={t('exploration.accessibility.button_start')}
- onClick={startExploration}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('exploration.button_start')}
- </Button>
- </div>
+ <Button
+ aria-label={t('exploration.accessibility.button_start')}
+ onClick={startExploration}
+ className="btnSecondary"
+ >
+ {t('exploration.button_start')}
+ </Button>
)
}
}
diff --git a/src/components/Exploration/explorationFinished.scss b/src/components/Exploration/explorationFinished.scss
index 17fed8e73a2f30b6179471b75a27311b12783e9a..28df8080a88d3e1f89791b32c37f2971cccb5712 100644
--- a/src/components/Exploration/explorationFinished.scss
+++ b/src/components/Exploration/explorationFinished.scss
@@ -29,10 +29,7 @@
width: auto;
}
}
- button.btn-secondary-negative {
- border-color: $grey-bright;
- margin-top: 1rem;
- }
+
.exploration-icon {
margin-left: 0.5rem;
}
@@ -43,4 +40,8 @@
.exploration-earn {
margin: 2rem 0 1rem;
}
+
+ button {
+ margin-top: 1rem;
+ }
}
diff --git a/src/components/Exploration/explorationOngoing.scss b/src/components/Exploration/explorationOngoing.scss
index 69589be0633223c28c43bf9ba002f7af234e1c0c..6bf5a8d51fce698ffaea8753a1cb6531002beb14 100644
--- a/src/components/Exploration/explorationOngoing.scss
+++ b/src/components/Exploration/explorationOngoing.scss
@@ -34,10 +34,7 @@
max-width: 45%;
padding: 0.5rem 1rem 2rem;
}
- .btn-start {
- margin-top: auto;
- border-color: $grey-bright;
- }
+
.exploration-icon-stars {
margin-top: -4rem;
}
@@ -54,13 +51,7 @@
margin-bottom: 1rem;
}
}
- .button-start {
- margin-top: 0;
- width: 100%;
- button.btn-secondary-negative {
- margin: 0;
- }
- }
+
.stars {
margin-top: 1rem;
svg {
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 8c7520ace692c3c63def7c746685546311306ebd..4f56e7c4e43c63f3661242739fadc4639a465528 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -51,7 +51,7 @@ describe('FeedbackModal component', () => {
<FeedbackModal />
</Provider>
)
- wrapper.find('.btn-secondary-positive').first().simulate('click')
+ wrapper.find('.btnSecondary').first().simulate('click')
expect(mockAppDispatch).toHaveBeenCalledTimes(1)
})
@@ -62,7 +62,7 @@ describe('FeedbackModal component', () => {
<FeedbackModal />
</Provider>
)
- wrapper.find('.btn-highlight').first().simulate('click')
+ wrapper.find('.btnPrimary').first().simulate('click')
expect(window.open).toHaveBeenCalledTimes(1)
expect(global.open).toHaveBeenCalledWith(`${__SAU_LINK__}?version=0.0.0`)
})
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 41ce4648465da72e184fa3f3836d57f24a925fb0..c849c35f03e5894b5b33276b2374a18b97b603a9 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -61,20 +61,14 @@ const FeedbackModal = () => {
<Button
aria-label={t('feedback.later')}
onClick={closeModal}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-bold',
- }}
+ className="btnSecondary"
>
{t('feedback.later')}
</Button>
<Button
aria-label={t('feedback.lets_go')}
onClick={goToSAU}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('feedback.lets_go')}
</Button>
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index d9288b66bd3795c0b1e3f168684e968353440b6c..988d984a7922e0dd5da5e7447e105ae15c749738 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -473,12 +473,12 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<button
aria-label="feedback.later"
- class="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
feedback.later
</span>
@@ -488,12 +488,12 @@ exports[`FeedbackModal component should render the component 1`] = `
</button>
<button
aria-label="feedback.lets_go"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
feedback.lets_go
</span>
@@ -894,16 +894,12 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="feedback.later"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-positive",
- }
- }
+ className="btnSecondary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="feedback.later"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -920,13 +916,13 @@ exports[`FeedbackModal component should render the component 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-positive",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -941,7 +937,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="feedback.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
@@ -951,7 +947,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="feedback.later"
- className="MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -968,7 +964,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<button
aria-label="feedback.later"
- className="MuiButtonBase-root MuiButton-root btn-secondary-positive MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -986,7 +982,7 @@ exports[`FeedbackModal component should render the component 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
feedback.later
</span>
@@ -1025,16 +1021,12 @@ exports[`FeedbackModal component should render the component 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="feedback.lets_go"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="feedback.lets_go"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1051,13 +1043,13 @@ exports[`FeedbackModal component should render the component 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1072,7 +1064,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="feedback.lets_go"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1082,7 +1074,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="feedback.lets_go"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1099,7 +1091,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<button
aria-label="feedback.lets_go"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -1117,7 +1109,7 @@ exports[`FeedbackModal component should render the component 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
feedback.lets_go
</span>
diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss
index 379ceff5f9448aa00c1b24d713b442c550ff181e..7ac1fee78f3a5b310336c2f563fa58925f7e97ae 100644
--- a/src/components/Feedback/feedbackModal.scss
+++ b/src/components/Feedback/feedbackModal.scss
@@ -26,7 +26,7 @@
display: flex;
justify-content: center;
margin-top: 1rem;
- gap: 16px;
+ gap: 1rem;
button {
margin-top: 0;
max-width: 150px;
diff --git a/src/components/FluidChart/FluidChart.tsx b/src/components/FluidChart/FluidChart.tsx
index 537ee6ee30ab6482e148e41fda8c36023f474fca..5f6ef62010de8307d6d036165e0695149c821167 100644
--- a/src/components/FluidChart/FluidChart.tsx
+++ b/src/components/FluidChart/FluidChart.tsx
@@ -149,13 +149,7 @@ const FluidChart = ({ fluidType, setActive }: FluidChartProps) => {
})}
</span>
<p>{t('auth.warningOfflineData')}</p>
- <Button
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- onClick={toggleModalConnection}
- >
+ <Button className="btnSecondary" onClick={toggleModalConnection}>
{t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
</Button>
</div>
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index d57884a7020e4f3c0be391462ab45de4bf924659..a225a87f6a8f735dd4458e0e794bf64679e5258a 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -23,13 +23,7 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
)
const dateChartService = new DateChartService()
const client = useClient()
- const timeStepElecArray: TimeStep[] = [
- TimeStep.HALF_AN_HOUR,
- TimeStep.WEEK,
- TimeStep.DAY,
- TimeStep.MONTH,
- TimeStep.YEAR,
- ]
+
const timeStepMultiArray: TimeStep[] = [
TimeStep.WEEK,
TimeStep.DAY,
@@ -38,7 +32,7 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
]
const timeStepArray: TimeStep[] =
fluidType === FluidType.ELECTRICITY
- ? [...timeStepElecArray]
+ ? [TimeStep.HALF_AN_HOUR, ...timeStepMultiArray]
: [...timeStepMultiArray]
const handleToday = () => {
@@ -74,9 +68,10 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
<Button
onClick={handleToday}
classes={{
- root: 'btn-today',
+ root: 'btnSecondary',
label: 'text-13-normal',
}}
+ size="large"
>
{t('timestep.today')}
</Button>
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index 25dcf210dadc587ea1360ffed18ac5c860b19236..1fe111a22ede1a6c3542a89879b64f9c2ecca888 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -23,10 +23,11 @@ exports[`TimeStepSelector component should render component properly with 4 time
classes={
Object {
"label": "text-13-normal",
- "root": "btn-today",
+ "root": "btnSecondary",
}
}
onClick={[Function]}
+ size="large"
>
<ForwardRef(Button)
classes={
@@ -51,7 +52,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-today",
+ "root": "MuiButton-root btnSecondary",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -63,9 +64,10 @@ exports[`TimeStepSelector component should render component properly with 4 time
}
}
onClick={[Function]}
+ size="large"
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-today MuiButton-text"
+ className="MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
component="button"
disabled={false}
focusRipple={true}
@@ -74,7 +76,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-today MuiButton-text"
+ className="MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
classes={
Object {
"disabled": "Mui-disabled",
@@ -90,7 +92,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-today MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root btnSecondary MuiButton-text MuiButton-textSizeLarge MuiButton-sizeLarge"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index b041802de637920000fea84f9275c41134e18341..aa2ef7163fbe4618249f5071faf6b16b25200dec 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -10,13 +10,7 @@
margin: auto;
max-width: 45.75rem;
height: 36px;
- .btn-today {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $soft-grey,
- transparent
- );
+ .btnSecondary {
max-width: 90px;
border-radius: 4px;
margin-top: 0;
diff --git a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
index 360ad1a8d9c8118bc209a58774d20c04ef3c4d98..705650d96257952fbe9bdc17083621fc2bd41aed 100644
--- a/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
+++ b/src/components/Konnector/ConnectionNotFound/ConnectionNotFound.tsx
@@ -20,10 +20,7 @@ const ConnectionNotFound = ({ konnectorSlug }: { konnectorSlug: string }) => {
<Button
aria-label={t('konnector_form.accessibility.button_install')}
onClick={openKonnectorURL}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('konnector_form.button_install')}
</Button>
diff --git a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
index 28084da1b97ad11cb18382ecc6c3710e8ca2b099..fcb5b55986162a92315f86cc0e6968ec4292b840 100644
--- a/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
+++ b/src/components/Konnector/ConnectionNotFound/__snapshots__/ConnectionNotFound.spec.tsx.snap
@@ -15,12 +15,7 @@ exports[`ConnectionNotFound component test should correctly render connection no
>
<WithStyles(ForwardRef(Button))
aria-label="konnector_form.accessibility.button_install"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
konnector_form.button_install
diff --git a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
index d94ae43114627d6ea6231cbd247b0ec658594289..68df71f6e59980537ba63f42bdaa26726ad1159f 100644
--- a/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
+++ b/src/components/Konnector/ConnectionResult/ConnectionResult.tsx
@@ -269,10 +269,7 @@ const ConnectionResult = ({
: deleteAccountsAndTriggers
}
disabled={updating || deleting}
- classes={{
- root: 'btn-secondary-positive',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{deleting
? t('konnector_form.loading')
@@ -287,10 +284,7 @@ const ConnectionResult = ({
: updateKonnector
}
disabled={updating || deleting}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{updating && <Loader color="black" />}
{!updating && (
diff --git a/src/components/Konnector/ConnectionResult/connectionResult.scss b/src/components/Konnector/ConnectionResult/connectionResult.scss
index 05a0a13650e640b6295f2b26d81cca837f743ada..412a5edd936fb53f21b819ac537e962ebc8763d8 100644
--- a/src/components/Konnector/ConnectionResult/connectionResult.scss
+++ b/src/components/Konnector/ConnectionResult/connectionResult.scss
@@ -57,12 +57,8 @@
}
.inline-buttons {
+ margin-top: 1rem;
display: flex;
flex-flow: row nowrap;
gap: 1rem;
- button.btn-secondary-positive {
- span:first-child {
- color: $white !important;
- }
- }
}
diff --git a/src/components/Konnector/KonnectorModalFooter.tsx b/src/components/Konnector/KonnectorModalFooter.tsx
index 9405b038e22fbac3605931574f127403719a90b5..64fbdb88ee1dcb59740fd8c92071280679adc496 100644
--- a/src/components/Konnector/KonnectorModalFooter.tsx
+++ b/src/components/Konnector/KonnectorModalFooter.tsx
@@ -50,11 +50,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{t('konnector_modal.button_validate')}</div>
</Button>
@@ -68,11 +64,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{t('konnector_modal.button_understood')}</div>
</Button>
@@ -84,11 +76,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{t('konnector_modal.button_try_again')}</div>
</Button>
@@ -99,11 +87,7 @@ const KonnectorModalFooter = ({
<Button
aria-label={t('konnector_modal.accessibility.button_close')}
onClick={() => handleCloseClick(state === SUCCESS_EVENT)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnSecondary"
>
<div>Plus tard</div>
</Button>
@@ -112,11 +96,7 @@ const KonnectorModalFooter = ({
onClick={
!isUpdating ? handleSGELoginRetry : handleResetSGEAccount
}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- style={{ height: '40px' }}
+ className="btnPrimary"
>
<div>{!isUpdating ? 'Vérifier les infos' : 'Jy vais'}</div>
</Button>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 076cf8227be13e23e36fd72d2faed22a744315df..a4e3b2d97bd8bd8c344dcbcbd410577c649e1519 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -308,13 +308,7 @@ const KonnectorViewerCard = ({
const getConnectionCard = useCallback(() => {
if (showOfflineData && !account) {
return (
- <Button
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- onClick={toggleModalConnection}
- >
+ <Button className="btnPrimary" onClick={toggleModalConnection}>
{t(`auth.${getKonnectorSlug(fluidType)}.connect`)}
</Button>
)
diff --git a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
index c54c118d73c5d35603892d5c7fd1eb25e25bbd49..2ac0af5a048f2f7e13d94a194e0e33f2bf6910e7 100644
--- a/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorModalFooter.spec.tsx.snap
@@ -23,21 +23,12 @@ exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="konnector_modal.accessibility.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
>
<ForwardRef(Button)
aria-label="konnector_modal.accessibility.button_close"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -54,13 +45,13 @@ exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -72,30 +63,20 @@ exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
}
}
onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="konnector_modal.accessibility.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
type="button"
>
<ForwardRef(ButtonBase)
aria-label="konnector_modal.accessibility.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -108,16 +89,11 @@ exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
type="button"
>
<button
aria-label="konnector_modal.accessibility.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -131,16 +107,11 @@ exports[`KonnectorModalFooter component should be rendered correctly 1`] = `
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
- style={
- Object {
- "height": "40px",
- }
- }
tabIndex={0}
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
<div>
konnector_modal.button_validate
diff --git a/src/components/Konnector/konnectorModal.scss b/src/components/Konnector/konnectorModal.scss
index e650b7c1eb45b084e5830f4cb7ec640617110f83..1c27774962d8e9e7537666e13136f84ba5fc309b 100644
--- a/src/components/Konnector/konnectorModal.scss
+++ b/src/components/Konnector/konnectorModal.scss
@@ -104,6 +104,10 @@
}
}
}
+
+ button {
+ margin-top: 1rem;
+ }
}
}
diff --git a/src/components/Options/ExportData/ExportData.tsx b/src/components/Options/ExportData/ExportData.tsx
index b0d620cf7c894674cd20ed3006bc1073d9f534f3..9f2e2580fe49eef75090f736db154db246685b5e 100644
--- a/src/components/Options/ExportData/ExportData.tsx
+++ b/src/components/Options/ExportData/ExportData.tsx
@@ -6,7 +6,6 @@ import {
} from '@material-ui/core'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
import exportIcon from 'assets/icons/ico/export.svg'
-import classNames from 'classnames'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -73,14 +72,10 @@ const ExportData = () => {
const fluidCheckbox = () =>
exportableFluids.map((fluidType, key) => (
- <label
- key={key}
- className={classNames('checkbox', {
- ['answer-checked']: answer.includes(fluidType),
- })}
- >
+ <label key={key}>
<input
type="checkbox"
+ className="inputCheckbox"
value={fluidType}
name={t(`FLUID.${FluidType[fluidType]}.LABEL`)}
onChange={() => handleChange(fluidType)}
@@ -129,28 +124,18 @@ const ExportData = () => {
root: 'expansion-panel-details',
}}
>
- <div className="text-15-normal content intro">
- {t('export.text1')}
- </div>
- <div className="text-16-bold content">
- {t('export.fluid_select')}
- </div>
+ <div className="text-15-normal grey">{t('export.text1')}</div>
+ <div className="text-16-bold">{t('export.fluid_select')}</div>
{exportableFluids.length === 0 ? (
- <div className="text-15-normal content intro">
- {t('export.no_data')}
- </div>
+ <div className="text-15-normal grey">{t('export.no_data')}</div>
) : (
<>
{fluidCheckbox()}
<Button
aria-label={t('unsubscribe.button_accessibility')}
onClick={() => setIsExportStartModal(true)}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- type="submit"
+ className="btnSecondary"
disabled={answer.length === 0}
>
{t('export.button_download')}
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 70ad61389e74a45d53df715e76902c98197a563e..120e9a3cd49c7485a3095f5bb34ede049fedcc5c 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportDoneModal.spec.tsx.snap
@@ -466,23 +466,21 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
</svg>
</div>
<div
- class="text-16-bold text text1"
+ class="text-16-bold subtitle"
>
export.modal_done.text1
</div>
- <div
- class="text-16-normal text"
- >
+ <div>
export.modal_done.text2
</div>
<button
aria-label="export.modal_done.button_close"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
- type="submit"
+ type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
export.modal_done.button_close
</span>
@@ -867,28 +865,21 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
</Icon>
</div>
<div
- className="text-16-bold text text1"
+ className="text-16-bold subtitle"
>
export.modal_done.text1
</div>
- <div
- className="text-16-normal text"
- >
+ <div>
export.modal_done.text2
</div>
<WithStyles(ForwardRef(Button))
aria-label="export.modal_done.button_close"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
- type="submit"
>
<ForwardRef(Button)
aria-label="export.modal_done.button_close"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -905,13 +896,13 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -923,21 +914,20 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
}
}
onClick={[MockFunction]}
- type="submit"
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="export.modal_done.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<ForwardRef(ButtonBase)
aria-label="export.modal_done.button_close"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -950,11 +940,11 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<button
aria-label="export.modal_done.button_close"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -969,10 +959,10 @@ exports[`exportDoneModal component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
- type="submit"
+ type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
export.modal_done.button_close
</span>
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 75eccb7dc838b92cb8613f13aca93de306ceaf9e..080bfeabf8169fd072b01da20fd9dff9655e2426 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportLoadingModal.spec.tsx.snap
@@ -484,23 +484,21 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
</div>
</div>
<div
- class="text-16-bold text text1"
+ class="text-16-bold subtitle"
>
export.modal_loading.text1
</div>
- <div
- class="text-16-normal text"
- >
+ <div>
export.modal_loading.text2
</div>
<button
aria-label="export.modal_loading.button_cancel"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
- type="submit"
+ type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
export.modal_loading.button_cancel
</span>
@@ -886,28 +884,21 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
</Loader>
</div>
<div
- className="text-16-bold text text1"
+ className="text-16-bold subtitle"
>
export.modal_loading.text1
</div>
- <div
- className="text-16-normal text"
- >
+ <div>
export.modal_loading.text2
</div>
<WithStyles(ForwardRef(Button))
aria-label="export.modal_loading.button_cancel"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
- type="submit"
>
<ForwardRef(Button)
aria-label="export.modal_loading.button_cancel"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -924,13 +915,13 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -942,21 +933,20 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
}
}
onClick={[MockFunction]}
- type="submit"
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="export.modal_loading.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<ForwardRef(ButtonBase)
aria-label="export.modal_loading.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -969,11 +959,11 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<button
aria-label="export.modal_loading.button_cancel"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -988,10 +978,10 @@ exports[`ExportLoadingModal component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
- type="submit"
+ type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
export.modal_loading.button_cancel
</span>
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 543ec790c3bae74ee027b6467aec960754a79ed3..c4525d1731c3775f66eedf60d1a2aa0e491f36c4 100644
--- a/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
+++ b/src/components/Options/ExportData/Modals/__snapshots__/exportStartModal.spec.tsx.snap
@@ -466,13 +466,11 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
</svg>
</div>
<div
- class="text-16-bold text text1"
+ class="text-16-bold subtitle"
>
export.modal_start.text1
</div>
- <div
- class="text-16-normal text"
- >
+ <div>
export.modal_start.text2
<br />
export.modal_start.text3
@@ -482,12 +480,12 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
>
<button
aria-label="export.modal_start.button_cancel"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
tabindex="0"
- type="submit"
+ type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
export.modal_start.button_cancel
</span>
@@ -497,12 +495,12 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
</button>
<button
aria-label="export.button_download"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
- type="submit"
+ type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
export.button_download
</span>
@@ -888,13 +886,11 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
</Icon>
</div>
<div
- className="text-16-bold text text1"
+ className="text-16-bold subtitle"
>
export.modal_start.text1
</div>
- <div
- className="text-16-normal text"
- >
+ <div>
export.modal_start.text2
<br />
export.modal_start.text3
@@ -904,17 +900,12 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="export.modal_start.button_cancel"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
+ className="btnSecondary"
onClick={[MockFunction]}
- type="submit"
>
<ForwardRef(Button)
aria-label="export.modal_start.button_cancel"
+ className="btnSecondary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -931,13 +922,13 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -949,21 +940,20 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
}
}
onClick={[MockFunction]}
- type="submit"
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="export.modal_start.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<ForwardRef(ButtonBase)
aria-label="export.modal_start.button_cancel"
- className="MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButton-root MuiButton-text btnSecondary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -976,11 +966,11 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<button
aria-label="export.modal_start.button_cancel"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnSecondary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -995,10 +985,10 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
- type="submit"
+ type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
export.modal_start.button_cancel
</span>
@@ -1037,17 +1027,12 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
</WithStyles(ForwardRef(Button))>
<WithStyles(ForwardRef(Button))
aria-label="export.button_download"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
- type="submit"
>
<ForwardRef(Button)
aria-label="export.button_download"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1064,13 +1049,13 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1082,21 +1067,20 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
}
}
onClick={[MockFunction]}
- type="submit"
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="export.button_download"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<ForwardRef(ButtonBase)
aria-label="export.button_download"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1109,11 +1093,11 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[MockFunction]}
- type="submit"
+ type="button"
>
<button
aria-label="export.button_download"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1128,10 +1112,10 @@ exports[`exportStartModal component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
- type="submit"
+ type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
export.button_download
</span>
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.scss b/src/components/Options/ExportData/Modals/exportDoneModal.scss
index 10ed1cd2819fc8d64d6c5a3c661a306feace376e..02cac92d26e1edd9cac6f3a23272b2b00e1f56c4 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.scss
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.scss
@@ -4,19 +4,16 @@
.content {
text-align: center;
padding-top: 2rem;
- .text {
- margin: 2rem 0 0;
- color: $grey-bright;
- }
- .text1 {
- margin-bottom: 2rem;
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .subtitle {
color: $gold-shadow;
}
.error1 {
color: $red-primary;
}
- button {
- height: 40px;
- }
}
}
diff --git a/src/components/Options/ExportData/Modals/exportDoneModal.tsx b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
index 4bdfd90163d55d8834243bb206da7c095d803ed8..c8cdaae1e40a4bec3d209d4c2f977ef9ca1c4437 100644
--- a/src/components/Options/ExportData/Modals/exportDoneModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportDoneModal.tsx
@@ -52,20 +52,18 @@ const ExportDoneModal = ({
</div>
{!error && (
<>
- <div className="text-16-bold text text1">
+ <div className="text-16-bold subtitle">
{t('export.modal_done.text1')}
</div>
- <div className="text-16-normal text">
- {t('export.modal_done.text2')}
- </div>
+ <div>{t('export.modal_done.text2')}</div>
</>
)}
{error && (
<>
- <div className="text-20-bold text error1">
+ <div className="text-20-bold error1">
{t('export.modal_done.error1')}
</div>
- <div className="text-16-bold text">
+ <div className="text-16-bold">
{t('export.modal_done.error2')}
</div>
</>
@@ -74,11 +72,7 @@ const ExportDoneModal = ({
<Button
aria-label={t('export.modal_done.button_close')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnPrimary"
>
{error
? t('export.modal_done.button_close_error')
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.scss b/src/components/Options/ExportData/Modals/exportLoadingModal.scss
index 69f583deeb76530f18b82cb2fe4816e2394947ab..bc2d3ef17251a3e4b47aa725cb391a7ca9c4a07e 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.scss
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.scss
@@ -4,11 +4,13 @@
.content {
text-align: center;
padding-top: 2rem;
- .text {
- color: $grey-bright;
- }
- .text1 {
- margin: 2rem 0;
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .subtitle {
+ margin: 1rem 0;
color: $gold-shadow;
}
button {
diff --git a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
index edf47eb38f806d115074d1dac52c5dbbbee382cf..d10d452a39858bddbd640698bc5a6019d06b0b79 100644
--- a/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportLoadingModal.tsx
@@ -205,20 +205,14 @@ const ExportLoadingModal = ({
<div className="icon-main">
<Loader color="gold" />
</div>
- <div className="text-16-bold text text1">
+ <div className="text-16-bold subtitle">
{t('export.modal_loading.text1')}
</div>
- <div className="text-16-normal text">
- {t('export.modal_loading.text2')}
- </div>
+ <div>{t('export.modal_loading.text2')}</div>
<Button
aria-label={t('export.modal_loading.button_cancel')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnSecondary"
>
{t('export.modal_loading.button_cancel')}
</Button>
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.scss b/src/components/Options/ExportData/Modals/exportStartModal.scss
index 738f1c53cf9ad27db5f221870ae6825f6ef38850..803bd85dfbbddc67416228248fc6cc90f94bf3e1 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.scss
+++ b/src/components/Options/ExportData/Modals/exportStartModal.scss
@@ -4,21 +4,17 @@
.content {
text-align: center;
padding-top: 2rem;
- .text {
- margin: 2rem 0 0;
- color: $grey-bright;
- }
- .text1 {
+ color: $grey-bright;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ .subtitle {
color: $gold-shadow;
}
.buttons {
- margin-top: 2rem;
display: flex;
gap: 1rem;
- button {
- margin: 0;
- height: 40px;
- }
}
}
}
diff --git a/src/components/Options/ExportData/Modals/exportStartModal.tsx b/src/components/Options/ExportData/Modals/exportStartModal.tsx
index 1fbebcd06f7aa76eb1f9d1a82ab12415aa8b31f7..9d7837eb4ccc712d26b5cd365b2d37b6e66d2fcd 100644
--- a/src/components/Options/ExportData/Modals/exportStartModal.tsx
+++ b/src/components/Options/ExportData/Modals/exportStartModal.tsx
@@ -47,10 +47,10 @@ const ExportStartModal = ({
<div className="icon-main">
<Icon icon={download} size={48} />
</div>
- <div className="text-16-bold text text1">
+ <div className="text-16-bold subtitle">
{t('export.modal_start.text1')}
</div>
- <div className="text-16-normal text">
+ <div>
{t('export.modal_start.text2')}
<br />
{t('export.modal_start.text3')}
@@ -59,22 +59,14 @@ const ExportStartModal = ({
<Button
aria-label={t('export.modal_start.button_cancel')}
onClick={handleCloseClick}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnSecondary"
>
{t('export.modal_start.button_cancel')}
</Button>
<Button
aria-label={t('export.button_download')}
onClick={handleDownloadClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- type="submit"
+ className="btnPrimary"
>
{t('export.button_download')}
</Button>
diff --git a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
index 4e44f56f7bad8f699c0c34792f19317cce030178..0a7cb2474e561ef2135937ce0328ce957d140c85 100644
--- a/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
+++ b/src/components/Options/ExportData/__snapshots__/ExportData.spec.tsx.snap
@@ -403,17 +403,17 @@ exports[`exportOptions component should be rendered correctly 1`] = `
className="MuiAccordionDetails-root expansion-panel-details"
>
<div
- className="text-15-normal content intro"
+ className="text-15-normal grey"
>
export.text1
</div>
<div
- className="text-16-bold content"
+ className="text-16-bold"
>
export.fluid_select
</div>
<div
- className="text-15-normal content intro"
+ className="text-15-normal grey"
>
export.no_data
</div>
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index fec065e3b8beda0a6d03a05bf5441490dbe5f79c..3b6852c49d53ced72d8498bba3d73558e04f0d3f 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -1,9 +1,12 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/mixins';
+
div.expansion-panel-root,
div.expansion-panel-root.Mui-expanded:last-child {
margin: 0.2rem 0;
}
+
.export-option-root {
display: flex;
flex-direction: column;
@@ -11,63 +14,41 @@ div.expansion-panel-root.Mui-expanded:last-child {
justify-content: center;
margin-top: 0.5rem;
padding: 0 1.5rem;
-}
-.export-option-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .MuiAccordionSummary-content {
- margin: 0;
- }
- .MuiIconButton-edgeEnd {
- margin: 0;
- }
- .accordion-title {
- color: $white;
- }
- .expansion-panel-details {
- flex-direction: column;
- .content {
- padding-bottom: 16px;
- }
- .intro {
- color: $soft-grey;
- }
- .btn-secondary-negative {
- border-color: $grey-bright !important;
- height: 40px;
+
+ .export-option-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
}
- .checkbox {
+ .MuiAccordionSummary-content {
margin: 0;
- input {
- margin: 0.5rem;
- border: 1px solid $soft-grey;
- border-radius: 2px;
- }
- }
- .answer-checked input:before,
- .answer-checked input:after {
- background: black;
}
- .answer-checked input {
- background: $gold-shadow;
- border: 2px solid $gold-shadow;
+ .MuiIconButton-edgeEnd {
+ margin: 0;
}
- .answer-checked input:before {
- height: 13px;
- left: 11px;
- top: 3px;
+ .accordion-title {
+ color: $white;
}
- .answer-checked input:after {
- height: 9px;
- left: 4px;
+ .expansion-panel-summary {
+ padding: 0 0.25rem 0 1rem;
+ .expansion-panel-content {
+ gap: 1rem;
+ }
}
- }
- div.expansion-panel-summary {
- padding: 0 0.25rem 0 1rem;
- .expansion-panel-content {
+ .expansion-panel-details {
+ flex-direction: column;
gap: 1rem;
+
+ .grey {
+ color: $soft-grey;
+ }
+
+ label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ cursor: pointer;
+ }
}
}
}
diff --git a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
index 1648f83c82ee3642a9cb3b8687d5fa15d9b35538..4610845f091e16b2fe6621e2168f5bf141cd9cc4 100644
--- a/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
@@ -212,20 +212,15 @@ const ProfileTypeOptions = () => {
)}
</div>
</div>
- <div className="inline-buttons">
- <Button
- aria-label={t(
- 'profile_type.accessibility.button_update_profile'
- )}
- onClick={goToForm}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
- >
- {t('profile_type.button_update_profile')}
- </Button>
- </div>
+ <Button
+ aria-label={t(
+ 'profile_type.accessibility.button_update_profile'
+ )}
+ onClick={goToForm}
+ className="btnSecondary"
+ >
+ {t('profile_type.button_update_profile')}
+ </Button>
</div>
</AccordionDetails>
</Accordion>
diff --git a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
index 8dfc6023eff956b94d903867850bda2fc1f7669b..bf2af832185968d3d81c9d6ceec7b75458b39a90 100644
--- a/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
+++ b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
@@ -14,10 +14,6 @@
height: 40px;
margin: 0;
}
- .btn-secondary-negative {
- border-color: $grey-bright;
- height: 40px;
- }
}
.value {
color: $white;
diff --git a/src/components/Options/ReportOptions/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
index 463651514731915010ae22cc9d728f73cbabc5b9..7a2578a8c44f9da552fb06b88a034a8969727ef9 100644
--- a/src/components/Options/ReportOptions/ReportOptions.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.tsx
@@ -32,6 +32,11 @@ const ReportOptions = () => {
[dispatch]
)
+ const isWaterConnected =
+ fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
+ fluidStatus[FluidType.WATER].status !== FluidState.KONNECTOR_NOT_FOUND &&
+ fluidStatus[FluidType.WATER].status !== FluidState.ERROR_LOGIN_FAILED
+
const setWaterLimit = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value !== null && parseInt(e.target.value) > 0) {
dispatch(
@@ -86,6 +91,7 @@ const ReportOptions = () => {
profile.waterDailyConsumptionLimit,
updateProfileAlert,
])
+
return (
<div className="report-option-root">
<div className="report-option-content">
@@ -103,10 +109,9 @@ const ReportOptions = () => {
onClick={() => toggleAnalysisNotification()}
variant="contained"
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
- type="submit"
>
{profile.sendAnalysisNotification
? t('profile.report.deactivate')
@@ -115,15 +120,12 @@ const ReportOptions = () => {
</div>
</div>
{/* Consumption Alert activation */}
- {fluidStatus[FluidType.WATER].status !== FluidState.NOT_CONNECTED &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.KONNECTOR_NOT_FOUND &&
- fluidStatus[FluidType.WATER].status !==
- FluidState.ERROR_LOGIN_FAILED && (
- <>
- <div className="head text-16-normal-uppercase">
- {t('profile.report.title_alert')}
- </div>
+ {isWaterConnected && (
+ <>
+ <div className="head text-16-normal-uppercase">
+ {t('profile.report.title_alert')}
+ </div>
+ <div className="waterAlert">
<div className="switch-container-alert">
<StyledSwitch
checked={profile.sendConsumptionAlert}
@@ -134,44 +136,43 @@ const ReportOptions = () => {
),
}}
/>
- <span className="switch-label text-16-normal">
+ <span className="text-16-normal">
{t('profile.report.switch_label_alert')}
</span>
</div>
- </>
- )}
- {profile.sendConsumptionAlert && (
- <div className="alert-inputs-display">
- <div className="alert-input-row">
- <div className="head text-16-normal">
- {t('profile.report.input_label_alert')}
- </div>
- <div className="switch-container-alert">
- <input
- className="input-style"
- type="number"
- defaultValue={
- profile.waterDailyConsumptionLimit === 0
- ? ''
- : profile.waterDailyConsumptionLimit
- }
- onBlur={setWaterLimit}
- aria-label={t(
- 'profile.accessibility.input_water_alert_report'
+ {profile.sendConsumptionAlert && (
+ <>
+ <div className="text-16-normal">
+ {t('profile.report.input_label_alert')}
+ </div>
+ <div className="switch-container-alert">
+ <input
+ className="inputNumber text-18"
+ type="number"
+ defaultValue={
+ profile.waterDailyConsumptionLimit === 0
+ ? ''
+ : profile.waterDailyConsumptionLimit
+ }
+ onBlur={setWaterLimit}
+ aria-label={t(
+ 'profile.accessibility.input_water_alert_report'
+ )}
+ inputMode="numeric"
+ />
+ <span className="switch-label text-16-normal">L</span>
+ </div>
+ {maxDayData && (
+ <div className="alert-input-subtext text-14">
+ {t('profile.report.input_label_subtext_alert')}
+ {Math.round(maxDayData.value)}
+ {' L'}
+ </div>
)}
- inputMode="numeric"
- />
- <span className="switch-label text-16-normal">L</span>
- </div>
+ </>
+ )}
</div>
- {maxDayData && (
- <div className="alert-input-subtext">
- {t('profile.report.input_label_subtext_alert')}
- {Math.round(maxDayData.value)}
- {' L'}
- </div>
- )}
- </div>
+ </>
)}
</div>
</div>
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index b5ca2f087c7c3a71f41695aab6fd749acf9bfc38..e6da9654a6abbfea2078b034b6eb2c741d893118 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -35,41 +35,21 @@
}
}
- .switch-container-alert {
+ .waterAlert {
display: flex;
- align-items: center;
+ flex-direction: column;
+ gap: 1rem;
color: $grey-bright;
- .switch-label {
- margin-left: 0.2rem;
- padding-right: 0.8rem;
+
+ .switch-container-alert {
+ color: $grey-bright;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
}
- .input-style {
- width: 60px;
- text-align: center;
- margin: 0.5rem;
- background: $dark-light-2;
- color: $white;
- border: 1px solid $soft-grey;
- max-width: 5rem;
- height: 2rem;
- &:focus {
- outline: $gold-shadow 1px;
- }
- &:disabled {
- -webkit-text-fill-color: $white;
- opacity: 1;
- }
+
+ .alert-input-subtext {
+ color: $soft-grey;
}
}
- .alert-inputs-display {
- padding: 0 1rem;
- }
- .alert-input-row {
- display: flex;
- justify-content: space-between;
- }
- .alert-input-subtext {
- color: $soft-grey;
- font-size: 14px;
- }
}
diff --git a/src/components/Options/Unsubscribe/UnSubscribeView.tsx b/src/components/Options/Unsubscribe/UnSubscribeView.tsx
index 8b5dd2240df556a125a4656c252635b5ea8349e3..f67dbdc7d0a92bff0faa7169dbefc07dfd120981 100644
--- a/src/components/Options/Unsubscribe/UnSubscribeView.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribeView.tsx
@@ -41,10 +41,9 @@ const UnSubscribeView = () => {
onClick={() => unSubscribe()}
variant="contained"
classes={{
- root: 'btn-highlight',
+ root: 'btnPrimary',
label: 'text-18-bold',
}}
- type="submit"
>
{t('unsubscribe.button_text')}
</Button>
diff --git a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
index 8518469701265ae8c94aa8ecf3ad6063eed6f985..1a68fd6dd9d04b5d28f887b333b87d11c2c83cba 100644
--- a/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
+++ b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribeView.spec.tsx.snap
@@ -75,11 +75,10 @@ exports[`UnSubscribe component should be rendered correctly 1`] = `
classes={
Object {
"label": "text-18-bold",
- "root": "btn-highlight",
+ "root": "btnPrimary",
}
}
onClick={[Function]}
- type="submit"
variant="contained"
>
<ForwardRef(Button)
@@ -106,7 +105,7 @@ exports[`UnSubscribe component should be rendered correctly 1`] = `
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root btnPrimary",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -118,22 +117,21 @@ exports[`UnSubscribe component should be rendered correctly 1`] = `
}
}
onClick={[Function]}
- type="submit"
variant="contained"
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="unsubscribe.button_accessibility"
- className="MuiButton-root btn-highlight MuiButton-contained"
+ className="MuiButton-root btnPrimary MuiButton-contained"
component="button"
disabled={false}
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- type="submit"
+ type="button"
>
<ForwardRef(ButtonBase)
aria-label="unsubscribe.button_accessibility"
- className="MuiButton-root btn-highlight MuiButton-contained"
+ className="MuiButton-root btnPrimary MuiButton-contained"
classes={
Object {
"disabled": "Mui-disabled",
@@ -146,11 +144,11 @@ exports[`UnSubscribe component should be rendered correctly 1`] = `
focusRipple={true}
focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- type="submit"
+ type="button"
>
<button
aria-label="unsubscribe.button_accessibility"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-contained"
+ className="MuiButtonBase-root MuiButton-root btnPrimary MuiButton-contained"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -165,7 +163,7 @@ exports[`UnSubscribe component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex={0}
- type="submit"
+ type="button"
>
<span
className="MuiButton-label text-18-bold"
diff --git a/src/components/Options/Unsubscribe/unSubscribeView.scss b/src/components/Options/Unsubscribe/unSubscribeView.scss
index 6d1d6c9e9c75b78cc2f013a0c5fc76cc3c29c2de..1efa15a6f93c3a3683cd52f45acf0c9321dfe44c 100644
--- a/src/components/Options/Unsubscribe/unSubscribeView.scss
+++ b/src/components/Options/Unsubscribe/unSubscribeView.scss
@@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
+ gap: 1rem;
max-width: 450px;
margin: auto;
padding: 2rem;
@@ -14,6 +14,5 @@
}
.question {
color: $white;
- margin-top: 1.5rem;
}
}
diff --git a/src/components/PartnerIssue/PartnerIssueModal.tsx b/src/components/PartnerIssue/PartnerIssueModal.tsx
index 8876a8083913d85df2d45e8e7eeb0b1ad087f32b..14549c0270cc6531bc3ad17783ccd3e39eeedb0a 100644
--- a/src/components/PartnerIssue/PartnerIssueModal.tsx
+++ b/src/components/PartnerIssue/PartnerIssueModal.tsx
@@ -72,7 +72,6 @@ const PartnerIssueModal = ({
),
}}
/>
- <br />
<div
dangerouslySetInnerHTML={{
__html: t(`consumption.partner_issue_modal.additional_text`),
@@ -80,10 +79,7 @@ const PartnerIssueModal = ({
/>
<Button
onClick={() => handleCloseClick(issuedFluid)}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('consumption.partner_issue_modal.ok')}
</Button>
diff --git a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
index afd0cdd3465ce6bc9272539e4f51558166690e5e..8a91886801ed3959ef4bd2633db908e02ae80465 100644
--- a/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
+++ b/src/components/PartnerIssue/__snapshots__/PartnerIssueModal.spec.tsx.snap
@@ -472,17 +472,16 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
>
consumption.partner_issue_modal.error_connect_elec
</div>
- <br />
<div>
consumption.partner_issue_modal.additional_text
</div>
<button
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
consumption.partner_issue_modal.ok
</span>
@@ -877,7 +876,6 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
}
}
/>
- <br />
<div
dangerouslySetInnerHTML={
Object {
@@ -886,15 +884,11 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
}
/>
<WithStyles(ForwardRef(Button))
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -911,13 +905,13 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -931,7 +925,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
onClick={[Function]}
>
<WithStyles(ForwardRef(ButtonBase))
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -940,7 +934,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
type="button"
>
<ForwardRef(ButtonBase)
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -956,7 +950,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
type="button"
>
<button
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -974,7 +968,7 @@ exports[`PartnerIssueModal component should render correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
consumption.partner_issue_modal.ok
</span>
diff --git a/src/components/PartnerIssue/partnerIssueModal.scss b/src/components/PartnerIssue/partnerIssueModal.scss
index 7ddf1e1b2ed045a8d36a1997fcb6f55dd16fe7c1..aae1fef26097f439d5f7c05b1599311bc5460a9c 100644
--- a/src/components/PartnerIssue/partnerIssueModal.scss
+++ b/src/components/PartnerIssue/partnerIssueModal.scss
@@ -5,13 +5,14 @@
padding: 1rem;
max-width: 20rem;
text-align: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
.warn-icon {
- margin: 1rem auto;
- display: block;
+ margin: 0 auto;
}
.partner-issue-title {
color: #ec9d41;
- margin: 1rem auto;
text-align: center;
}
.partner-issue-content {
@@ -30,10 +31,6 @@
}
}
}
-
- button.btn-highlight {
- padding: 0.65rem;
- }
}
.partner-issue-portal {
.modal-overlay {
diff --git a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
index dc982cffd85df9a6fcfeb3ee3b98e7f72b006afe..c7de430773e7f8036822003100eaa29b1b9ebe8f 100644
--- a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
@@ -125,18 +125,14 @@ const ProfileTypeFinished = ({ profileType }: { profileType: ProfileType }) => {
<div className="profile-type-finished-label text-28-normal-uppercase">
{t('profile_type.finished.title')}
</div>
- <div className="profile-type-finished-description text-18-normal">
+ <div>
<div>{t('profile_type.finished.label1')}</div>
<div>{t('profile_type.finished.label2')}</div>
</div>
<Button
aria-label={t('profile_type.accessibility.button_validate')}
onClick={handleClick}
- className="profile-type-finished-button"
- classes={{
- root: 'btn-primary-positive',
- label: 'text-16-normal',
- }}
+ className="btnPrimary"
>
{t('profile_type.finished.button_validate')}
</Button>
diff --git a/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss b/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
index 7e0d427a6bb9836df23a6d854719557266099055..fd71b6fb3103d3d3c582c09ef7a77f998342c782 100644
--- a/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
+++ b/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
@@ -11,19 +11,22 @@
width: 80%;
text-align: center;
padding: 1rem;
+
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+
+ svg {
+ margin: auto;
+ }
+
@media (min-width: $width-tablet) {
width: 50%;
}
@media (min-width: $width-large-desktop) {
width: 40%;
}
- button.profile-type-finished-button {
- margin-top: 2.875rem;
- }
}
.profile-type-finished-label {
color: $gold-shadow;
}
-.profile-type-finished-description {
- margin-top: 1.875rem;
-}
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index 7636440590b0c7d8872e1e74160b6a6db6447bca..b0c920043d4675b97d63dcd0ef2eb2d531e27fdb 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -57,10 +57,12 @@ const ProfileTypeFormNumber = ({
<label className="text">
<input
type="number"
+ className="inputNumber"
value={answer.toString()}
name={answerType.attribute}
onChange={e => setAnswer(e.target.value)}
autoFocus
+ style={{ marginRight: '0.5rem' }}
/>
m²
</label>
diff --git a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
index 32b9486bf2cdf3526ee87bccad5a9fe90681dc15..10c5ca18bc0dcebac352cca988340ea10846c788 100644
--- a/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumberSelection/ProfileTypeFormNumberSelection.tsx
@@ -72,32 +72,37 @@ const ProfileTypeFormNumberSelection = ({
`profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
)}
</div>
- {answer !== null ? (
+ {answer != null && (
<div className="number-container">
<Button
- className="btn-profile-number"
onClick={() => decrement()}
disabled={index < 1}
+ classes={{
+ root: 'btnIncrement',
+ label: 'text-36-normal',
+ }}
>
-
</Button>
- <label className="number">
- <input
- type="text"
- value={answer.toString()}
- name={answerType.attribute}
- disabled={true}
- />
- </label>
+ <input
+ type="number"
+ className="inputNumber"
+ value={answer.toString()}
+ name={answerType.attribute}
+ disabled={true}
+ />
<Button
- className="btn-profile-number"
onClick={() => increment()}
disabled={index >= answerType.choices.length - 1}
+ classes={{
+ root: 'btnIncrement',
+ label: 'text-36-normal',
+ }}
>
+
</Button>
</div>
- ) : null}
+ )}
</div>
<FormNavigation
step={step}
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index 8812beebb8a54ccfd5a1f6103e8208641769cf4e..49f36d4ec7d6cc9e8897c9ee2f3e759f7470045d 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -6,25 +6,8 @@
color: $white;
margin: 1rem 1rem 3.5rem;
max-width: 53rem;
- .text,
- .number {
+ .text {
font-size: 1.25rem;
- input {
- margin: 0.5rem;
- background: $dark-light-2;
- color: $white;
- border: 1px solid $gold-shadow;
- max-width: 5rem;
- height: 2.5rem;
- text-align: center;
- &:focus {
- outline: $gold-shadow 1px;
- }
- &:disabled {
- -webkit-text-fill-color: $white;
- opacity: 1;
- }
- }
}
.profile-question-label {
font-weight: bold;
@@ -68,10 +51,6 @@
border-radius: 50%;
background: $dark-background;
position: relative;
-
- // &:focus {
- // outline: none;
- // }
}
}
.checkbox {
@@ -124,24 +103,11 @@
}
.number-container {
display: flex;
- justify-content: left;
align-items: center;
- }
- .btn-profile-number {
- background: $grey-linear-gradient-background;
- background-color: transparent;
- border: none;
- border-radius: 2px;
- width: 2.5rem;
- height: 2.5rem;
- font-size: 2rem;
- color: $white;
- display: flex;
- align-items: center;
- justify-content: center;
- margin: 0.5rem;
- &:disabled {
- color: rgba($color: $white, $alpha: 0.5);
+ gap: 1rem;
+
+ input {
+ border-color: $gold-shadow;
}
}
.date-select {
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index 188ab4423bbac201cf5203883e34fc1492598800..0a07966b1977394dd46fd3530552a55babc9d6bf 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -5,8 +5,7 @@
flex: 1;
flex-direction: column;
justify-content: space-between;
- label,
- input {
+ label {
cursor: pointer;
}
}
diff --git a/src/components/Quiz/QuizBegin/QuizBegin.tsx b/src/components/Quiz/QuizBegin/QuizBegin.tsx
index 55b3b01a24b2c736ebcd493af72ef7512561318e..a6698e7879213511fb233f48970d71abfd6b9f32 100644
--- a/src/components/Quiz/QuizBegin/QuizBegin.tsx
+++ b/src/components/Quiz/QuizBegin/QuizBegin.tsx
@@ -42,10 +42,7 @@ const QuizBegin = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('duel.accessibility.button_start_quiz')}
onClick={launchQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('duel.button_start')}
</Button>
diff --git a/src/components/Quiz/QuizBegin/quizBegin.scss b/src/components/Quiz/QuizBegin/quizBegin.scss
index b0a54d51e535066ebacbb35f419a869865e46a7f..5eddf3f6483f1daec741f4e27e6148aef364085e 100644
--- a/src/components/Quiz/QuizBegin/quizBegin.scss
+++ b/src/components/Quiz/QuizBegin/quizBegin.scss
@@ -34,10 +34,6 @@
max-width: 40%;
padding: 0.5rem 1rem 2rem;
}
- .btn-secondary-negative {
- margin-top: auto;
- border-color: $grey-bright;
- }
.quiz-icon-stars {
margin-top: -4rem;
}
diff --git a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
index d1dc630d7c3d2a28ac67b3c0a4f1cf77d7b50b59..928940f0642c7398a5ddd3dbe4b0aa883c5ccd0a 100644
--- a/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal/QuizExplanationModal.tsx
@@ -69,10 +69,7 @@ const QuizExplanationModal = ({
<Button
aria-label={t('quiz.accessibility.button_go_next')}
onClick={goNext}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.next')}
</Button>
diff --git a/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss b/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss
index d38aa4e603716fd18fc4c824f133d875828af86e..db5c0c84aa30cef78eae7cf6ba389fc23fa7bc9d 100644
--- a/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss
+++ b/src/components/Quiz/QuizExplanationModal/quizExplanationModal.scss
@@ -24,10 +24,8 @@
margin-bottom: 0.5rem;
}
- button.btn-secondary-negative {
- width: auto;
- padding: 0.5rem 3rem;
- border-color: $grey-bright;
+ button {
+ margin-top: 1rem;
}
}
diff --git a/src/components/Quiz/QuizFinish/QuizFinish.tsx b/src/components/Quiz/QuizFinish/QuizFinish.tsx
index 7ffc1162e96772ce6c8703f7a46dc47256a8d2ef..187e552dbb0065f9ab9efeeb269c795208ffd210 100644
--- a/src/components/Quiz/QuizFinish/QuizFinish.tsx
+++ b/src/components/Quiz/QuizFinish/QuizFinish.tsx
@@ -60,10 +60,7 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('quiz.accessibility.button_end_quiz')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.button_end_quiz')}
</Button>
@@ -73,20 +70,14 @@ const QuizFinish = ({ userChallenge }: { userChallenge: UserChallenge }) => {
<Button
aria-label={t('quiz.accessibility.button_go_back')}
onClick={goBack}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.button_go_back')}
</Button>
<Button
aria-label={t('quiz.accessibility.button_try_again')}
onClick={retryQuiz}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary"
>
{t('quiz.button_try_again')}
</Button>
diff --git a/src/components/Quiz/QuizFinish/quizFinish.scss b/src/components/Quiz/QuizFinish/quizFinish.scss
index e438ae230ba447a8f7a9c428f5f08af869ba5884..2bc9892c4542c9c0de3840a386611e475403eeab 100644
--- a/src/components/Quiz/QuizFinish/quizFinish.scss
+++ b/src/components/Quiz/QuizFinish/quizFinish.scss
@@ -13,9 +13,6 @@
flex-direction: column;
align-items: center;
- button.btn-secondary-negative {
- border-color: $grey-bright;
- }
.button-start {
margin-top: 3rem;
display: flex;
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
index e96369c03653865e3f09eb445e3392c19267b0c3..74a8effc665cf8a43225ae16b407d246c21f12fc 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
@@ -116,10 +116,7 @@ const QuizQuestionContent = ({
aria-label={t('quiz.accessibility.button_validate')}
onClick={validateQuestion}
disabled={!userChoice}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary validate"
>
{t('quiz.button_validate')}
</Button>
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
index 7c5b860e950deeebbb365a6d46a5c41964ac2064..2d54a414b07fac9b945b90bb49346704cd5b3657 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.spec.tsx
@@ -86,7 +86,7 @@ describe('QuizCustomQuestionContent component', () => {
.simulate('change', { target: { value: answer } })
expect(wrapper.find(Button).exists()).toBeTruthy()
- wrapper.find('.btn-secondary-negative').forEach(node => {
+ wrapper.find('.btnSecondary').forEach(node => {
node.simulate('click')
})
expect(mockUpdateUserQuiz).toHaveBeenCalledWith(
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
index 88a3448503646cf14d0a58a97cf7b6925a5b8e8c..92e94e5df2676f65b5b376f3c09e84d1b9b5d00b 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
@@ -129,10 +129,7 @@ const QuizQuestionContentCustom = ({
aria-label={t('quiz.accessibility.button_validate')}
onClick={validateQuestion}
disabled={!userChoice}
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-16-normal',
- }}
+ className="btnSecondary validate"
>
{t('quiz.button_validate')}
</Button>
diff --git a/src/components/Quiz/QuizQuestion/quizQuestion.scss b/src/components/Quiz/QuizQuestion/quizQuestion.scss
index 72faed6cb7909fdd1762eb6d53f0cccdf68806ae..cbab0ba2fc91fcab6fc0c6f47d570947dfd17849 100644
--- a/src/components/Quiz/QuizQuestion/quizQuestion.scss
+++ b/src/components/Quiz/QuizQuestion/quizQuestion.scss
@@ -77,11 +77,12 @@
border-color: $blue-light;
}
}
- button.btn-secondary-negative {
+ button.validate {
+ margin-top: 1rem;
width: auto;
padding: 0.5rem 3rem;
- border-color: $grey-bright;
}
+
.index-question {
margin: 2rem 0 1rem;
}
diff --git a/src/components/ReleaseNotesModal/ReleaseNotesModal.scss b/src/components/ReleaseNotesModal/ReleaseNotesModal.scss
index f17f44f76eeb3adfffd53071990a0b848bae921c..a7cad43b9d3726ec25fb41980ae178b59e72237b 100644
--- a/src/components/ReleaseNotesModal/ReleaseNotesModal.scss
+++ b/src/components/ReleaseNotesModal/ReleaseNotesModal.scss
@@ -20,35 +20,6 @@
color: $gold-shadow;
margin-bottom: 2rem;
}
- .release-note-button {
- display: flex;
- justify-content: center;
- margin-top: 2rem;
- button {
- &.btn-highlight,
- &.btn-secondary-positive {
- width: 45%;
- margin-bottom: 0;
- }
- &.btn-secondary-positive {
- padding: 0.5rem 1rem;
- }
- &.btn-highlight {
- padding: 0.25rem 0.5rem;
- }
- }
- @media #{$large-phone} {
- flex-direction: column-reverse;
- button {
- &.btn-highlight,
- &.btn-secondary-positive {
- margin-bottom: 0;
- width: 100%;
- height: 45px;
- }
- }
- }
- }
.release-note-part {
margin-top: 0.5rem;
}
diff --git a/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx b/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
index 4d6c6988e43844ac20c6209990efd459afce63bd..d6c0ac583c54beb4f24437b35bce4ab8f9a8e3e2 100644
--- a/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
+++ b/src/components/ReleaseNotesModal/ReleaseNotesModal.tsx
@@ -57,20 +57,15 @@ const ReleaseNotesModal = ({
</div>
))}
</div>
- <div className="release-note-button">
- <Button
- aria-label={t(
- 'consumption_visualizer.release_notes_modal.accessibility.button_go_back'
- )}
- onClick={handleCloseClick}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
- >
- {t('consumption_visualizer.release_notes_modal.go_back')}
- </Button>
- </div>
+ <Button
+ aria-label={t(
+ 'consumption_visualizer.release_notes_modal.accessibility.button_go_back'
+ )}
+ onClick={handleCloseClick}
+ className="btnPrimary"
+ >
+ {t('consumption_visualizer.release_notes_modal.go_back')}
+ </Button>
</div>
</div>
</Dialog>
diff --git a/src/components/Splash/SplashScreenError.tsx b/src/components/Splash/SplashScreenError.tsx
index 1ebaaac2abd87d83b4931eb31503ee1bdd802010..eaec77ac5e95732a1ab252a0ec5bd05ae03130fa 100644
--- a/src/components/Splash/SplashScreenError.tsx
+++ b/src/components/Splash/SplashScreenError.tsx
@@ -25,12 +25,8 @@ const SplashScreenError = ({ error }: { error: InitStepsErrors }) => {
<div className="splash-footer">
<Button
aria-label={t('splashscreen.accessibility.button_reload')}
- className="splash-footer-button"
+ className="btnPrimary splash-footer-button"
onClick={() => window.location.reload()}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
>
{t('splashscreen.button_reload')}
</Button>
diff --git a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
index 6d44191383bb9b2f569f87cefeb07095ba298227..21c1c6a7cfd23f56789316554531f6aec30b74eb 100644
--- a/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
+++ b/src/components/Splash/__snapshots__/SplashScreenError.spec.tsx.snap
@@ -63,18 +63,12 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="splashscreen.accessibility.button_reload"
- className="splash-footer-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary splash-footer-button"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="splashscreen.accessibility.button_reload"
- className="splash-footer-button"
+ className="btnPrimary splash-footer-button"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -91,13 +85,13 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -112,7 +106,7 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="splashscreen.accessibility.button_reload"
- className="MuiButton-root btn-highlight MuiButton-text splash-footer-button"
+ className="MuiButton-root MuiButton-text btnPrimary splash-footer-button"
component="button"
disabled={false}
focusRipple={true}
@@ -122,7 +116,7 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="splashscreen.accessibility.button_reload"
- className="MuiButton-root btn-highlight MuiButton-text splash-footer-button"
+ className="MuiButton-root MuiButton-text btnPrimary splash-footer-button"
classes={
Object {
"disabled": "Mui-disabled",
@@ -139,7 +133,7 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
>
<button
aria-label="splashscreen.accessibility.button_reload"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text splash-footer-button"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary splash-footer-button"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -157,7 +151,7 @@ exports[`SplashScreenError component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
splashscreen.button_reload
</span>
diff --git a/src/components/Splash/splashScreen.scss b/src/components/Splash/splashScreen.scss
index a9456aaec07796c2dec991e2684ce719d7c0fafa..fa2c9eb4dd6c684ea138d4de95e89e69716b84a2 100644
--- a/src/components/Splash/splashScreen.scss
+++ b/src/components/Splash/splashScreen.scss
@@ -53,11 +53,8 @@
justify-content: flex-start;
height: 10rem;
- button.btn-highlight {
+ button {
max-width: 230px;
- width: 100%;
- margin: 0.5rem 0 0;
- height: 40px;
}
}
.splash-progress {
diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx
index ea7517d8025bcc0f93dbee0a6b76bea8845f498c..a5ae234d15802ee66227cec1f37ce71bed6d6084 100644
--- a/src/components/Terms/CGUModal.tsx
+++ b/src/components/Terms/CGUModal.tsx
@@ -37,11 +37,7 @@ const CGUModal = ({ open, handleCloseClick }: CGUModalProps) => {
<Button
aria-label={t('gcu_modal.accessibility.button_accept')}
onClick={handleCloseClick}
- className="gcu-modal-button"
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('legal.accessibility.button_close')}
</Button>
diff --git a/src/components/Terms/LegalNoticeModal.tsx b/src/components/Terms/LegalNoticeModal.tsx
index 79247af0ec8d3289202f78cb47d741d03d8c29f1..1dce2e13d0b262d18aacfd5b4e31e2f6a9044425 100644
--- a/src/components/Terms/LegalNoticeModal.tsx
+++ b/src/components/Terms/LegalNoticeModal.tsx
@@ -39,11 +39,7 @@ const LegalNoticeModal = ({
<Button
aria-label={t('gcu_modal.accessibility.button_accept')}
onClick={handleCloseClick}
- className="gcu-modal-button"
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('legal.accessibility.button_close')}
</Button>
diff --git a/src/components/Terms/TermsView.spec.tsx b/src/components/Terms/TermsView.spec.tsx
index f615514e3d753f11560337e1c47e5bffe8d63fd6..349fb9d0d9f8596aeb533c1ac6b2c28804711540 100644
--- a/src/components/Terms/TermsView.spec.tsx
+++ b/src/components/Terms/TermsView.spec.tsx
@@ -28,6 +28,19 @@ jest.mock('services/profile.service', () => {
describe('TermsView component', () => {
const store = createMockEcolyoStore()
+
+ beforeEach(() => {
+ jest.clearAllMocks()
+ })
+
+ it('should be rendered correctly', () => {
+ const component = mount(
+ <Provider store={store}>
+ <TermsView />
+ </Provider>
+ )
+ expect(toJson(component)).toMatchSnapshot()
+ })
it('should valid checkboxes and valid consent', () => {
mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
const wrapper = mount(
@@ -46,18 +59,11 @@ describe('TermsView component', () => {
.at(1)
.simulate('change', { target: { checked: true } })
expect(wrapper.find('input').at(1).props().checked).toEqual(true)
- expect(wrapper.find(Button).first().hasClass('disabled')).toBeFalsy()
+ expect(wrapper.find(Button).first().prop('disabled')).toBeFalsy()
wrapper.find(Button).first().simulate('click')
expect(mockAppDispatch).toHaveBeenCalledTimes(3)
})
- it('should be rendered correctly', () => {
- const component = mount(
- <Provider store={store}>
- <TermsView />
- </Provider>
- )
- expect(toJson(component)).toMatchSnapshot()
- })
+
it('should be unable to valid consent', async () => {
mockCreateTerm.mockResolvedValueOnce(mockUpToDateTerm)
const wrapper = mount(
@@ -67,7 +73,7 @@ describe('TermsView component', () => {
)
wrapper.find(Button).first().simulate('click')
- expect(wrapper.find(Button).first().hasClass('disabled')).toBeTruthy()
+ expect(wrapper.find(Button).first().prop('disabled')).toBeTruthy()
expect(mockUpdateProfile).toHaveBeenCalledTimes(0)
})
})
diff --git a/src/components/Terms/TermsView.tsx b/src/components/Terms/TermsView.tsx
index 728aa5ec018aa2a8e42c940f60c911f65b6681f3..24553351b5d7ff5abe534e53ef0943552a14ea03 100644
--- a/src/components/Terms/TermsView.tsx
+++ b/src/components/Terms/TermsView.tsx
@@ -1,5 +1,4 @@
import { Button } from '@material-ui/core'
-import classNames from 'classnames'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useCallback, useState } from 'react'
@@ -62,27 +61,21 @@ const TermsView = () => {
<>
<div className="terms-content">
<DataShareConsentContent />
- <label
- className={classNames('checkbox', {
- ['answer-checked']: dataConsentValidation,
- })}
- >
+ <label className="inline">
<input
type="checkbox"
name="Data-consent-validation"
+ className="inputCheckbox"
onChange={handleDataConsentValidation}
checked={dataConsentValidation}
/>
{t('dataShare.validDataConsent')}
</label>
- <label
- className={classNames('checkbox', {
- ['answer-checked']: GCUValidation,
- })}
- >
+ <label className="inline">
<input
type="checkbox"
name="GCU-validation"
+ className="inputCheckbox"
onChange={handleGCUValidate}
checked={GCUValidation}
/>
@@ -110,14 +103,8 @@ const TermsView = () => {
<Button
aria-label={t('dataShare.accessibility.button_accept')}
onClick={handleTermValidate}
- className={classNames('gcu-modal-button', {
- ['disabled']: !GCUValidation || !dataConsentValidation,
- })}
disabled={!GCUValidation || !dataConsentValidation}
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('dataShare.button_accept')}
</Button>
@@ -132,11 +119,7 @@ const TermsView = () => {
<Button
aria-label={t('minorUpdate.button')}
onClick={handleTermValidate}
- className="gcu-modal-button"
- classes={{
- root: 'btn-profile-next rounded',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('minorUpdate.button')}
</Button>
diff --git a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
index 640e034ecfb9141db9aa27c259b0e319b3ea84e9..15dfa6bd81c549f3807acc75c8bbcc16946db8f7 100644
--- a/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/CGUModal.spec.tsx.snap
@@ -707,12 +707,12 @@ exports[`CGUModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="gcu_modal.accessibility.button_accept"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
legal.accessibility.button_close
</span>
@@ -1345,18 +1345,12 @@ exports[`CGUModal component should be rendered correctly 1`] = `
</GCUContent>
<WithStyles(ForwardRef(Button))
aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1373,13 +1367,13 @@ exports[`CGUModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1394,7 +1388,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1404,7 +1398,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1421,7 +1415,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
>
<button
aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1439,7 +1433,7 @@ exports[`CGUModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
legal.accessibility.button_close
</span>
diff --git a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
index 81580a001b627d3cc9f40fa6bd9941ffe8155734..7cd02919bb5d52ad64990d63e0b46b3fa277412b 100644
--- a/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/LegalNoticeModal.spec.tsx.snap
@@ -693,12 +693,12 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
</div>
<button
aria-label="gcu_modal.accessibility.button_accept"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
legal.accessibility.button_close
</span>
@@ -1330,18 +1330,12 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
</LegalNoticeContent>
<WithStyles(ForwardRef(Button))
aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
onClick={[MockFunction]}
>
<ForwardRef(Button)
aria-label="gcu_modal.accessibility.button_accept"
- className="gcu-modal-button"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -1358,13 +1352,13 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -1379,7 +1373,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -1389,7 +1383,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -1406,7 +1400,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
>
<button
aria-label="gcu_modal.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[MockFunction]}
@@ -1424,7 +1418,7 @@ exports[`LegalNoticeModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
legal.accessibility.button_close
</span>
diff --git a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
index 3ea6482684fea0d932e35e3b127f8b71ea167c47..180b38490a8c347a22988f89e64f8356e9f531df 100644
--- a/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
+++ b/src/components/Terms/__snapshots__/TermsView.spec.tsx.snap
@@ -118,10 +118,11 @@ exports[`TermsView component should be rendered correctly 1`] = `
</div>
</DataShareConsentContent>
<label
- className="checkbox"
+ className="inline"
>
<input
checked={false}
+ className="inputCheckbox"
name="Data-consent-validation"
onChange={[Function]}
type="checkbox"
@@ -129,10 +130,11 @@ exports[`TermsView component should be rendered correctly 1`] = `
dataShare.validDataConsent
</label>
<label
- className="checkbox"
+ className="inline"
>
<input
checked={false}
+ className="inputCheckbox"
name="GCU-validation"
onChange={[Function]}
type="checkbox"
@@ -162,19 +164,13 @@ exports[`TermsView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(Button))
aria-label="dataShare.accessibility.button_accept"
- className="gcu-modal-button disabled"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
+ className="btnPrimary"
disabled={true}
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="dataShare.accessibility.button_accept"
- className="gcu-modal-button disabled"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -191,13 +187,13 @@ exports[`TermsView component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -213,7 +209,7 @@ exports[`TermsView component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="dataShare.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
component="button"
disabled={true}
focusRipple={true}
@@ -223,7 +219,7 @@ exports[`TermsView component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="dataShare.accessibility.button_accept"
- className="MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button disabled Mui-disabled"
+ className="MuiButton-root MuiButton-text btnPrimary Mui-disabled"
classes={
Object {
"disabled": "Mui-disabled",
@@ -240,7 +236,7 @@ exports[`TermsView component should be rendered correctly 1`] = `
>
<button
aria-label="dataShare.accessibility.button_accept"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text gcu-modal-button disabled Mui-disabled Mui-disabled"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary Mui-disabled Mui-disabled"
disabled={true}
onBlur={[Function]}
onClick={[Function]}
@@ -258,7 +254,7 @@ exports[`TermsView component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
dataShare.button_accept
</span>
diff --git a/src/components/Terms/termsView.scss b/src/components/Terms/termsView.scss
index 6e058dad69caa5f63058d3be2c3b384864bde654..bf6c77243623a8e8fe8f8b067a3c0e3317167d9b 100644
--- a/src/components/Terms/termsView.scss
+++ b/src/components/Terms/termsView.scss
@@ -1,7 +1,4 @@
@import 'src/styles/base/color';
-@import 'src/styles/base/mixins';
-
-@include checkBox();
.terms-wrapper {
padding: 0rem 1.5rem 0 1.5rem;
@@ -27,6 +24,13 @@
cursor: pointer;
color: $gold-shadow;
}
+
+ label.inline {
+ margin-top: 1rem;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+ }
}
.dataShare-content-wrapper,
.dataShare-content-root {
diff --git a/src/components/WelcomeModal/WelcomeModal.tsx b/src/components/WelcomeModal/WelcomeModal.tsx
index 0fc095b5ffa698e75180400981320c099537be36..7af1db71548ac6f02d8f6d6ca6f2f19942df54f6 100644
--- a/src/components/WelcomeModal/WelcomeModal.tsx
+++ b/src/components/WelcomeModal/WelcomeModal.tsx
@@ -15,11 +15,7 @@ import './welcomeModal.scss'
const welcomeTemplate = require('notifications/welcome.hbs')
const mjml2html = require('mjml-browser')
-interface WelcomeModalProps {
- open: boolean
-}
-
-const WelcomeModal = ({ open }: WelcomeModalProps) => {
+const WelcomeModal = ({ open }: { open: boolean }) => {
const { t } = useI18n()
const client = useClient()
const dispatch = useAppDispatch()
@@ -103,10 +99,7 @@ const WelcomeModal = ({ open }: WelcomeModalProps) => {
<Button
aria-label={t('onboarding.welcomeModal.accessibility.button_valid')}
onClick={setWelcomeModalViewed}
- classes={{
- root: 'btn-highlight',
- label: 'text-16-bold',
- }}
+ className="btnPrimary"
>
{t('onboarding.welcomeModal.button_valid')}
</Button>
diff --git a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
index ed873b9546d9006b7802abbe801655d430759071..3dd745c62ee9fd64cb0383bb9f0eb40dd8503f78 100644
--- a/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
+++ b/src/components/WelcomeModal/__snapshots__/WelcomeModal.spec.tsx.snap
@@ -478,12 +478,12 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
</svg>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- class="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
tabindex="0"
type="button"
>
<span
- class="MuiButton-label text-16-bold"
+ class="MuiButton-label"
>
onboarding.welcomeModal.button_valid
</span>
@@ -880,16 +880,12 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
</Icon>
<WithStyles(ForwardRef(Button))
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-highlight",
- }
- }
+ className="btnPrimary"
onClick={[Function]}
>
<ForwardRef(Button)
aria-label="onboarding.welcomeModal.accessibility.button_valid"
+ className="btnPrimary"
classes={
Object {
"colorInherit": "MuiButton-colorInherit",
@@ -906,13 +902,13 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
"iconSizeLarge": "MuiButton-iconSizeLarge",
"iconSizeMedium": "MuiButton-iconSizeMedium",
"iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
+ "label": "MuiButton-label",
"outlined": "MuiButton-outlined",
"outlinedPrimary": "MuiButton-outlinedPrimary",
"outlinedSecondary": "MuiButton-outlinedSecondary",
"outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
"outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-highlight",
+ "root": "MuiButton-root",
"sizeLarge": "MuiButton-sizeLarge",
"sizeSmall": "MuiButton-sizeSmall",
"startIcon": "MuiButton-startIcon",
@@ -927,7 +923,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
>
<WithStyles(ForwardRef(ButtonBase))
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
component="button"
disabled={false}
focusRipple={true}
@@ -937,7 +933,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
>
<ForwardRef(ButtonBase)
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButton-root MuiButton-text btnPrimary"
classes={
Object {
"disabled": "Mui-disabled",
@@ -954,7 +950,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
>
<button
aria-label="onboarding.welcomeModal.accessibility.button_valid"
- className="MuiButtonBase-root MuiButton-root btn-highlight MuiButton-text"
+ className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
@@ -972,7 +968,7 @@ exports[`WelcomeModal component should be rendered correctly 1`] = `
type="button"
>
<span
- className="MuiButton-label text-16-bold"
+ className="MuiButton-label"
>
onboarding.welcomeModal.button_valid
</span>
diff --git a/src/components/WelcomeModal/welcomeModal.scss b/src/components/WelcomeModal/welcomeModal.scss
index 3bbf75622944f0d216f5b9afa88d7b075d5025f8..e2c3b1707cbda619a895d706ee9ba0f273ded976 100644
--- a/src/components/WelcomeModal/welcomeModal.scss
+++ b/src/components/WelcomeModal/welcomeModal.scss
@@ -9,17 +9,7 @@
}
p {
- color: white;
- }
-
- button.btn-highlight {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- margin: 1.5rem 0 1rem;
- padding: 1rem 2rem;
- transition: all 300ms ease;
+ color: $white;
}
}
diff --git a/src/components/theme.ts b/src/components/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..30e729bed317f1b4a488faf6fe79d6c7044e2e4a
--- /dev/null
+++ b/src/components/theme.ts
@@ -0,0 +1,20 @@
+import { createTheme } from '@material-ui/core'
+
+export const theme = createTheme({
+ palette: {
+ type: 'dark',
+ },
+ overrides: {
+ MuiButton: {
+ root: {
+ height: 40,
+ },
+ sizeSmall: {
+ height: 32,
+ },
+ sizeLarge: {
+ height: 40,
+ },
+ },
+ },
+})
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index bc7fa395af58468ba90d67a3ed1cd9e1bf304b4e..b27f6f4409913063e2a68024e365ce5e0a8a950f 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -66,11 +66,6 @@ $grey-linear-gradient-background-hover: linear-gradient(
rgba(70, 71, 77, 0.7) 0%,
rgba(57, 58, 63, 0.7) 100%
);
-// $grey-linear-gradient-background-hover: linear-gradient(
-// 180deg,
-// rgb(70, 71, 77) 0%,
-// rgb(57, 58, 63) 100%
-// );
/** App colors **/
$elec-color: #d87b39;
diff --git a/src/styles/base/_mixins.scss b/src/styles/base/_mixins.scss
index 11c9aa1fd4cd0ed0b919837852fc0f54b09e01af..bb10dab58b0eb7169ac10ae24f17ff7de2661842 100644
--- a/src/styles/base/_mixins.scss
+++ b/src/styles/base/_mixins.scss
@@ -1,17 +1,10 @@
-@mixin button(
- $background,
- $text-color,
- $border: none,
- $background-gradient: $background
-) {
+@mixin button($text-color, $border-color: transparent, $background-gradient) {
background: $background-gradient;
- background-color: $background;
- border: $border;
+ border: 1px solid;
+ border-color: $border-color;
border-radius: 2px;
- margin: 1.5rem 0 0;
width: 100%;
text-transform: initial;
- cursor: pointer;
span:first-child {
color: $text-color;
}
@@ -25,54 +18,48 @@
cursor: not-allowed;
opacity: 0.5;
}
+ transition: all 150ms ease-in-out;
}
-@mixin checkBox() {
- .checkbox {
- margin: 0.5rem 0;
- display: flex;
- align-items: center;
- &:first-of-type {
- margin-top: 1.5rem;
+
+@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;
}
- input {
- margin: 0.5rem 1rem 0.5rem 0.5rem;
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- width: 1.45rem;
- height: 1.45rem;
- min-width: 1.45rem;
- min-height: 1.45rem;
- background: $dark-background;
- position: relative;
- border: solid 2px $gold-shadow;
- cursor: pointer;
+ &:before {
+ width: 3px;
+ height: 12px;
+ left: 10px;
+ top: 4px;
+ transform: rotate(41deg);
}
- }
- .answer-checked {
- input {
- &:before,
- &:after {
- content: '';
- position: absolute;
- display: inline-block;
- background: $gold-shadow;
- 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);
- }
+ &:after {
+ width: 3px;
+ height: 6px;
+ left: 5px;
+ top: 8px;
+ transform: rotate(133deg);
}
}
}
diff --git a/src/styles/base/_typo-variables.scss b/src/styles/base/_typo-variables.scss
index 99b3104bb00939b4a13c54c02b92418985ba8990..3e357c1bf88b39ad0cd8b334a1635c84dd5675fa 100644
--- a/src/styles/base/_typo-variables.scss
+++ b/src/styles/base/_typo-variables.scss
@@ -1,5 +1,5 @@
$text-font: Lato, sans-serif;
-$text-size: '10' 0.625rem, '14' 0.875rem, '15' 0.938rem, '16' 1rem,
- '18' 1.125rem, '19' 1.188rem, '20' 1.25rem, '21' 1.313rem, '22' 1.375rem,
- '24' 1.5rem, '26' 1.625rem, '28' 1.75rem, '36' 2.25rem;
+$text-size: '10' 0.625rem, '13' 0.8125rem, '14' 0.875rem, '15' 0.938rem,
+ '16' 1rem, '18' 1.125rem, '19' 1.188rem, '20' 1.25rem, '21' 1.313rem,
+ '22' 1.375rem, '24' 1.5rem, '26' 1.625rem, '28' 1.75rem, '36' 2.25rem;
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index 210658472e6690949f6ddc17f0e0459d179b11ec..3a8f0feb4ef0b737d97fb2f0daf824056364274b 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -2,86 +2,42 @@
@import '../base/mixins';
button {
- &.btn-highlight {
- @include button($gold-shadow, #000000, none, $multi-color-radial-gradient) {
- background-color: darken($gold-shadow, 12%);
- }
- }
- &.btn-primary-positive {
- @include button(
- transparent,
- $gold-shadow,
- 1px solid $dark-light-2,
- transparent
- ) {
- background-color: rgba($dark-light-2, 0.2);
- span:first-child {
- color: rgba($gold-shadow, 0.7);
- }
- }
- }
- &.btn-primary-challenge {
- @include button($blue-light, black, 1px solid $blue-light, transparent) {
- background-color: rgba($blue-light, 0.2);
- span:first-child {
- color: black;
- }
- }
- }
- &.btn-secondary {
- @include button(transparent, $gold-euro, 1px solid $grey-dark);
- }
- &.btn-secondary-positive {
- @include button(transparent, $grey-bright, 1px solid $white, transparent) {
- background-color: rgba($dark-light-2, 0.2);
- span:first-child {
- color: rgba($grey-bright, 0.7);
- }
- }
+ span {
+ font-size: 1rem;
+ font-weight: 700;
}
- &.btn-secondary-negative {
- @include button(
- transparent,
- $grey-bright,
- 1px solid $grey-dark,
- transparent
- ) {
- background-color: rgba($grey-dark, 0.2);
- span:first-child {
- color: rgba($grey-bright, 0.7);
- }
- }
- }
- &.btn-duel-off {
- @include button(
- $dark-light-2,
- $white,
- 1px solid rgba(97, 240, 242, 0.5),
- $dark-light-2
- ) {
- background-color: darken($dark-light-2, 12%);
+
+ &.btnPrimary {
+ @include button($dark-light-2, transparent, $multi-color-radial-gradient) {
+ background-color: darken($gold-shadow, 12%);
}
}
- &.btn-duel-active {
- border-radius: 4px !important;
- @include button($blue-radial-gradient, $dark-light-2, none);
+
+ &.btnSecondary {
+ @include button($grey-bright, $grey-bright, transparent);
}
- &.btn-duel-on {
- @include button($dark-light-2, $white, 1px solid $blue, $dark-background) {
- background-color: darken($dark-light-2, 12%);
+
+ &.btnText {
+ text-decoration: underline;
+ span {
+ text-transform: none;
+ font-weight: 400;
}
}
- &.btn-profile-next {
- @include button(
- $gold-shadow,
- #000000,
- 1px solid $gold-shadow,
- $multi-color-radial-gradient
- ) {
- background-color: darken($gold-shadow, 12%);
+
+ &.btnPrimaryNegative {
+ @include button($dark-light-2, transparent, $blue-gradient);
+ &:hover {
+ opacity: 0.7;
}
}
- &.btn-profile-back {
- @include button(none, $grey-bright, 1px solid $grey-bright, none);
+
+ &.btnIncrement {
+ @include button($white, transparent, $grey-linear-gradient-background);
+ min-width: 40px;
+ width: 40px;
+ height: 40px;
+ border-radius: 4px;
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.55);
}
}
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
new file mode 100644
index 0000000000000000000000000000000000000000..66759a556b309fc6956a2b95c0b855c390379449
--- /dev/null
+++ b/src/styles/components/_input.scss
@@ -0,0 +1,38 @@
+@import '../base/color';
+@import '../base/mixins';
+
+// Common styles for custom inputs
+input.inputText,
+input.inputNumber {
+ box-sizing: border-box;
+ border: 1px solid $grey-dark;
+ background: transparent;
+ transition: all 300ms ease;
+ color: $grey-bright;
+ &:focus,
+ &:focus-visible {
+ border-color: $gold-shadow;
+ outline: none;
+ }
+}
+
+input.inputText {
+ appearance: none;
+ border-radius: 4px;
+ height: 45px;
+ width: 100%;
+ max-width: 280px;
+ padding: 0 0.5rem;
+}
+
+input.inputNumber {
+ border-radius: 2px;
+ height: 40px;
+ width: 60px;
+ max-width: 5rem;
+ text-align: center;
+}
+
+input.inputCheckbox {
+ @include checkBox($gold-shadow, $dark-light-2);
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2ee8873d98d20621914f25a5c6950af7985a981a..7fbd19f81687d01707b1afb820851bcef6128105 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -9,6 +9,7 @@
@import 'base/typography';
@import 'components/barchart';
@import 'components/buttons';
+@import 'components/input';
@import 'components/card';
@import 'components/dialog';
@import 'components/expansion-panel';