diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 06036eb0f157d8fba42dc3436769da73f899e2e8..023538814fa0e9b5ef1f2fc72405f0a1f80750b9 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef } from 'react'
+import React, { useState, useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { AppStore } from 'store'
import { useSelector } from 'react-redux'
@@ -12,10 +12,12 @@ import {
} from 'enum/profileType.enum'
import { FluidType } from 'enum/fluid.enum'
import { useHistory } from 'react-router-dom'
-import classNames from 'classnames'
-import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import Icon from 'cozy-ui/transpiled/react/Icon'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
-import chevronUp from 'assets/icons/ico/chevron-up.svg'
import StyledCard from 'components/CommonKit/Card/StyledCard'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import profileIcon from 'assets/icons/ico/profile.svg'
@@ -29,12 +31,6 @@ const ProfileTypeOptions: React.FC = () => {
const [, setValidExploration] = useExploration()
const [active, setActive] = useState<boolean>(false)
- const content = useRef<HTMLDivElement>(null)
- const scrollHeight =
- content.current && content.current.scrollHeight
- ? content.current.scrollHeight
- : 0
-
const toggleAccordion = () => {
if (!active) {
setValidExploration(UserExplorationID.EXPLORATION001)
@@ -53,183 +49,180 @@ const ProfileTypeOptions: React.FC = () => {
{t('profile_type.title_profile')}
</div>
{profile.isProfileTypeCompleted && (
- <div className={classNames('accordion', { ['active']: active })}>
- <div>
- <div
- className={classNames('accordion-header', {
- ['active']: active,
- })}
- onClick={toggleAccordion}
- >
- <div className="accordion-info">
- <div className="accordion-title text-18-normal">
- {t('profile_type.your_profile')}
- </div>
- </div>
- <StyledIconButton icon={active ? chevronUp : chevronDown} />
+ <ExpansionPanel
+ expanded={active}
+ onChange={toggleAccordion}
+ classes={{
+ root: 'expansion-panel-root',
+ }}
+ >
+ <ExpansionPanelSummary
+ aria-label={''}
+ expandIcon={<Icon icon={chevronDown} size={16} />}
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <div className="text-18-normal">
+ {t('profile_type.your_profile')}
</div>
- <div
- ref={content}
- style={{
- maxHeight: `${active ? scrollHeight + 50 : 0}px`,
- }}
- className={classNames('accordion-content', {
- ['active']: active,
- })}
- >
- <div className="profile-container">
- <div className="fields">
- <div className="label">
- {t('profile_type.housing_type.title')}
- </div>
- <div className="value">
- {t(
- `profile_type.housing_type.${profile.profileType.housingType}`
- )}
- </div>
- {profile.profileType.constructionYear && (
- <div className="value">
- {t(
- `profile_type.construction_year.${'text_' +
- profile.profileType.constructionYear}`
- )}
- </div>
- )}
- <div className="value">
- {profile.profileType.area}
- {t('profile_type.area.name')}
- </div>
- <div className="value">
- {profile.profileType.occupantsNumber}
- {profile.profileType.occupantsNumber > 1
- ? t('profile_type.occupantsNumber.multi')
- : t('profile_type.occupantsNumber.single')}
- </div>
- {profile.profileType.housingType ===
- HousingType.APPARTMENT && (
- <div className="value floor">
- {t(`profile_type.floor.${profile.profileType.floor}`)}
- </div>
- )}
- <div className="value">
- {profile.profileType.outsideFacingWalls}
- {profile.profileType.outsideFacingWalls !=
- OutsideFacingWalls.ONE
- ? t('profile_type.outside_facing_walls.text.multi')
- : t('profile_type.outside_facing_walls.text.single')}
- </div>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ <div className="profile-container">
+ <div className="fields">
+ <div className="label">
+ {t('profile_type.housing_type.title')}
</div>
- <div className="fields">
- <div className="label">
- {t('profile_type.heating.title')}
- </div>
- <div className="value">
- {t(`profile_type.heating.${profile.profileType.heating}`)}
- </div>
- {profile.profileType.heating ===
- IndividualOrCollective.INDIVIDUAL && (
- <>
- <div className="value">
- {profile.profileType.warmingFluid == null
- ? t('profile_type.warming_fluid.no_fluid_text')
- : t(
- `profile_type.warming_fluid.${profile
- .profileType.warmingFluid + '_text'}`
- )}
- </div>
- {(profile.profileType.hasInstalledVentilation ===
- ThreeChoicesAnswer.YES ||
- profile.profileType.hasReplacedHeater ===
- ThreeChoicesAnswer.YES) && (
- <div className="equipments">
- <div className="value">
- {profile.profileType.hasInstalledVentilation ===
- ThreeChoicesAnswer.YES &&
- t(`profile_type.ventilation.text`)}
- </div>
- <div className="value">
- {profile.profileType.hasReplacedHeater ===
- ThreeChoicesAnswer.YES &&
- t(`profile_type.heater_replacement.text`)}
- </div>
- </div>
- )}
- </>
+ <div className="value">
+ {t(
+ `profile_type.housing_type.${profile.profileType.housingType}`
)}
</div>
- <div className="fields">
- <div className="label">
- {t('profile_type.cold_water.title')}
- </div>
+ {profile.profileType.constructionYear && (
<div className="value">
{t(
- `profile_type.cold_water.${profile.profileType.coldWater}_text`
+ `profile_type.construction_year.${'text_' +
+ profile.profileType.constructionYear}`
)}
</div>
+ )}
+ <div className="value">
+ {profile.profileType.area}
+ {t('profile_type.area.name')}
</div>
- <div className="fields">
- <div className="label">
- {t('profile_type.hot_water.title')}
- </div>
- <div className="value">
- {t(
- `profile_type.hot_water.${profile.profileType.hotWater}`
- )}
- </div>
- <div className="value">
- {profile.profileType.warmingFluid !== null &&
- profile.profileType.heating ===
- IndividualOrCollective.INDIVIDUAL
- ? t(
- `profile_type.hot_water_fluid.${profile.profileType
- .hotWaterFluid + '_text'}`
- )
- : profile.profileType.heating ===
- IndividualOrCollective.INDIVIDUAL
- ? t('profile_type.hot_water_fluid.no_fluid_text')
- : ''}
+ <div className="value">
+ {profile.profileType.occupantsNumber}
+ {profile.profileType.occupantsNumber > 1
+ ? t('profile_type.occupantsNumber.multi')
+ : t('profile_type.occupantsNumber.single')}
+ </div>
+ {profile.profileType.housingType ===
+ HousingType.APPARTMENT && (
+ <div className="value floor">
+ {t(`profile_type.floor.${profile.profileType.floor}`)}
</div>
- {profile.profileType.hotWater ===
- IndividualOrCollective.INDIVIDUAL && (
+ )}
+ <div className="value">
+ {profile.profileType.outsideFacingWalls}
+ {profile.profileType.outsideFacingWalls !=
+ OutsideFacingWalls.ONE
+ ? t('profile_type.outside_facing_walls.text.multi')
+ : t('profile_type.outside_facing_walls.text.single')}
+ </div>
+ </div>
+ <div className="fields">
+ <div className="label">{t('profile_type.heating.title')}</div>
+ <div className="value">
+ {t(`profile_type.heating.${profile.profileType.heating}`)}
+ </div>
+ {profile.profileType.heating ===
+ IndividualOrCollective.INDIVIDUAL && (
+ <>
<div className="value">
- {t(
- `profile_type.hot_water_equipment.${profile.profileType.hotWaterEquipment}`
- )}
+ {profile.profileType.warmingFluid == null
+ ? t('profile_type.warming_fluid.no_fluid_text')
+ : t(
+ `profile_type.warming_fluid.${profile.profileType
+ .warmingFluid + '_text'}`
+ )}
</div>
+ {(profile.profileType.hasInstalledVentilation ===
+ ThreeChoicesAnswer.YES ||
+ profile.profileType.hasReplacedHeater ===
+ ThreeChoicesAnswer.YES) && (
+ <div className="equipments">
+ <div className="value">
+ {profile.profileType.hasInstalledVentilation ===
+ ThreeChoicesAnswer.YES &&
+ t(`profile_type.ventilation.text`)}
+ </div>
+ <div className="value">
+ {profile.profileType.hasReplacedHeater ===
+ ThreeChoicesAnswer.YES &&
+ t(`profile_type.heater_replacement.text`)}
+ </div>
+ </div>
+ )}
+ </>
+ )}
+ </div>
+ <div className="fields">
+ <div className="label">
+ {t('profile_type.cold_water.title')}
+ </div>
+ <div className="value">
+ {t(
+ `profile_type.cold_water.${profile.profileType.coldWater}_text`
)}
</div>
- {profile.profileType.individualInsulationWork.length > 0 && (
- <div className="fields insulation">
- <div className="label">
- {t('profile_type.individual_insulation_work.title')}
- </div>
-
- {profile.profileType.individualInsulationWork.map(
- (work, index) => {
- return (
- <div key={index} className="value">
- {t(
- `profile_type.individual_insulation_work.${work}`
- )}
- </div>
- )
- }
+ </div>
+ <div className="fields">
+ <div className="label">
+ {t('profile_type.hot_water.title')}
+ </div>
+ <div className="value">
+ {t(
+ `profile_type.hot_water.${profile.profileType.hotWater}`
+ )}
+ </div>
+ <div className="value">
+ {profile.profileType.warmingFluid !== null &&
+ profile.profileType.heating ===
+ IndividualOrCollective.INDIVIDUAL
+ ? t(
+ `profile_type.hot_water_fluid.${profile.profileType
+ .hotWaterFluid + '_text'}`
+ )
+ : profile.profileType.heating ===
+ IndividualOrCollective.INDIVIDUAL
+ ? t('profile_type.hot_water_fluid.no_fluid_text')
+ : ''}
+ </div>
+ {profile.profileType.hotWater ===
+ IndividualOrCollective.INDIVIDUAL && (
+ <div className="value">
+ {t(
+ `profile_type.hot_water_equipment.${profile.profileType.hotWaterEquipment}`
)}
</div>
)}
- <div className="fields">
+ </div>
+ {profile.profileType.individualInsulationWork.length > 0 && (
+ <div className="fields insulation">
<div className="label">
- {t('profile_type.cooking_fluid.title')}
- </div>
- <div className="value">
- {t(
- `FLUID.${
- Object.values(FluidType)[
- profile.profileType.cookingFluid
- ]
- }.LABEL`
- )}
+ {t('profile_type.individual_insulation_work.title')}
</div>
+
+ {profile.profileType.individualInsulationWork.map(
+ (work, index) => {
+ return (
+ <div key={index} className="value">
+ {t(
+ `profile_type.individual_insulation_work.${work}`
+ )}
+ </div>
+ )
+ }
+ )}
+ </div>
+ )}
+ <div className="fields">
+ <div className="label">
+ {t('profile_type.cooking_fluid.title')}
+ </div>
+ <div className="value">
+ {t(
+ `FLUID.${
+ Object.values(FluidType)[
+ profile.profileType.cookingFluid
+ ]
+ }.LABEL`
+ )}
</div>
</div>
<div className="inline-buttons">
@@ -247,8 +240,8 @@ const ProfileTypeOptions: React.FC = () => {
</Button>
</div>
</div>
- </div>
- </div>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
)}
{profile.isProfileTypeCompleted === false && (
<StyledCard onClick={goToForm} className="profile-link">
diff --git a/src/components/Options/profileTypeOptions.scss b/src/components/Options/profileTypeOptions.scss
index 89ec36ac04b372e05b78b80c88c45f8e2aa870d7..8850487cc79ff1788a635946a842972e4152791c 100644
--- a/src/components/Options/profileTypeOptions.scss
+++ b/src/components/Options/profileTypeOptions.scss
@@ -36,13 +36,16 @@
}
.profile-container {
display: flex;
+ flex-direction: column;
flex-wrap: wrap;
width: 100%;
- padding-top: 1.25rem;
+ margin: 0 1.5rem;
+ @media #{$large-phone} {
+ margin: 0;
+ }
}
.fields {
align-items: flex-start;
- margin: 0px 1rem;
padding: 8px 0px;
width: 100%;
}
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index f5dbb00a6c9adb703b22ef02e4b79a0eaf803d2b..de8d36f4021d150cfbfaa6c2bad15fbe06a7cef7 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -1,134 +1,132 @@
-/** BLACK **/
-$dark: #242633;
-$dark-2: #1b1c22;
-$dark-light: #25262b;
-$dark-light-2: #121212;
-$dark-3: #181819;
-$dark-background: radial-gradient(
- 60.65% 30.62% at 50% 3.13%,
- #2a2b30 0%,
- #1b1c22 100%
-);
-
-/** RED **/
-$red-primary: #d25959;
-
-/** YELLOW **/
-$gold: #b2901b;
-$gold-40: rgba(227, 184, 42, 0.4);
-$gold-light: #deaf0e;
-$gold-shadow: #e3b82a;
-
-/** BLUE **/
-$blue: #58ffff;
-$blue-40: #58ffff40;
-$blue-light: #61f0f2;
-$blue-shadowed: rgba(58, 152, 236, 0.4);
-$blue-gradient: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);
-$blue-radial-gradient: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(1, 153, 163, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- $blue;
-$blue-radial-gradient-transparent: radial-gradient(
- circle,
- $blue 0%,
- rgba(255, 255, 255, 0) 100%
-);
-$blue-grey: #bfcce4;
-
-/** GREEN **/
-$green: #7fd771;
-$green-light: #a6e191;
-
-/** WHITE **/
-$white: #ffffff;
-
-/** GREY **/
-$grey-bright: #e0e0e0;
-$soft-grey: #a0a0a0;
-$grey-dark: #7b7b7b;
-$grey-linear-gradient-background: linear-gradient(
- 180deg,
- #323339 0%,
- #25262b 100%
-);
-
-/** App colors **/
-$accordion-active-background: #34353a;
-
-$elec-color: #d87b39;
-$elec-color-40: rgba(216, 123, 57, 0.4);
-$elec-off-color: #5d3d2a;
-$elec-compare-color: #e2bca1;
-$elec-compare-off-color: #795c47;
-
-$gas-color: #45d1b8;
-$gas-color-40: rgba(69, 209, 184, 0.4);
-$gas-off-color: #184940;
-$gas-compare-color: #a8f7e9;
-$gas-compare-off-color: #597773;
-
-$water-color: #3a98ec;
-$water-color-40: rgba(58, 152, 236, 0.4);
-$water-off-color: #20415e;
-$water-compare-color: #abd4fa;
-$water-compare-off-color: #4d5c6e;
-
-$multi-color: #e3b82a;
-$multi-off-color: #705d1d;
-$multi-compare-color: #ffd597;
-$multi-compare-off-color: #7d6a4e;
-
-/** TABS GRADIENT **/
-$multi-color-radial-gradient-transparent: radial-gradient(
- circle,
- #e3b82a 0%,
- rgba(255, 255, 255, 0) 100%
-);
-$elec-color-radial-gradient-transparent: radial-gradient(
- circle,
- #d87b39 0%,
- rgba(255, 255, 255, 0) 100%
-);
-$water-color-radial-gradient-transparent: radial-gradient(
- circle,
- #3a98ec 0%,
- rgba(255, 255, 255, 0) 100%
-);
-$gas-color-radial-gradient-transparent: radial-gradient(
- circle,
- #45d1b8 0%,
- rgba(255, 255, 255, 0) 100%
-);
-
-$multi-color-radial-gradient: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(226, 137, 4, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #f1c017;
-$elec-color-radial-gradient: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(158, 67, 2, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #d87b39;
-$gas-color-radial-gradient: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(4, 106, 88, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #45d1b8;
-$water-color-radial-gradient: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(2, 93, 174, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #3a98ec;
-
-/** SCROLLBAR **/
-
-$scrollbar-track: #3e4045;
-$scrollbar-thumb: #6f7074;
+/** BLACK **/
+$dark: #242633;
+$dark-2: #1b1c22;
+$dark-light: #25262b;
+$dark-light-2: #121212;
+$dark-3: #181819;
+$dark-background: radial-gradient(
+ 60.65% 30.62% at 50% 3.13%,
+ #2a2b30 0%,
+ #1b1c22 100%
+);
+
+/** RED **/
+$red-primary: #d25959;
+
+/** YELLOW **/
+$gold: #b2901b;
+$gold-40: rgba(227, 184, 42, 0.4);
+$gold-light: #deaf0e;
+$gold-shadow: #e3b82a;
+
+/** BLUE **/
+$blue: #58ffff;
+$blue-40: #58ffff40;
+$blue-light: #61f0f2;
+$blue-shadowed: rgba(58, 152, 236, 0.4);
+$blue-gradient: linear-gradient(180deg, #61f0f2 0%, #48c2c4 100%);
+$blue-radial-gradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(1, 153, 163, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ $blue;
+$blue-radial-gradient-transparent: radial-gradient(
+ circle,
+ $blue 0%,
+ rgba(255, 255, 255, 0) 100%
+);
+$blue-grey: #bfcce4;
+
+/** GREEN **/
+$green: #7fd771;
+$green-light: #a6e191;
+
+/** WHITE **/
+$white: #ffffff;
+
+/** GREY **/
+$grey-bright: #e0e0e0;
+$soft-grey: #a0a0a0;
+$grey-dark: #7b7b7b;
+$grey-linear-gradient-background: linear-gradient(
+ 180deg,
+ #323339 0%,
+ #25262b 100%
+);
+
+/** App colors **/
+$elec-color: #d87b39;
+$elec-color-40: rgba(216, 123, 57, 0.4);
+$elec-off-color: #5d3d2a;
+$elec-compare-color: #e2bca1;
+$elec-compare-off-color: #795c47;
+
+$gas-color: #45d1b8;
+$gas-color-40: rgba(69, 209, 184, 0.4);
+$gas-off-color: #184940;
+$gas-compare-color: #a8f7e9;
+$gas-compare-off-color: #597773;
+
+$water-color: #3a98ec;
+$water-color-40: rgba(58, 152, 236, 0.4);
+$water-off-color: #20415e;
+$water-compare-color: #abd4fa;
+$water-compare-off-color: #4d5c6e;
+
+$multi-color: #e3b82a;
+$multi-off-color: #705d1d;
+$multi-compare-color: #ffd597;
+$multi-compare-off-color: #7d6a4e;
+
+/** TABS GRADIENT **/
+$multi-color-radial-gradient-transparent: radial-gradient(
+ circle,
+ #e3b82a 0%,
+ rgba(255, 255, 255, 0) 100%
+);
+$elec-color-radial-gradient-transparent: radial-gradient(
+ circle,
+ #d87b39 0%,
+ rgba(255, 255, 255, 0) 100%
+);
+$water-color-radial-gradient-transparent: radial-gradient(
+ circle,
+ #3a98ec 0%,
+ rgba(255, 255, 255, 0) 100%
+);
+$gas-color-radial-gradient-transparent: radial-gradient(
+ circle,
+ #45d1b8 0%,
+ rgba(255, 255, 255, 0) 100%
+);
+
+$multi-color-radial-gradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(226, 137, 4, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #f1c017;
+$elec-color-radial-gradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(158, 67, 2, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #d87b39;
+$gas-color-radial-gradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(4, 106, 88, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #45d1b8;
+$water-color-radial-gradient: radial-gradient(
+ 105.25% 64.58% at 49.68% 70.83%,
+ rgba(2, 93, 174, 0.5) 0%,
+ rgba(255, 255, 255, 0) 100%
+ ),
+ #3a98ec;
+
+/** SCROLLBAR **/
+
+$scrollbar-track: #3e4045;
+$scrollbar-thumb: #6f7074;
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index 4f5d3fedb659bfe7a34fa4efdee17bc218d4b2d5..715777be70b05cc33b124a00b0bceef556995f87 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -17,11 +17,16 @@ div.expansion-panel-root{
}
div.expansion-panel-summary{
padding: 0.25rem 1.2rem;
+ min-height: 4rem;
&.Mui-expanded {
- min-height: 3rem;
+ min-height: 4rem;
+ &.small{
+ min-height: 3rem;
+ }
}
&.small{
padding: 0 1.2rem;
+ min-height: 3rem;
}
&.bold-text{
font-weight: bold;