From 30478c9dcb6dec172b29e4bfd78db5ffddd145d6 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Thu, 14 Nov 2024 09:20:55 +0000
Subject: [PATCH] fix(ui): feedback
---
.../analysis/{pill-cold.svg => chip-cold.svg} | 0
.../analysis/{pill-hot.svg => chip-hot.svg} | 0
.../{pill-negative.svg => chip-negative.svg} | 0
.../{pill-positive.svg => chip-positive.svg} | 0
.../Analysis/Comparison/ChipVariation.tsx | 23 ++++++++++++++
.../Analysis/Comparison/Comparison.spec.tsx | 4 +--
.../Analysis/Comparison/Comparison.tsx | 7 ++++-
.../Comparison/FluidPerformanceIndicator.tsx | 4 +--
.../Analysis/Comparison/PillVariation.tsx | 23 --------------
.../Comparison/TemperatureComparison.tsx | 4 +--
.../ElecHalfHourMonthlyAnalysis.spec.tsx | 2 +-
.../ElecHalfHourMonthlyAnalysis.tsx | 6 ++--
.../ElecHalfHourMonthlyAnalysis.spec.tsx.snap | 6 ++--
.../elecHalfHourMonthlyAnalysis.scss | 3 --
.../ProfileComparatorRow.tsx | 4 +--
.../ChallengeCardOnGoing.tsx | 6 ++--
.../Consumption/ConsumptionView.tsx | 5 ++-
.../Consumption/FluidButtons/FluidButton.tsx | 13 ++++++--
.../DateNavigator/DateNavigator.tsx | 4 +--
.../Ecogesture/EcogestureTabsView.tsx | 5 ++-
.../EcogestureTabsView.spec.tsx.snap | 5 ++-
.../HalfHourUpcoming/HalfHourUpcoming.scss | 4 +--
.../TimeStepSelector.spec.tsx | 6 ++--
.../TimeStepSelector/TimeStepSelector.tsx | 3 +-
.../TimeStepSelector.spec.tsx.snap | 6 +++-
src/components/Konnector/KonnectorModal.tsx | 4 +--
.../Options/ExportData/exportData.scss | 5 ---
.../Quiz/QuizQuestion/QuizQuestionContent.tsx | 23 +++++++-------
.../QuizQuestionContentCustom.tsx | 27 +++++++---------
.../Quiz/QuizQuestion/quizQuestion.scss | 31 ++++++-------------
src/styles/components/_expansion-panel.scss | 12 +++----
src/styles/components/_input.scss | 2 +-
src/styles/index.scss | 10 +++++-
33 files changed, 132 insertions(+), 125 deletions(-)
rename src/assets/icons/visu/analysis/{pill-cold.svg => chip-cold.svg} (100%)
rename src/assets/icons/visu/analysis/{pill-hot.svg => chip-hot.svg} (100%)
rename src/assets/icons/visu/analysis/{pill-negative.svg => chip-negative.svg} (100%)
rename src/assets/icons/visu/analysis/{pill-positive.svg => chip-positive.svg} (100%)
create mode 100644 src/components/Analysis/Comparison/ChipVariation.tsx
delete mode 100644 src/components/Analysis/Comparison/PillVariation.tsx
diff --git a/src/assets/icons/visu/analysis/pill-cold.svg b/src/assets/icons/visu/analysis/chip-cold.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-cold.svg
rename to src/assets/icons/visu/analysis/chip-cold.svg
diff --git a/src/assets/icons/visu/analysis/pill-hot.svg b/src/assets/icons/visu/analysis/chip-hot.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-hot.svg
rename to src/assets/icons/visu/analysis/chip-hot.svg
diff --git a/src/assets/icons/visu/analysis/pill-negative.svg b/src/assets/icons/visu/analysis/chip-negative.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-negative.svg
rename to src/assets/icons/visu/analysis/chip-negative.svg
diff --git a/src/assets/icons/visu/analysis/pill-positive.svg b/src/assets/icons/visu/analysis/chip-positive.svg
similarity index 100%
rename from src/assets/icons/visu/analysis/pill-positive.svg
rename to src/assets/icons/visu/analysis/chip-positive.svg
diff --git a/src/components/Analysis/Comparison/ChipVariation.tsx b/src/components/Analysis/Comparison/ChipVariation.tsx
new file mode 100644
index 000000000..a5c03843c
--- /dev/null
+++ b/src/components/Analysis/Comparison/ChipVariation.tsx
@@ -0,0 +1,23 @@
+import ChipCold from 'assets/icons/visu/analysis/chip-cold.svg'
+import ChipHot from 'assets/icons/visu/analysis/chip-hot.svg'
+import ChipNegative from 'assets/icons/visu/analysis/chip-negative.svg'
+import ChipPositive from 'assets/icons/visu/analysis/chip-positive.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import React from 'react'
+
+export const ChipVariation = ({
+ color,
+}: {
+ color: 'positive' | 'negative' | 'hot' | 'cold'
+}) => {
+ switch (color) {
+ case 'positive':
+ return <StyledIcon size={20} icon={ChipPositive} />
+ case 'negative':
+ return <StyledIcon size={20} icon={ChipNegative} />
+ case 'hot':
+ return <StyledIcon size={20} icon={ChipHot} />
+ case 'cold':
+ return <StyledIcon size={20} icon={ChipCold} />
+ }
+}
diff --git a/src/components/Analysis/Comparison/Comparison.spec.tsx b/src/components/Analysis/Comparison/Comparison.spec.tsx
index ace9e1791..32510ecd6 100644
--- a/src/components/Analysis/Comparison/Comparison.spec.tsx
+++ b/src/components/Analysis/Comparison/Comparison.spec.tsx
@@ -82,10 +82,10 @@ describe('Comparison component', () => {
</Provider>
)
- const yearlyButton = await screen.findByRole('button', {
+ const yearlyButton = await screen.findByRole('tab', {
name: `analysis.compare.year_tab`,
})
- const monthlyButton = await screen.findByRole('button', {
+ const monthlyButton = await screen.findByRole('tab', {
name: `analysis.compare.month_tab`,
})
diff --git a/src/components/Analysis/Comparison/Comparison.tsx b/src/components/Analysis/Comparison/Comparison.tsx
index ab7dd379c..3115a6649 100644
--- a/src/components/Analysis/Comparison/Comparison.tsx
+++ b/src/components/Analysis/Comparison/Comparison.tsx
@@ -100,14 +100,19 @@ const Comparison = ({
<div className="comparison card rich-card">
<div className="text-20-normal title">{t('analysis.compare.title')}</div>
{!isLoading && (
- <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}>
+ <ButtonGroup
+ role="tablist"
+ style={{ backgroundColor: 'var(--grey-0)' }}
+ >
<Button
+ role="tab"
className={classNames('btnTab', { active: period === 'year' })}
onClick={() => dispatch(setPeriod('year'))}
>
{t(`analysis.compare.year_tab`)}
</Button>
<Button
+ role="tab"
className={classNames('btnTab', { active: period === 'month' })}
onClick={() => dispatch(setPeriod('month'))}
>
diff --git a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
index 313e22a88..6780e7882 100644
--- a/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
+++ b/src/components/Analysis/Comparison/FluidPerformanceIndicator.tsx
@@ -10,8 +10,8 @@ import { setCurrentTimeStep, setShowCompare } from 'store/chart/chart.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import { getFluidIcon } from 'utils/picto'
import { formatNumberValues, getFluidName, getMonthName } from 'utils/utils'
+import { ChipVariation } from './ChipVariation'
import './fluidPerformanceIndicator.scss'
-import { PillVariation } from './PillVariation'
interface FluidPerformanceIndicatorProps {
performanceIndicator: PerformanceIndicator
@@ -83,7 +83,7 @@ const FluidPerformanceIndicator = ({
{t(`FLUID.${FluidType[fluidType]}.UNIT`)}
</span>
{performanceIndicator?.percentageVariation !== null && (
- <PillVariation color={positive ? 'positive' : 'negative'} />
+ <ChipVariation color={positive ? 'positive' : 'negative'} />
)}
</div>
{performanceIndicator?.percentageVariation === null && (
diff --git a/src/components/Analysis/Comparison/PillVariation.tsx b/src/components/Analysis/Comparison/PillVariation.tsx
deleted file mode 100644
index 4cddd2deb..000000000
--- a/src/components/Analysis/Comparison/PillVariation.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import PillCold from 'assets/icons/visu/analysis/pill-cold.svg'
-import PillHot from 'assets/icons/visu/analysis/pill-hot.svg'
-import PillNegative from 'assets/icons/visu/analysis/pill-negative.svg'
-import PillPositive from 'assets/icons/visu/analysis/pill-positive.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import React from 'react'
-
-export const PillVariation = ({
- color,
-}: {
- color: 'positive' | 'negative' | 'hot' | 'cold'
-}) => {
- switch (color) {
- case 'positive':
- return <StyledIcon size={20} icon={PillPositive} />
- case 'negative':
- return <StyledIcon size={20} icon={PillNegative} />
- case 'hot':
- return <StyledIcon size={20} icon={PillHot} />
- case 'cold':
- return <StyledIcon size={20} icon={PillCold} />
- }
-}
diff --git a/src/components/Analysis/Comparison/TemperatureComparison.tsx b/src/components/Analysis/Comparison/TemperatureComparison.tsx
index 44fca9aeb..1594eea1f 100644
--- a/src/components/Analysis/Comparison/TemperatureComparison.tsx
+++ b/src/components/Analysis/Comparison/TemperatureComparison.tsx
@@ -9,7 +9,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import React, { useEffect, useMemo, useState } from 'react'
import ConsumptionService from 'services/consumption.service'
import { useAppSelector } from 'store/hooks'
-import { PillVariation } from './PillVariation'
+import { ChipVariation } from './ChipVariation'
import TemperatureComparisonModal from './TemperatureComparisonModal/TemperatureComparisonModal'
import './temperatureComparison.scss'
@@ -92,7 +92,7 @@ const TemperatureComparison = () => {
{t('analysis.temperature_comparison.unit')}
</span>
</div>
- <PillVariation color={positive ? 'hot' : 'cold'} />
+ <ChipVariation color={positive ? 'hot' : 'cold'} />
</div>
<div>
<span className="text-12">
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
index 8b1080a73..1d8177aee 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.spec.tsx
@@ -84,7 +84,7 @@ describe('ElecHalfHourMonthlyAnalysis component', () => {
await waitFor(() => null, { container })
expect(container).toMatchSnapshot()
expect(screen.getByText('special_elec.weekend')).toBeInTheDocument()
- expect(screen.getAllByRole('button')).toHaveLength(2)
+ expect(screen.getAllByRole('tab')).toHaveLength(2)
})
it('should call the ElecInfoModal with open = true when click on the button', async () => {
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
index 20069e774..d190aa12b 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/ElecHalfHourMonthlyAnalysis.tsx
@@ -163,7 +163,7 @@ const ElecHalfHourMonthlyAnalysis = ({
if (!isHalfHourActivated) {
return (
<ElecHalfHourLayout>
- <div className="activation-text text-18-normal">
+ <div className="activation-text text-16-normal">
{t(`timestep.half_an_hour.analysis_waiting_data`)}
</div>
</ElecHalfHourLayout>
@@ -181,14 +181,16 @@ const ElecHalfHourMonthlyAnalysis = ({
return (
<ElecHalfHourLayout>
<div className="text-20-normal title">{t('special_elec.average')}</div>
- <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}>
+ <ButtonGroup role="tablist" style={{ backgroundColor: 'var(--grey-0)' }}>
<Button
+ role="tab"
className={classNames('btnTab', { active: !isWeekend })}
onClick={() => setIsWeekend(false)}
>
{t('special_elec.week')}
</Button>
<Button
+ role="tab"
className={classNames('btnTab', { active: isWeekend })}
onClick={() => setIsWeekend(true)}
>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
index 54788cf05..857e392e5 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/__snapshots__/ElecHalfHourMonthlyAnalysis.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
special_elec.title
</div>
<div
- class="activation-text text-18-normal"
+ class="activation-text text-16-normal"
>
timestep.half_an_hour.analysis_waiting_data
</div>
@@ -56,10 +56,11 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
</div>
<div
class="MuiButtonGroup-root"
- role="group"
+ role="tablist"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ role="tab"
tabindex="0"
type="button"
>
@@ -71,6 +72,7 @@ exports[`ElecHalfHourMonthlyAnalysis component should be rendered correctly when
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+ role="tab"
tabindex="0"
type="button"
>
diff --git a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
index 330b4ddb1..754ed3cc1 100644
--- a/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
+++ b/src/components/Analysis/ElecHalfHourMonthlyAnalysis/elecHalfHourMonthlyAnalysis.scss
@@ -14,9 +14,6 @@
.minIcon {
margin: auto 0.8rem auto 0;
}
- .activation-text {
- margin: 1rem 0 0.7rem 0;
- }
.elec-infos {
display: flex;
diff --git a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
index fb217aad4..82359a8da 100644
--- a/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
+++ b/src/components/Analysis/ProfileComparator/ProfileComparatorRow.tsx
@@ -108,7 +108,7 @@ const ProfileComparatorRow = ({
<div className="user-graph">
<div
className={classNames('price text-15-bold', {
- ['not-connected']: !connected || noData,
+ 'not-connected': !connected || noData,
})}
data-testid="userPrice"
>
@@ -145,7 +145,7 @@ const ProfileComparatorRow = ({
</div>
<div
className={classNames('price', 'text-15-bold', {
- ['not-connected']: !connected,
+ 'not-connected': !connected,
})}
data-testid="averagePrice"
>
diff --git a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
index 30bbaf99a..53f0ffd87 100644
--- a/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
+++ b/src/components/Challenge/ChallengeCardOnGoing/ChallengeCardOnGoing.tsx
@@ -154,7 +154,7 @@ const ChallengeCardOnGoing = ({
title={t('challenge.card.ongoing.quiz')}
tabIndex={quizFinished ? -1 : 0}
className={classNames('smallCard', {
- ['finished']: quizFinished,
+ finished: quizFinished,
})}
onClick={goQuiz}
>
@@ -175,7 +175,7 @@ const ChallengeCardOnGoing = ({
title={t('challenge.card.ongoing.exploration')}
tabIndex={explorationFinished ? -1 : 0}
className={classNames('smallCard explorationCard', {
- ['finished']: explorationFinished,
+ finished: explorationFinished,
})}
onClick={goExploration}
>
@@ -200,7 +200,7 @@ const ChallengeCardOnGoing = ({
title={t('challenge.card.ongoing.action')}
tabIndex={actionFinished ? -1 : 0}
className={classNames('smallCard actionCard', {
- ['finished']: actionFinished,
+ finished: actionFinished,
})}
onClick={goAction}
>
diff --git a/src/components/Consumption/ConsumptionView.tsx b/src/components/Consumption/ConsumptionView.tsx
index 6dbfecd0f..416591d45 100644
--- a/src/components/Consumption/ConsumptionView.tsx
+++ b/src/components/Consumption/ConsumptionView.tsx
@@ -206,7 +206,10 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
/>
</Header>
<Content>
- <TimeStepSelector fluidType={fluidType} />
+ {showOfflineData && !isWaitingForConsent && (
+ <TimeStepSelector fluidType={fluidType} />
+ )}
+
<FluidButtons activeFluid={fluidType} key={updateKey} />
{showOfflineData && !isWaitingForConsent && (
diff --git a/src/components/Consumption/FluidButtons/FluidButton.tsx b/src/components/Consumption/FluidButtons/FluidButton.tsx
index afafe2578..9f0f3227a 100644
--- a/src/components/Consumption/FluidButtons/FluidButton.tsx
+++ b/src/components/Consumption/FluidButtons/FluidButton.tsx
@@ -7,7 +7,8 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidState, FluidType } from 'enums'
import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
-import { useAppSelector } from 'store/hooks'
+import { setShowConnectionDetails } from 'store/chart/chart.slice'
+import { useAppDispatch, useAppSelector } from 'store/hooks'
import { getActiveFluidIcon } from 'utils/picto'
import { getFluidName, isKonnectorActive } from 'utils/utils'
@@ -19,7 +20,11 @@ interface FluidButtonProps {
const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
const { t } = useI18n()
const navigate = useNavigate()
- const { fluidStatus } = useAppSelector(state => state.ecolyo.global)
+ const dispatch = useAppDispatch()
+ const {
+ global: { fluidStatus },
+ chart: { showConnectionDetails },
+ } = useAppSelector(state => state.ecolyo)
const [showError, setShowError] = useState<boolean>(false)
const isMulti = fluidType === FluidType.MULTIFLUID
const fluidName = getFluidName(fluidType)
@@ -48,7 +53,9 @@ const FluidButton = ({ fluidType, isActive }: FluidButtonProps) => {
const goToFluid = useCallback(() => {
navigate(isMulti ? '/consumption' : `/consumption/${fluidName}`)
- }, [navigate, isMulti, fluidName])
+ // reset details when switching fluids
+ if (showConnectionDetails) dispatch(setShowConnectionDetails(false))
+ }, [navigate, isMulti, fluidName, showConnectionDetails, dispatch])
const isFluidMaintenance = () => fluidStatus[fluidType]?.maintenance
diff --git a/src/components/DateNavigator/DateNavigator.tsx b/src/components/DateNavigator/DateNavigator.tsx
index 7a936ab06..465731e82 100644
--- a/src/components/DateNavigator/DateNavigator.tsx
+++ b/src/components/DateNavigator/DateNavigator.tsx
@@ -43,7 +43,7 @@ const DateNavigator = ({
disabled={disablePrev}
aria-label={t('consumption.accessibility.button_previous_value')}
className={classNames('date-navigator-button', {
- ['disable']: disablePrev,
+ disable: disablePrev,
})}
/>
@@ -75,7 +75,7 @@ const DateNavigator = ({
disabled={disableNext}
aria-label={t('consumption.accessibility.button_next_value')}
className={classNames('date-navigator-button', {
- ['disable']: disableNext,
+ disable: disableNext,
})}
/>
</div>
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index 5fc42d608..2c8af7f59 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -151,8 +151,9 @@ const EcogestureTabsView = () => {
{!isLoading && (
<>
<div className="tabContainer">
- <ButtonGroup>
+ <ButtonGroup role="tablist">
<Button
+ role="tab"
className={classNames('btnTab', {
active: tabValue === EcogestureTab.OBJECTIVE,
})}
@@ -163,6 +164,7 @@ const EcogestureTabsView = () => {
{`(${objective.length})`}
</Button>
<Button
+ role="tab"
className={classNames('btnTab', {
active: tabValue === EcogestureTab.DOING,
})}
@@ -173,6 +175,7 @@ const EcogestureTabsView = () => {
{`(${doing.length})`}
</Button>
<Button
+ role="tab"
className={classNames('btnTab', {
active: tabValue === EcogestureTab.ALL,
})}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index 340b91862..3ce5c7e15 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -16,10 +16,11 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
>
<div
class="MuiButtonGroup-root"
- role="group"
+ role="tablist"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+ role="tab"
tabindex="0"
type="button"
>
@@ -33,6 +34,7 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ role="tab"
tabindex="0"
type="button"
>
@@ -46,6 +48,7 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ role="tab"
tabindex="0"
type="button"
>
diff --git a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss
index caf82a36b..f1d6aa410 100644
--- a/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss
+++ b/src/components/FluidChart/HalfHourUpcoming/HalfHourUpcoming.scss
@@ -5,13 +5,11 @@
display: flex;
flex-direction: column;
align-items: center;
+ justify-content: center;
text-align: center;
gap: 12px;
padding: 2rem 1rem;
margin-top: 16px;
- background-color: $grey-1;
- border: 1px solid $grey-2;
- box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
border-radius: 4px;
// Same height as FluidChartSwipe to avoid layout shift
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index c5272e893..89092e34d 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
@@ -31,7 +31,7 @@ describe('TimeStepSelector component', () => {
<TimeStepSelector fluidType={FluidType.WATER} />
</Provider>
)
- expect(screen.getAllByRole('button').length).toBe(4)
+ expect(screen.getAllByRole('tab').length).toBe(4)
expect(container).toMatchSnapshot()
})
@@ -50,7 +50,7 @@ describe('TimeStepSelector component', () => {
<TimeStepSelector fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(screen.getAllByRole('button').length).toBe(5)
+ expect(screen.getAllByRole('tab').length).toBe(5)
})
it('should define next TimeStep and dispatch it', async () => {
@@ -68,7 +68,7 @@ describe('TimeStepSelector component', () => {
<TimeStepSelector fluidType={FluidType.WATER} />
</Provider>
)
- await userEvent.click(screen.getAllByRole('button')[2])
+ await userEvent.click(screen.getAllByRole('tab')[2])
expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.MONTH)
expect(setCurrentIndexSpy).toHaveBeenCalledTimes(1)
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
index 6d86b5018..06ffc9ba2 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -35,10 +35,11 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
}
return (
<div className="timestep-selector">
- <ButtonGroup>
+ <ButtonGroup role="tablist">
{timeStepArray.map(step => (
<Button
key={step}
+ role="tab"
onClick={() => handleChangeTimeStep(step)}
className={classNames('btnTab', {
active: step === currentTimeStep,
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index 8c5142e7e..53c69474e 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -7,10 +7,11 @@ exports[`TimeStepSelector component should render component properly with 4 time
>
<div
class="MuiButtonGroup-root"
- role="group"
+ role="tablist"
>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ role="tab"
tabindex="0"
type="button"
>
@@ -25,6 +26,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+ role="tab"
tabindex="0"
type="button"
>
@@ -39,6 +41,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ role="tab"
tabindex="0"
type="button"
>
@@ -53,6 +56,7 @@ exports[`TimeStepSelector component should render component properly with 4 time
</button>
<button
class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ role="tab"
tabindex="0"
type="button"
>
diff --git a/src/components/Konnector/KonnectorModal.tsx b/src/components/Konnector/KonnectorModal.tsx
index b11873d3d..0397c87a6 100644
--- a/src/components/Konnector/KonnectorModal.tsx
+++ b/src/components/Konnector/KonnectorModal.tsx
@@ -70,7 +70,7 @@ const KonnectorModal = ({
<div
key={idx}
className={classNames('waiting-text', {
- ['show']: idx === index % shuffledWaitingTexts.length,
+ show: idx === index % shuffledWaitingTexts.length,
})}
>
<p>{text.first}</p>
@@ -91,7 +91,7 @@ const KonnectorModal = ({
<div
key={idx}
className={classNames('waiting-text', {
- ['show']: idx === index % firstConnectionWaitingTexts.length,
+ show: idx === index % firstConnectionWaitingTexts.length,
})}
>
<p>{text.first}</p>
diff --git a/src/components/Options/ExportData/exportData.scss b/src/components/Options/ExportData/exportData.scss
index 71c968a53..d48cc8717 100644
--- a/src/components/Options/ExportData/exportData.scss
+++ b/src/components/Options/ExportData/exportData.scss
@@ -1,10 +1,5 @@
@import 'src/styles/base/color';
-div.expansion-panel-root,
-div.expansion-panel-root.Mui-expanded:last-child {
- margin: 0.2rem 0;
-}
-
.export-option-root {
display: flex;
flex-direction: column;
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
index aa0bef546..550db4ab9 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContent.tsx
@@ -1,5 +1,6 @@
import Button from '@material-ui/core/Button'
import CloseIcon from 'assets/icons/ico/close.svg'
+import classNames from 'classnames'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
import { useClient } from 'cozy-client'
@@ -101,18 +102,16 @@ const QuizQuestionContent = ({
</p>
{userChallenge.quiz.questions[questionIndex].answers.map(
(answer, index) => (
- <div className="answer" key={index}>
- <input
- type="radio"
- id={`answer${index}`}
- value={answer.answerLabel}
- onChange={handleChange}
- checked={userChoice === answer.answerLabel}
- />
- <label htmlFor={`answer${index}`} className="text-16-bold">
- {answer.answerLabel}
- </label>
- </div>
+ <Button
+ key={index}
+ role="radio"
+ className={classNames('btnSecondary btnAnswer', {
+ checked: userChoice === answer.answerLabel,
+ })}
+ onClick={() => setUserChoice(answer.answerLabel)}
+ >
+ {answer.answerLabel}
+ </Button>
)
)}
</div>
diff --git a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
index e690af2d3..1810485a4 100644
--- a/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
+++ b/src/components/Quiz/QuizQuestion/QuizQuestionContentCustom.tsx
@@ -1,5 +1,6 @@
import Button from '@material-ui/core/Button'
import CloseIcon from 'assets/icons/ico/close.svg'
+import classNames from 'classnames'
import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
import QuizExplanationModal from 'components/Quiz/QuizExplanationModal/QuizExplanationModal'
import { useClient } from 'cozy-client'
@@ -56,10 +57,6 @@ const QuizQuestionContentCustom = ({
dispatch(updateUserChallengeList(userChallengeUpdated))
}
- const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
- setUserChoice(e.target.value)
- }
-
const finishQuiz = async () => {
setOpenModal(false)
const userChallengeUpdated = await challengeService.updateUserChallenge(
@@ -84,18 +81,16 @@ const QuizQuestionContentCustom = ({
<p className="question text-18-bold">{customQuestion.questionLabel}</p>
{customQuestion.answers.map((answer, index) => (
- <div className="answer" key={index}>
- <input
- type="radio"
- id={`answer${index}`}
- value={answer.answerLabel}
- onChange={handleChange}
- checked={userChoice === answer.answerLabel}
- />
- <label htmlFor={`answer${index}`} className="text-16-bold">
- {answer.answerLabel}
- </label>
- </div>
+ <Button
+ key={index}
+ role="radio"
+ className={classNames('btnSecondary btnAnswer', {
+ checked: userChoice === answer.answerLabel,
+ })}
+ onClick={() => setUserChoice(answer.answerLabel)}
+ >
+ {answer.answerLabel}
+ </Button>
))}
</div>
<Button
diff --git a/src/components/Quiz/QuizQuestion/quizQuestion.scss b/src/components/Quiz/QuizQuestion/quizQuestion.scss
index 6040bf3cd..dc244fc0c 100644
--- a/src/components/Quiz/QuizQuestion/quizQuestion.scss
+++ b/src/components/Quiz/QuizQuestion/quizQuestion.scss
@@ -49,36 +49,25 @@
right: 1rem;
}
}
- .answer {
- text-align: center;
+ .btnAnswer {
+ border-radius: 0px;
width: 100%;
@media (min-width: $width-large-phone) {
max-width: 80%;
}
- input[type='radio'] {
- position: fixed;
- opacity: 0;
- pointer-events: none;
- }
- input[type='radio']:focus + label {
- background: $multi-color;
- color: $dark-light-2;
- border-color: $multi-color;
- }
- label {
- display: block;
- border: 1px solid $grey-bright;
- padding: 0.5rem;
+ &:not(:last-child) {
margin-bottom: 1rem;
- cursor: pointer;
}
- input[type='radio']:checked + label,
- label:hover {
- background: $multi-color;
- color: $dark-light-2;
+
+ &.checked {
+ background-color: $multi-color;
border-color: $multi-color;
+ span {
+ color: $dark-light-2;
+ }
}
}
+
button.validate {
margin-top: 1rem;
width: auto;
diff --git a/src/styles/components/_expansion-panel.scss b/src/styles/components/_expansion-panel.scss
index 095c7e856..eef011d90 100644
--- a/src/styles/components/_expansion-panel.scss
+++ b/src/styles/components/_expansion-panel.scss
@@ -1,7 +1,6 @@
@import '../base/color';
div.expansion-panel-root {
- margin-bottom: 1rem;
color: $grey-bright;
background-color: $grey-1;
border: 1px solid $grey-2;
@@ -9,12 +8,7 @@ div.expansion-panel-root {
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
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;
}
@@ -33,6 +27,7 @@ div.expansion-panel-summary {
}
&.Mui-expanded {
min-height: 4rem;
+ background-color: $grey-2;
&.small {
min-height: 3rem;
}
@@ -53,5 +48,6 @@ div.expansion-panel-content {
}
}
div.expansion-panel-details {
- padding: 0 1.2rem 1.2rem;
+ padding: 0 1rem 1rem;
+ background-color: $grey-2;
}
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index 5342054c9..a8772d739 100644
--- a/src/styles/components/_input.scss
+++ b/src/styles/components/_input.scss
@@ -28,7 +28,7 @@ input.inputNumber {
text-align: center;
}
-input:focus-visible {
+.Mui-focusVisible {
outline: 2px solid $blue-accessibility;
outline-offset: 2px;
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7b337eeba..1fdf7d6f0 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -60,7 +60,7 @@
--grey-2: #{$grey-2};
// Override Cozy UI colors
- --paperBackgroundColor: $dark-2;
+ --paperBackgroundColor: $grey-0;
--primaryTextColor: $grey-bright;
}
@@ -103,3 +103,11 @@ input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px $dark-2 inset !important;
}
+
+html {
+ background-color: $grey-0;
+}
+
+.app-content {
+ min-height: auto !important;
+}
--
GitLab