diff --git a/__snapshots__/features/home/pages/GenericHome.native.test.tsx.native-snap b/__snapshots__/features/home/pages/GenericHome.native.test.tsx.native-snap index 55f8dc589e6..c8b1e86242a 100644 --- a/__snapshots__/features/home/pages/GenericHome.native.test.tsx.native-snap +++ b/__snapshots__/features/home/pages/GenericHome.native.test.tsx.native-snap @@ -145,6 +145,40 @@ exports[`GenericHome should display real content 1`] = ` ] } /> + + + `; @@ -293,5 +327,39 @@ exports[`GenericHome should display skeleton 1`] = ` ] } /> + + + `; diff --git a/__snapshots__/features/home/pages/Home.native.test.tsx.native-snap b/__snapshots__/features/home/pages/Home.native.test.tsx.native-snap index e80bb1b4ab3..625337d80ec 100644 --- a/__snapshots__/features/home/pages/Home.native.test.tsx.native-snap +++ b/__snapshots__/features/home/pages/Home.native.test.tsx.native-snap @@ -421,5 +421,39 @@ exports[`Home page should render correctly 1`] = ` ] } /> + + + `; diff --git a/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap b/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap index ea10447e0d3..f6fc49b4b52 100644 --- a/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap +++ b/__snapshots__/features/home/pages/ThematicHome.native.test.tsx.native-snap @@ -348,6 +348,40 @@ exports[`ThematicHome should render correctly 1`] = ` ] } /> + + + - - - - - - Mon profil - - - - + + + - - Paramètres du compte - - + + > + Mon profil + + + + + Paramètres du compte + + + - - - BicolorProfile-SVG-Mock - - - - + + BicolorProfile-SVG-Mock + + + - Informations personnelles - - - + /> - - section-row-navigable-icon-SVG-Mock + + Informations personnelles + + + + section-row-navigable-icon-SVG-Mock + + + - - - - - undefined-SVG-Mock - - - - - Notifications - - - - section-row-navigable-icon-SVG-Mock + undefined-SVG-Mock + + + + Notifications + + + + + + section-row-navigable-icon-SVG-Mock + + + - - - - undefined-SVG-Mock - - - - + + + undefined-SVG-Mock + + + - Partager ma position + + Partager ma position + - - - - + - - Case à cocher - - cochée - + /> - + Case à cocher - + cochée + + - - undefined-SVG-Mock - + + + undefined-SVG-Mock + + @@ -640,848 +642,835 @@ exports[`Profile component should render correctly 1`] = ` - - - - Aides - - - + + Aides + + + - - undefined-SVG-Mock - - - - - + + undefined-SVG-Mock + + + - Comment ça marche ? - - - + /> - - section-row-navigable-icon-SVG-Mock + + Comment ça marche ? + + + + section-row-navigable-icon-SVG-Mock + + + - - - - - undefined-SVG-Mock - - - - + + undefined-SVG-Mock + + + + - Centre d’aide - + + Centre d’aide + + - - - - Autres - - - + + Autres + + + - - undefined-SVG-Mock - - - - - + + undefined-SVG-Mock + + + - Accessibilité - - - + /> - - section-row-navigable-icon-SVG-Mock + + Accessibilité + + + + section-row-navigable-icon-SVG-Mock + + + - - - - - undefined-SVG-Mock - - - - + + undefined-SVG-Mock + + + - Informations légales - - - + /> - - section-row-navigable-icon-SVG-Mock + + Informations légales + + + + section-row-navigable-icon-SVG-Mock + + + - - - - undefined-SVG-Mock - - - - - + + undefined-SVG-Mock + + + - Confidentialité - - - + /> - - section-row-navigable-icon-SVG-Mock + + Confidentialité + + + + section-row-navigable-icon-SVG-Mock + + + - - - - Partager le pass Culture - - - - + + Partager le pass Culture + + + + - + @@ -1489,199 +1478,199 @@ exports[`Profile component should render correctly 1`] = ` style={ Array [ Object { - "paddingRight": 32, + "flexGrow": 1, + "flexShrink": 1, + "marginRight": 16, + "textAlign": "start", }, ] } > - - Partage le pass Culture - - - Recommande le bon plan à tes amis ! - + + Partage le pass Culture + + + + Recommande le bon plan à tes amis ! + + - - - - - undefined-SVG-Mock - + + + + undefined-SVG-Mock + + + - - - - - Suivre le pass Culture - - - + + Suivre le pass Culture + + + - - undefined-SVG-Mock - + + + undefined-SVG-Mock + + + + + Instagram + - - - Instagram - - - - - undefined-SVG-Mock - + + + undefined-SVG-Mock + + + + + Twitter + - - - Twitter - - - - - undefined-SVG-Mock - + + + undefined-SVG-Mock + + + + + Tiktok + - - - Tiktok - - - - - - undefined-SVG-Mock - - - - - - Facebook - + + + + undefined-SVG-Mock + + + + + + Facebook + + - - - - - + + + /> - - - undefined-SVG-Mock - - - + + } + testID="Déconnexion" + > - + + undefined-SVG-Mock + + + + - Déconnexion - + + Déconnexion + + - - - - - - - Version 1.10.5 - - + + + + Version 1.10.5 + + + - - undefined-SVG-Mock - + + + undefined-SVG-Mock + + + - + + + - + ], + ] + } + /> - + = ({ ) : null} + ) } diff --git a/src/features/profile/pages/Profile.tsx b/src/features/profile/pages/Profile.tsx index 812390dfa0d..97d3c0415c0 100644 --- a/src/features/profile/pages/Profile.tsx +++ b/src/features/profile/pages/Profile.tsx @@ -1,7 +1,7 @@ import { useFocusEffect } from '@react-navigation/native' import debounce from 'lodash/debounce' import React, { useCallback, useEffect, useRef, useState } from 'react' -import { NativeScrollEvent, Platform, ScrollView } from 'react-native' +import { NativeScrollEvent, Platform, ScrollView, View } from 'react-native' import styled from 'styled-components/native' import { v4 as uuidv4 } from 'uuid' @@ -25,6 +25,7 @@ import { Li } from 'ui/components/Li' import { BannerWithBackground } from 'ui/components/ModuleBanner/BannerWithBackground' import { Section } from 'ui/components/Section' import { SectionRow } from 'ui/components/SectionRow' +import { StatusBarBlurredBackground } from 'ui/components/statusBar/statusBarBlurredBackground' import { VerticalUl } from 'ui/components/Ul' import { useVersion } from 'ui/hooks/useVersion' import { Bell } from 'ui/svg/icons/Bell' @@ -113,151 +114,154 @@ const OnlineProfile: React.FC = () => { }, []) return ( - - - - -
- - {!!isLoggedIn && ( + + + + + +
+ + {!!isLoggedIn && ( +
  • + +
    • + )}
    • - )} -
  • - -
    • -
  • - { - switchGeolocation() - debouncedLogLocationToggle(!isGeolocSwitchActive) - }} - toggleLabel="Partager ma position" - /> - -
    • -     -
    -
    - -
  • - analytics.logConsultTutorial('profile')} - icon={LifeBuoy} - /> -
    • -
  • - + { + switchGeolocation() + debouncedLogLocationToggle(!isGeolocSwitchActive) + }} + toggleLabel="Partager ma position" + /> + +
    • +     +
    +
    + +
  • + analytics.logConsultTutorial('profile')} + icon={LifeBuoy} + /> +
    • +
  • + +
    • +     +
    +
    + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +
    + {Platform.OS !== 'web' && ( +
    + + + + Partage le pass Culture + + Recommande le bon plan à tes amis ! + + + +
    + )} +
    + +
    + {!!isLoggedIn && ( +
    + + - - -
    -
    - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    - {Platform.OS !== 'web' && ( -
    +
    + )} +
    - - - Partage le pass Culture - - Recommande le bon plan à tes amis ! - - + {version} -
    - )} -
    - -
    - {!!isLoggedIn && ( -
    + + + -
    - )} -
    - - {version} - - - - - -
    - -     -     + + + + +     ) } diff --git a/src/ui/components/headers/AnimatedBlurHeader.tsx b/src/ui/components/headers/AnimatedBlurHeader.tsx index c3647a5602a..f370997e484 100644 --- a/src/ui/components/headers/AnimatedBlurHeader.tsx +++ b/src/ui/components/headers/AnimatedBlurHeader.tsx @@ -18,6 +18,7 @@ export const AnimatedBlurHeader = ({ style, }: Props) => { // There is an issue with the blur on Android: we chose not to render it and use a white background + // https://github.com/Kureev/react-native-blur/issues/511 if (Platform.OS === 'android') return null return ( diff --git a/src/ui/components/headers/BlurHeader.tsx b/src/ui/components/headers/BlurHeader.tsx index d628ff37a96..2ceae55e918 100644 --- a/src/ui/components/headers/BlurHeader.tsx +++ b/src/ui/components/headers/BlurHeader.tsx @@ -12,6 +12,7 @@ type Props = { export const BlurHeader = ({ height, blurAmount = 8, blurType = 'light' }: Props) => { // There is an issue with the blur on Android: we chose not to render it and use a white background + // https://github.com/Kureev/react-native-blur/issues/511 if (Platform.OS === 'android') return null return ( diff --git a/src/ui/components/statusBar/statusBarBlurredBackground.tsx b/src/ui/components/statusBar/statusBarBlurredBackground.tsx new file mode 100644 index 00000000000..ea6a58576c3 --- /dev/null +++ b/src/ui/components/statusBar/statusBarBlurredBackground.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { Platform } from 'react-native' +import styled from 'styled-components/native' + +import { BlurView } from 'ui/components/BlurView' +import { useCustomSafeInsets } from 'ui/theme/useCustomSafeInsets' + +export const StatusBarBlurredBackground = () => { + const { top } = useCustomSafeInsets() + + // There is an issue with the blur on Android: we chose not to render it and use a white background + // https://github.com/Kureev/react-native-blur/issues/511 + return ( + + {Platform.OS === 'android' ? : } + + ) +} + +const BlurredStatusBar = styled(BlurView)({ + flex: 1, +}) + +const StatusBarContainer = styled.View<{ height: number }>(({ height }) => ({ + position: 'absolute', + height, + left: 0, + right: 0, + overflow: 'hidden', + backdropFilter: 'blur(20px)', +})) + +const AndroidWhiteStatusBar = styled.View(({ theme }) => ({ + flex: 1, + backgroundColor: theme.colors.white, +}))