diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index de81b40b958bbbc7541ca1817792404b7ce6b863..2cddfc1ade57c84b33cd045ddc8eae5cfc453c19 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -33,7 +33,6 @@ import {
} from 'utils/utils'
import ConsumptionDetails from './ConsumptionDetails/ConsumptionDetails'
import FluidButtons from './FluidButtons/FluidButtons'
-import './consumptionView.scss'
const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
const navigate = useNavigate()
@@ -241,16 +240,14 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
/>
<ConsumptionDetails fluidType={fluidType} />
{!isMulti && (
- <div className="konnector-section">
- <KonnectorViewerCard
- fluidType={fluidType}
- isDisconnected={false}
- showOfflineData={true}
- setActive={setActive}
- active={active}
- key={fluidType}
- />
- </div>
+ <KonnectorViewerCard
+ fluidType={fluidType}
+ isDisconnected={false}
+ showOfflineData={true}
+ setActive={setActive}
+ active={active}
+ key={fluidType}
+ />
)}
</>
)}
diff --git a/src/components/Consumption/consumptionView.scss b/src/components/Consumption/consumptionView.scss
deleted file mode 100644
index 3c53396b42fb1da0041d56384c766dc231ebfc3a..0000000000000000000000000000000000000000
--- a/src/components/Consumption/consumptionView.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@import 'src/styles/base/breakpoint';
-@import 'src/styles/base/color';
-
-// put these into KonnectorViewerCard ?
-.konnector-section {
- margin: 0 auto;
- padding-bottom: 1rem;
- max-width: 45.75rem;
- @media #{$large-phone} {
- padding-left: 1rem;
- padding-right: 1rem;
- }
-}
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index d21e51fcc4b80655db43d3ee9e16248b0a7e1e96..9c0de9fd00b07b86b85b8a48c2132b84b93c7937 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -489,7 +489,7 @@ const KonnectorViewerCard = ({
])
return (
- <>
+ <div className="konnector-section-root">
{isDisconnected && (
<AccordionDetails>{getConnectionCard()}</AccordionDetails>
)}
@@ -550,7 +550,7 @@ const KonnectorViewerCard = ({
handleAccountDeletion={handleAccountDeletion}
account={account}
/>
- </>
+ </div>
)
}
export default KonnectorViewerCard
diff --git a/src/components/Konnector/KonnectorViewerList.tsx b/src/components/Konnector/KonnectorViewerList.tsx
index 7865473a25658a37d73e444dea7c78d4736d2069..c3688d78d6423c24ced94d55a2b082395fea3ce7 100644
--- a/src/components/Konnector/KonnectorViewerList.tsx
+++ b/src/components/Konnector/KonnectorViewerList.tsx
@@ -7,7 +7,7 @@ import { useNavigate } from 'react-router-dom'
import { useAppSelector } from 'store/hooks'
import { getAddPicto } from 'utils/picto'
import { getFluidName } from 'utils/utils'
-import './konnectorViewerList.scss'
+import './konnectorViewerCard.scss'
const KonnectorViewerList = () => {
const { t } = useI18n()
@@ -18,28 +18,30 @@ const KonnectorViewerList = () => {
}
return (
- <div className="konnectorsList">
- {fluidStatus.map(fluidStatusItem => (
- <StyledCard
- key={fluidStatusItem.fluidType}
- className="connection-card"
- onClick={() => goToFluid(fluidStatusItem.fluidType)}
- fluidType={fluidStatusItem.fluidType}
- >
- <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
- <div
- className={`konnector-title text-18-bold ${FluidType[
- fluidStatusItem.fluidType
- ].toLowerCase()}`}
+ <div className="konnector-section-root">
+ <div className="konnectorsList">
+ {fluidStatus.map(fluidStatusItem => (
+ <StyledCard
+ key={fluidStatusItem.fluidType}
+ className="connection-card"
+ onClick={() => goToFluid(fluidStatusItem.fluidType)}
+ fluidType={fluidStatusItem.fluidType}
>
- {t(
- `konnector_options.label_connect_to_${FluidType[
+ <Icon icon={getAddPicto(fluidStatusItem.fluidType)} size={36} />
+ <div
+ className={`konnector-title text-18-bold ${FluidType[
fluidStatusItem.fluidType
- ].toLowerCase()}`
- )}
- </div>
- </StyledCard>
- ))}
+ ].toLowerCase()}`}
+ >
+ {t(
+ `konnector_options.label_connect_to_${FluidType[
+ fluidStatusItem.fluidType
+ ].toLowerCase()}`
+ )}
+ </div>
+ </StyledCard>
+ ))}
+ </div>
</div>
)
}
diff --git a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
index 8fd0a567d1583af4d3f71d49a5ced00da6b26630..102a761bc6b23ce140012667112e749b927d0bd5 100644
--- a/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
+++ b/src/components/Konnector/__snapshots__/KonnectorViewerList.spec.tsx.snap
@@ -3,98 +3,102 @@
exports[`KonnectorViewerList component should be rendered correctly 1`] = `
<div>
<div
- class="konnectorsList"
+ class="konnector-section-root"
>
- <button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
- tabindex="0"
- type="button"
+ <div
+ class="konnectorsList"
>
- <div
- class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card electricity"
+ tabindex="0"
+ type="button"
>
- <svg
- class="styles__icon___23x3R"
- height="36"
- width="36"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
<div
- class="konnector-title text-18-bold electricity"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- konnector_options.label_connect_to_electricity
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="konnector-title text-18-bold electricity"
+ >
+ konnector_options.label_connect_to_electricity
+ </div>
</div>
- </div>
- <span
- class="MuiCardActionArea-focusHighlight"
- />
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
- tabindex="0"
- type="button"
- >
- <div
- class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card water"
+ tabindex="0"
+ type="button"
>
- <svg
- class="styles__icon___23x3R"
- height="36"
- width="36"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
<div
- class="konnector-title text-18-bold water"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- konnector_options.label_connect_to_water
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="konnector-title text-18-bold water"
+ >
+ konnector_options.label_connect_to_water
+ </div>
</div>
- </div>
- <span
- class="MuiCardActionArea-focusHighlight"
- />
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
- tabindex="0"
- type="button"
- >
- <div
- class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ class="MuiButtonBase-root MuiCardActionArea-root WithStyles(ForwardRef(CardActionArea))-root-1 connection-card gas"
+ tabindex="0"
+ type="button"
>
- <svg
- class="styles__icon___23x3R"
- height="36"
- width="36"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
<div
- class="konnector-title text-18-bold gas"
+ class="MuiCardContent-root WithStyles(ForwardRef(CardContent))-root-2"
>
- konnector_options.label_connect_to_gas
+ <svg
+ class="styles__icon___23x3R"
+ height="36"
+ width="36"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ <div
+ class="konnector-title text-18-bold gas"
+ >
+ konnector_options.label_connect_to_gas
+ </div>
</div>
- </div>
- <span
- class="MuiCardActionArea-focusHighlight"
- />
- <span
- class="MuiTouchRipple-root"
- />
- </button>
+ <span
+ class="MuiCardActionArea-focusHighlight"
+ />
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
</div>
`;
diff --git a/src/components/Konnector/konnectorViewerCard.scss b/src/components/Konnector/konnectorViewerCard.scss
index 3eaa94ce1819ed36451695e766475733da0df6fb..39cc5ce06d12b16cb5c718fff9cdd7e4cfbec762 100644
--- a/src/components/Konnector/konnectorViewerCard.scss
+++ b/src/components/Konnector/konnectorViewerCard.scss
@@ -1,6 +1,16 @@
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
+.konnector-section-root {
+ margin: 0 auto;
+ padding-bottom: 1rem;
+ max-width: 45.75rem;
+ @media #{$large-phone} {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ }
+}
+
.konnector-icon {
margin-right: 1rem;
position: relative;
@@ -32,3 +42,22 @@
color: $grey-bright;
}
}
+
+.konnectorsList {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding-top: 1rem;
+ button.connection-card {
+ height: 80px;
+ &.electricity {
+ border: 1px solid var(--elecColor40);
+ }
+ &.gas {
+ border: 1px solid var(--gasColor40);
+ }
+ &.water {
+ border: 1px solid var(--waterColor40);
+ }
+ }
+}
diff --git a/src/components/Konnector/konnectorViewerList.scss b/src/components/Konnector/konnectorViewerList.scss
deleted file mode 100644
index bb94bfef8f16e23af9058dbccff1244f001fa293..0000000000000000000000000000000000000000
--- a/src/components/Konnector/konnectorViewerList.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-.konnectorsList {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- padding-top: 1rem;
- button.connection-card {
- height: 80px;
- &.electricity {
- border: 1px solid var(--elecColor40);
- }
- &.gas {
- border: 1px solid var(--gasColor40);
- }
- &.water {
- border: 1px solid var(--waterColor40);
- }
- }
-}