Skip to content

Commit 2aa8020

Browse files
S4androS4andro
committed
(PC-21416) feat(statusBar): blurred/white statusBar on Home and Profile
1 parent 55da8cb commit 2aa8020

File tree

2 files changed

+141
-135
lines changed

2 files changed

+141
-135
lines changed

‎src/features/home/pages/GenericHome.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { OfflinePage } from 'libs/network/OfflinePage'
2424
import { BatchEvent, BatchUser } from 'libs/react-native-batch'
2525
import { ScrollToTopButton } from 'ui/components/ScrollToTopButton'
2626
import { Spinner } from 'ui/components/Spinner'
27+
import { StatusBarBlurredBackground } from 'ui/components/statusBar/statusBarBlurredBackground'
2728
import { getSpacing, Spacer } from 'ui/theme'
2829

2930
type GenericHomeProps = {
@@ -199,6 +200,7 @@ export const OnlineHome: FunctionComponent<GenericHomeProps> = ({
199200
) : null}
200201
</HomeBodyLoadingContainer>
201202
<Spacer.Column numberOfSpaces={6} />
203+
<StatusBarBlurredBackground />
202204
</Container>
203205
)
204206
}

‎src/features/profile/pages/Profile.tsx

Lines changed: 139 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useFocusEffect } from '@react-navigation/native'
22
import debounce from 'lodash/debounce'
33
import React, { useCallback, useEffect, useRef, useState } from 'react'
4-
import { NativeScrollEvent, Platform, ScrollView } from 'react-native'
4+
import { NativeScrollEvent, Platform, ScrollView, View } from 'react-native'
55
import styled from 'styled-components/native'
66
import { v4 as uuidv4 } from 'uuid'
77

@@ -25,6 +25,7 @@ import { Li } from 'ui/components/Li'
2525
import { BannerWithBackground } from 'ui/components/ModuleBanner/BannerWithBackground'
2626
import { Section } from 'ui/components/Section'
2727
import { SectionRow } from 'ui/components/SectionRow'
28+
import { StatusBarBlurredBackground } from 'ui/components/statusBar/statusBarBlurredBackground'
2829
import { VerticalUl } from 'ui/components/Ul'
2930
import { useVersion } from 'ui/hooks/useVersion'
3031
import { Bell } from 'ui/svg/icons/Bell'
@@ -113,151 +114,154 @@ const OnlineProfile: React.FC = () => {
113114
}, [])
114115

