feat(header): fixer la position du header

SocialGouv · Dec 22, 2021 · df6885a · df6885a
1 parent c700b6c
commit df6885a
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 19 deletions.
diff --git a/assets/svg/Gear.js b/assets/svg/Gear.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+const SvgComponent = (props) => (
+  <Svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M24 14.187V9.813c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027H9.813c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059L1.968 5.061c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zM12 9c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"
+      fill="currentColor"
+    />
+  </Svg>
+);
+
+export default SvgComponent;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -48,17 +48,17 @@ const Header = ({title, navigation}) => {
       <Icon
         badge={badge}
         icon="BurgerSvg"
-        width={24}
-        height={24}
+        width={20}
+        height={20}
         onPress={() => setDrawerVisible(true)}
         styleContainer={{marginRight: 20}}
       />
       <Text style={styles.title}>{title}</Text>
       <Icon
         spin={settingsVisible}
         icon="GearSvg"
-        width={30}
-        height={30}
+        width={25}
+        height={25}
         onPress={() => setSettingsVisible(true)}
       />
     </View>
@@ -67,16 +67,18 @@ const Header = ({title, navigation}) => {
 
 const styles = StyleSheet.create({
   container: {
+    // borderColor: 'blue',
+    // borderWidth: 1,
     flex: 0,
-    backgroundColor: 'white',
+    backgroundColor: 'transparent',
     marginRight: 'auto',
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    paddingBottom: 30,
+    paddingBottom: 5,
   },
   title: {
-    fontSize: Dimensions.get('window').width > 370 ? 19 : 14,
+    fontSize: Dimensions.get('window').width > 380 ? 19 : 16,
     color: colors.BLUE,
     marginRight: 'auto',
     fontWeight: 'bold',

diff --git a/src/components/Icon.js b/src/components/Icon.js
@@ -10,7 +10,7 @@ import BurgerSvg from '../../assets/svg/burger.svg';
 import PresentationSvg from '../../assets/svg/presentation.svg';
 import NewsSvg from '../../assets/svg/news.svg';
 import ProtectionSvg from '../../assets/svg/protection.svg';
-import GearSvg from '../../assets/svg/gear.svg';
+import GearSvg from '../../assets/svg/Gear.js';
 import PlusSvg from '../../assets/svg/plus.svg';
 import ClockSvg from '../../assets/svg/clock.svg';
 import LightBulbSvg from '../../assets/svg/light-bulb.svg';
@@ -132,6 +132,8 @@ const Icon = ({
 
 const styles = StyleSheet.create({
   iconContainer: {
+    // borderColor: 'red',
+    // borderWidth: 1,
     width: 40,
     height: 40,
     display: 'flex',

diff --git a/src/scenes/diary/index.js b/src/scenes/diary/index.js
@@ -46,7 +46,7 @@ const Diary = ({navigation}) => {
       const onboardingIsDone = await localStorage.getOnboardingDone();
 
       //if ONBOARDING_DONE is true, do nothing
-      if (Boolean(onboardingIsDone)) return;
+      if (onboardingIsDone) return;
       else {
         const isFirstAppLaunch = await localStorage.getIsFirstAppLaunch();
         if (isFirstAppLaunch !== 'false') {
@@ -76,11 +76,13 @@ const Diary = ({navigation}) => {
   return (
     <SafeAreaView style={styles.safe}>
       <NPS forceView={NPSvisible} close={() => setNPSvisible(false)} />
+      <View style={styles.headerContainer}>
+        <Header title="Mon journal" navigation={navigation} />
+      </View>
       <ScrollView
         style={styles.container}
         contentContainerStyle={styles.scrollContainer}
         keyboardShouldPersistTaps="handled">
-        <Header title="Mon journal" navigation={navigation} />
         <View>
           <TextInput
             multiline={true}
@@ -175,6 +177,10 @@ const Diary = ({navigation}) => {
 };
 
 const styles = StyleSheet.create({
+  headerContainer: {
+    padding: 20,
+    paddingBottom: 0,
+  },
   dateContainer: {
     flexDirection: 'row',
   },

diff --git a/src/scenes/exercise/index.js b/src/scenes/exercise/index.js
@@ -48,13 +48,15 @@ export default ({navigation}) => {
   return (
     <SafeAreaView style={styles.safe}>
       <NPS forceView={NPSvisible} close={() => setNPSvisible(false)} />
-      <ScrollView
-        style={styles.container}
-        contentContainerStyle={styles.scrollContainer}>
+      <View style={styles.headerContainer}>
         <Header
           title="Mes fiches de pensées automatiques"
           navigation={navigation}
         />
+      </View>
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.scrollContainer}>
         {showWelcome === 'true' || !showWelcome ? (
           <View style={styles.welcomeContainer}>
             <Text style={[styles.welcomeText, styles.boldText]}>
@@ -155,6 +157,10 @@ export default ({navigation}) => {
 };
 
 const styles = StyleSheet.create({
+  headerContainer: {
+    padding: 20,
+    paddingBottom: 0,
+  },
   safe: {
     flex: 1,
     backgroundColor: 'white',

diff --git a/src/scenes/onboarding/onboarding.js b/src/scenes/onboarding/onboarding.js
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
   },
   textCgu: {
     flex: 1,
-    fontSize: Dimensions.get('window').height > 600 ? 16 : 12,
+    fontSize: Dimensions.get('window').height > 700 ? 16 : 12,
   },
   emphasis: {
     color: '#1FC6D5',

diff --git a/src/scenes/onboarding/onboardingSupported/index.js b/src/scenes/onboarding/onboardingSupported/index.js
@@ -5,6 +5,7 @@ import {
   View,
   TouchableOpacity,
   ScrollView,
+  Dimensions,
 } from 'react-native';
 import Text from '../../../components/MyText';
 import {colors} from '../../../utils/colors';
@@ -102,7 +103,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    minHeight: 75,
+    minHeight: Dimensions.get('window').height > 700 ? 75 : 40,
     flex: 1,
   },
   darkCard: {

diff --git a/src/scenes/onboarding/screens.js b/src/scenes/onboarding/screens.js
@@ -19,7 +19,7 @@ export const screenWidth = Dimensions.get('window').width;
 export const screenHeight = Dimensions.get('window').height;
 export const menuHeight = 80;
 const size =
-  screenHeight * (Dimensions.get('window').height > 600 ? 0.15 : 0.1);
+  screenHeight * (Dimensions.get('window').height > 700 ? 0.15 : 0.1);
 
 export const Screen0 = () => (
   <View style={styles.container}>
@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: 'white',
     padding: 20,
-    marginBottom: Dimensions.get('window').height > 600 ? 20 : 60,
+    marginBottom: Dimensions.get('window').height > 700 ? 20 : 60,
     justifyContent: 'center',
     alignItems: 'center',
   },
@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
   presentationText: {
     textAlign: 'center',
     marginTop: 20,
-    fontSize: Dimensions.get('window').height > 600 ? 20 : 15,
+    fontSize: Dimensions.get('window').height > 700 ? 20 : 17,
     color: '#0A215C',
   },
   imageContainer: {

diff --git a/src/scenes/status/index.js b/src/scenes/status/index.js
@@ -79,10 +79,12 @@ const Status = ({navigation}) => {
   return (
     <SafeAreaView style={styles.safe}>
       <NPS forceView={NPSvisible} close={() => setNPSvisible(false)} />
+      <View style={styles.headerContainer}>
+        <Header title="Mon état et mes traitements" navigation={navigation} />
+      </View>
       <ScrollView
         style={styles.container}
         contentContainerStyle={styles.scrollContainer}>
-        <Header title="Mon état et mes traitements" navigation={navigation} />
         {bannerProNPSVisible ? (
           <BannerProNPS onClose={() => setBannerProNPSVisible(false)} />
         ) : (
@@ -128,6 +130,10 @@ const Status = ({navigation}) => {
 };
 
 const styles = StyleSheet.create({
+  headerContainer: {
+    padding: 20,
+    paddingBottom: 0,
+  },
   arrowDown: {
     transform: [{rotate: '180deg'}],
   },