diff --git a/src/assets/icons/visu/multi-icon.svg b/src/assets/icons/visu/multi-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8ffc96bb085c5d70cbfcdf648f9b70edf5a11cbd
--- /dev/null
+++ b/src/assets/icons/visu/multi-icon.svg
@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="26.0004" cy="26.0004" r="24.5385" fill="#121212" stroke="#E3B82A"/>
+<path d="M16.3848 23.1379H18.5857C18.8394 21.8115 19.2421 20.6156 19.7937 19.5501C20.3453 18.4738 21.0183 17.5605 21.8126 16.8103C22.6069 16.0601 23.506 15.4839 24.5099 15.0816C25.5139 14.6685 26.606 14.4619 27.7865 14.4619C29.32 14.4619 30.6328 14.7555 31.725 15.3426C32.8171 15.9188 33.7328 16.7016 34.472 17.691L33.0323 19.2239C32.9219 19.3435 32.8061 19.4523 32.6848 19.5501C32.5634 19.6371 32.3924 19.6806 32.1718 19.6806C32.0173 19.6806 31.8739 19.6371 31.7415 19.5501C31.6202 19.4631 31.4823 19.3544 31.3278 19.2239C31.1734 19.0935 31.0024 18.9521 30.8148 18.7999C30.6273 18.6477 30.4011 18.5064 30.1363 18.3759C29.8826 18.2454 29.5792 18.1367 29.2262 18.0497C28.8732 17.9628 28.4539 17.9193 27.9685 17.9193C26.6667 17.9193 25.569 18.3596 24.6754 19.2403C23.7818 20.1209 23.1585 21.4201 22.8055 23.1379H31.1127V24.3774C31.1127 24.6274 31.0079 24.8612 30.7983 25.0786C30.5997 25.2852 30.3239 25.3885 29.9709 25.3885H22.5242C22.5131 25.5733 22.5076 25.7581 22.5076 25.943C22.5076 26.1169 22.5076 26.2963 22.5076 26.4811C22.5076 26.6116 22.5076 26.7421 22.5076 26.8725C22.5076 27.003 22.5131 27.128 22.5242 27.2476H29.5406V28.4708C29.5406 28.7208 29.4358 28.9546 29.2262 29.172C29.0166 29.3786 28.7408 29.4819 28.3988 29.4819H22.7227C23.0316 31.3519 23.6219 32.749 24.4934 33.6731C25.376 34.5864 26.4681 35.043 27.7699 35.043C28.5643 35.043 29.1986 34.9397 29.673 34.7332C30.1584 34.5157 30.55 34.2765 30.8479 34.0156C31.1568 33.7547 31.4105 33.5209 31.6091 33.3143C31.8187 33.0969 32.0449 32.9882 32.2876 32.9882C32.409 32.9882 32.5138 33.0099 32.602 33.0534C32.6903 33.086 32.784 33.1567 32.8833 33.2654L34.654 34.8636C33.8817 36.0378 32.8999 36.9402 31.7084 37.5708C30.5169 38.1905 29.1324 38.5004 27.5548 38.5004C26.253 38.5004 25.0836 38.2884 24.0466 37.8644C23.0206 37.4295 22.127 36.8206 21.3658 36.0378C20.6046 35.255 19.9812 34.3091 19.4958 33.2002C19.0214 32.0912 18.685 30.8518 18.4864 29.4819H16.3848V27.2476H18.3044C18.2933 27.128 18.2878 27.003 18.2878 26.8725C18.2878 26.7421 18.2878 26.6116 18.2878 26.4811C18.2878 26.2963 18.2878 26.1169 18.2878 25.943C18.2878 25.7581 18.2933 25.5733 18.3044 25.3885H16.3848V23.1379Z" fill="#E3B82A"/>
+</svg>
diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index 21c067240a86a5c054db2b6f26bc15010928713f..0cb6a68c5d3a4a1db2e5ac4e52fa203790726220 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -50,13 +50,6 @@ const MonthlyAnalysis: React.FC = () => {
const fluidConfig = configService.getFluidConfig()
const timeStep = TimeStep.MONTH
- const handleClickMove = useCallback(
- (increment: number) => {
- const newDate = reportDate.plus({ month: increment })
- setReportDate(newDate)
- },
- [reportDate]
- )
const goToForm = useCallback(() => {
history.push('/profileType')
}, [history])
@@ -143,7 +136,6 @@ const MonthlyAnalysis: React.FC = () => {
performanceIndicator={aggregatedPerformanceIndicators}
timeStep={timeStep}
fluidLackOfData={fluidLackOfData}
- isHome={false}
/>
<div>
<div className="analysis-header text-16-normal-uppercase">
diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx
index 1d6049f4bf11b04a025fdb66dc36303bf5536d92..0df30688e1e56ade2891b54214da0f5285ef9939 100644
--- a/src/components/CommonKit/Card/StyledCard.tsx
+++ b/src/components/CommonKit/Card/StyledCard.tsx
@@ -18,19 +18,24 @@ const CardBase = withStyles({
const CardElec = withStyles({
root: {
- border: '1px solid var(--elecColor40)',
+ border: '1px solid var(--elecColor)',
},
})(CardBase)
const CardWater = withStyles({
root: {
- border: '1px solid var(--waterColor40)',
+ border: '1px solid var(--waterColor)',
},
})(CardBase)
const CardGas = withStyles({
root: {
- border: '1px solid var(--gasColor40)',
+ border: '1px solid var(--gasColor)',
+ },
+})(CardBase)
+const CardMulti = withStyles({
+ root: {
+ border: '1px solid var(--multiColor)',
},
})(CardBase)
@@ -74,6 +79,12 @@ const StyledCard: React.ComponentType<StyledCardProps> = ({
{GenerateContentCard(fluidType, props.children)}
</CardGas>
)
+ case FluidType.MULTIFLUID:
+ return (
+ <CardMulti {...props}>
+ {GenerateContentCard(fluidType, props.children)}
+ </CardMulti>
+ )
default:
return (
<CardBase {...props}>
diff --git a/src/components/Home/HomeDetails.tsx b/src/components/Home/HomeDetails.tsx
index 789548082008da81e789a0125005097fae424033..4aca228c18772fb35bb457e94b5a09c73954abca 100644
--- a/src/components/Home/HomeDetails.tsx
+++ b/src/components/Home/HomeDetails.tsx
@@ -17,6 +17,7 @@ import PerformanceIndicatorContent from 'components/PerformanceIndicator/Perform
import FluidCard from 'components/HomeCards/FluidCard'
import './homeDetails.scss'
import AddKonnectorCard from 'components/HomeCards/AddKonnectorCard'
+import TotalConsumption from 'components/HomeCards/TotalConsumption'
interface HomeDetailsProps {
timeStep: TimeStep
@@ -48,8 +49,9 @@ const HomeDetails: React.FC<HomeDetailsProps> = ({
useEffect(() => {
let subscribed = true
+ const consumptionService = new ConsumptionService(client)
+
async function populatePerformanceIndicators() {
- const consumptionService = new ConsumptionService(client)
const lastDate = await consumptionService.fetchLastDateData(fluidTypes)
if (subscribed && lastDate) {
@@ -92,16 +94,16 @@ const HomeDetails: React.FC<HomeDetailsProps> = ({
{isLoaded ? (
<div className="home-details-root">
<div className="home-details-content">
- <div className="home-details-header text-14-normal-uppercase">
+ <div className="home-details-header text-16-normal-uppercase details-title">
{convertDateToShortDateString(currentTimePeriod, timeStep, true)}
</div>
- <PerformanceIndicatorContent
+ <TotalConsumption
performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
performanceIndicators
)}
timeStep={timeStep}
- fluidLackOfData={fluidLackOfData}
- isHome={true}
+ fluidTypes={fluidTypes}
+ // currentTimePeriod={currentTimePeriod && currentTimePeriod}
/>
<div className="fluid-details">
<span className="text-16-normal-uppercase details-title">
diff --git a/src/components/Home/homeDetails.scss b/src/components/Home/homeDetails.scss
index 38b30d4f9b6f4702287cc57847339b7b5cbf2653..03ce105aa34036261ac38fd5e55c55a8e76d2597 100644
--- a/src/components/Home/homeDetails.scss
+++ b/src/components/Home/homeDetails.scss
@@ -11,7 +11,7 @@
margin-bottom: 0;
}
.home-details-content {
- min-height: 23.875rem;
+ min-height: 15rem;
width: 45.75rem;
@media #{$large-phone} {
width: 100%;
@@ -25,10 +25,15 @@
.fluid-details {
margin-top: 2rem;
}
+ .details-title {
+ color: $grey-bright;
+ font-size: 1rem;
+ }
}
}
.home-details-container {
+ margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
diff --git a/src/components/HomeCards/FluidCard.tsx b/src/components/HomeCards/FluidCard.tsx
index 0ea778945b19d764fb283770e43d1c8539c3d16f..cefbd709e526795572799c5a5b2e3bdd82d78727 100644
--- a/src/components/HomeCards/FluidCard.tsx
+++ b/src/components/HomeCards/FluidCard.tsx
@@ -20,9 +20,13 @@ const FluidCard: React.FC<FluidCardProps> = ({ fluidType }: FluidCardProps) => {
return (
<NavLink
className="fluidcard-link"
- to={`/consumption/${t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- ).toLowerCase()}`}
+ to={
+ fluidType === FluidType.MULTIFLUID
+ ? '/consumption'
+ : `/consumption/${t(
+ 'FLUID.' + FluidType[fluidType] + '.NAME'
+ ).toLowerCase()}`
+ }
>
<StyledCard fluidType={fluidType} className="fluidcard-content">
<StyledIcon className="fluidcard-icon" icon={iconType} size={50} />
diff --git a/src/components/HomeCards/TotalConsumption.tsx b/src/components/HomeCards/TotalConsumption.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ebbb9300c415e30b646623ede2148ce67a20f114
--- /dev/null
+++ b/src/components/HomeCards/TotalConsumption.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+
+import { TimeStep } from 'enum/timeStep.enum'
+import { Datachart, PerformanceIndicator, TimePeriod } from 'models'
+import { formatNumberValues } from 'utils/utils'
+
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import PileIcon from 'assets/icons/ico/coins.svg'
+import { FluidType } from 'enum/fluid.enum'
+
+import './totalConsumption.scss'
+
+interface TotalConsumptionProps {
+ performanceIndicator: PerformanceIndicator
+ timeStep: TimeStep
+ fluidTypes: FluidType[]
+}
+
+const TotalConsumption: React.FC<TotalConsumptionProps> = ({
+ performanceIndicator,
+}: TotalConsumptionProps) => {
+ let displayedValue: string
+ if (performanceIndicator && performanceIndicator.value)
+ displayedValue = formatNumberValues(performanceIndicator.value).toString()
+ else displayedValue = '-----'
+
+ return (
+ <div className="icon-line">
+ <StyledIcon className="pile-icon" icon={PileIcon} size={35} />
+ <div>
+ <span className="euro-value">{displayedValue}</span>
+ <span className="euro-symbol"> €</span>
+ </div>
+ </div>
+ )
+}
+
+export default TotalConsumption
diff --git a/src/components/HomeCards/fluidCard.scss b/src/components/HomeCards/fluidCard.scss
index 43be12d1f303dec3bde734f882a8750020701ca0..79fabadfc43a5ea156149e795bc69c1d52bad811 100644
--- a/src/components/HomeCards/fluidCard.scss
+++ b/src/components/HomeCards/fluidCard.scss
@@ -25,5 +25,8 @@ button.fluidcard-content {
&.water {
color: $water-color;
}
+ &.mutlifluid {
+ color: $gold-shadow;
+ }
}
}
diff --git a/src/components/HomeCards/totalConsumption.scss b/src/components/HomeCards/totalConsumption.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fd42bcf1354156b65cce2157c924c17aa03ff132
--- /dev/null
+++ b/src/components/HomeCards/totalConsumption.scss
@@ -0,0 +1,13 @@
+.icon-line {
+ display: flex;
+ .euro-value {
+ font-size: 2rem;
+ font-weight: bold;
+ color: white;
+ margin-left: 0.7rem;
+ margin-right: 0.3rem;
+ }
+ .euro-symbol {
+ color: white;
+ }
+}
diff --git a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
index 07c183a90225ce687f59ed0d63b801483114836e..d22b9781d0a7f724c278b91382cccbb4ef72df16 100644
--- a/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
+++ b/src/components/PerformanceIndicator/PerformanceIndicatorContent.tsx
@@ -19,14 +19,12 @@ interface PerformanceIndicatorContentProps {
performanceIndicator: PerformanceIndicator
timeStep: TimeStep
fluidLackOfData?: Array<FluidType>
- isHome: boolean
}
const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> = ({
performanceIndicator,
timeStep,
fluidLackOfData = [],
- isHome,
}: PerformanceIndicatorContentProps) => {
const { t } = useI18n()
let displayedValue: string
@@ -107,72 +105,68 @@ const PerformanceIndicatorContent: React.FC<PerformanceIndicatorContentProps> =
</div>
</div>
</div>
- {!isHome && (
- <>
- {perfStatus[0] === 'positive' ||
- perfStatus[0] === 'negative' ||
- perfStatus[0] === 'zero' ? (
- <div className="fpi-content-perf-indicator bilan-card card-text">
- <div className="icon-line">
- <StyledIcon
- className="fpi-content-icon perf-icon"
- icon={perfStatus[1]}
- size={35}
- />
- <div className="evolution-text">
- {t('INDICATOR.BILAN.TEXT1')}
- <span
- className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
- >
- {perfStatus[0] === 'positive' ? ' + ' : ' '}
- {perfString}%
- </span>
- <br />
- <span>
- {t('INDICATOR.BILAN.TEXT2')}
- <span className="diff-value">{diffString} €</span>
- <br />
- {t(
- 'INDICATOR.BILAN.' +
- `${getRelevantFrequencyLabel(timeStep)}`
- )}
- </span>
- </div>
+ {perfStatus[0] === 'positive' ||
+ perfStatus[0] === 'negative' ||
+ perfStatus[0] === 'zero' ? (
+ <div className="fpi-content-perf-indicator bilan-card card-text">
+ <div className="icon-line">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+ <div className="evolution-text">
+ {t('INDICATOR.BILAN.TEXT1')}
+ <span
+ className={`fpi-content-perf-indicator-kpi ${perfStatus[0]} card-text-bold`}
+ >
+ {perfStatus[0] === 'positive' ? ' + ' : ' '}
+ {perfString}%
+ </span>
+ <br />
+ <span>
+ {t('INDICATOR.BILAN.TEXT2')}
+ <span className="diff-value">{diffString} €</span>
+ <br />
+ {t(
+ 'INDICATOR.BILAN.' +
+ `${getRelevantFrequencyLabel(timeStep)}`
+ )}
+ </span>
+ </div>
+ </div>
+ </div>
+ ) : (
+ <div className="fpi-content-perf-indicator card-text error">
+ <StyledIcon
+ className="fpi-content-icon perf-icon"
+ icon={perfStatus[1]}
+ size={35}
+ />
+
+ {fluidLackOfData.length !== 0 ? (
+ <div>
+ <div> {t('INDICATOR.ERROR_NO_COMPARE_NO_DATA')} </div>
+ <div>
+ {fluidLackOfData.map(fluidType => {
+ return (
+ <div key={fluidType} className="fluid-enum">
+ {' '}
+ - {t(
+ 'FLUID.' + FluidType[fluidType] + '.NAME'
+ )}{' '}
+ </div>
+ )
+ })}
</div>
</div>
) : (
- <div className="fpi-content-perf-indicator card-text error">
- <StyledIcon
- className="fpi-content-icon perf-icon"
- icon={perfStatus[1]}
- size={35}
- />
-
- {fluidLackOfData.length !== 0 ? (
- <div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE_NO_DATA')} </div>
- <div>
- {fluidLackOfData.map(fluidType => {
- return (
- <div key={fluidType} className="fluid-enum">
- {' '}
- - {t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- )}{' '}
- </div>
- )
- })}
- </div>
- </div>
- ) : (
- <div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
- <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
- </div>
- )}
+ <div>
+ <div> {t('INDICATOR.ERROR_NO_COMPARE')} </div>
+ <div> {t('INDICATOR.ERROR_NO_COMPARE_REASON')} </div>
</div>
)}
- </>
+ </div>
)}
</div>
</div>
diff --git a/src/components/SingleFluid/SingleFluidIndicators.tsx b/src/components/SingleFluid/SingleFluidIndicators.tsx
index 674024152ab03ea62f4066d7ea98bdf69dcd235b..5fdedd7ef20d475c8573de969abef4128a9974ea 100644
--- a/src/components/SingleFluid/SingleFluidIndicators.tsx
+++ b/src/components/SingleFluid/SingleFluidIndicators.tsx
@@ -1,9 +1,6 @@
import React, { useEffect, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
-import { useSelector } from 'react-redux'
-import { AppStore } from 'store'
-
import { TimeStep } from 'enum/timeStep.enum'
import { FluidType } from 'enum/fluid.enum'
import { TimePeriod, PerformanceIndicator } from 'models'
@@ -11,10 +8,12 @@ import { convertDateToShortDateString } from 'utils/date'
import TimePeriodService from 'services/timePeriod.service'
import ConsumptionService from 'services/consumption.service'
import PerformanceIndicatorService from 'services/performanceIndicator.service'
-
-import PerformanceIndicatorContent from 'components/PerformanceIndicator/PerformanceIndicatorContent'
-import SingleFluidRedirect from 'components/SingleFluid/SingleFluidRedirect'
import './singleFluidIndicators.scss'
+import TotalConsumption from 'components/HomeCards/TotalConsumption'
+import FluidCard from 'components/HomeCards/FluidCard'
+import ConfigService from 'services/fluidConfig.service'
+import { useSelector } from 'react-redux'
+import { AppStore } from 'store'
interface SingleFluidIndicatorsProps {
timeStep: TimeStep
setIndicatorsLoaded(): void
@@ -28,23 +27,18 @@ const SingleFluidIndicators: React.FC<SingleFluidIndicatorsProps> = ({
}: SingleFluidIndicatorsProps) => {
const { t } = useI18n()
const client = useClient()
- const { fluidTypes: allConfiguredFluidTypes } = useSelector(
+ const configService = new ConfigService()
+ const fluidConfig = configService.getFluidConfig()
+ const { fluidTypes: currentFluidTypes } = useSelector(
(state: AppStore) => state.ecolyo.global
)
-
const [performanceIndicators, setPerformanceIndicators] = useState<
PerformanceIndicator[]
>([])
const [currentTimePeriod, setCurrentTimePeriod] = useState<TimePeriod | null>(
null
)
- const [
- comparisonTimePeriod,
- setComparisonTimePeriod,
- ] = useState<TimePeriod | null>(null)
- const filteredFluidTypes = allConfiguredFluidTypes.filter(
- fluidType => fluidType !== fluidTypes[0]
- )
+ const [, setComparisonTimePeriod] = useState<TimePeriod | null>(null)
const [isLoaded, setIsLoaded] = useState<boolean>(false)
const performanceIndicatorService = new PerformanceIndicatorService()
@@ -77,38 +71,38 @@ const SingleFluidIndicators: React.FC<SingleFluidIndicatorsProps> = ({
}
}
}
-
populatePerformanceIndicators()
}, [timeStep, client, fluidTypes, setIndicatorsLoaded])
return (
<>
{isLoaded ? (
- <div className="fi-root">
+ <div className="sfi-root">
<div className="sfi-content">
- <div className="sfi-header text-14-normal-uppercase">
+ <div className="sfi-header text-16-normal-uppercase details-title">
{t('COMMON.CONSO_CARDS_LABEL')}{' '}
{convertDateToShortDateString(currentTimePeriod, timeStep, true)}
</div>
-
- <PerformanceIndicatorContent
+ <TotalConsumption
performanceIndicator={performanceIndicatorService.aggregatePerformanceIndicators(
performanceIndicators
)}
timeStep={timeStep}
- isHome={true}
+ fluidTypes={fluidTypes}
/>
- {filteredFluidTypes && filteredFluidTypes.length > 0 && (
- <>
- <div className="sfi-header text-14-normal-uppercase">
- {t('COMMON.MINI_CARDS_LABEL')}
- </div>
- <div className="sfi-redirect">
- <SingleFluidRedirect fluidTypes={filteredFluidTypes} />
- </div>
- </>
- )}
+ <div className="sfi-header text-16-normal-uppercase details-title">
+ {t('COMMON.MINI_CARDS_LABEL')}
+ </div>
+ <div className="single-fluid-details-container">
+ <FluidCard fluidType={FluidType.MULTIFLUID} />
+ {fluidConfig.map((fluid, index) => {
+ return currentFluidTypes.includes(fluid.fluidTypeId) &&
+ !fluidTypes.includes(fluid.fluidTypeId) ? (
+ <FluidCard key={index} fluidType={fluid.fluidTypeId} />
+ ) : null
+ })}
+ </div>
</div>
</div>
) : null}
diff --git a/src/components/SingleFluid/SingleFluidRedirect.tsx b/src/components/SingleFluid/SingleFluidRedirect.tsx
deleted file mode 100644
index 1e741887e96f8e5b533477b69403751c022bb4fb..0000000000000000000000000000000000000000
--- a/src/components/SingleFluid/SingleFluidRedirect.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { FluidType } from 'enum/fluid.enum'
-import StyledIconCard from 'components/CommonKit/Card/StyledIconCard'
-import { NavLink } from 'react-router-dom'
-import './singleFluidRedirect.scss'
-export interface SingleFluidRedirectProps {
- fluidTypes: FluidType[]
-}
-
-const SingleFluidRedirect: React.FC<SingleFluidRedirectProps> = ({
- fluidTypes,
-}: SingleFluidRedirectProps) => {
- const { t } = useI18n()
- return (
- <>
- {fluidTypes.map(fluidType => (
- <NavLink
- key={fluidType}
- className="redirect-card-link"
- to={`/consumption/${t(
- 'FLUID.' + FluidType[fluidType] + '.NAME'
- ).toLowerCase()}`}
- >
- <StyledIconCard fluidType={fluidType}>
- <div className="redirect-card-content">
- {t('INDICATOR.DISPLAY_OTHER_FLUID') +
- ' ' +
- t('FLUID.' + FluidType[fluidType] + '.LABEL').toLowerCase()}
- </div>
- </StyledIconCard>
- </NavLink>
- ))}
- </>
- )
-}
-
-export default SingleFluidRedirect
diff --git a/src/components/SingleFluid/singleFluidIndicators.scss b/src/components/SingleFluid/singleFluidIndicators.scss
index 58f76cc9c2954c3a95351a469e7ff2dbf2f8ce61..b3df8c3b87b6bd896e3e765e35697d8b701c2e82 100644
--- a/src/components/SingleFluid/singleFluidIndicators.scss
+++ b/src/components/SingleFluid/singleFluidIndicators.scss
@@ -1,26 +1,32 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
//SingleFluidIndicator
-.sfi-content {
- min-height: 16rem;
- width: 45.75rem;
+
+.sfi-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 0rem 1.5rem 0.5rem 1.5rem;
@media #{$large-phone} {
- width: 100%;
+ margin-bottom: 0;
}
- .sfi-header {
- margin-top: 2.5rem;
- margin-bottom: 1.25rem;
- color: $grey-bright;
- }
- .sfi-redirect {
- margin-bottom: 1.25rem;
- display: flex;
- flex-wrap: wrap;
- .redirect-card-link:nth-child(2) {
- margin-left: 0.625rem;
+ .sfi-content {
+ min-height: 15rem;
+ width: 45.75rem;
+ padding: 0 1rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .sfi-header {
+ margin-top: 1.5rem;
+ margin-bottom: 1.25rem;
+ color: $grey-bright;
}
- .redirect-card-link {
- flex: 1;
+ .single-fluid-details-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
}
}
diff --git a/src/components/SingleFluid/singleFluidRedirect.scss b/src/components/SingleFluid/singleFluidRedirect.scss
deleted file mode 100644
index e6c5ef02be5bee059517bf096e9d868d81eefa32..0000000000000000000000000000000000000000
--- a/src/components/SingleFluid/singleFluidRedirect.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// RedirectionMiniCard
-.redirect-card-link {
- color: transparent;
-}
-.redirect-card-content {
- margin: 0.25rem 0;
-}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 17cde8b5511cf434397c7998b9d55279336d4a92..38ca6c64735ecf25d186256652de467cfd21ee35 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -97,7 +97,7 @@
},
"MULTIFLUID": {
"NAME": "Multi fluide",
- "LABEL": "Multi fluide",
+ "LABEL": "Multi",
"UNIT": "€"
}
},
diff --git a/src/utils/picto.ts b/src/utils/picto.ts
index 6fc4a3d023d4aac8ba549938a5b02fb538b2df3e..850937511034e3e0dcd7b460ce47fc2ee8d34d5b 100644
--- a/src/utils/picto.ts
+++ b/src/utils/picto.ts
@@ -8,6 +8,7 @@ import AddElecIcon from 'assets/icons/ico/add-elec.svg'
import AddWaterIcon from 'assets/icons/ico/add-water.svg'
import AddGasIcon from 'assets/icons/ico/add-gas.svg'
import ElecParamIcon from 'assets/icons/visu/elec-param.svg'
+import MultiIcon from 'assets/icons/visu/multi-icon.svg'
import WaterParamIcon from 'assets/icons/visu/water-param.svg'
import GasParamIcon from 'assets/icons/visu/gas-param.svg'
import { FluidType } from '../enum/fluid.enum'
@@ -24,6 +25,8 @@ export function getPicto(type: FluidType, small = false) {
return small ? WaterSmallIcon : WaterIcon
case FluidType.GAS:
return small ? GasSmallIcon : GasIcon
+ case FluidType.MULTIFLUID:
+ return MultiIcon
default:
return ElecIcon
}