diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx index d9bb59db60b91c167868eb7730ee8f8db6fed3b0..00d20bb9e288c5310009f338e7c5cb4c6f5a4825 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 77d8ea0b087b465f63e7d4c78071df93c88d94cb..d5b5af89f35275d5a548011d09a44c192349dcd3 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