diff --git a/src/components/Analysis/MonthlyAnalysis.tsx b/src/components/Analysis/MonthlyAnalysis.tsx
index d61f48fde12b559d998343da38477cc2a5e7d588..c202d2c7a2b10e10d747b55b7318b916ad7a35c6 100644
--- a/src/components/Analysis/MonthlyAnalysis.tsx
+++ b/src/components/Analysis/MonthlyAnalysis.tsx
@@ -114,7 +114,7 @@ const MonthlyAnalysis = ({
return (
<>
{loadAnalysis && (
- <div className="analysis-container-spinner">
+ <div className="loaderContainer">
<Loader />
</div>
)}
diff --git a/src/components/Analysis/monthlyanalysis.scss b/src/components/Analysis/monthlyanalysis.scss
index fe7df2a081cb3a2f80bc7be7951b2024d3f310e6..0ebbf57f0d969735a8bf699eecada672ae185dd1 100644
--- a/src/components/Analysis/monthlyanalysis.scss
+++ b/src/components/Analysis/monthlyanalysis.scss
@@ -41,10 +41,3 @@
}
}
}
-.analysis-container-spinner {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
-}
diff --git a/src/components/Ecogesture/EcogestureView.tsx b/src/components/Ecogesture/EcogestureView.tsx
index d2d65a8f43b7f8b788a1efd1b4c2a36fc592f7bf..b20ef129288c2b1310657050c1cc1268fbfcee11 100644
--- a/src/components/Ecogesture/EcogestureView.tsx
+++ b/src/components/Ecogesture/EcogestureView.tsx
@@ -111,13 +111,6 @@ const EcogestureView = () => {
[navigate]
)
- const tabProps = useCallback((index: number) => {
- return {
- id: `simple-tab-${index}`,
- 'aria-controls': `simple-tabpanel-${index}`,
- }
- }, [])
-
const getTabLabel = useCallback(
(tab: EcogestureTab) => {
const tabCounts = {
@@ -184,52 +177,56 @@ const EcogestureView = () => {
return (
<>
<CozyBar titleKey={'common.title_ecogestures'} />
- {isLoading && (
- <Content height={headerHeight}>
- <div className="ecogesture-spinner" aria-busy="true">
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ 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>
+
+ <Content height={headerHeight}>
+ {isLoading && (
+ <div className="loaderContainer">
<Loader text={t('ecogestures.loading')} />
</div>
- </Content>
- )}
- {!isLoading && (
- <>
- <Header
- setHeaderHeight={defineHeaderHeight}
- 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,
- })}
- {...tabProps(EcogestureTab.OBJECTIVE)}
- />
- <Tab
- label={getTabLabel(EcogestureTab.DOING)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.DOING,
- })}
- {...tabProps(EcogestureTab.DOING)}
- />
- <Tab
- label={getTabLabel(EcogestureTab.ALL)}
- className={classNames('single-tab', {
- ['active']: tabValue === EcogestureTab.ALL,
- })}
- {...tabProps(EcogestureTab.ALL)}
- />
- </Tabs>
- </Header>
-
- <Content height={headerHeight}>
+ )}
+ {!isLoading && (
+ <>
<TabPanel value={tabValue} tab={EcogestureTab.OBJECTIVE}>
{profile.isProfileEcogestureCompleted &&
(totalAvailable === totalViewed &&
@@ -298,23 +295,23 @@ const EcogestureView = () => {
/>
)}
</TabPanel>
- </Content>
- </>
- )}
- {openEcogestureInitModal && (
- <EcogestureInitModal
- open={openEcogestureInitModal}
- handleCloseClick={handleCloseEcogestureInitModal}
- handleLaunchForm={handleLaunchForm}
- />
- )}
- {openEcogestureReinitModal && (
- <EcogestureReinitModal
- open={openEcogestureReinitModal}
- handleCloseClick={handleCloseEcogestureReinitModal}
- handleLaunchReinit={handleLaunchReinit}
- />
- )}
+ </>
+ )}
+ {openEcogestureInitModal && (
+ <EcogestureInitModal
+ open={openEcogestureInitModal}
+ handleCloseClick={handleCloseEcogestureInitModal}
+ handleLaunchForm={handleLaunchForm}
+ />
+ )}
+ {openEcogestureReinitModal && (
+ <EcogestureReinitModal
+ open={openEcogestureReinitModal}
+ handleCloseClick={handleCloseEcogestureReinitModal}
+ handleLaunchReinit={handleLaunchReinit}
+ />
+ )}
+ </Content>
</>
)
}
diff --git a/src/components/Ecogesture/SingleEcogesture.tsx b/src/components/Ecogesture/SingleEcogesture.tsx
index a6c2f8fc42b64b7070f4e1995d1092a0ae177953..385db2a333c917d9758c5fa0c302b583422ff782 100644
--- a/src/components/Ecogesture/SingleEcogesture.tsx
+++ b/src/components/Ecogesture/SingleEcogesture.tsx
@@ -17,7 +17,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { Ecogesture } from 'models'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
-import { Location, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Location, useLocation, useParams } from 'react-router-dom'
import EcogestureService from 'services/ecogesture.service'
import { useAppSelector } from 'store/hooks'
import { importIconById } from 'utils/utils'
@@ -33,7 +33,6 @@ interface EcogestureLocation extends Location {
const SingleEcogesture = () => {
const { t } = useI18n()
const client = useClient()
- const navigate = useNavigate()
const location: EcogestureLocation = useLocation()
const [ecogesture, setEcogesture] = useState<Ecogesture>()
const [ecogestureIcon, setEcogestureIcon] = useState<string>('')
@@ -119,109 +118,108 @@ const SingleEcogesture = () => {
setValidExploration,
])
- if (isLoading) {
- return (
- <Content height={headerHeight}>
- <Loader />
- </Content>
- )
- }
-
if (ecogesture) {
return (
<>
- <CozyBar
- titleKey={'common.title_ecogesture'}
- displayBackArrow={true}
- backFunction={() => navigate('/ecogestures')}
- />
+ <CozyBar titleKey={'common.title_ecogesture'} displayBackArrow={true} />
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_ecogesture'}
displayBackArrow={true}
/>
<Content height={headerHeight}>
- <div className="single-ecogesture">
- <div className="icon-container">
- {ecogestureIcon && (
- <StyledIcon
- className="icon-big"
- icon={ecogestureIcon}
- size={220}
- />
- )}
- </div>
- <div className="details">
- <div className="text-22 title">{ecogesture.shortName}</div>
- <div className="efficiency">
- <span className="text text-14-normal">
- {t('ecogesture_modal.efficiency')}
- </span>
- <EfficiencyRating result={Math.round(ecogesture.efficiency)} />
- </div>
+ {isLoading && (
+ <div className="loaderContainer">
+ <Loader />
</div>
- <div className="styled-container">
- <div className="long-name text-18-bold">
- {ecogesture.longName}
- </div>
- <div
- className="toggle-text text-15-normal"
- onClick={toggleMoreDetail}
- role="button"
- >
- {isMoreDetail
- ? t('ecogesture_modal.show_less')
- : t('ecogesture_modal.show_more')}
+ )}
+ {!isLoading && (
+ <div className="single-ecogesture">
+ <div className="icon-container">
+ {ecogestureIcon && (
+ <StyledIcon
+ className="icon-big"
+ icon={ecogestureIcon}
+ size={220}
+ />
+ )}
</div>
- <div
- className={classNames('description text-16-normal-150', {
- ['block']: isMoreDetail === true,
- })}
- >
- {ecogesture.longDescription}
+ <div className="details">
+ <div className="text-22 title">{ecogesture.shortName}</div>
+ <div className="efficiency">
+ <span className="text text-14-normal">
+ {t('ecogesture_modal.efficiency')}
+ </span>
+ <EfficiencyRating
+ result={Math.round(ecogesture.efficiency)}
+ />
+ </div>
</div>
- </div>
- {selectionCompleted && (
- <div className="buttons-selection">
- <IconButton
- aria-label={t('ecogesture.objective')}
- onClick={toggleObjective}
- classes={{
- root: `btn-secondary-negative objective-btn ${
- isObjective && 'active'
- }`,
- label: 'text-15-normal',
- }}
+ <div className="styled-container">
+ <div className="long-name text-18-bold">
+ {ecogesture.longName}
+ </div>
+ <div
+ className="toggle-text text-15-normal"
+ onClick={toggleMoreDetail}
+ role="button"
>
- <Icon
- className="status-icon"
- icon={
- isObjective ? objectiveEnabledIcon : objectiveDisabledIcon
- }
- size={40}
- />
- <span>{t('ecogesture.objective')}</span>
- </IconButton>
- <IconButton
- aria-label={t('ecogesture.doing')}
- onClick={toggleDoing}
- classes={{
- root: `btn-secondary-negative doing-btn ${
- isDoing && 'active'
- }`,
- label: 'text-15-normal',
- }}
+ {isMoreDetail
+ ? t('ecogesture_modal.show_less')
+ : t('ecogesture_modal.show_more')}
+ </div>
+ <div
+ className={classNames('description text-16-normal-150', {
+ ['block']: isMoreDetail === true,
+ })}
>
- <Icon
- className="status-icon"
- icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
- size={40}
- />
- <span>{t('ecogesture.doing')}</span>
- </IconButton>
+ {ecogesture.longDescription}
+ </div>
</div>
- )}
- </div>
+ {selectionCompleted && (
+ <div className="buttons-selection">
+ <IconButton
+ aria-label={t('ecogesture.objective')}
+ onClick={toggleObjective}
+ classes={{
+ root: `btn-secondary-negative objective-btn ${
+ isObjective && 'active'
+ }`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={
+ isObjective
+ ? objectiveEnabledIcon
+ : objectiveDisabledIcon
+ }
+ size={40}
+ />
+ <span>{t('ecogesture.objective')}</span>
+ </IconButton>
+ <IconButton
+ aria-label={t('ecogesture.doing')}
+ onClick={toggleDoing}
+ classes={{
+ root: `btn-secondary-negative doing-btn ${
+ isDoing && 'active'
+ }`,
+ label: 'text-15-normal',
+ }}
+ >
+ <Icon
+ className="status-icon"
+ icon={isDoing ? doingEnabledIcon : doingDisabledIcon}
+ size={40}
+ />
+ <span>{t('ecogesture.doing')}</span>
+ </IconButton>
+ </div>
+ )}
+ </div>
+ )}
</Content>
</>
)
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
index 50965b8272031fe0d5d756ebda4d77811f41f39c..dfb1e8a5a948fa096235cffba7361bb2c3087206 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureView.spec.tsx.snap
@@ -95,6 +95,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
onChange={[Function]}
selected={true}
+ tabIndex={0}
textColor="inherit"
value={0}
>
@@ -127,6 +128,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
onChange={[Function]}
selected={true}
+ tabIndex={0}
textColor="inherit"
value={0}
>
@@ -239,6 +241,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
onChange={[Function]}
selected={false}
+ tabIndex={0}
textColor="inherit"
value={1}
>
@@ -271,6 +274,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
onChange={[Function]}
selected={false}
+ tabIndex={0}
textColor="inherit"
value={1}
>
@@ -284,7 +288,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
>
<ForwardRef(ButtonBase)
aria-controls="simple-tabpanel-1"
@@ -303,7 +307,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
>
<button
aria-controls="simple-tabpanel-1"
@@ -324,7 +328,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
type="button"
>
<span
@@ -383,6 +387,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
onChange={[Function]}
selected={false}
+ tabIndex={0}
textColor="inherit"
value={2}
>
@@ -415,6 +420,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
onChange={[Function]}
selected={false}
+ tabIndex={0}
textColor="inherit"
value={2}
>
@@ -428,7 +434,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
>
<ForwardRef(ButtonBase)
aria-controls="simple-tabpanel-2"
@@ -447,7 +453,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
onFocus={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
>
<button
aria-controls="simple-tabpanel-2"
@@ -468,7 +474,7 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
role="tab"
- tabIndex={-1}
+ tabIndex={0}
type="button"
>
<span
@@ -1244,533 +1250,516 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
role="tabpanel"
/>
</TabPanel>
- </mock-content>
- <EcogestureInitModal
- handleCloseClick={[Function]}
- handleLaunchForm={[Function]}
- open={true}
- >
- <WithStyles(ForwardRef(Dialog))
- aria-labelledby="accessibility-title"
- classes={
- Object {
- "paper": "modal-paper",
- "root": "modal-root",
- }
- }
- onClose={[Function]}
+ <EcogestureInitModal
+ handleCloseClick={[Function]}
+ handleLaunchForm={[Function]}
open={true}
>
- <ForwardRef(Dialog)
+ <WithStyles(ForwardRef(Dialog))
aria-labelledby="accessibility-title"
classes={
Object {
- "container": "MuiDialog-container",
- "paper": "MuiDialog-paper modal-paper",
- "paperFullScreen": "MuiDialog-paperFullScreen",
- "paperFullWidth": "MuiDialog-paperFullWidth",
- "paperScrollBody": "MuiDialog-paperScrollBody",
- "paperScrollPaper": "MuiDialog-paperScrollPaper",
- "paperWidthFalse": "MuiDialog-paperWidthFalse",
- "paperWidthLg": "MuiDialog-paperWidthLg",
- "paperWidthMd": "MuiDialog-paperWidthMd",
- "paperWidthSm": "MuiDialog-paperWidthSm",
- "paperWidthXl": "MuiDialog-paperWidthXl",
- "paperWidthXs": "MuiDialog-paperWidthXs",
- "root": "MuiDialog-root modal-root",
- "scrollBody": "MuiDialog-scrollBody",
- "scrollPaper": "MuiDialog-scrollPaper",
+ "paper": "modal-paper",
+ "root": "modal-root",
}
}
onClose={[Function]}
open={true}
>
- <ForwardRef(Modal)
- BackdropComponent={
+ <ForwardRef(Dialog)
+ aria-labelledby="accessibility-title"
+ classes={
Object {
- "$$typeof": Symbol(react.forward_ref),
- "Naked": Object {
+ "container": "MuiDialog-container",
+ "paper": "MuiDialog-paper modal-paper",
+ "paperFullScreen": "MuiDialog-paperFullScreen",
+ "paperFullWidth": "MuiDialog-paperFullWidth",
+ "paperScrollBody": "MuiDialog-paperScrollBody",
+ "paperScrollPaper": "MuiDialog-paperScrollPaper",
+ "paperWidthFalse": "MuiDialog-paperWidthFalse",
+ "paperWidthLg": "MuiDialog-paperWidthLg",
+ "paperWidthMd": "MuiDialog-paperWidthMd",
+ "paperWidthSm": "MuiDialog-paperWidthSm",
+ "paperWidthXl": "MuiDialog-paperWidthXl",
+ "paperWidthXs": "MuiDialog-paperWidthXs",
+ "root": "MuiDialog-root modal-root",
+ "scrollBody": "MuiDialog-scrollBody",
+ "scrollPaper": "MuiDialog-scrollPaper",
+ }
+ }
+ onClose={[Function]}
+ open={true}
+ >
+ <ForwardRef(Modal)
+ BackdropComponent={
+ Object {
"$$typeof": Symbol(react.forward_ref),
- "propTypes": Object {
- "children": [Function],
- "className": [Function],
- "classes": [Function],
- "invisible": [Function],
- "open": [Function],
- "transitionDuration": [Function],
- },
- "render": [Function],
- },
- "displayName": "WithStyles(ForwardRef(Backdrop))",
- "options": Object {
- "defaultTheme": Object {
- "breakpoints": Object {
- "between": [Function],
- "down": [Function],
- "keys": Array [
- "xs",
- "sm",
- "md",
- "lg",
- "xl",
- ],
- "only": [Function],
- "up": [Function],
- "values": Object {
- "lg": 1280,
- "md": 960,
- "sm": 600,
- "xl": 1920,
- "xs": 0,
- },
- "width": [Function],
+ "Naked": Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "propTypes": Object {
+ "children": [Function],
+ "className": [Function],
+ "classes": [Function],
+ "invisible": [Function],
+ "open": [Function],
+ "transitionDuration": [Function],
},
- "direction": "ltr",
- "mixins": Object {
- "gutters": [Function],
- "toolbar": Object {
- "@media (min-width:0px) and (orientation: landscape)": Object {
- "minHeight": 48,
- },
- "@media (min-width:600px)": Object {
- "minHeight": 64,
+ "render": [Function],
+ },
+ "displayName": "WithStyles(ForwardRef(Backdrop))",
+ "options": Object {
+ "defaultTheme": Object {
+ "breakpoints": Object {
+ "between": [Function],
+ "down": [Function],
+ "keys": Array [
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ ],
+ "only": [Function],
+ "up": [Function],
+ "values": Object {
+ "lg": 1280,
+ "md": 960,
+ "sm": 600,
+ "xl": 1920,
+ "xs": 0,
},
- "minHeight": 56,
- },
- },
- "overrides": Object {},
- "palette": Object {
- "action": Object {
- "activatedOpacity": 0.12,
- "active": "rgba(0, 0, 0, 0.54)",
- "disabled": "rgba(0, 0, 0, 0.26)",
- "disabledBackground": "rgba(0, 0, 0, 0.12)",
- "disabledOpacity": 0.38,
- "focus": "rgba(0, 0, 0, 0.12)",
- "focusOpacity": 0.12,
- "hover": "rgba(0, 0, 0, 0.04)",
- "hoverOpacity": 0.04,
- "selected": "rgba(0, 0, 0, 0.08)",
- "selectedOpacity": 0.08,
- },
- "augmentColor": [Function],
- "background": Object {
- "default": "#fafafa",
- "paper": "#fff",
- },
- "common": Object {
- "black": "#000",
- "white": "#fff",
- },
- "contrastThreshold": 3,
- "divider": "rgba(0, 0, 0, 0.12)",
- "error": Object {
- "contrastText": "#fff",
- "dark": "#d32f2f",
- "light": "#e57373",
- "main": "#f44336",
- },
- "getContrastText": [Function],
- "grey": Object {
- "100": "#f5f5f5",
- "200": "#eeeeee",
- "300": "#e0e0e0",
- "400": "#bdbdbd",
- "50": "#fafafa",
- "500": "#9e9e9e",
- "600": "#757575",
- "700": "#616161",
- "800": "#424242",
- "900": "#212121",
- "A100": "#d5d5d5",
- "A200": "#aaaaaa",
- "A400": "#303030",
- "A700": "#616161",
- },
- "info": Object {
- "contrastText": "#fff",
- "dark": "#1976d2",
- "light": "#64b5f6",
- "main": "#2196f3",
- },
- "primary": Object {
- "contrastText": "#fff",
- "dark": "#303f9f",
- "light": "#7986cb",
- "main": "#3f51b5",
- },
- "secondary": Object {
- "contrastText": "#fff",
- "dark": "#c51162",
- "light": "#ff4081",
- "main": "#f50057",
- },
- "success": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#388e3c",
- "light": "#81c784",
- "main": "#4caf50",
- },
- "text": Object {
- "disabled": "rgba(0, 0, 0, 0.38)",
- "hint": "rgba(0, 0, 0, 0.38)",
- "primary": "rgba(0, 0, 0, 0.87)",
- "secondary": "rgba(0, 0, 0, 0.54)",
- },
- "tonalOffset": 0.2,
- "type": "light",
- "warning": Object {
- "contrastText": "rgba(0, 0, 0, 0.87)",
- "dark": "#f57c00",
- "light": "#ffb74d",
- "main": "#ff9800",
- },
- },
- "props": Object {},
- "shadows": Array [
- "none",
- "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
- "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
- "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
- "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
- "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
- "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
- "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
- "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
- "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
- "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
- "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
- "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
- "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
- "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
- "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
- "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
- "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
- "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
- "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
- "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
- "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
- ],
- "shape": Object {
- "borderRadius": 4,
- },
- "spacing": [Function],
- "transitions": Object {
- "create": [Function],
- "duration": Object {
- "complex": 375,
- "enteringScreen": 225,
- "leavingScreen": 195,
- "short": 250,
- "shorter": 200,
- "shortest": 150,
- "standard": 300,
- },
- "easing": Object {
- "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
- "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
- "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
- "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
- },
- "getAutoHeightDuration": [Function],
- },
- "typography": Object {
- "body1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.5,
- },
- "body2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 400,
- "letterSpacing": "0.01071em",
- "lineHeight": 1.43,
- },
- "button": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.02857em",
- "lineHeight": 1.75,
- "textTransform": "uppercase",
- },
- "caption": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.03333em",
- "lineHeight": 1.66,
- },
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": 14,
- "fontWeightBold": 700,
- "fontWeightLight": 300,
- "fontWeightMedium": 500,
- "fontWeightRegular": 400,
- "h1": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "6rem",
- "fontWeight": 300,
- "letterSpacing": "-0.01562em",
- "lineHeight": 1.167,
- },
- "h2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3.75rem",
- "fontWeight": 300,
- "letterSpacing": "-0.00833em",
- "lineHeight": 1.2,
- },
- "h3": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "3rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.167,
+ "width": [Function],
},
- "h4": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "2.125rem",
- "fontWeight": 400,
- "letterSpacing": "0.00735em",
- "lineHeight": 1.235,
+ "direction": "ltr",
+ "mixins": Object {
+ "gutters": [Function],
+ "toolbar": Object {
+ "@media (min-width:0px) and (orientation: landscape)": Object {
+ "minHeight": 48,
+ },
+ "@media (min-width:600px)": Object {
+ "minHeight": 64,
+ },
+ "minHeight": 56,
+ },
},
- "h5": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.5rem",
- "fontWeight": 400,
- "letterSpacing": "0em",
- "lineHeight": 1.334,
+ "overrides": Object {},
+ "palette": Object {
+ "action": Object {
+ "activatedOpacity": 0.12,
+ "active": "rgba(0, 0, 0, 0.54)",
+ "disabled": "rgba(0, 0, 0, 0.26)",
+ "disabledBackground": "rgba(0, 0, 0, 0.12)",
+ "disabledOpacity": 0.38,
+ "focus": "rgba(0, 0, 0, 0.12)",
+ "focusOpacity": 0.12,
+ "hover": "rgba(0, 0, 0, 0.04)",
+ "hoverOpacity": 0.04,
+ "selected": "rgba(0, 0, 0, 0.08)",
+ "selectedOpacity": 0.08,
+ },
+ "augmentColor": [Function],
+ "background": Object {
+ "default": "#fafafa",
+ "paper": "#fff",
+ },
+ "common": Object {
+ "black": "#000",
+ "white": "#fff",
+ },
+ "contrastThreshold": 3,
+ "divider": "rgba(0, 0, 0, 0.12)",
+ "error": Object {
+ "contrastText": "#fff",
+ "dark": "#d32f2f",
+ "light": "#e57373",
+ "main": "#f44336",
+ },
+ "getContrastText": [Function],
+ "grey": Object {
+ "100": "#f5f5f5",
+ "200": "#eeeeee",
+ "300": "#e0e0e0",
+ "400": "#bdbdbd",
+ "50": "#fafafa",
+ "500": "#9e9e9e",
+ "600": "#757575",
+ "700": "#616161",
+ "800": "#424242",
+ "900": "#212121",
+ "A100": "#d5d5d5",
+ "A200": "#aaaaaa",
+ "A400": "#303030",
+ "A700": "#616161",
+ },
+ "info": Object {
+ "contrastText": "#fff",
+ "dark": "#1976d2",
+ "light": "#64b5f6",
+ "main": "#2196f3",
+ },
+ "primary": Object {
+ "contrastText": "#fff",
+ "dark": "#303f9f",
+ "light": "#7986cb",
+ "main": "#3f51b5",
+ },
+ "secondary": Object {
+ "contrastText": "#fff",
+ "dark": "#c51162",
+ "light": "#ff4081",
+ "main": "#f50057",
+ },
+ "success": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#388e3c",
+ "light": "#81c784",
+ "main": "#4caf50",
+ },
+ "text": Object {
+ "disabled": "rgba(0, 0, 0, 0.38)",
+ "hint": "rgba(0, 0, 0, 0.38)",
+ "primary": "rgba(0, 0, 0, 0.87)",
+ "secondary": "rgba(0, 0, 0, 0.54)",
+ },
+ "tonalOffset": 0.2,
+ "type": "light",
+ "warning": Object {
+ "contrastText": "rgba(0, 0, 0, 0.87)",
+ "dark": "#f57c00",
+ "light": "#ffb74d",
+ "main": "#ff9800",
+ },
},
- "h6": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1.25rem",
- "fontWeight": 500,
- "letterSpacing": "0.0075em",
- "lineHeight": 1.6,
+ "props": Object {},
+ "shadows": Array [
+ "none",
+ "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+ "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+ "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+ "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+ "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+ "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+ "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+ "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+ "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+ "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+ "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+ "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+ "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+ "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+ "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+ "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+ "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+ "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+ "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+ "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+ "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+ ],
+ "shape": Object {
+ "borderRadius": 4,
},
- "htmlFontSize": 16,
- "overline": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.75rem",
- "fontWeight": 400,
- "letterSpacing": "0.08333em",
- "lineHeight": 2.66,
- "textTransform": "uppercase",
+ "spacing": [Function],
+ "transitions": Object {
+ "create": [Function],
+ "duration": Object {
+ "complex": 375,
+ "enteringScreen": 225,
+ "leavingScreen": 195,
+ "short": 250,
+ "shorter": 200,
+ "shortest": 150,
+ "standard": 300,
+ },
+ "easing": Object {
+ "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+ "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+ "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+ "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+ },
+ "getAutoHeightDuration": [Function],
},
- "pxToRem": [Function],
- "round": [Function],
- "subtitle1": Object {
+ "typography": Object {
+ "body1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.5,
+ },
+ "body2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.01071em",
+ "lineHeight": 1.43,
+ },
+ "button": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.02857em",
+ "lineHeight": 1.75,
+ "textTransform": "uppercase",
+ },
+ "caption": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.03333em",
+ "lineHeight": 1.66,
+ },
"fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "1rem",
- "fontWeight": 400,
- "letterSpacing": "0.00938em",
- "lineHeight": 1.75,
+ "fontSize": 14,
+ "fontWeightBold": 700,
+ "fontWeightLight": 300,
+ "fontWeightMedium": 500,
+ "fontWeightRegular": 400,
+ "h1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "6rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.01562em",
+ "lineHeight": 1.167,
+ },
+ "h2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3.75rem",
+ "fontWeight": 300,
+ "letterSpacing": "-0.00833em",
+ "lineHeight": 1.2,
+ },
+ "h3": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "3rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.167,
+ },
+ "h4": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "2.125rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00735em",
+ "lineHeight": 1.235,
+ },
+ "h5": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.5rem",
+ "fontWeight": 400,
+ "letterSpacing": "0em",
+ "lineHeight": 1.334,
+ },
+ "h6": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1.25rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.0075em",
+ "lineHeight": 1.6,
+ },
+ "htmlFontSize": 16,
+ "overline": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.75rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.08333em",
+ "lineHeight": 2.66,
+ "textTransform": "uppercase",
+ },
+ "pxToRem": [Function],
+ "round": [Function],
+ "subtitle1": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "1rem",
+ "fontWeight": 400,
+ "letterSpacing": "0.00938em",
+ "lineHeight": 1.75,
+ },
+ "subtitle2": Object {
+ "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+ "fontSize": "0.875rem",
+ "fontWeight": 500,
+ "letterSpacing": "0.00714em",
+ "lineHeight": 1.57,
+ },
},
- "subtitle2": Object {
- "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
- "fontSize": "0.875rem",
- "fontWeight": 500,
- "letterSpacing": "0.00714em",
- "lineHeight": 1.57,
+ "zIndex": Object {
+ "appBar": 1100,
+ "drawer": 1200,
+ "mobileStepper": 1000,
+ "modal": 1300,
+ "snackbar": 1400,
+ "speedDial": 1050,
+ "tooltip": 1500,
},
},
- "zIndex": Object {
- "appBar": 1100,
- "drawer": 1200,
- "mobileStepper": 1000,
- "modal": 1300,
- "snackbar": 1400,
- "speedDial": 1050,
- "tooltip": 1500,
- },
+ "name": "MuiBackdrop",
},
- "name": "MuiBackdrop",
- },
- "propTypes": Object {
- "classes": [Function],
- "innerRef": [Function],
- },
- "render": [Function],
- "useStyles": [Function],
+ "propTypes": Object {
+ "classes": [Function],
+ "innerRef": [Function],
+ },
+ "render": [Function],
+ "useStyles": [Function],
+ }
}
- }
- BackdropProps={
- Object {
- "transitionDuration": Object {
- "enter": 225,
- "exit": 195,
- },
+ BackdropProps={
+ Object {
+ "transitionDuration": Object {
+ "enter": 225,
+ "exit": 195,
+ },
+ }
}
- }
- className="MuiDialog-root modal-root"
- closeAfterTransition={true}
- disableEscapeKeyDown={false}
- onClose={[Function]}
- open={true}
- >
- <ForwardRef(Portal)
- disablePortal={false}
+ className="MuiDialog-root modal-root"
+ closeAfterTransition={true}
+ disableEscapeKeyDown={false}
+ onClose={[Function]}
+ open={true}
>
- <Portal
- containerInfo={
- <body
- style="padding-right: 0px; overflow: hidden;"
- >
- <div
- class="MuiDialog-root modal-root"
- role="presentation"
- style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
+ <ForwardRef(Portal)
+ disablePortal={false}
+ >
+ <Portal
+ containerInfo={
+ <body
+ style="padding-right: 0px; overflow: hidden;"
>
<div
- aria-hidden="true"
- class="MuiBackdrop-root"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- />
- <div
- data-test="sentinelStart"
- tabindex="0"
- />
- <div
- class="MuiDialog-container MuiDialog-scrollPaper"
- role="none presentation"
- style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
- tabindex="-1"
+ class="MuiDialog-root modal-root"
+ role="presentation"
+ style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
<div
- aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
- role="dialog"
+ aria-hidden="true"
+ class="MuiBackdrop-root"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ />
+ <div
+ data-test="sentinelStart"
+ tabindex="0"
+ />
+ <div
+ class="MuiDialog-container MuiDialog-scrollPaper"
+ role="none presentation"
+ style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+ tabindex="-1"
>
<div
- id="accessibility-title"
- >
- feedback.accessibility.window_title
- </div>
- <button
- aria-label="feedback.accessibility.button_close"
- class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
- tabindex="0"
- type="button"
- >
- <span
- class="MuiIconButton-label"
- >
- <svg
- class="styles__icon___23x3R"
- height="16"
- width="16"
- >
- <use
- xlink:href="#test-file-stub"
- />
- </svg>
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <div
- class="eg-init-modal"
+ aria-labelledby="accessibility-title"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
<div
- class="title text-20-bold"
+ id="accessibility-title"
>
- ecogesture.initModal.title
+ feedback.accessibility.window_title
</div>
- <div
- class="text-16-normal text"
+ <button
+ aria-label="feedback.accessibility.button_close"
+ class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ tabindex="0"
+ type="button"
>
- ecogesture.initModal.text1
- </div>
- <div
- class="text-16-normal text"
- >
- ecogesture.initModal.text2
- </div>
+ <span
+ class="MuiIconButton-label"
+ >
+ <svg
+ class="styles__icon___23x3R"
+ height="16"
+ width="16"
+ >
+ <use
+ xlink:href="#test-file-stub"
+ />
+ </svg>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
<div
- class="buttons-container"
+ class="eg-init-modal"
>
- <button
- aria-label="ecogesture.initModal.btn1"
- class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
- tabindex="0"
- type="button"
+ <div
+ class="title text-20-bold"
>
- <span
- class="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn1
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
- <button
- aria-label="ecogesture.initModal.btn2"
- class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
- tabindex="0"
- type="button"
+ ecogesture.initModal.title
+ </div>
+ <div
+ class="text-16-normal text"
>
- <span
- class="MuiButton-label text-16-bold"
+ ecogesture.initModal.text1
+ </div>
+ <div
+ class="text-16-normal text"
+ >
+ ecogesture.initModal.text2
+ </div>
+ <div
+ class="buttons-container"
+ >
+ <button
+ aria-label="ecogesture.initModal.btn1"
+ class="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ tabindex="0"
+ type="button"
>
- ecogesture.initModal.btn2
- </span>
- <span
- class="MuiTouchRipple-root"
- />
- </button>
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ ecogesture.initModal.btn1
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ <button
+ aria-label="ecogesture.initModal.btn2"
+ class="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ tabindex="0"
+ type="button"
+ >
+ <span
+ class="MuiButton-label text-16-bold"
+ >
+ ecogesture.initModal.btn2
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </button>
+ </div>
</div>
</div>
</div>
+ <div
+ data-test="sentinelEnd"
+ tabindex="0"
+ />
</div>
- <div
- data-test="sentinelEnd"
- tabindex="0"
- />
- </div>
- </body>
- }
- >
- <div
- className="MuiDialog-root modal-root"
- onKeyDown={[Function]}
- role="presentation"
- style={
- Object {
- "bottom": 0,
- "left": 0,
- "position": "fixed",
- "right": 0,
- "top": 0,
- "zIndex": 1300,
- }
+ </body>
}
>
- <WithStyles(ForwardRef(Backdrop))
- onClick={[Function]}
- open={true}
- transitionDuration={
+ <div
+ className="MuiDialog-root modal-root"
+ onKeyDown={[Function]}
+ role="presentation"
+ style={
Object {
- "enter": 225,
- "exit": 195,
+ "bottom": 0,
+ "left": 0,
+ "position": "fixed",
+ "right": 0,
+ "top": 0,
+ "zIndex": 1300,
}
}
>
- <ForwardRef(Backdrop)
- classes={
- Object {
- "invisible": "MuiBackdrop-invisible",
- "root": "MuiBackdrop-root",
- }
- }
+ <WithStyles(ForwardRef(Backdrop))
onClick={[Function]}
open={true}
transitionDuration={
@@ -1780,90 +1769,85 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
}
}
>
- <ForwardRef(Fade)
- in={true}
+ <ForwardRef(Backdrop)
+ classes={
+ Object {
+ "invisible": "MuiBackdrop-invisible",
+ "root": "MuiBackdrop-root",
+ }
+ }
onClick={[Function]}
- timeout={
+ open={true}
+ transitionDuration={
Object {
"enter": 225,
"exit": 195,
}
}
>
- <Transition
- appear={true}
- enter={true}
- exit={true}
+ <ForwardRef(Fade)
in={true}
- mountOnEnter={false}
onClick={[Function]}
- onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
- onExited={[Function]}
- onExiting={[Function]}
timeout={
Object {
"enter": 225,
"exit": 195,
}
}
- unmountOnExit={false}
>
- <div
- aria-hidden={true}
- className="MuiBackdrop-root"
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
onClick={[Function]}
- style={
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
+ timeout={
Object {
- "opacity": 1,
- "visibility": undefined,
+ "enter": 225,
+ "exit": 195,
}
}
- />
- </Transition>
- </ForwardRef(Fade)>
- </ForwardRef(Backdrop)>
- </WithStyles(ForwardRef(Backdrop))>
- <Unstable_TrapFocus
- disableAutoFocus={false}
- disableEnforceFocus={false}
- disableRestoreFocus={false}
- getDoc={[Function]}
- isEnabled={[Function]}
- open={true}
- >
- <div
- data-test="sentinelStart"
- tabIndex={0}
- />
- <ForwardRef(Fade)
- appear={true}
- in={true}
- onEnter={[Function]}
- onExited={[Function]}
- role="none presentation"
- tabIndex="-1"
- timeout={
- Object {
- "enter": 225,
- "exit": 195,
- }
- }
+ unmountOnExit={false}
+ >
+ <div
+ aria-hidden={true}
+ className="MuiBackdrop-root"
+ onClick={[Function]}
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ />
+ </Transition>
+ </ForwardRef(Fade)>
+ </ForwardRef(Backdrop)>
+ </WithStyles(ForwardRef(Backdrop))>
+ <Unstable_TrapFocus
+ disableAutoFocus={false}
+ disableEnforceFocus={false}
+ disableRestoreFocus={false}
+ getDoc={[Function]}
+ isEnabled={[Function]}
+ open={true}
>
- <Transition
+ <div
+ data-test="sentinelStart"
+ tabIndex={0}
+ />
+ <ForwardRef(Fade)
appear={true}
- enter={true}
- exit={true}
in={true}
- mountOnEnter={false}
onEnter={[Function]}
- onEntered={[Function]}
- onEntering={[Function]}
- onExit={[Function]}
onExited={[Function]}
- onExiting={[Function]}
role="none presentation"
tabIndex="-1"
timeout={
@@ -1872,290 +1856,294 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
"exit": 195,
}
}
- unmountOnExit={false}
>
- <div
- className="MuiDialog-container MuiDialog-scrollPaper"
- onMouseDown={[Function]}
- onMouseUp={[Function]}
+ <Transition
+ appear={true}
+ enter={true}
+ exit={true}
+ in={true}
+ mountOnEnter={false}
+ onEnter={[Function]}
+ onEntered={[Function]}
+ onEntering={[Function]}
+ onExit={[Function]}
+ onExited={[Function]}
+ onExiting={[Function]}
role="none presentation"
- style={
+ tabIndex="-1"
+ timeout={
Object {
- "opacity": 1,
- "visibility": undefined,
+ "enter": 225,
+ "exit": 195,
}
}
- tabIndex="-1"
+ unmountOnExit={false}
>
- <WithStyles(ForwardRef(Paper))
- aria-labelledby="accessibility-title"
- className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- elevation={24}
- role="dialog"
+ <div
+ className="MuiDialog-container MuiDialog-scrollPaper"
+ onMouseDown={[Function]}
+ onMouseUp={[Function]}
+ role="none presentation"
+ style={
+ Object {
+ "opacity": 1,
+ "visibility": undefined,
+ }
+ }
+ tabIndex="-1"
>
- <ForwardRef(Paper)
+ <WithStyles(ForwardRef(Paper))
aria-labelledby="accessibility-title"
className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
- classes={
- Object {
- "elevation0": "MuiPaper-elevation0",
- "elevation1": "MuiPaper-elevation1",
- "elevation10": "MuiPaper-elevation10",
- "elevation11": "MuiPaper-elevation11",
- "elevation12": "MuiPaper-elevation12",
- "elevation13": "MuiPaper-elevation13",
- "elevation14": "MuiPaper-elevation14",
- "elevation15": "MuiPaper-elevation15",
- "elevation16": "MuiPaper-elevation16",
- "elevation17": "MuiPaper-elevation17",
- "elevation18": "MuiPaper-elevation18",
- "elevation19": "MuiPaper-elevation19",
- "elevation2": "MuiPaper-elevation2",
- "elevation20": "MuiPaper-elevation20",
- "elevation21": "MuiPaper-elevation21",
- "elevation22": "MuiPaper-elevation22",
- "elevation23": "MuiPaper-elevation23",
- "elevation24": "MuiPaper-elevation24",
- "elevation3": "MuiPaper-elevation3",
- "elevation4": "MuiPaper-elevation4",
- "elevation5": "MuiPaper-elevation5",
- "elevation6": "MuiPaper-elevation6",
- "elevation7": "MuiPaper-elevation7",
- "elevation8": "MuiPaper-elevation8",
- "elevation9": "MuiPaper-elevation9",
- "outlined": "MuiPaper-outlined",
- "root": "MuiPaper-root",
- "rounded": "MuiPaper-rounded",
- }
- }
elevation={24}
role="dialog"
>
- <div
+ <ForwardRef(Paper)
aria-labelledby="accessibility-title"
- className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ className="MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
+ classes={
+ Object {
+ "elevation0": "MuiPaper-elevation0",
+ "elevation1": "MuiPaper-elevation1",
+ "elevation10": "MuiPaper-elevation10",
+ "elevation11": "MuiPaper-elevation11",
+ "elevation12": "MuiPaper-elevation12",
+ "elevation13": "MuiPaper-elevation13",
+ "elevation14": "MuiPaper-elevation14",
+ "elevation15": "MuiPaper-elevation15",
+ "elevation16": "MuiPaper-elevation16",
+ "elevation17": "MuiPaper-elevation17",
+ "elevation18": "MuiPaper-elevation18",
+ "elevation19": "MuiPaper-elevation19",
+ "elevation2": "MuiPaper-elevation2",
+ "elevation20": "MuiPaper-elevation20",
+ "elevation21": "MuiPaper-elevation21",
+ "elevation22": "MuiPaper-elevation22",
+ "elevation23": "MuiPaper-elevation23",
+ "elevation24": "MuiPaper-elevation24",
+ "elevation3": "MuiPaper-elevation3",
+ "elevation4": "MuiPaper-elevation4",
+ "elevation5": "MuiPaper-elevation5",
+ "elevation6": "MuiPaper-elevation6",
+ "elevation7": "MuiPaper-elevation7",
+ "elevation8": "MuiPaper-elevation8",
+ "elevation9": "MuiPaper-elevation9",
+ "outlined": "MuiPaper-outlined",
+ "root": "MuiPaper-root",
+ "rounded": "MuiPaper-rounded",
+ }
+ }
+ elevation={24}
role="dialog"
>
<div
- id="accessibility-title"
+ aria-labelledby="accessibility-title"
+ className="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ role="dialog"
>
- feedback.accessibility.window_title
- </div>
- <WithStyles(ForwardRef(IconButton))
- aria-label="feedback.accessibility.button_close"
- className="modal-paper-close-button"
- onClick={[Function]}
- >
- <ForwardRef(IconButton)
+ <div
+ id="accessibility-title"
+ >
+ feedback.accessibility.window_title
+ </div>
+ <WithStyles(ForwardRef(IconButton))
aria-label="feedback.accessibility.button_close"
className="modal-paper-close-button"
- classes={
- Object {
- "colorInherit": "MuiIconButton-colorInherit",
- "colorPrimary": "MuiIconButton-colorPrimary",
- "colorSecondary": "MuiIconButton-colorSecondary",
- "disabled": "Mui-disabled",
- "edgeEnd": "MuiIconButton-edgeEnd",
- "edgeStart": "MuiIconButton-edgeStart",
- "label": "MuiIconButton-label",
- "root": "MuiIconButton-root",
- "sizeSmall": "MuiIconButton-sizeSmall",
- }
- }
onClick={[Function]}
>
- <WithStyles(ForwardRef(ButtonBase))
+ <ForwardRef(IconButton)
aria-label="feedback.accessibility.button_close"
- centerRipple={true}
- className="MuiIconButton-root modal-paper-close-button"
- disabled={false}
- focusRipple={true}
+ className="modal-paper-close-button"
+ classes={
+ Object {
+ "colorInherit": "MuiIconButton-colorInherit",
+ "colorPrimary": "MuiIconButton-colorPrimary",
+ "colorSecondary": "MuiIconButton-colorSecondary",
+ "disabled": "Mui-disabled",
+ "edgeEnd": "MuiIconButton-edgeEnd",
+ "edgeStart": "MuiIconButton-edgeStart",
+ "label": "MuiIconButton-label",
+ "root": "MuiIconButton-root",
+ "sizeSmall": "MuiIconButton-sizeSmall",
+ }
+ }
onClick={[Function]}
>
- <ForwardRef(ButtonBase)
+ <WithStyles(ForwardRef(ButtonBase))
aria-label="feedback.accessibility.button_close"
centerRipple={true}
className="MuiIconButton-root modal-paper-close-button"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
disabled={false}
focusRipple={true}
onClick={[Function]}
>
- <button
+ <ForwardRef(ButtonBase)
aria-label="feedback.accessibility.button_close"
- className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ centerRipple={true}
+ className="MuiIconButton-root modal-paper-close-button"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
disabled={false}
- onBlur={[Function]}
+ focusRipple={true}
onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
- type="button"
>
- <span
- className="MuiIconButton-label"
+ <button
+ aria-label="feedback.accessibility.button_close"
+ className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
>
- <Icon
- icon="test-file-stub"
- size={16}
- spin={false}
+ <span
+ className="MuiIconButton-label"
>
- <Component
- className="styles__icon___23x3R"
- height={16}
- style={Object {}}
- width={16}
+ <Icon
+ icon="test-file-stub"
+ size={16}
+ spin={false}
>
- <svg
+ <Component
className="styles__icon___23x3R"
height={16}
style={Object {}}
width={16}
>
- <use
- xlinkHref="#test-file-stub"
- />
- </svg>
- </Component>
- </Icon>
- </span>
- <WithStyles(memo)
- center={true}
- >
- <ForwardRef(TouchRipple)
+ <svg
+ className="styles__icon___23x3R"
+ height={16}
+ style={Object {}}
+ width={16}
+ >
+ <use
+ xlinkHref="#test-file-stub"
+ />
+ </svg>
+ </Component>
+ </Icon>
+ </span>
+ <WithStyles(memo)
center={true}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
>
- <span
- className="MuiTouchRipple-root"
+ <ForwardRef(TouchRipple)
+ center={true}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(IconButton)>
- </WithStyles(ForwardRef(IconButton))>
- <div
- className="eg-init-modal"
- >
- <div
- className="title text-20-bold"
- >
- ecogesture.initModal.title
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text1
- </div>
- <div
- className="text-16-normal text"
- >
- ecogesture.initModal.text2
- </div>
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(IconButton)>
+ </WithStyles(ForwardRef(IconButton))>
<div
- className="buttons-container"
+ className="eg-init-modal"
>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn1"
- className="btn1"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-secondary-negative",
- }
- }
- onClick={[Function]}
+ <div
+ className="title text-20-bold"
+ >
+ ecogesture.initModal.title
+ </div>
+ <div
+ className="text-16-normal text"
+ >
+ ecogesture.initModal.text1
+ </div>
+ <div
+ className="text-16-normal text"
>
- <ForwardRef(Button)
+ ecogesture.initModal.text2
+ </div>
+ <div
+ className="buttons-container"
+ >
+ <WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn1"
className="btn1"
classes={
Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-secondary-negative",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
+ "label": "text-16-bold",
+ "root": "btn-secondary-negative",
}
}
onClick={[Function]}
>
- <WithStyles(ForwardRef(ButtonBase))
+ <ForwardRef(Button)
aria-label="ecogesture.initModal.btn1"
- className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
+ className="btn1"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-secondary-negative",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
onClick={[Function]}
- type="button"
>
- <ForwardRef(ButtonBase)
+ <WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn1"
className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
component="button"
disabled={false}
focusRipple={true}
@@ -2163,130 +2151,130 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
type="button"
>
- <button
+ <ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn1"
- className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ className="MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
disabled={false}
- onBlur={[Function]}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
type="button"
>
- <span
- className="MuiButton-label text-16-bold"
+ <button
+ aria-label="ecogesture.initModal.btn1"
+ className="MuiButtonBase-root MuiButton-root btn-secondary-negative MuiButton-text btn1"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
>
- ecogesture.initModal.btn1
- </span>
- <WithStyles(memo)
- center={false}
- >
- <ForwardRef(TouchRipple)
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ ecogesture.initModal.btn1
+ </span>
+ <WithStyles(memo)
center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
>
- <span
- className="MuiTouchRipple-root"
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
- <WithStyles(ForwardRef(Button))
- aria-label="ecogesture.initModal.btn2"
- classes={
- Object {
- "label": "text-16-bold",
- "root": "btn-profile-next rounded",
- }
- }
- onClick={[Function]}
- >
- <ForwardRef(Button)
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ <WithStyles(ForwardRef(Button))
aria-label="ecogesture.initModal.btn2"
classes={
Object {
- "colorInherit": "MuiButton-colorInherit",
- "contained": "MuiButton-contained",
- "containedPrimary": "MuiButton-containedPrimary",
- "containedSecondary": "MuiButton-containedSecondary",
- "containedSizeLarge": "MuiButton-containedSizeLarge",
- "containedSizeSmall": "MuiButton-containedSizeSmall",
- "disableElevation": "MuiButton-disableElevation",
- "disabled": "Mui-disabled",
- "endIcon": "MuiButton-endIcon",
- "focusVisible": "Mui-focusVisible",
- "fullWidth": "MuiButton-fullWidth",
- "iconSizeLarge": "MuiButton-iconSizeLarge",
- "iconSizeMedium": "MuiButton-iconSizeMedium",
- "iconSizeSmall": "MuiButton-iconSizeSmall",
- "label": "MuiButton-label text-16-bold",
- "outlined": "MuiButton-outlined",
- "outlinedPrimary": "MuiButton-outlinedPrimary",
- "outlinedSecondary": "MuiButton-outlinedSecondary",
- "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
- "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
- "root": "MuiButton-root btn-profile-next rounded",
- "sizeLarge": "MuiButton-sizeLarge",
- "sizeSmall": "MuiButton-sizeSmall",
- "startIcon": "MuiButton-startIcon",
- "text": "MuiButton-text",
- "textPrimary": "MuiButton-textPrimary",
- "textSecondary": "MuiButton-textSecondary",
- "textSizeLarge": "MuiButton-textSizeLarge",
- "textSizeSmall": "MuiButton-textSizeSmall",
+ "label": "text-16-bold",
+ "root": "btn-profile-next rounded",
}
}
onClick={[Function]}
>
- <WithStyles(ForwardRef(ButtonBase))
+ <ForwardRef(Button)
aria-label="ecogesture.initModal.btn2"
- className="MuiButton-root btn-profile-next rounded MuiButton-text"
- component="button"
- disabled={false}
- focusRipple={true}
- focusVisibleClassName="Mui-focusVisible"
+ classes={
+ Object {
+ "colorInherit": "MuiButton-colorInherit",
+ "contained": "MuiButton-contained",
+ "containedPrimary": "MuiButton-containedPrimary",
+ "containedSecondary": "MuiButton-containedSecondary",
+ "containedSizeLarge": "MuiButton-containedSizeLarge",
+ "containedSizeSmall": "MuiButton-containedSizeSmall",
+ "disableElevation": "MuiButton-disableElevation",
+ "disabled": "Mui-disabled",
+ "endIcon": "MuiButton-endIcon",
+ "focusVisible": "Mui-focusVisible",
+ "fullWidth": "MuiButton-fullWidth",
+ "iconSizeLarge": "MuiButton-iconSizeLarge",
+ "iconSizeMedium": "MuiButton-iconSizeMedium",
+ "iconSizeSmall": "MuiButton-iconSizeSmall",
+ "label": "MuiButton-label text-16-bold",
+ "outlined": "MuiButton-outlined",
+ "outlinedPrimary": "MuiButton-outlinedPrimary",
+ "outlinedSecondary": "MuiButton-outlinedSecondary",
+ "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
+ "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
+ "root": "MuiButton-root btn-profile-next rounded",
+ "sizeLarge": "MuiButton-sizeLarge",
+ "sizeSmall": "MuiButton-sizeSmall",
+ "startIcon": "MuiButton-startIcon",
+ "text": "MuiButton-text",
+ "textPrimary": "MuiButton-textPrimary",
+ "textSecondary": "MuiButton-textSecondary",
+ "textSizeLarge": "MuiButton-textSizeLarge",
+ "textSizeSmall": "MuiButton-textSizeSmall",
+ }
+ }
onClick={[Function]}
- type="button"
>
- <ForwardRef(ButtonBase)
+ <WithStyles(ForwardRef(ButtonBase))
aria-label="ecogesture.initModal.btn2"
className="MuiButton-root btn-profile-next rounded MuiButton-text"
- classes={
- Object {
- "disabled": "Mui-disabled",
- "focusVisible": "Mui-focusVisible",
- "root": "MuiButtonBase-root",
- }
- }
component="button"
disabled={false}
focusRipple={true}
@@ -2294,83 +2282,101 @@ exports[`EcogestureView component should be rendered correctly 1`] = `
onClick={[Function]}
type="button"
>
- <button
+ <ForwardRef(ButtonBase)
aria-label="ecogesture.initModal.btn2"
- className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ className="MuiButton-root btn-profile-next rounded MuiButton-text"
+ classes={
+ Object {
+ "disabled": "Mui-disabled",
+ "focusVisible": "Mui-focusVisible",
+ "root": "MuiButtonBase-root",
+ }
+ }
+ component="button"
disabled={false}
- onBlur={[Function]}
+ focusRipple={true}
+ focusVisibleClassName="Mui-focusVisible"
onClick={[Function]}
- onDragLeave={[Function]}
- onFocus={[Function]}
- onKeyDown={[Function]}
- onKeyUp={[Function]}
- onMouseDown={[Function]}
- onMouseLeave={[Function]}
- onMouseUp={[Function]}
- onTouchEnd={[Function]}
- onTouchMove={[Function]}
- onTouchStart={[Function]}
- tabIndex={0}
type="button"
>
- <span
- className="MuiButton-label text-16-bold"
- >
- ecogesture.initModal.btn2
- </span>
- <WithStyles(memo)
- center={false}
+ <button
+ aria-label="ecogesture.initModal.btn2"
+ className="MuiButtonBase-root MuiButton-root btn-profile-next rounded MuiButton-text"
+ disabled={false}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onDragLeave={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseLeave={[Function]}
+ onMouseUp={[Function]}
+ onTouchEnd={[Function]}
+ onTouchMove={[Function]}
+ onTouchStart={[Function]}
+ tabIndex={0}
+ type="button"
>
- <ForwardRef(TouchRipple)
+ <span
+ className="MuiButton-label text-16-bold"
+ >
+ ecogesture.initModal.btn2
+ </span>
+ <WithStyles(memo)
center={false}
- classes={
- Object {
- "child": "MuiTouchRipple-child",
- "childLeaving": "MuiTouchRipple-childLeaving",
- "childPulsate": "MuiTouchRipple-childPulsate",
- "ripple": "MuiTouchRipple-ripple",
- "ripplePulsate": "MuiTouchRipple-ripplePulsate",
- "rippleVisible": "MuiTouchRipple-rippleVisible",
- "root": "MuiTouchRipple-root",
- }
- }
>
- <span
- className="MuiTouchRipple-root"
+ <ForwardRef(TouchRipple)
+ center={false}
+ classes={
+ Object {
+ "child": "MuiTouchRipple-child",
+ "childLeaving": "MuiTouchRipple-childLeaving",
+ "childPulsate": "MuiTouchRipple-childPulsate",
+ "ripple": "MuiTouchRipple-ripple",
+ "ripplePulsate": "MuiTouchRipple-ripplePulsate",
+ "rippleVisible": "MuiTouchRipple-rippleVisible",
+ "root": "MuiTouchRipple-root",
+ }
+ }
>
- <TransitionGroup
- childFactory={[Function]}
- component={null}
- exit={true}
- />
- </span>
- </ForwardRef(TouchRipple)>
- </WithStyles(memo)>
- </button>
- </ForwardRef(ButtonBase)>
- </WithStyles(ForwardRef(ButtonBase))>
- </ForwardRef(Button)>
- </WithStyles(ForwardRef(Button))>
+ <span
+ className="MuiTouchRipple-root"
+ >
+ <TransitionGroup
+ childFactory={[Function]}
+ component={null}
+ exit={true}
+ />
+ </span>
+ </ForwardRef(TouchRipple)>
+ </WithStyles(memo)>
+ </button>
+ </ForwardRef(ButtonBase)>
+ </WithStyles(ForwardRef(ButtonBase))>
+ </ForwardRef(Button)>
+ </WithStyles(ForwardRef(Button))>
+ </div>
</div>
</div>
- </div>
- </ForwardRef(Paper)>
- </WithStyles(ForwardRef(Paper))>
- </div>
- </Transition>
- </ForwardRef(Fade)>
- <div
- data-test="sentinelEnd"
- tabIndex={0}
- />
- </Unstable_TrapFocus>
- </div>
- </Portal>
- </ForwardRef(Portal)>
- </ForwardRef(Modal)>
- </ForwardRef(Dialog)>
- </WithStyles(ForwardRef(Dialog))>
- </EcogestureInitModal>
+ </ForwardRef(Paper)>
+ </WithStyles(ForwardRef(Paper))>
+ </div>
+ </Transition>
+ </ForwardRef(Fade)>
+ <div
+ data-test="sentinelEnd"
+ tabIndex={0}
+ />
+ </Unstable_TrapFocus>
+ </div>
+ </Portal>
+ </ForwardRef(Portal)>
+ </ForwardRef(Modal)>
+ </ForwardRef(Dialog)>
+ </WithStyles(ForwardRef(Dialog))>
+ </EcogestureInitModal>
+ </mock-content>
</EcogestureView>
</Provider>
`;
diff --git a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
index 2eb812c6fea8317a280b716740e2bb8956c4dd16..031efb6101e9a404125892a2b52c39d58e84ef2f 100644
--- a/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/SingleEcogesture.spec.tsx.snap
@@ -15,7 +15,6 @@ exports[`SingleEcogesture component should be rendered correctly 1`] = `
>
<SingleEcogesture>
<Component
- backFunction={[Function]}
displayBackArrow={true}
titleKey="common.title_ecogesture"
>
diff --git a/src/components/EcogestureForm/EcogestureFormView.tsx b/src/components/EcogestureForm/EcogestureFormView.tsx
index 2f0afefaf78205a26cb10d9a55195d4c840a2407..553f9b3af8b51971ce2c6845b535a5d20d52fbdf 100644
--- a/src/components/EcogestureForm/EcogestureFormView.tsx
+++ b/src/components/EcogestureForm/EcogestureFormView.tsx
@@ -1,6 +1,4 @@
import Content from 'components/Content/Content'
-import EcogestureFormEquipment from 'components/EcogestureForm/EcogestureFormEquipment'
-import EcogestureFormSingleChoice from 'components/EcogestureForm/EcogestureFormSingleChoice'
import EcogestureLaunchFormModal from 'components/EcogestureForm/EcogestureLaunchFormModal'
import CozyBar from 'components/Header/CozyBar'
import Header from 'components/Header/Header'
@@ -22,6 +20,8 @@ import { useAppSelector } from 'store/hooks'
import { updateProfile } from 'store/profile/profile.actions'
import { newProfileEcogestureEntry } from 'store/profileEcogesture/profileEcogesture.actions'
import { AppActionsTypes } from 'store/store'
+import EcogestureFormEquipment from './EcogestureFormEquipment'
+import EcogestureFormSingleChoice from './EcogestureFormSingleChoice'
const EcogestureFormView = () => {
const {
@@ -95,14 +95,6 @@ const EcogestureFormView = () => {
}
}, [handleEndForm, step])
- if (isLoading) {
- return (
- <Content height={headerHeight}>
- <Loader />
- </Content>
- )
- }
-
return (
<>
<CozyBar titleKey={'common.title_ecogestures'} />
@@ -111,6 +103,11 @@ const EcogestureFormView = () => {
desktopTitleKey={'common.title_ecogestures'}
/>
<Content height={headerHeight}>
+ {isLoading && (
+ <div className="loaderContainer">
+ <Loader />
+ </div>
+ )}
{isProfileTypeCompleted ? (
<ProfileTypeView />
) : (
diff --git a/src/components/EcogestureSelection/EcogestureSelection.tsx b/src/components/EcogestureSelection/EcogestureSelection.tsx
index 534f7cc7f5b47ffcd0a7c16244f9de82acebbe40..6449919bd4b44564dbd4a4f18082e348291acd0a 100644
--- a/src/components/EcogestureSelection/EcogestureSelection.tsx
+++ b/src/components/EcogestureSelection/EcogestureSelection.tsx
@@ -108,16 +108,6 @@ const EcogestureSelection = () => {
}
}, [ecogestureService, profileEcogesture])
- if (isLoading) {
- return (
- <Content height={headerHeight}>
- <div className="eg-selection-loader">
- <Loader />
- </div>
- </Content>
- )
- }
-
const renderEcogestureSelection = () => {
if (indexEcogesture <= ecogestureList.length - 1) {
return (
@@ -157,13 +147,24 @@ const EcogestureSelection = () => {
: ''}
</div>
</Header>
- <Content height={headerHeight}>{renderEcogestureSelection()}</Content>
- {openEcogestureSelectionModal && (
- <EcogestureSelectionModal
- open={openEcogestureSelectionModal}
- handleCloseClick={() => setOpenEcogestureSelectionModal(false)}
- />
- )}
+ <Content height={headerHeight}>
+ {isLoading && (
+ <div className="loaderContainer">
+ <Loader />
+ </div>
+ )}
+ {!isLoading && (
+ <>
+ {renderEcogestureSelection()}
+ {openEcogestureSelectionModal && (
+ <EcogestureSelectionModal
+ open={openEcogestureSelectionModal}
+ handleCloseClick={() => setOpenEcogestureSelectionModal(false)}
+ />
+ )}
+ </>
+ )}
+ </Content>
</>
)
}
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
index 32838b95b199f5c6354c5fb61b4dd2e60415240c..c8243370cab5d05087c5de4eae6e0cf05ee7827c 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
+++ b/src/components/EcogestureSelection/__snapshots__/EcogestureSelection.spec.tsx.snap
@@ -70,11 +70,11 @@ exports[`EcogestureSelection component should be rendered correctly 1`] = `
title="Bonhomme de neige"
validate={[Function]}
/>
+ <mock-ecogestureselectionmodal
+ handleCloseClick={[Function]}
+ open={true}
+ />
</mock-content>
- <mock-ecogestureselectionmodal
- handleCloseClick={[Function]}
- open={true}
- />
</EcogestureSelection>
</Provider>
`;
diff --git a/src/components/EcogestureSelection/ecogestureSelection.scss b/src/components/EcogestureSelection/ecogestureSelection.scss
index 128410d01da72b40f7d06c50bffbcf9e58ee2dde..f0cdb6b56558ffa4a3af3bc8b8f3e14cca392588 100644
--- a/src/components/EcogestureSelection/ecogestureSelection.scss
+++ b/src/components/EcogestureSelection/ecogestureSelection.scss
@@ -1,16 +1,6 @@
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';
-.eg-selection-loader {
- min-height: inherit;
- display: flex;
- justify-content: center;
- align-items: center;
- @media all and(min-width: $width-tablet) {
- min-height: 80vh;
- }
-}
-
.eg-selection-header {
color: $grey-bright;
text-align: center;
diff --git a/src/components/Home/ConsumptionView.tsx b/src/components/Home/ConsumptionView.tsx
index 5e4d8924c281b014abd849e4a82556615995e867..ce5b641c76ce330fb79b4be6a4948987ea5f8799 100644
--- a/src/components/Home/ConsumptionView.tsx
+++ b/src/components/Home/ConsumptionView.tsx
@@ -248,7 +248,7 @@ const ConsumptionView = ({ fluidType }: { fluidType: FluidType }) => {
{showOfflineData && (
<>
{loading && (
- <div className={'consumptionview-loading'} aria-busy="true">
+ <div className="consumptionview-loading">
<Loader fluidType={fluidType} />
</div>
)}
diff --git a/src/components/Quiz/QuizCustomQuestionContent.tsx b/src/components/Quiz/QuizCustomQuestionContent.tsx
index 21a37a7a60074192972072e7f92d56cf6f6866b4..40f78e95f6c5a4d8cfc2959632409c196102879a 100644
--- a/src/components/Quiz/QuizCustomQuestionContent.tsx
+++ b/src/components/Quiz/QuizCustomQuestionContent.tsx
@@ -99,7 +99,7 @@ const QuizCustomQuestionContent = ({
</p>
{isLoading ? (
- <div className={'question-loading'} aria-busy="true">
+ <div className="question-loading">
<Loader />
</div>
) : (
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 628ccfc6414f433765d7e26b114207dbc002c97c..2ee8873d98d20621914f25a5c6950af7985a981a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -69,6 +69,9 @@
.loaderContainer {
height: 80vh;
- justify-content: center;
display: flex;
+ flex: 1;
+ justify-content: center;
+ // useful when text is rendered with loader
+ align-items: center;
}