diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx index 72525b837ff9f5fb62d3130895f51fbf0b2364c9..c46cdfe36bd58f44fd7a8d922168cb2530646ae1 100644 --- a/src/components/Ecogesture/SingleEcogesture.tsx +++ b/src/components/Ecogesture/SingleEcogesture.tsx @@ -115,118 +115,111 @@ const SingleEcogesture = () => { setValidExploration, ]) - if (ecogesture) { - return ( - <> - <CozyBar titleKey={'common.title_ecogesture'} displayBackArrow={true} /> - <Header - setHeaderHeight={setHeaderHeight} - desktopTitleKey={'common.title_ecogesture'} - displayBackArrow={true} - /> - <Content heightOffset={headerHeight}> - {isLoading && ( - <div className="loaderContainer"> - <Loader /> + return ( + <> + <CozyBar titleKey={'common.title_ecogesture'} displayBackArrow={true} /> + <Header + setHeaderHeight={setHeaderHeight} + desktopTitleKey={'common.title_ecogesture'} + displayBackArrow={true} + /> + <Content heightOffset={headerHeight}> + {isLoading && ( + <div className="loaderContainer"> + <Loader /> + </div> + )} + {!isLoading && !ecogesture && ( + <ErrorPage + text={t('error_page.no_ecogesture')} + returnPage={'ecogestures'} + /> + )} + {!isLoading && ecogesture && ( + <div className="single-ecogesture"> + <div className="icon-container"> + {ecogestureIcon && ( + <StyledIcon + className="icon-big" + icon={ecogestureIcon} + size={220} + /> + )} </div> - )} - {!isLoading && ( - <div className="single-ecogesture"> - <div className="icon-container"> - {ecogestureIcon && ( - <StyledIcon - className="icon-big" - icon={ecogestureIcon} - size={220} - /> - )} + <div className="details"> + <div className="text-22 title">{ecogesture.shortName}</div> + <div className="efficiency"> + <span className="text text-14-normal"> + {t('ecogesture_modal.efficiency')} + </span> + <EfficiencyRating result={Math.round(ecogesture.efficiency)} /> </div> - <div className="details"> - <div className="text-22 title">{ecogesture.shortName}</div> - <div className="efficiency"> - <span className="text text-14-normal"> - {t('ecogesture_modal.efficiency')} - </span> - <EfficiencyRating - result={Math.round(ecogesture.efficiency)} - /> - </div> + </div> + <div className="styled-container"> + <div className="long-name text-18-bold"> + {ecogesture.longName} + </div> + <div + className="toggle-text text-15-normal" + onClick={toggleMoreDetail} + role="button" + > + {isMoreDetail + ? t('ecogesture_modal.show_less') + : t('ecogesture_modal.show_more')} </div> - <div className="styled-container"> - <div className="long-name text-18-bold"> - {ecogesture.longName} - </div> - <div - className="toggle-text text-15-normal" - onClick={toggleMoreDetail} - role="button" + <div + className={classNames('description text-16-normal-150', { + ['block']: isMoreDetail === true, + })} + > + {ecogesture.longDescription} + </div> + </div> + {selectionCompleted && ( + <div className="buttons-selection"> + <IconButton + aria-label={t('ecogesture.objective')} + onClick={toggleObjective} + classes={{ + root: `btn-secondary-negative objective-btn ${ + isObjective && 'active' + }`, + label: 'text-15-normal', + }} > - {isMoreDetail - ? t('ecogesture_modal.show_less') - : t('ecogesture_modal.show_more')} - </div> - <div - className={classNames('description text-16-normal-150', { - ['block']: isMoreDetail === true, - })} + <Icon + className="status-icon" + icon={ + isObjective ? objectiveEnabledIcon : objectiveDisabledIcon + } + size={40} + /> + <span>{t('ecogesture.objective')}</span> + </IconButton> + <IconButton + aria-label={t('ecogesture.doing')} + onClick={toggleDoing} + classes={{ + root: `btn-secondary-negative doing-btn ${ + isDoing && 'active' + }`, + label: 'text-15-normal', + }} > - {ecogesture.longDescription} - </div> + <Icon + className="status-icon" + icon={isDoing ? doingEnabledIcon : doingDisabledIcon} + size={40} + /> + <span>{t('ecogesture.doing')}</span> + </IconButton> </div> - {selectionCompleted && ( - <div className="buttons-selection"> - <IconButton - aria-label={t('ecogesture.objective')} - onClick={toggleObjective} - classes={{ - root: `btn-secondary-negative objective-btn ${ - isObjective && 'active' - }`, - label: 'text-15-normal', - }} - > - <Icon - className="status-icon" - icon={ - isObjective - ? objectiveEnabledIcon - : objectiveDisabledIcon - } - size={40} - /> - <span>{t('ecogesture.objective')}</span> - </IconButton> - <IconButton - aria-label={t('ecogesture.doing')} - onClick={toggleDoing} - classes={{ - root: `btn-secondary-negative doing-btn ${ - isDoing && 'active' - }`, - label: 'text-15-normal', - }} - > - <Icon - className="status-icon" - icon={isDoing ? doingEnabledIcon : doingDisabledIcon} - size={40} - /> - <span>{t('ecogesture.doing')}</span> - </IconButton> - </div> - )} - </div> - )} - </Content> - </> - ) - } - - return ( - <ErrorPage - text={t('error_page.no_ecogesture')} - returnPage={'ecogestures'} - /> + )} + </div> + )} + </Content> + </> ) }