diff --git a/src/components/CommonKit/Card/StyledEcogestureCard.tsx b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
index 08fd623762bc340a6e9056a7cd8754570f03967f..dea5dd8310b6fb4091061c9daee31eff9581b9a8 100644
--- a/src/components/CommonKit/Card/StyledEcogestureCard.tsx
+++ b/src/components/CommonKit/Card/StyledEcogestureCard.tsx
@@ -12,7 +12,6 @@ const CardBase = withStyles({
boxSizing: 'border-box',
boxShadow: '0px 4px 16px black',
borderRadius: '4px',
- margin: '10px 0px 10px 0px',
padding: '0.5rem 1rem',
minHeight: '72px',
},
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index a2035e73f6079609a5c798bccbf985a9ea9a672d..93414138c8a1dab9e9f54198721afcc67fbde1df 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -45,16 +45,15 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
setAnchorEl(null)
}
- const filterEcogesture = (_ecogestures: Ecogesture[]) => {
- const filtered = _ecogestures
+ const filterEcogesture = (ecogestures: Ecogesture[]) => {
+ const filtered = ecogestures
.filter(ecogesture => Usage[ecogesture.usage] === activeFilter)
.map(ecogesture => (
- <div key={ecogesture.id} className="ecogesture-list-item">
- <EcogestureCard
- ecogesture={ecogesture}
- selectionCompleted={selectionViewed === selectionTotal}
- />
- </div>
+ <EcogestureCard
+ key={ecogesture.id}
+ ecogesture={ecogesture}
+ selectionCompleted={selectionViewed === selectionTotal}
+ />
))
if (filtered.length > 0) {
return filtered
@@ -194,9 +193,15 @@ const EcogestureList: React.FC<EcogestureListProps> = ({
<div className="ecogesture-content">
{renderEcogestureContent()}
{!displaySelection && handleReinitClick && (
- <button className="reinit-button" onClick={handleReinitClick}>
- <span>{t('ecogesture.reinit')}</span>
- </button>
+ <Button
+ onClick={handleReinitClick}
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-16-normal',
+ }}
+ >
+ {t('ecogesture.reinit')}
+ </Button>
)}
</div>
</div>
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
index 426846c3562143ea6d12b4ecfd43f1c3bbabb057..a534041ec392820102f3f47f100e0e5bb46e0671 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureList.spec.tsx.snap
@@ -1953,14 +1953,132 @@ exports[`EcogesturesList component should be rendered correctly 1`] = `
key="ECOGESTURE0013"
selectionCompleted={true}
/>
- <button
- className="reinit-button"
+ <WithStyles(ForwardRef(Button))
+ classes={
+ Object {
+ "label": "text-16-normal",
+ "root": "btn-secondary-negative",
+ }
+ }
onClick={[MockFunction]}
>
- <span>
- ecogesture.reinit
- </span>
- </button>
+ <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-16-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",
+ }
+ }
+ onClick={[MockFunction]}
+ >
+ <WithStyles(ForwardRef(ButtonBase))
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <ForwardRef(ButtonBase)
+ className="MuiButton-root btn-secondary-negative MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
+ disabled={false}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
+ onClick={[MockFunction]}
+ type="button"
+ >
+ <button
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[MockFunction]}
+ 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-16-normal"
+ >
+ ecogesture.reinit
+ </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))>
</div>
</div>
</EcogestureList>
diff --git a/src/components/Ecogesture/ecogestureList.scss b/src/components/Ecogesture/ecogestureList.scss
index 58f38c24f8d9340a9262a223760fbc501f7122e3..4b0beefe46363f1cf8146537d4c52f4d26ebb634 100644
--- a/src/components/Ecogesture/ecogestureList.scss
+++ b/src/components/Ecogesture/ecogestureList.scss
@@ -8,20 +8,11 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: center;
padding: 1rem 1.5rem 2.5rem 1.5rem;
+ gap: 1rem;
.efficiency-button-content {
max-width: 52rem;
- width: 97%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- @media #{$tablet} {
- width: 97%;
- }
- @media #{$large-phone} {
- width: 97%;
- }
+ width: 100%;
.selection {
display: flex;
align-items: center;
@@ -101,10 +92,15 @@
}
.ecogesture-content {
display: flex;
+ justify-content: center;
flex-wrap: wrap;
max-width: 53rem;
animation: appear 600ms ease;
width: 100%;
+ gap: 1rem;
+ @media #{$tablet} {
+ gap: 0.5rem;
+ }
@keyframes appear {
from {
@@ -124,10 +120,12 @@
color: $grey-bright;
}
.ecogesture-list-item {
- width: 48%;
+ box-sizing: border-box;
height: 8rem;
- margin: 1% 1%;
animation: appear 600ms ease;
+ display: flex;
+ flex: 1;
+ flex-basis: 45%;
}
.ecogesture-list-item > button {
height: 100%;
@@ -186,17 +184,3 @@ div.filter-menu {
margin-left: auto;
min-width: 0;
}
-.reinit-button {
- background: transparent;
- border: 1px solid $white-light;
- border-radius: 2px;
- margin: 20px 6px;
- padding: 3px;
- width: 100%;
- cursor: pointer;
- span {
- color: $white;
- display: inline-block;
- max-width: 200px;
- }
-}
diff --git a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
index c680eaa3788c672a2073a55a949642a0b89861f0..7f860e0385f0fe9b0b55f00a37b17c486349ae82 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
+++ b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
@@ -2,20 +2,12 @@
@import '../../styles/base/breakpoint';
.eg-selection-detail-container {
- position: relative;
min-height: inherit;
- margin: auto;
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: center;
text-align: center;
color: $grey-bright;
- max-width: 45.75rem;
- @media #{$large-phone} {
- margin: 0 1rem;
- max-width: unset;
- }
+ padding: 0 1.5rem;
.content {
display: flex;
gap: 0.5rem;