diff --git a/src/components/Connection/ConnectionFormLogin.tsx b/src/components/Connection/ConnectionFormLogin.tsx
index 8829530c155058564085324d5ae071c5039eaf66..c0b32eabb408dd79e2bcf0d6d3c086e82bb4f51f 100644
--- a/src/components/Connection/ConnectionFormLogin.tsx
+++ b/src/components/Connection/ConnectionFormLogin.tsx
@@ -154,7 +154,7 @@ const ConnectionFormLogin: React.FC<ConnectionFormLoginProps> = ({
className="form"
onSubmit={(e: React.FormEvent<HTMLFormElement>) => handleSubmit(e)}
>
- <p className="info-provider text-16-normal">
+ <p className="form-info-provider text-16-normal">
{t('auth.' + `${konnectorSlug}` + '.connect.info')}
</p>
diff --git a/src/components/Connection/ConnectionFormOAuth.tsx b/src/components/Connection/ConnectionFormOAuth.tsx
index 1db3979710bdf66063cdd111839624e01cc54e94..84ccbd6302f34171b7a517796bbe42d0efd6c949 100644
--- a/src/components/Connection/ConnectionFormOAuth.tsx
+++ b/src/components/Connection/ConnectionFormOAuth.tsx
@@ -72,7 +72,7 @@ const ConnectionFormOAuth: React.FC<ConnectionFormOAuthProps> = ({
return (
<div className="koauthform">
- <p className="info-provider text-16-normal">
+ <p className="koauthform-info-provider text-16-normal">
{t('auth.' + `${konnectorSlug}` + '.connect.info')}
</p>
<div className="koauthform-button">
diff --git a/src/components/Connection/ConnectionResult.tsx b/src/components/Connection/ConnectionResult.tsx
index fdab666cb4de2ab2a9e56b01df2f4acd80709ef3..9528626b119ff27292694de379fcd79e33781b1f 100644
--- a/src/components/Connection/ConnectionResult.tsx
+++ b/src/components/Connection/ConnectionResult.tsx
@@ -79,6 +79,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
fluidStatus.connection.triggerState.status === 'errored' &&
fluidStatus.connection.triggerState.last_error
) {
+ setStatus('errored')
setKonnectorError(
getKonnectorUpdateError(fluidStatus.connection.triggerState.last_error)
)
@@ -86,14 +87,10 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
}, [fluidStatus.connection.triggerState])
return (
- <div className="accordion-update-result">
- <div
- className={
- status === 'errored' ? 'accordion-update-errored' : 'accordion-update'
- }
- >
+ <div className="connection-update-result">
+ <div className={status === 'errored' ? 'connection-update-errored' : ''}>
{status === 'errored' && (
- <div className="accordion-caption-errored warning-white text-16-normal">
+ <div className="connection-caption-errored warning-white text-16-normal">
<StyledIcon
icon={warningWhite}
size={36}
@@ -101,7 +98,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
/>
<div className="text-16-normal">
{t(`konnector_form.${konnectorError}`)}
- <div className="accordion-caption">
+ <div className="connection-caption">
{t('konnector_form.label_updated_at')}
</div>
<div className="text-16-bold">{lastExecutionDate}</div>
@@ -110,7 +107,7 @@ const ConnectionResult: React.FC<ConnectionResultProps> = ({
)}
{status !== 'errored' && (
<div>
- <div className="accordion-caption text-16-normal">
+ <div className="connection-caption text-16-normal">
{t('konnector_form.label_updated_at')}
</div>
<div className="text-16-bold">{lastExecutionDate}</div>
diff --git a/src/components/Connection/connectionFormLogin.scss b/src/components/Connection/connectionFormLogin.scss
index 4fd0f76f7b89a5e9e8a943c40ebe952aefffca2e..67ea4e5e07d329b7103e49a70d0dc69ed3bdd610 100644
--- a/src/components/Connection/connectionFormLogin.scss
+++ b/src/components/Connection/connectionFormLogin.scss
@@ -1,78 +1,83 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-// KonnectorLoginForm
-.kloginauthform {
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
- .kloginauthform-text {
- color: $grey-bright;
- padding-top: 1rem;
- }
- .kloginauthform-button {
- margin-bottom: 1rem;
- button.btn-highlight {
- padding: 0.5rem;
- }
- }
-}
-
-.form {
- padding: 1rem;
- @media #{$large-phone} {
- padding: 1rem;
- }
- label {
- font-style: normal;
- font-weight: normal;
- font-size: 1rem;
- color: $grey-bright;
- margin-top: 0rem;
- }
- .form-input {
- background: rgba(0, 0, 0, 0.3);
- border: 1px solid #7b7b7b;
- border-radius: 4px;
- color: $grey-bright;
- padding: 0 5%;
- outline-offset: -1px;
- &.--error {
- border: 1px solid $red-primary;
- }
- }
- .form-input:focus {
- outline: none;
- border: 1px solid $gold-shadow;
- }
- .form-group {
- display: flex;
- flex-direction: column;
- margin: 1.5rem 0 0 0;
- .form-trailing-icon {
- float: right;
- position: relative;
- margin-top: -48px;
- margin-right: 15px;
- }
- }
- .form-control {
- height: 3rem;
- @media #{$large-phone} {
- max-width: 100vw;
- }
- }
- .form-message {
- color: $red-primary;
- min-height: 1.25rem;
- margin-top: 0.75rem;
- }
- button.btn-highlight {
- margin-top: 0.75rem;
- }
- ::placeholder {
- color: $grey-bright;
- }
-}
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+// KonnectorLoginForm
+.kloginauthform {
+ button.btn-secondary-positive {
+ span:first-child {
+ color: $grey-bright;
+ }
+ }
+ .kloginauthform-text {
+ color: $grey-bright;
+ padding-top: 1rem;
+ }
+ .kloginauthform-button {
+ margin-bottom: 1rem;
+ button.btn-highlight {
+ padding: 0.5rem;
+ }
+ }
+}
+
+.form {
+ margin: 0 1.3rem 1rem;
+ @media #{$large-phone} {
+ margin: 0 0 0.25rem;
+ }
+ .form-info-provider{
+ padding: 0;
+ margin: 0;
+ color: $grey-bright;
+ }
+ label {
+ font-style: normal;
+ font-weight: normal;
+ font-size: 1rem;
+ color: $grey-bright;
+ margin-top: 0rem;
+ }
+ .form-input {
+ background: rgba(0, 0, 0, 0.3);
+ border: 1px solid #7b7b7b;
+ border-radius: 4px;
+ color: $grey-bright;
+ padding: 0 5%;
+ outline-offset: -1px;
+ &.--error {
+ border: 1px solid $red-primary;
+ }
+ }
+ .form-input:focus {
+ outline: none;
+ border: 1px solid $gold-shadow;
+ }
+ .form-group {
+ display: flex;
+ flex-direction: column;
+ margin: 1.5rem 0 0 0;
+ .form-trailing-icon {
+ float: right;
+ position: relative;
+ margin-top: -48px;
+ margin-right: 15px;
+ }
+ }
+ .form-control {
+ height: 3rem;
+ @media #{$large-phone} {
+ max-width: 100vw;
+ }
+ }
+ .form-message {
+ color: $red-primary;
+ min-height: 1.25rem;
+ margin-top: 0.75rem;
+ }
+ button.btn-highlight {
+ margin-top: 0.75rem;
+ }
+ ::placeholder {
+ color: $grey-bright;
+ }
+}
diff --git a/src/components/Connection/connectionFormOAuth.scss b/src/components/Connection/connectionFormOAuth.scss
index 3cf9e7b81a8b7e51a3a7c188a69e05c060057ead..b3e52680d436a1b91eba518911ac6233b419844b 100644
--- a/src/components/Connection/connectionFormOAuth.scss
+++ b/src/components/Connection/connectionFormOAuth.scss
@@ -1,26 +1,28 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.koauthform {
- margin: 0 1.5rem;
- padding: 0 1rem;
- @media #{$large-phone} {
- margin: 0;
- padding: 0 1rem;
- }
- button.btn-secondary-positive {
- span:first-child {
- color: $grey-bright;
- }
- }
- .koauthform-text {
- color: $grey-bright;
- padding-top: 1rem;
- }
- .koauthform-button {
- margin-bottom: 1rem;
- button.btn-highlight {
- padding: 0.5rem;
- }
- }
-}
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.koauthform {
+ margin: 0 1.3rem 1rem;
+ @media #{$large-phone} {
+ margin: 0 0 0.25rem;
+ }
+ .koauthform-info-provider {
+ padding: 0;
+ margin: 0;
+ color: $grey-bright;
+ }
+ button.btn-secondary-positive {
+ span:first-child {
+ color: $grey-bright;
+ }
+ }
+ .koauthform-text {
+ color: $grey-bright;
+ padding-top: 0.5rem;
+ }
+ .koauthform-button {
+ button.btn-highlight {
+ padding: 0.5rem;
+ }
+ }
+}
diff --git a/src/components/Connection/connectionResult.scss b/src/components/Connection/connectionResult.scss
index c898f34ec1c0ea9499939efd526a78f99905546e..6c37d89c67251f6bb7fb995bb6504b27c7dda219 100644
--- a/src/components/Connection/connectionResult.scss
+++ b/src/components/Connection/connectionResult.scss
@@ -1,69 +1,51 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.accordion-update-result {
- margin: 1rem 0;
- @media #{$large-phone} {
- margin: 0.5rem 0;
- }
-}
-.accordion-update {
- flex: 2;
- padding: 0.5rem 1rem;
-}
-.accordion-update-errored {
- padding: 0.5rem 1rem;
- background-color: $red-primary;
-}
-.accordion-state {
- flex: 2;
- margin-right: 1rem;
-}
-.accordion-frequency {
- flex: 1;
- padding: 0 1rem;
-}
-.accordion-caption {
- color: $grey-bright;
- text-transform: lowercase;
- &::first-letter {
- text-transform: uppercase;
- }
-}
-.accordion-caption-errored {
- display: flex;
- align-items: center;
- color: $grey-bright;
-}
-.warning-white {
- margin-right: 1rem;
-}
-.warning-icon {
- margin-right: 1rem;
-}
-.accordion-content {
- overflow: hidden;
- transition: max-height 0.6s ease;
- .info-provider {
- padding: 0;
- color: $grey-bright;
- margin-bottom: 0;
- }
-}
-.inline-buttons {
- display: flex;
- flex-flow: row nowrap;
- padding: 0 2rem;
- @media #{$large-phone} {
- padding: 0 1rem;
- }
- button.btn-secondary-positive {
- margin-right: 0.25rem;
- span:first-child {
- color: $red-primary !important;
- }
- }
- button.btn-highlight {
- margin-left: 0.25rem;
- }
-}
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.connection-update-result {
+ flex: 1;
+ margin: 0 1.3rem 1rem;
+ @media #{$tablet} {
+ margin: 0 0 0.25rem;
+ }
+ .connection-update-errored {
+ background-color: $red-primary;
+ margin: 0 -2.5rem;
+ padding: 0 2.5rem;
+ @media #{$tablet} {
+ margin: 0 -1.2rem;
+ padding: 0 1.2rem;
+ }
+ .connection-caption-errored {
+ display: flex;
+ align-items: center;
+ color: $grey-bright;
+ }
+ .warning-icon {
+ margin-right: 1rem;
+ }
+ .warning-white {
+ margin-right: 1rem;
+ }
+ }
+ .connection-caption {
+ color: $grey-bright;
+ text-transform: lowercase;
+ &::first-letter {
+ text-transform: uppercase;
+ }
+ }
+}
+
+.inline-buttons {
+ display: flex;
+ flex-flow: row nowrap;
+ button.btn-secondary-positive {
+ margin-right: 0.25rem;
+ span:first-child {
+ color: $red-primary !important;
+ }
+ }
+ button.btn-highlight {
+ margin-left: 0.25rem;
+ }
+}
diff --git a/src/components/FAQ/FAQContent.spec.tsx b/src/components/FAQ/FAQContent.spec.tsx
index 23a86fbc83cc1e12f72430ffec97ebe3b8143958..b00bdce8c3a12a3556ff3461324f32c2d2cf2621 100644
--- a/src/components/FAQ/FAQContent.spec.tsx
+++ b/src/components/FAQ/FAQContent.spec.tsx
@@ -1,11 +1,21 @@
import React from 'react'
import { mount } from 'enzyme'
import FAQContent from 'components/FAQ/FAQContent'
-import MuiExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
describe('FAQContent', () => {
it('should render all the FAQContent component', () => {
const wrapper = mount(<FAQContent />)
- expect(wrapper.find(MuiExpansionPanel)).toHaveLength(16)
+ expect(wrapper.find(ExpansionPanel)).toHaveLength(16)
})
})
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
index 14e0486169326602c1e2f66ca13d725ba35f6a0c..b65429a99f881c2ee77feb6b217f52749d024004 100644
--- a/src/components/FAQ/FAQContent.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -1,9 +1,10 @@
import React, { useState } from 'react'
import './faqContent.scss'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import FAQJSon from 'constants/faq.json'
-import MuiExpansionPanel from '@material-ui/core/ExpansionPanel'
-import MuiExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import MuiExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import ChevronOffIcon from 'assets/icons/ico/chevron-off.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
@@ -43,6 +44,7 @@ const formatDetails = (details: Array<string>) => {
}
const FAQContent: React.FC = () => {
+ const { t } = useI18n()
const [expanded, setExpanded] = useState<string | false>(false)
const handleChange = (panel: string) => (
@@ -61,7 +63,7 @@ const FAQContent: React.FC = () => {
<div className="text-16-normal-uppercase">{faq.section}</div>
{faq.questions.map((question, index2) => {
return (
- <MuiExpansionPanel
+ <ExpansionPanel
key={index2}
expanded={expanded === `panel${index}_${index2}`}
onChange={handleChange(`panel${index}_${index2}`)}
@@ -69,22 +71,24 @@ const FAQContent: React.FC = () => {
root: 'expansion-panel-root',
}}
>
- <MuiExpansionPanelSummary
+ <ExpansionPanelSummary
+ aria-label={t('faq.accessibility.button_toogle_detail')}
expandIcon={<StyledIcon icon={ChevronOffIcon} />}
classes={{
- root: 'expansion-panel-summary',
+ root: 'expansion-panel-summary small bold-text',
+ content: 'expansion-panel-content',
}}
>
{question.summary}
- </MuiExpansionPanelSummary>
- <MuiExpansionPanelDetails
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails
classes={{
root: 'expansion-panel-details',
}}
>
<div>{formatDetails(question.details)}</div>
- </MuiExpansionPanelDetails>
- </MuiExpansionPanel>
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
)
})}
</div>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index 9020e296f3727a8089cbc01fa8083bde8d05287b..25cc8c6eeb74c20f7c334030d7de20f3dde306bd 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import { useDispatch, useSelector } from 'react-redux'
@@ -29,9 +29,10 @@ import InitializationService from 'services/initialization.service'
import ChallengeService from 'services/challenge.service'
import chevronDown from 'assets/icons/ico/chevron-down.svg'
-import chevronUp from 'assets/icons/ico/chevron-up.svg'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from '@material-ui/core/IconButton'
+import ExpansionPanel from '@material-ui/core/ExpansionPanel'
+import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
+import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
import failurePicto from 'assets/png/picto/picto-failure.png'
import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
import ConnectionForm from 'components/Connection/ConnectionForm'
@@ -80,12 +81,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
(state: AppStore) => state.ecolyo.challenge
)
- const content = useRef<HTMLDivElement>(null)
- const scrollHeight =
- content.current && content.current.scrollHeight
- ? content.current.scrollHeight
- : 0
-
const iconType = getPicto(fluidStatus.fluidType)
const iconAddType = isParam
? getParamPicto(fluidStatus.fluidType)
@@ -248,91 +243,67 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
return (
<>
- <div
- className={classNames('accordion', {
- ['--errored']:
+ <ExpansionPanel
+ expanded={active}
+ onChange={toggleAccordion}
+ classes={{
+ root: `expansion-panel-root ${
fluidStatus.status === FluidState.ERROR ||
- fluidStatus.status === FluidState.ERROR_LOGIN_FAILED,
- ['active']: active,
- })}
- id={
- connectParam &&
- connectParam.toString() === fluidStatus.fluidType.toString()
- ? `${fluidStatus.fluidType.toString()}`
- : ''
- }
+ fluidStatus.status === FluidState.ERROR_LOGIN_FAILED
+ ? 'red-border'
+ : ''
+ }`,
+ }}
>
- <div>
- <div
- className={classNames('accordion-header', {
- ['active']: active,
- })}
- onClick={toggleAccordion}
- >
- <div className="accordion-icon">
- {fluidStatus.connection.account &&
- fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED ? (
- <Icon className="icon" icon={iconType} size={49} />
- ) : (
- <Icon className="icon" icon={iconAddType} size={49} />
- )}
- </div>
- <div className="state-picto">
- {fluidStatus.status === FluidState.ERROR ? (
- <img className="state-icon" src={failurePicto}></img>
- ) : null}
- </div>
- <div className="accordion-info">
- <div
- className={classNames('accordion-title', {
- [`${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}-connected text-18-bold`]:
- fluidStatus.status !== FluidState.NOT_CONNECTED,
- })}
- >
- {fluidStatus.connection.account &&
- fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED
- ? t('FLUID.' + FluidType[fluidStatus.fluidType] + '.LABEL')
- : t(
- `konnector_options.label_connect_to_${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}`
- )}
- </div>
- </div>
- <IconButton
- aria-label={
- active
- ? t(
- `konnector_options.accessibility.button_hide_detail_${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}`
- )
- : t(
- `konnector_options.accessibility.button_show_detail_${FluidType[
- fluidStatus.fluidType
- ].toLowerCase()}`
- )
- }
- >
- <Icon icon={active ? chevronUp : chevronDown} size={16} />
- </IconButton>
+ <ExpansionPanelSummary
+ aria-label={t(
+ `konnector_options.accessibility.button_toogle_detail_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
+ )}
+ expandIcon={<Icon icon={chevronDown} size={16} />}
+ classes={{
+ root: 'expansion-panel-summary',
+ content: 'expansion-panel-content',
+ }}
+ >
+ <div className="konnector-icon">
+ {fluidStatus.connection.account &&
+ fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED ? (
+ <Icon icon={iconType} size={49} />
+ ) : (
+ <Icon icon={iconAddType} size={49} />
+ )}
+ {fluidStatus.status === FluidState.ERROR ? (
+ <img className="konnector-state-picto" src={failurePicto}></img>
+ ) : null}
</div>
-
<div
- ref={content}
- style={{
- maxHeight: `${active ? scrollHeight : 0}px`,
- }}
- className={classNames('accordion-content', {
- ['active']: active,
+ className={classNames('konnector-title', {
+ [`${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}-connected text-18-bold`]:
+ fluidStatus.status !== FluidState.NOT_CONNECTED,
})}
>
- {getConnectionCard()}
+ {fluidStatus.connection.account &&
+ fluidStatus.status !== FluidState.ERROR_LOGIN_FAILED
+ ? t('FLUID.' + FluidType[fluidStatus.fluidType] + '.LABEL')
+ : t(
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatus.fluidType
+ ].toLowerCase()}`
+ )}
</div>
- </div>
- </div>
+ </ExpansionPanelSummary>
+ <ExpansionPanelDetails
+ classes={{
+ root: 'expansion-panel-details',
+ }}
+ >
+ {getConnectionCard()}
+ </ExpansionPanelDetails>
+ </ExpansionPanel>
<KonnectorModal
open={openModal}
isUpdating={isUpdating}
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index e6027b64ac870a6600a5d23cb109aa6d4c773dc2..8d2c8b725dc9a0180d27f0331e2e0d7fa00d1ade 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -23,7 +23,7 @@ const KonnectorViewerList: React.FC<KonnectorViewerListProps> = ({
<div className="kv-header text-16-normal-uppercase">
{t('konnector_form.title')}
</div>
- <div className="accordion-container">
+ <div>
{fluidStatus.map((fluidStatusItem: FluidStatus, index: number) => {
return (
<KonnectorViewerCard
diff --git a/src/components/Konnector/konnectorViewerCard.scss b/src/components/Konnector/konnectorViewerCard.scss
index 871af1c5451b90cdee907396e05acb0d9a9c7eb7..03a2d2a76270da208397ede4f6ce6eccdb77f3f9 100644
--- a/src/components/Konnector/konnectorViewerCard.scss
+++ b/src/components/Konnector/konnectorViewerCard.scss
@@ -1,64 +1,31 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.accordion {
- display: flex;
- flex-direction: column;
- color: $white;
- padding: 1rem 0;
- margin-bottom: 2vh;
- border-radius: 4px;
- background: $grey-linear-gradient-background;
- box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
- transition: background-color 0.6s ease;
- overflow: hidden;
- &.active {
- background-color: $accordion-active-background;
- }
-
- .accordion-header {
- display: flex;
- align-items: center;
- border: none;
- outline: none;
- padding: 0 1rem;
- &:hover {
- cursor: pointer;
- }
- .accordion-icon {
- margin-right: 1rem;
- @media #{$large-phone} {
- max-width: 16vw;
- }
- }
- .accordion-info {
- flex: 3;
- color: $grey-bright;
- @media #{$large-phone} {
- display: block;
- }
- .accordion-title {
- flex: 1;
- &.electricity-connected {
- @extend .accordion-title;
- color: $elec-color;
- }
- &.gas-connected {
- @extend .accordion-title;
- color: $gas-color;
- }
- &.water-connected {
- @extend .accordion-title;
- color: $water-color;
- }
- }
- }
- .state-picto {
- position: absolute;
- display: flex;
- }
- }
-}
-.--errored {
- border: solid 1px $red-primary;
-}
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.konnector-icon{
+ margin-right: 1rem;
+ position: relative;
+ @media #{$large-phone} {
+ max-width: 16vw;
+ }
+ .konnector-state-picto {
+ position: absolute;
+ top: 0;
+ right: -13px;
+ }
+}
+
+.konnector-title{
+ color: $grey-bright;
+ &.electricity-connected {
+ @extend .konnector-title;
+ color: $elec-color;
+ }
+ &.gas-connected {
+ @extend .konnector-title;
+ color: $gas-color;
+ }
+ &.water-connected {
+ @extend .konnector-title;
+ color: $water-color;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
index 1f61fae3c1c334978cc2562703fb34cfd4d36841..9b94c867f8953202bf117a8fadc361f62779bf03 100644
--- a/src/components/Konnector/konnectorViewerList.scss
+++ b/src/components/Konnector/konnectorViewerList.scss
@@ -1,32 +1,28 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.kv-root {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 0 1.5rem;
- .kv-content {
- width: 45.75rem;
- @media #{$large-phone} {
- width: 100%;
- }
- .kv-header {
- margin-top: 2.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- .accordion-container {
- display: flex;
- flex-direction: column;
- }
- }
-}
-.state-icon {
- height: 22px;
- width: 22px;
- position: absolute;
- bottom: 8px;
- left: 30px;
-}
+@import 'src/styles/base/color';
+@import 'src/styles/base/breakpoint';
+
+.kv-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0 1.5rem;
+ .kv-content {
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .kv-header {
+ margin-top: 2.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
+ }
+ }
+}
+.state-icon {
+ height: 22px;
+ width: 22px;
+ position: absolute;
+ bottom: 8px;
+ left: 30px;
+}
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index 06036eb0f157d8fba42dc3436769da73f899e2e8..0e9c1f13cde1f1cd92479e017c5d4d764ad806e1 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,182 @@ 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={t(
+ 'profile_type.accessibility.button_toogle_detail_profile'
+ )}
+ 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 +242,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..35aa6afa5cf8fc4baa27e88c1adfbd3ee127f280 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.3rem 1rem;
+ @media #{$large-phone} {
+ margin: 0 0 0.25rem;
+ }
}
.fields {
align-items: flex-start;
- margin: 0px 1rem;
padding: 8px 0px;
width: 100%;
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 113c0cf6c0a24685abceb1061bd51d47c3a35fd3..25a26f896c6d5ed655dda5a9c40bb4d7bf9f6672 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -340,7 +340,10 @@
},
"faq": {
"title_faq": "Foire aux questions",
- "read_faq": "Lire la FAQ"
+ "read_faq": "Lire la FAQ",
+ "accessibility": {
+ "button_toogle_detail": "Afficher ou masquer le détail de la question"
+ }
},
"feedback": {
"title": "Partagez-nous vos retours",
@@ -396,12 +399,9 @@
"label_connect_to_water": "Se connecter à l'eau",
"label_connect_to_gas": "Se connecter au gaz",
"accessibility": {
- "button_show_detail_electricity": "Afficher le détail de la connexion a l'électricité",
- "button_show_detail_water": "Afficher le détail de la connexion à l'eau",
- "button_show_detail_gas": "Afficher le détail de la connexion au gaz",
- "button_hide_detail_electricity": "Afficher le détail de la connexion a l'électricité",
- "button_hide_detail_water": "Afficher le détail de la connexion à l'eau",
- "button_hide_detail_gas": "Afficher le détail de la connexion au gaz"
+ "button_toogle_detail_electricity": "Afficher ou masquer le détail de la connexion a l'électricité",
+ "button_toogle_detail_water": "Afficher ou masquer le détail de la connexion à l'eau",
+ "button_toogle_detail_gas": "Afficher ou masquer le détail de la connexion au gaz"
}
},
"konnector_modal": {
@@ -640,6 +640,7 @@
"button_next": "Aller à la section suivante",
"button_previous": "Retour à la section précédente",
"button_update_profile": "Ouvrir la page de mise à jour du profil",
+ "button_toogle_detail_profile": "Afficher ou masquer le détail du profil",
"button_validate": "Valider"
}
},
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index f5dbb00a6c9adb703b22ef02e4b79a0eaf803d2b..fb1a2c531f130456e126442cb295b8c81a2fd35e 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -1,134 +1,133 @@
-/** 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%
+);
+$grey-focus: rgba(123, 123, 123, 0.4);
+
+/** 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 a39e1af5ed15675d70ac7df4a5627ac847e7621e..fc97f5522cb6d38c761d68c0fa563836126b948a 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -1,15 +1,51 @@
@import '../base/color';
div.expansion-panel-root{
- margin: 1rem 0;
+ margin: 1.2rem 0;
color: $grey-bright;
background: $grey-linear-gradient-background;
border-radius: 4px;
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
+ transition: background-color 0.6s ease;
+ box-sizing: border-box;
+ &.Mui-expanded:first-child {
+ margin: 1.2rem 0;
+ }
+ &.Mui-expanded:last-child {
+ margin: 1.2rem 0;
+ }
+ &.red-border {
+ border: 1px solid $red-primary;
+ }
}
div.expansion-panel-summary{
- font-weight: bold;
- padding: 0 1.2rem;
+ padding: 0.25rem 1.2rem;
+ min-height: 4rem;
+ &.Mui-focused {
+ border-radius: 4px;
+ background-color: $grey-focus;
+ }
+ &.Mui-expanded {
+ min-height: 4rem;
+ &.small{
+ min-height: 3rem;
+ }
+ }
+ &.small{
+ padding: 0 1.2rem;
+ min-height: 3rem;
+ }
+ &.bold-text{
+ font-weight: bold;
+ }
+}
+div.expansion-panel-content{
+ display: flex;
+ align-items: center;
+ &.Mui-expanded {
+ margin: 0.75rem 0;
+ }
}
div.expansion-panel-details{
- padding: 1.2rem;
+ padding: 0 1.2rem 1.2rem;
}
\ No newline at end of file