diff --git a/src/components/Analysis/Comparison/Comparison.spec.tsx b/src/components/Analysis/Comparison/Comparison.spec.tsx
index da099dfcb1f40306c8d74b9599a1157a8317477f..f3f48b67887ae96120ddee71a3850db2e2cbf35f 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('tab', {
+ const yearlyButton = await screen.findByRole('button', {
name: `analysis.compare.year_tab`,
})
- const monthlyButton = await screen.findByRole('tab', {
+ const monthlyButton = await screen.findByRole('button', {
name: `analysis.compare.month_tab`,
})
diff --git a/src/components/Analysis/Comparison/Comparison.tsx b/src/components/Analysis/Comparison/Comparison.tsx
index a7c8cc5d111d51b19e8c8fd305bdc25eeef05493..c2dab4fc0899a6c508e11e4294526fa6a2c8303b 100644
--- a/src/components/Analysis/Comparison/Comparison.tsx
+++ b/src/components/Analysis/Comparison/Comparison.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@material-ui/core'
+import { Button, ButtonGroup } from '@material-ui/core'
+import classNames from 'classnames'
import Loader from 'components/Loader/Loader'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -99,22 +100,20 @@ const Comparison = ({
<div className="comparison card rich-card">
<strong>{t('analysis.compare.title')}</strong>
{!isLoading && (
- <div role="tablist" className="tabs">
+ <ButtonGroup style={{ backgroundColor: 'var(--grey-0)' }}>
<Button
- role="tab"
- className={period === 'year' ? 'active' : ''}
+ className={classNames('btnTab', { active: period === 'year' })}
onClick={() => dispatch(setPeriod('year'))}
>
{t(`analysis.compare.year_tab`)}
</Button>
<Button
- role="tab"
- className={period === 'month' ? 'active' : ''}
+ className={classNames('btnTab', { active: period === 'month' })}
onClick={() => dispatch(setPeriod('month'))}
>
{t(`analysis.compare.month_tab`)}
</Button>
- </div>
+ </ButtonGroup>
)}
<div role="list" className="performanceIndicators">
diff --git a/src/components/Analysis/Comparison/comparison.scss b/src/components/Analysis/Comparison/comparison.scss
index 9b6fba8c3518fa7d22ae1bc45e9dc1ccf4532228..14685b77669ab6cf9a22e89e144d601d76c191f9 100644
--- a/src/components/Analysis/Comparison/comparison.scss
+++ b/src/components/Analysis/Comparison/comparison.scss
@@ -5,28 +5,6 @@
flex-direction: column;
gap: 1rem;
- .tabs {
- display: flex;
- flex-direction: row;
- gap: 8px;
- button {
- flex-grow: 1;
- background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
- linear-gradient(180deg, #323339 0%, #25262b 100%);
- border-radius: 4px 4px 0px 0px;
- box-shadow: 6px 0px 12px rgba(0, 0, 0, 0.3);
- padding: 0.5rem 0;
- span {
- color: #ffffff;
- text-transform: none;
- font-size: 0.75rem;
- line-height: 1.3;
- }
- &.active {
- background: #5e5e5e;
- }
- }
- }
.performanceIndicators {
display: flex;
flex-direction: column;
diff --git a/src/components/Ecogesture/EcogestureTabsView.tsx b/src/components/Ecogesture/EcogestureTabsView.tsx
index 7b1ba5cb8c9ec07d7db39e18382d885e42c97532..5fc42d6085f09e3851c0a5714b36b336bcdac2ec 100644
--- a/src/components/Ecogesture/EcogestureTabsView.tsx
+++ b/src/components/Ecogesture/EcogestureTabsView.tsx
@@ -1,4 +1,4 @@
-import { Tab, Tabs } from '@material-ui/core'
+import { Button, ButtonGroup } from '@material-ui/core'
import classNames from 'classnames'
import Content from 'components/Content/Content'
import CozyBar from 'components/Header/CozyBar'
@@ -81,35 +81,15 @@ const EcogestureTabsView = () => {
}, [ecogestureService, navigate])
const handleChange = useCallback(
- (event: React.ChangeEvent<object>, newValue: number) => {
- event.preventDefault()
+ (newTab: number) => {
const params = new URLSearchParams()
- params.append('tab', newValue.toString())
+ params.append('tab', newTab.toString())
navigate({ search: params.toString() })
- setTabValue(newValue)
+ setTabValue(newTab)
},
[navigate]
)
- const getTabLabel = useCallback(
- (tab: EcogestureTab) => {
- const tabCounts = {
- [EcogestureTab.OBJECTIVE]: objective.length,
- [EcogestureTab.DOING]: doing.length,
- [EcogestureTab.ALL]: ecogestures.length,
- }
-
- return (
- <>
- {t(`ecogesture.title_tab_${tab}`)}
- <br />
- {`(${tabCounts[tab]})`}
- </>
- )
- },
- [doing.length, ecogestures.length, objective.length, t]
- )
-
useEffect(() => {
let subscribed = true
async function loadEcogestures() {
@@ -161,45 +141,7 @@ const EcogestureTabsView = () => {
return (
<>
<CozyBar titleKey="common.title_ecogestures" />
- <Header desktopTitleKey="common.title_ecogestures">
- <Tabs
- value={tabValue}
- className="ecogestures-tabs"
- aria-label="ecogestures-tabs"
- onChange={handleChange}
- TabIndicatorProps={{ className: 'indicator-tab' }}
- centered={true}
- >
- <Tab
- label={getTabLabel(EcogestureTab.OBJECTIVE)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.OBJECTIVE,
- })}
- id={`simple-tab-${EcogestureTab.OBJECTIVE}`}
- aria-controls={`simple-tabpanel-${EcogestureTab.OBJECTIVE}`}
- tabIndex={0}
- />
- <Tab
- label={getTabLabel(EcogestureTab.DOING)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.DOING,
- })}
- id={`simple-tab-${EcogestureTab.DOING}`}
- aria-controls={`simple-tabpanel-${EcogestureTab.DOING}`}
- tabIndex={0}
- />
- <Tab
- label={getTabLabel(EcogestureTab.ALL)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.ALL,
- })}
- id={`simple-tab-${EcogestureTab.ALL}`}
- aria-controls={`simple-tabpanel-${EcogestureTab.ALL}`}
- tabIndex={0}
- />
- </Tabs>
- </Header>
-
+ <Header desktopTitleKey="common.title_ecogestures" />
<Content>
{isLoading && (
<div className="loaderContainer">
@@ -208,6 +150,40 @@ const EcogestureTabsView = () => {
)}
{!isLoading && (
<>
+ <div className="tabContainer">
+ <ButtonGroup>
+ <Button
+ className={classNames('btnTab', {
+ active: tabValue === EcogestureTab.OBJECTIVE,
+ })}
+ onClick={() => handleChange(EcogestureTab.OBJECTIVE)}
+ >
+ {t(`ecogesture.title_tab_objective`)}
+ <br />
+ {`(${objective.length})`}
+ </Button>
+ <Button
+ className={classNames('btnTab', {
+ active: tabValue === EcogestureTab.DOING,
+ })}
+ onClick={() => handleChange(EcogestureTab.DOING)}
+ >
+ {t(`ecogesture.title_tab_doing`)}
+ <br />
+ {`(${doing.length})`}
+ </Button>
+ <Button
+ className={classNames('btnTab', {
+ active: tabValue === EcogestureTab.ALL,
+ })}
+ onClick={() => handleChange(EcogestureTab.ALL)}
+ >
+ {t(`ecogesture.title_tab_all`)}
+ <br />
+ {`(${ecogestures.length})`}
+ </Button>
+ </ButtonGroup>
+ </div>
<TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
{profile.isProfileEcogestureCompleted &&
(totalAvailable === totalViewed && objective.length === 0 ? (
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index e1aeb701831ac33e157476bf3a59781392e6d98b..01ecbe09af631ddbbcb29c5028c1653fb32f201e 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -9,88 +9,56 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
/>
<mock-header
desktoptitlekey="common.title_ecogestures"
- >
+ />
+ <mock-content>
<div
- class="MuiTabs-root ecogestures-tabs"
+ class="tabContainer"
>
<div
- class="MuiTabs-scroller MuiTabs-fixed"
- style="overflow: hidden;"
+ class="MuiButtonGroup-root"
+ role="group"
>
- <div
- aria-label="ecogestures-tabs"
- class="MuiTabs-flexContainer MuiTabs-centered"
- role="tablist"
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+ tabindex="0"
+ type="button"
>
- <button
- aria-controls="simple-tabpanel-0"
- aria-selected="true"
- class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab active Mui-selected"
- id="simple-tab-0"
- role="tab"
- tabindex="0"
- type="button"
+ <span
+ class="MuiButton-label"
>
- <span
- class="MuiTab-wrapper"
- >
- ecogesture.title_tab_0
- <br />
- (0)
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-controls="simple-tabpanel-1"
- aria-selected="false"
- class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
- id="simple-tab-1"
- role="tab"
- tabindex="0"
- type="button"
+ ecogesture.title_tab_objective
+ <br />
+ (0)
+ </span>
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <span
- class="MuiTab-wrapper"
- >
- ecogesture.title_tab_1
- <br />
- (2)
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-controls="simple-tabpanel-2"
- aria-selected="false"
- class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit single-tab"
- id="simple-tab-2"
- role="tab"
- tabindex="0"
- type="button"
+ ecogesture.title_tab_doing
+ <br />
+ (2)
+ </span>
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <span
- class="MuiTab-wrapper"
- >
- ecogesture.title_tab_2
- <br />
- (3)
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- </div>
- <span
- class="PrivateTabIndicator-root-1 PrivateTabIndicator-colorSecondary-3 indicator-tab"
- style="left: 0px; width: 0px;"
- />
+ ecogesture.title_tab_all
+ <br />
+ (3)
+ </span>
+ </button>
</div>
</div>
- </mock-header>
- <mock-content>
<div
aria-labelledby="simple-tab-0"
id="simple-tabpanel-0"
diff --git a/src/components/Ecogesture/ecogestureTabsView.scss b/src/components/Ecogesture/ecogestureTabsView.scss
index 4d6106f9e04789dd82d6f8cbefe7092a0206275d..707f6015086ad55dcfc4b3882a49b127acb3c0a8 100644
--- a/src/components/Ecogesture/ecogestureTabsView.scss
+++ b/src/components/Ecogesture/ecogestureTabsView.scss
@@ -11,40 +11,12 @@
min-height: 80vh;
}
}
-.ecogestures-tabs {
- background: transparent;
- color: $soft-grey;
+.tabContainer {
+ padding-inline: 16px;
+ padding-top: 16px;
display: flex;
justify-content: center;
- margin: 0 1rem;
- box-sizing: border-box;
button {
- border-radius: 4px 4px 0 0;
- }
- .single-tab {
- width: 32%;
- text-transform: initial;
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.2rem;
- &.active {
- font-weight: 700;
- color: $gold-shadow;
- }
- }
- .indicator-tab {
- background: $gold-shadow;
- height: 1px;
- &::before {
- content: '';
- position: absolute;
- height: 12px;
- left: 10.41%;
- right: 10.42%;
- bottom: -6px;
- background: $gold-shadow;
- opacity: 0.35;
- filter: blur(10px);
- }
+ height: auto;
}
}
diff --git a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.spec.tsx
index a5621a2190daac52224c2e75ff043f6b3134d34f..d76c9b35da62a001282fd36892735eca246deedf 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('listitem').length).toBe(8)
+ expect(screen.getAllByRole('button').length).toBe(4)
expect(container).toMatchSnapshot()
})
@@ -50,7 +50,7 @@ describe('TimeStepSelector component', () => {
<TimeStepSelector fluidType={FluidType.ELECTRICITY} />
</Provider>
)
- expect(screen.getAllByRole('listitem').length).toBe(10)
+ expect(screen.getAllByRole('button').length).toBe(5)
})
it('should define next TimeStep and dispatch it', async () => {
@@ -69,10 +69,10 @@ describe('TimeStepSelector component', () => {
</Provider>
)
await act(async () => {
- await userEvent.click(screen.getAllByRole('listitem')[2])
+ await userEvent.click(screen.getAllByRole('button')[2])
})
expect(setCurrentTimeStepSpy).toHaveBeenCalledTimes(1)
- expect(setCurrentTimeStepSpy).toHaveBeenCalledWith(TimeStep.DAY)
+ 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 24ccc905c9f14819cdb581e5a435ce31ca10e77d..6d86b501806d23acb53f5eead9ace4201b0ee3c2 100644
--- a/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
+++ b/src/components/FluidChart/TimeStepSelector/TimeStepSelector.tsx
@@ -1,5 +1,7 @@
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+import { Button, ButtonGroup } from '@material-ui/core'
+import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
import { FluidType, TimeStep } from 'enums'
import React from 'react'
@@ -33,38 +35,19 @@ const TimeStepSelector = ({ fluidType }: { fluidType: FluidType }) => {
}
return (
<div className="timestep-selector">
- <div className="timestep-container">
- <ul
- className={`timestep-bar ${
- fluidType === FluidType.ELECTRICITY && 'elec-bar'
- }`}
- >
- {timeStepArray.map(step => (
- <React.Fragment key={step}>
- <li
- className={
- step === currentTimeStep ? 'active circle' : 'circle'
- }
- onClick={() => handleChangeTimeStep(step)}
- onKeyDown={event => {
- if (event.key === ' ') {
- event.preventDefault()
- handleChangeTimeStep(step)
- }
- }}
- id={TimeStep[step].toLowerCase()}
- tabIndex={0}
- >
- <span className="clickable-area" />
- <span className="text text-14-normal">
- {t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
- </span>
- </li>
- <li className="bar" />
- </React.Fragment>
- ))}
- </ul>
- </div>
+ <ButtonGroup>
+ {timeStepArray.map(step => (
+ <Button
+ key={step}
+ onClick={() => handleChangeTimeStep(step)}
+ className={classNames('btnTab', {
+ active: step === currentTimeStep,
+ })}
+ >
+ {t(`timestep.${TimeStep[step].toLowerCase()}.period`)}
+ </Button>
+ ))}
+ </ButtonGroup>
</div>
)
}
diff --git a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
index c83e1f6b4830d8cbcf4a551827798bddc3a80c0c..8c5142e7e29c110c8cd82b31b8b1a7227af82045 100644
--- a/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
+++ b/src/components/FluidChart/TimeStepSelector/__snapshots__/TimeStepSelector.spec.tsx.snap
@@ -6,80 +6,65 @@ exports[`TimeStepSelector component should render component properly with 4 time
class="timestep-selector"
>
<div
- class="timestep-container"
+ class="MuiButtonGroup-root"
+ role="group"
>
- <ul
- class="timestep-bar false"
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ tabindex="0"
+ type="button"
>
- <li
- class="circle"
- id="week"
- tabindex="0"
+ <span
+ class="MuiButton-label"
>
- <span
- class="clickable-area"
- />
- <span
- class="text text-14-normal"
- >
- timestep.week.period
- </span>
- </li>
- <li
- class="bar"
+ timestep.week.period
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
- <li
- class="active circle"
- id="day"
- tabindex="0"
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab active"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <span
- class="clickable-area"
- />
- <span
- class="text text-14-normal"
- >
- timestep.day.period
- </span>
- </li>
- <li
- class="bar"
+ timestep.day.period
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
- <li
- class="circle"
- id="month"
- tabindex="0"
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <span
- class="clickable-area"
- />
- <span
- class="text text-14-normal"
- >
- timestep.month.period
- </span>
- </li>
- <li
- class="bar"
+ timestep.month.period
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
- <li
- class="circle"
- id="year"
- tabindex="0"
+ </button>
+ <button
+ class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButtonGroup-grouped MuiButtonGroup-groupedHorizontal MuiButtonGroup-groupedOutlined MuiButtonGroup-groupedOutlinedHorizontal MuiButtonGroup-groupedOutlined btnTab"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label"
>
- <span
- class="clickable-area"
- />
- <span
- class="text text-14-normal"
- >
- timestep.year.period
- </span>
- </li>
- <li
- class="bar"
+ timestep.year.period
+ </span>
+ <span
+ class="MuiTouchRipple-root"
/>
- </ul>
+ </button>
</div>
</div>
</div>
diff --git a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
index 4b3277a2e8e687399d33660c9bd44fa5648955e2..1677bc8d2e04d0ec919a658ccbc30209856e1654 100644
--- a/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
+++ b/src/components/FluidChart/TimeStepSelector/timeStepSelector.scss
@@ -10,6 +10,8 @@
margin: auto;
margin-top: 1rem;
max-width: 45.75rem;
+ padding-inline: 16px;
+ box-sizing: border-box;
width: 100%;
.btnSecondary {
max-width: 90px;
@@ -18,78 +20,6 @@
}
.timestep-container {
width: 100%;
- }
- .timestep-bar {
- margin: 0 1rem 0 1.7rem;
- padding: 0;
display: flex;
- justify-content: space-evenly;
- align-items: center;
- height: 3rem;
- &.elec-bar {
- margin-left: 1rem;
- }
- .circle {
- cursor: pointer;
- position: relative;
- display: block;
- width: 8px;
- height: 8px;
- border-radius: 100%;
- text-align: center;
- background-color: $soft-grey;
- z-index: 1;
- transition: all 300ms ease;
- margin: 0 2px;
- .clickable-area {
- position: absolute;
- width: 35px;
- height: 35px;
- display: block;
- left: -14px;
- top: -15px;
- }
- &:focus-visible {
- outline: 2px solid $blue-accessibility;
- outline-offset: 2px;
- }
- }
- .text {
- position: relative;
- display: block;
- top: 15px;
- left: -20px;
- text-align: center;
- color: $grey-dark;
- width: 50px;
- overflow: visible;
- @media only screen and (max-width: 355px) {
- opacity: 0;
- }
- }
- .bar {
- width: 100%;
- position: relative;
- display: block;
- background-color: transparent;
- border-top: 1px dashed $soft-grey;
- height: 0;
- z-index: 0;
- padding: 0 2px;
- &:last-of-type {
- display: none;
- }
- }
- .circle.active {
- background-color: white;
- width: 10px;
- height: 10px;
- .text {
- opacity: 1;
- top: 16px;
- color: white;
- transition: 300ms ease;
- }
- }
}
}
diff --git a/src/components/theme.ts b/src/components/theme.ts
index 0d900f018f4bc247c2cd50952ed9e960099bd328..e24da5ec581f5b4d9b960d0c72bedcaa41564ff4 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -44,5 +44,15 @@ export const theme = createTheme({
padding: 0,
},
},
+ MuiButtonGroup: {
+ root: {
+ width: '100%',
+ borderColor: '#2f3139',
+ backgroundColor: '#23252D',
+ borderRadius: 43,
+ padding: 8,
+ gap: 12,
+ },
+ },
},
})
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9ada80a25fae8cad101c8e90418dd353ca4cc809..cabd4bc40e90c8b9689e575601b54f1a37195b44 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -114,8 +114,8 @@
"max_day": "Jour où vous avez le plus consommé",
"compare": {
"title": "Comparaison",
- "month_tab": "Comparer au mois dernier",
- "year_tab": "Comparer à l'année dernière"
+ "month_tab": "Mois précédent",
+ "year_tab": "Année précédente"
},
"temperature_comparison": {
"unit": "°C",
@@ -490,9 +490,9 @@
}
},
"ecogesture": {
- "title_tab_0": "Objectifs",
- "title_tab_1": "Je fais déjà",
- "title_tab_2": "Toutes",
+ "title_tab_objective": "Objectifs",
+ "title_tab_doing": "Je fais déjà",
+ "title_tab_all": "Toutes",
"MENU_TITLE": "Filtrer",
"ALL": "Tous les usages",
"HEATING": "Chauffage",
diff --git a/src/styles/components/_buttons.scss b/src/styles/components/_buttons.scss
index c3cfc4fff498721495f1ecf7b1334eb8e518cfe3..aa275ba3493b63ed9d18cd61d2c11bde775d0ed5 100644
--- a/src/styles/components/_buttons.scss
+++ b/src/styles/components/_buttons.scss
@@ -44,4 +44,24 @@ button {
border-radius: 4px;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.55);
}
+
+ &.btnTab {
+ @include button($grey-bright, transparent, transparent);
+ text-transform: none;
+ border-radius: 43px !important;
+ height: 25px;
+ padding: 4px;
+
+ span {
+ font-weight: 400;
+ line-height: normal;
+ }
+
+ &.active {
+ background: $bg-active;
+ span {
+ font-weight: 700;
+ }
+ }
+ }
}