115116
return (
116-
<ScrollView
117-
bounces={false}
118-
ref={scrollViewRef}
119-
onScroll={onScroll}
120-
scrollEventThrottle={400}
121-
testID="profile-scrollview">
122-
<ProfileHeader user={user} />
123-
<ProfileContainer>
124-
<Spacer.Column numberOfSpaces={4} />
125-
<Section title={isLoggedIn ? 'Paramètres du compte' : 'Paramètres de l’application'}>
126-
<VerticalUl>
127-
{!!isLoggedIn && (
117+
<View>
118+
<ScrollView
119+
bounces={false}
120+
ref={scrollViewRef}
121+
onScroll={onScroll}
122+
scrollEventThrottle={400}
123+
testID="profile-scrollview">
124+
<ProfileHeader user={user} />
125+
<ProfileContainer>
126+
<Spacer.Column numberOfSpaces={4} />
127+
<Section title={isLoggedIn ? 'Paramètres du compte' : 'Paramètres de l’application'}>
128+
<VerticalUl>
129+
{!!isLoggedIn && (
130+
<Li>
131+
<Row
132+
title="Informations personnelles"
133+
type="navigable"
134+
navigateTo={{ screen: 'PersonalData' }}
135+
icon={BicolorProfile}
136+
/>
137+
</Li>
138+
)}
128139
<Li>
129140
<Row
130-
title="Informations personnelles"
131141
type="navigable"
132-
navigateTo={{ screen: 'PersonalData' }}
133-
icon={BicolorProfile}
142+
title="Notifications"
143+
icon={Bell}
144+
navigateTo={{ screen: 'NotificationSettings' }}
134145
/>
135146
</Li>
136-
)}
137-
<Li>
138-
<Row
139-
type="navigable"
140-
title="Notifications"
141-
icon={Bell}
142-
navigateTo={{ screen: 'NotificationSettings' }}
143-
/>
144-
</Li>
145-
<Li>
146-
<SectionWithSwitch
147-
icon={LocationPointerNotFilled}
148-
iconSize={SECTION_ROW_ICON_SIZE}
149-
title="Partager ma position"
150-
active={isGeolocSwitchActive}
151-
accessibilityDescribedBy={locationActivationErrorId}
152-
toggle={() => {
153-
switchGeolocation()
154-
debouncedLogLocationToggle(!isGeolocSwitchActive)
155-
}}
156-
toggleLabel="Partager ma position"
157-
/>
158-
<InputError
159-
visible={!!userPositionError}
160-
messageId={userPositionError?.message}
161-
numberOfSpacesTop={1}
162-
relatedInputId={locationActivationErrorId}
163-
/>
164-
</Li>
165-
</VerticalUl>
166-
</Section>
167-
<Section title="Aides">
168-
<VerticalUl>
169-
<Li>
170-
<Row
171-
title="Comment ça marche&nbsp;?"
172-
type="navigable"
173-
navigateTo={{
174-
screen: 'FirstTutorial',
175-
params: { shouldCloseAppOnBackAction: false },
176-
}}
177-
onPress={() => analytics.logConsultTutorial('profile')}
178-
icon={LifeBuoy}
179-
/>
180-
</Li>
181-
<Li>
182-
<Row
183-
title="Centre d’aide"
147+
<Li>
148+
<SectionWithSwitch
149+
icon={LocationPointerNotFilled}
150+
iconSize={SECTION_ROW_ICON_SIZE}
151+
title="Partager ma position"
152+
active={isGeolocSwitchActive}
153+
accessibilityDescribedBy={locationActivationErrorId}
154+
toggle={() => {
155+
switchGeolocation()
156+
debouncedLogLocationToggle(!isGeolocSwitchActive)
157+
}}
158+
toggleLabel="Partager ma position"
159+
/>
160+
<InputError
161+
visible={!!userPositionError}
162+
messageId={userPositionError?.message}
163+
numberOfSpacesTop={1}
164+
relatedInputId={locationActivationErrorId}
165+
/>
166+
</Li>
167+
</VerticalUl>
168+
</Section>
169+
<Section title="Aides">
170+
<VerticalUl>
171+
<Li>
172+
<Row
173+
title="Comment ça marche&nbsp;?"
174+
type="navigable"
175+
navigateTo={{
176+
screen: 'FirstTutorial',
177+
params: { shouldCloseAppOnBackAction: false },
178+
}}
179+
onPress={() => analytics.logConsultTutorial('profile')}
180+
icon={LifeBuoy}
181+
/>
182+
</Li>
183+
<Li>
184+
<Row
185+
title="Centre d’aide"
186+
type="clickable"
187+
externalNav={{ url: env.FAQ_LINK }}
188+
icon={ExternalSite}
189+
/>
190+
</Li>
191+
</VerticalUl>
192+
</Section>
193+
<Section title="Autres">
194+
<VerticalUl>
195+
<Li>
196+
<Row
197+
title="Accessibilité"
198+
type="navigable"
199+
navigateTo={{ screen: 'Accessibility' }}
200+
icon={HandicapMental}
201+
/>
202+
</Li>
203+
<Li>
204+
<Row
205+
title="Informations légales"
206+
type="navigable"
207+
navigateTo={{ screen: 'LegalNotices' }}
208+
icon={LegalNotices}
209+
/>
210+
</Li>
211+
<Li>
212+
<Row
213+
title="Confidentialité"
214+
type="navigable"
215+
navigateTo={{ screen: 'ConsentSettings' }}
216+
icon={Confidentiality}
217+
/>
218+
</Li>
219+
</VerticalUl>
220+
</Section>
221+
{Platform.OS !== 'web' && (
222+
<Section title="Partager le pass Culture">
223+
<Spacer.Column numberOfSpaces={4} />
224+
<BannerWithBackground
225+
backgroundSource={SHARE_APP_BANNER_IMAGE_SOURCE}
226+
onPress={onShareBannerPress}>
227+
<ShareAppContainer>
228+
<StyledButtonText>Partage le pass Culture</StyledButtonText>
229+
<Spacer.Column numberOfSpaces={1} />
230+
<StyledBody>Recommande le bon plan à&nbsp;tes&nbsp;amis&nbsp;!</StyledBody>
231+
</ShareAppContainer>
232+
</BannerWithBackground>
233+
<Spacer.Column numberOfSpaces={4} />
234+
</Section>
235+
)}
236+
<Section title="Suivre le pass Culture">
237+
<SocialNetwork />
238+
</Section>
239+
{!!isLoggedIn && (
240+
<Section>
241+
<Spacer.Column numberOfSpaces={4} />
242+
<SectionRow
243+
title="Déconnexion"
244+
onPress={signOut}
184245
type="clickable"
185-
externalNav={{ url: env.FAQ_LINK }}
186-
icon={ExternalSite}
187-
/>
188-
</Li>
189-
</VerticalUl>
190-
</Section>
191-
<Section title="Autres">
192-
<VerticalUl>
193-
<Li>
194-
<Row
195-
title="Accessibilité"
196-
type="navigable"
197-
navigateTo={{ screen: 'Accessibility' }}
198-
icon={HandicapMental}
199-
/>
200-
</Li>
201-
<Li>
202-
<Row
203-
title="Informations légales"
204-
type="navigable"
205-
navigateTo={{ screen: 'LegalNotices' }}
206-
icon={LegalNotices}
207-
/>
208-
</Li>
209-
<Li>
210-
<Row
211-
title="Confidentialité"
212-
type="navigable"
213-
navigateTo={{ screen: 'ConsentSettings' }}
214-
icon={Confidentiality}
246+
icon={SignOut}
247+
iconSize={SECTION_ROW_ICON_SIZE}
215248
/>
216-
</Li>
217-
</VerticalUl>
218-
</Section>
219-
{Platform.OS !== 'web' && (
220-
<Section title="Partager le pass Culture">
249+
</Section>
250+
)}
251+
<Section>
221252
<Spacer.Column numberOfSpaces={4} />
222-
<BannerWithBackground
223-
backgroundSource={SHARE_APP_BANNER_IMAGE_SOURCE}
224-
onPress={onShareBannerPress}>
225-
<ShareAppContainer>
226-
<StyledButtonText>Partage le pass Culture</StyledButtonText>
227-
<Spacer.Column numberOfSpaces={1} />
228-
<StyledBody>Recommande le bon plan à&nbsp;tes&nbsp;amis&nbsp;!</StyledBody>
229-
</ShareAppContainer>
230-
</BannerWithBackground>
253+
<Typo.CaptionNeutralInfo>{version}</Typo.CaptionNeutralInfo>
231254
<Spacer.Column numberOfSpaces={4} />
232-
</Section>
233-
)}
234-
<Section title="Suivre le pass Culture">
235-
<SocialNetwork />
236-
</Section>
237-
{!!isLoggedIn && (
238-
<Section>
255+
<LogoMinistereContainer>
256+
<LogoMinistere />
257+
</LogoMinistereContainer>
239258
<Spacer.Column numberOfSpaces={4} />
240-
<SectionRow
241-
title="Déconnexion"
242-
onPress={signOut}
243-
type="clickable"
244-
icon={SignOut}
245-
iconSize={SECTION_ROW_ICON_SIZE}
246-
/>
247259
</Section>
248-
)}
249-
<Section>
250-
<Spacer.Column numberOfSpaces={4} />
251-
<Typo.CaptionNeutralInfo>{version}</Typo.CaptionNeutralInfo>
252-
<Spacer.Column numberOfSpaces={4} />
253-
<LogoMinistereContainer>
254-
<LogoMinistere />
255-
</LogoMinistereContainer>
256-
<Spacer.Column numberOfSpaces={4} />
257-
</Section>
258-
<Spacer.TabBar />
259-
</ProfileContainer>
260-
</ScrollView>
260+
<Spacer.TabBar />
261+
</ProfileContainer>
262+
</ScrollView>
263+
<StatusBarBlurredBackground />
264+
</View>
261265
)
262266
}
263267

0 commit comments

Comments
 (0)