diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index c8ce8316344b1c426af17fe4d81caf9540224dcd..286f6cf6b1da754e00ebf01abd88085f258e5790 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -6,7 +6,6 @@ import { Provider } from 'react-redux'
import AnalysisView from 'components/Analysis/AnalysisView'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profile.mock'
-import Header from 'components/Header/Header'
import {
createMockStore,
mockInitialEcolyoState,
@@ -23,14 +22,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-jest.mock('components/Header/CozyBar', () => () => <div id="cozybar"></div>)
-jest.mock('components/DateNavigator/DateNavigator', () => () => (
- <div id="dateNavigator"></div>
-))
-
-jest.mock('components/Analysis/MonthlyAnalysis', () => () => (
- <div id="monthlyanalysis"></div>
-))
+jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
+jest.mock('components/Header/Header', () => 'mock-header')
+jest.mock('components/Content/Content', () => 'mock-content')
+jest.mock('components/DateNavigator/DateNavigator', () => 'mock-datenavigator')
+jest.mock('components/Analysis/MonthlyAnalysis', () => 'mock-monthlyanalysis')
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
@@ -69,9 +65,10 @@ describe('AnalysisView component', () => {
<AnalysisView />
</Provider>
)
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#monthlyanalysis')).toBeTruthy()
+ expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
+ expect(wrapper.find('mock-header').exists()).toBeTruthy()
+ expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
+ expect(wrapper.find('mock-monthlyanalysis').exists()).toBeTruthy()
})
it('should update profile and toggle analysis notification to false if notification is true', () => {
@@ -91,14 +88,15 @@ describe('AnalysisView component', () => {
<AnalysisView />
</Provider>
)
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#monthlyanalysis')).toBeTruthy()
- expect(updateProfileSpy).toBeCalledTimes(2)
+ expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
+ expect(wrapper.find('mock-header').exists()).toBeTruthy()
+ expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
+ expect(wrapper.find('mock-monthlyanalysis').exists()).toBeTruthy()
+ expect(updateProfileSpy).toBeCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
haveSeenLastAnalysis: true,
})
- expect(toggleAnalysisNotificationSpy).toBeCalledTimes(2)
+ expect(toggleAnalysisNotificationSpy).toBeCalledTimes(1)
expect(toggleAnalysisNotificationSpy).toHaveBeenCalledWith(false)
})
})
diff --git a/src/components/Challenge/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard.tsx
index 74ea68a883a16e8599079977c37407c290aa09fd..852f3395f068d089e0d07c9335d1a028ff9001ae 100644
--- a/src/components/Challenge/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard.tsx
@@ -43,7 +43,7 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
return (
<div
onClick={() => moveToSlide(index)}
- className={indexSlider === index ? 'slide active' : 'slide'}
+ className={indexSlider === index ? 'slide active' : 'slide inactive'}
style={{
minWidth: `${cardWidth}px`,
maxWidth: `${cardWidth}px`,
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 973567aa27d99829bc479d0f5c96f65b25f95db9..17fd422778224cb6702939696b60e44158fb8bff 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -153,7 +153,7 @@ const ChallengeView: React.FC = () => {
<div className="content">{t('challenge.banner.content')}</div>
</div>
<div
- className="container"
+ className="challenge-container"
style={{
transform: `translateX(${containerTranslation}px)`,
}}
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index bcc90ac093e8f250c8c5cd6dc483834e8ad85012..5f7dfa0f965a157f1e7727250d4b17fe4761cbbf 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
</div>
</div>
<div
- className="container"
+ className="challenge-container"
style={
Object {
"transform": "translateX(16px)",
diff --git a/src/components/Challenge/challengeCard.scss b/src/components/Challenge/challengeCard.scss
index 9cac755c11a77f978a6ff1e683272b0a84e5b8f5..467bf027d6cb61a93c8df01b7b56a48e6a6addd2 100644
--- a/src/components/Challenge/challengeCard.scss
+++ b/src/components/Challenge/challengeCard.scss
@@ -1,16 +1,16 @@
.slide {
- margin: auto;
- // height: 465px;
+ margin: 1rem 1rem 1rem 0;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
- margin-right: 1rem;
transition: all 300ms ease;
color: white;
display: flex;
flex-direction: column;
- transform: scale(0.9);
&.active {
- transform: scale(1.08);
+ transform: scale(1);
+ }
+ &.inactive {
+ transform: scale(0.9);
}
.cardContent {
background: linear-gradient(180deg, #323339 0%, #25262b 100%);
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index 55fb3f25e166b550df3fde5585c9b1f80ed28635..31e0d2537f02d08fc6b4b2bbd9ae70f61815e4ba 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -4,22 +4,15 @@
@import '../../styles/base/z-index';
.challengeSlider {
- min-height: inherit;
- margin-top: 0;
- overflow-x: hidden;
- padding: 1rem 2rem;
position: relative;
- max-width: 850px;
+ min-height: inherit;
user-select: none;
- @media all and (min-width: $width-tablet) {
- margin: auto;
- // margin-top: 3rem; //TODO: uncomment when wip is removed from challenges
- padding: 5rem 2rem 2rem 2rem;
- min-height: 0;
- }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0 2rem;
}
.building-banner {
- position: absolute;
display: flex;
flex-direction: column;
align-items: center;
@@ -40,20 +33,19 @@
padding: 0.5rem 1rem;
text-align: center;
height: 75px;
- margin: 0 1rem;
+ margin: 1rem -1rem 0;
z-index: calc(#{$z-header} - 1);
border-radius: 6px;
- top: 14px;
- left: 0;
.title {
font-weight: 700;
margin-bottom: 0.1rem;
}
}
-.container {
- min-height: inherit;
+.challenge-container {
+ position: relative;
width: 100%;
display: flex;
+ flex: 1;
transition: all 300ms ease;
}
.cardContent {
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 1722a0bd6f7c919a3d11c0b2a39cc848460f9de3..6e141e27364bfbdc739d623e8d636136fe291fef 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -82,7 +82,7 @@ const Content: React.FC<ContentProps> = ({
paddingBottom: 0,
minHeight:
screenType !== ScreenType.DESKTOP
- ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)`
+ ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom))`
: `unset`,
background: background,
}}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 85bdd9e7cd7afd0372b5ed083e87c3c2b9befb57..3d9f6e59d1feb581d9567e08e7a5e7b8d2ebc3ef 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -41,7 +41,6 @@ const Header: React.FC<HeaderProps> = ({
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const cozyBarHeight = 48
- const headerBottomHeight = 8
const handleClickBack = useCallback(() => {
history.goBack()
@@ -54,14 +53,10 @@ const Header: React.FC<HeaderProps> = ({
useEffect(() => {
if (screenType === ScreenType.MOBILE) {
setHeaderHeight(
- header.current
- ? header.current.clientHeight - cozyBarHeight - headerBottomHeight
- : 0
+ header.current ? header.current.clientHeight - cozyBarHeight : 0
)
} else {
- setHeaderHeight(
- header.current ? header.current.clientHeight - headerBottomHeight : 0
- )
+ setHeaderHeight(header.current ? header.current.clientHeight : 0)
}
}, [screenType, children, setHeaderHeight])
diff --git a/src/components/Splash/splashRoot.scss b/src/components/Splash/splashRoot.scss
index 2ecb1128187bac7bd228bf2baaf358e17b56a404..c741b89df2d4b25a081bece24bdf780e1bd150a2 100644
--- a/src/components/Splash/splashRoot.scss
+++ b/src/components/Splash/splashRoot.scss
@@ -7,8 +7,8 @@
z-index: $z-splash;
left: 0;
top: 0;
- height: 100vh;
- width: 100vw;
+ height: 100%;
+ width: 100%;
opacity: 1;
overflow: hidden;
background-color: rgba(27, 28, 34, 1);
diff --git a/src/components/Splash/splashScreen.scss b/src/components/Splash/splashScreen.scss
index 293a29e053f1ce79a1c56d67f15c3ea8bf27adf7..60582eb874643e636f80a0e23b1803bf46875f3b 100644
--- a/src/components/Splash/splashScreen.scss
+++ b/src/components/Splash/splashScreen.scss
@@ -4,8 +4,8 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: flex-end;
- // flex: 1;
+ justify-content: center;
+ height: 100%;
&:first-child {
margin: auto;
}
@@ -33,5 +33,6 @@
}
button.btn-highlight {
max-width: 50vw;
+ margin: 0.5rem 0 0;
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 012d283140428fd1ad391c5f2e709ee1597cb7fa..6e47ddb514e9faab0bc57307ebb88ca09e5d2b70 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -52,16 +52,12 @@
--waterColorRadialGradient: #{$water-color-radial-gradient};
}
-html {
- // min-height: calc(100% + env(safe-area-inset-top));
- // padding: env(safe-area-inset-top) env(safe-area-inset-right)
- // env(safe-area-inset-bottom) env(safe-area-inset-left);
-}
-
.application {
- @media #{$large-phone} {
- min-height: 100vh;
- }
+ // @media #{$large-phone} {
+ // min-height: calc(
+ // 100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
+ // );
+ // }
overflow-x: hidden;
background-color: $default-background;
}