From 5f80a3611ab993689f8b2eec0f47b10c4566f28c Mon Sep 17 00:00:00 2001
From: HAUTBOIS Aurelie <aurelie.hautbois@ext.soprasteria.com>
Date: Tue, 26 Jan 2021 18:05:21 +0100
Subject: [PATCH] feat: transform stopButton to mui button on ecogesture modal
---
src/components/Ecogesture/EcogestureModal.tsx | 25 +++++++++++--------
.../Ecogesture/ecogestureModal.scss | 19 ++++++++------
2 files changed, 26 insertions(+), 18 deletions(-)
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index d9bb59db6..00d20bb9e 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -10,10 +10,9 @@ import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import { importIconbyId } from 'utils/utils'
import './ecogestureModal.scss'
import useExploration from 'components/Hooks/useExploration'
-import { UserExplorationID } from 'enum/userExploration.enum'
import { AppStore } from 'store'
import { useSelector } from 'react-redux'
-import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import MuiButton from '@material-ui/core/Button'
import EfficientyRating from './EfficientyRating'
import classNames from 'classnames'
@@ -61,7 +60,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="em-header text-14-normal-uppercase">
{isAction ? t('action.title_action') : t('ECOGESTURE.TITLE_ECOGESTURE')}
</div>
- <div className="em-root">
+ <div className="em-root ecogesture-modal">
<div className="em-content">
<div className="em-content-box-img">
{ecogestureIcon && (
@@ -90,13 +89,15 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
</div>
<div className="long-name">{ecogesture.longName}</div>
{isAction ? (
- <StyledStopButton
- color="secondary"
+ <MuiButton
onClick={selectAction}
- className="btn-modal-ecogesture"
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-14-normal-capitalize',
+ }}
>
{t('action.select_action')}
- </StyledStopButton>
+ </MuiButton>
) : (
<>
<div
@@ -106,15 +107,17 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
>
{ecogesture.longDescription}
</div>
- <StyledStopButton
- color="secondary"
+ <MuiButton
onClick={toggleMoreDetail}
- className="btn-modal-ecogesture"
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-14-normal-capitalize',
+ }}
>
{isMoreDetail
? t('ECOGESTURE.SHOW_LESS')
: t('ECOGESTURE.SHOW_MORE')}
- </StyledStopButton>
+ </MuiButton>
</>
)}
</div>
diff --git a/src/components/Ecogesture/ecogestureModal.scss b/src/components/Ecogesture/ecogestureModal.scss
index 77d8ea0b0..d5b5af89f 100644
--- a/src/components/Ecogesture/ecogestureModal.scss
+++ b/src/components/Ecogesture/ecogestureModal.scss
@@ -76,13 +76,17 @@
.long-name {
font-weight: bold;
line-height: 150%;
- background: radial-gradient(60.65% 30.62% at 50% 3.13%, #2A2B30 0%, #1B1C22 100%);
+ background: radial-gradient(
+ 60.65% 30.62% at 50% 3.13%,
+ #2a2b30 0%,
+ #1b1c22 100%
+ );
border-radius: 6px;
border: 2px solid $blue-40;
padding: 2.5rem 0.5rem 1rem 0.5rem;
border-radius: 90% 90% 10px 10px / 60% 60% 6px 6px;
text-align: center;
- margin: 1.5rem 0 1rem
+ margin: 1.5rem 0 1rem;
}
.em-description {
display: none;
@@ -110,11 +114,12 @@
.em-title {
margin-bottom: 0;
}
-
}
.block {
- display: block!important;
+ display: block !important;
+}
+.ecogesture-modal {
+ button.btn-secondary-negative {
+ margin: 1rem 0 1.5rem !important;
+ }
}
-.btn-modal-ecogesture {
- margin: 1rem 0 1.5rem!important;
-}
\ No newline at end of file
--
GitLab