Merge branch 'fix/review_consumption_design' into 'dev'

fix(consumption): display € and color correctly in consumption visualizer

See merge request web-et-numerique/llle_project/ecolyo!578

src/components/ConsumptionVisualizer/DataloadSectionDetail.tsx

 import React, { useCallback } from 'react'
+import classNames from 'classnames'
 import { NavLink } from 'react-router-dom'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
@@ -11,7 +12,6 @@ import { UsageEventType } from 'enum/usageEvent.enum'
 import ConverterService from 'services/converter.service'
 import { formatNumberValues } from 'utils/utils'
 import UsageEventService from 'services/usageEvent.service'
-import classNames from 'classnames'
 
 interface DataloadSectionDetailProps {
   dataload: Dataload
@@ -41,9 +41,12 @@ const DataloadSectionDetail = ({
   if (fluidType !== FluidType.MULTIFLUID) {
     return (
       <div
-        className={`dataloadvisualizer-euro ${FluidType[
-          fluidType
-        ].toLowerCase()}-compare text-16-normal`}
+        className={classNames('dataloadvisualizer-euro text-16-normal', {
+          [`${FluidType[fluidType].toLowerCase()}`]:
+            dataloadSectionType !== DataloadSectionType.LEFT,
+          [`${FluidType[fluidType].toLowerCase()}-compare`]:
+            dataloadSectionType === DataloadSectionType.LEFT,
+        })}
       >
         {`${formatNumberValues(
           converterService.LoadToEuro(

src/components/ConsumptionVisualizer/DataloadSectionValue.spec.tsx

@@ -112,7 +112,7 @@ describe('DataloadSectionValue component', () => {
           .first()
           .contains('12,00')
       ).toBeTruthy()
-      expect(wrapper.find('.euroUnit').exists()).toBeFalsy()
+      expect(wrapper.find('.euroUnit').exists()).toBeTruthy()
       expect(wrapper.find('.estimated').exists()).toBeTruthy()
       expect(wrapper.find('.estimated').text()).toBe(
         'consumption_visualizer.estimated'

src/components/ConsumptionVisualizer/DataloadSectionValue.tsx

 import React from 'react'
-import classNames from 'classnames'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import { Dataload } from 'models'
 import { FluidType } from 'enum/fluid.enum'
@@ -25,12 +24,7 @@ const DataloadSectionValue = ({
     return (
       <>
         {formatNumberValues(dataload.value)}
-        <span
-          className={classNames('text-18-normal', {
-            ['euroUnit']:
-              dataloadSectionType !== DataloadSectionType.NO_COMPARE,
-          })}
-        >
+        <span className={'text-18-normal euroUnit'}>
           {`${t('FLUID.' + FluidType[fluidType] + '.UNIT')}`}
         </span>
         {dataloadSectionType === DataloadSectionType.NO_COMPARE && (

src/components/ConsumptionVisualizer/__snapshots__/DataloadSectionDetail.spec.tsx.snap

@@ -180,7 +180,7 @@ exports[`DataloadSectionDetail component should render correctly 1`] = `
   fluidType={0}
 >
   <div
-    className="dataloadvisualizer-euro electricity-compare text-16-normal"
+    className="dataloadvisualizer-euro text-16-normal electricity"
   >
     2,09 €
   </div>