From afacf5609cf07218ada8b7e0e49797962ab7d255 Mon Sep 17 00:00:00 2001
From: Martin Salles <salles.martin@gmail.com>
Date: Wed, 3 Feb 2021 12:15:07 +0100
Subject: [PATCH 1/6] Use Safe Area View to make sure of editor usability on
 new iphones

---
 App.js                                                | 11 +++++++----
 src/Components/PlayEditorPage.js                      |  5 +++--
 .../__snapshots__/PlayEditorPage.test.js.snap         |  8 ++++----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/App.js b/App.js
index 0c7a9274..200467b0 100644
--- a/App.js
+++ b/App.js
@@ -7,6 +7,7 @@ import { enableScreens } from 'react-native-screens';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Provider as PaperProvider } from 'react-native-paper';
 import * as Linking from 'expo-linking';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { Navigation } from './src/Navigation';
 import { store, persistor } from './src/Store/configureStore';
@@ -31,10 +32,12 @@ const App = (props) => {
     <ReduxProvider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <PaperProvider>
-          <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
-            <Navigation />
-          </NavigationContainer>
-          <FlashMessage position="bottom" />
+          <SafeAreaProvider>
+            <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
+              <Navigation />
+            </NavigationContainer>
+            <FlashMessage position="bottom" />
+          </SafeAreaProvider>
         </PaperProvider>
       </PersistGate>
     </ReduxProvider>
diff --git a/src/Components/PlayEditorPage.js b/src/Components/PlayEditorPage.js
index 2c899c47..1a3fc2b8 100644
--- a/src/Components/PlayEditorPage.js
+++ b/src/Components/PlayEditorPage.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import Drill from './animation/Drill';
 import I18n from '../utils/i18n';
@@ -97,7 +98,7 @@ export const PlayEditorPage = (props) => {
   };
 
   return (
-    <View style={styles.playEditorPage}>
+    <SafeAreaView style={styles.playEditorPage}>
       <View style={styles.centeredView}>
         {modalRenameVisible ? (
           <RenamePlayModal currentPlay={currentPlay} onRename={setTitle} close={() => setModalRenameVisible(false)} />
@@ -128,7 +129,7 @@ export const PlayEditorPage = (props) => {
         <AnimationHistory animation={currentPlay.animation} onAnimationHistoryChange={onAnimationChange} />
         <SharePlay currentPlay={currentPlay} />
       </View>
-    </View>
+    </SafeAreaView>
   );
 };
 
diff --git a/src/Components/__snapshots__/PlayEditorPage.test.js.snap b/src/Components/__snapshots__/PlayEditorPage.test.js.snap
index 0f03c5f1..f85b5d00 100644
--- a/src/Components/__snapshots__/PlayEditorPage.test.js.snap
+++ b/src/Components/__snapshots__/PlayEditorPage.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
-<View
+<RNCSafeAreaView
   style={
     Object {
       "flex": 1,
@@ -1220,11 +1220,11 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
 
 exports[`<PlayEditorPage /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
   style={
     Object {
       "flex": 1,
@@ -2240,5 +2240,5 @@ exports[`<PlayEditorPage /> renders correctly 1`] = `
       <Text />
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;

From 241c0742edc3fff1ba680271197e4396f3f5fdf2 Mon Sep 17 00:00:00 2001
From: arribbar <barthelemy.arribe@mediapps.io>
Date: Wed, 3 Feb 2021 21:43:00 +0100
Subject: [PATCH 2/6] Use SafeAreaView to have a better display on ios

---
 src/Components/DrillPageMinimal.js            |  5 +-
 src/Components/FitnessFilters.js              |  5 +-
 src/Components/FrisbeeFilters.js              |  5 +-
 src/Components/PlayEditorPage.js              | 10 +--
 src/Components/TrainingPage.js                |  9 +--
 src/Components/VideoPage.js                   |  9 +--
 .../__snapshots__/DictionaryPage.test.js.snap |  2 +-
 .../__snapshots__/DrillListPage.test.js.snap  | 73 +++++++++++++++++++
 .../DrillPageMinimal.test.js.snap             | 18 +++--
 .../__snapshots__/FitnessFilters.test.js.snap | 19 +++--
 .../__snapshots__/FrisbeeFilters.test.js.snap | 12 +--
 .../__snapshots__/ImporterPage.test.js.snap   |  4 +-
 .../__snapshots__/PlayEditorPage.test.js.snap | 24 ++++--
 .../__snapshots__/TrainingPage.test.js.snap   | 34 +++++----
 .../__snapshots__/VideoPage.test.js.snap      | 15 ++--
 .../RenamePlayModal.test.js.snap              |  4 +-
 .../__snapshots__/SavedPlaysList.test.js.snap |  4 +-
 src/Components/shared/Button.js               |  2 +-
 .../shared/__snapshots__/Button.test.js.snap  |  4 +-
 .../shared/__snapshots__/Modal.test.js.snap   |  2 +-
 src/styles/filters.style.js                   |  6 +-
 21 files changed, 179 insertions(+), 87 deletions(-)

diff --git a/src/Components/DrillPageMinimal.js b/src/Components/DrillPageMinimal.js
index eea931a2..1dcf931f 100644
--- a/src/Components/DrillPageMinimal.js
+++ b/src/Components/DrillPageMinimal.js
@@ -1,6 +1,7 @@
 import React, { useLayoutEffect, useCallback } from 'react';
 import { Platform, StyleSheet, View, ScrollView, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import theme from '../styles/theme.style';
@@ -53,7 +54,7 @@ export const DrillPageMinimal = (props) => {
   }, [navigation, currentDrillIndex, training]);
 
   return (
-    <>
+    <SafeAreaView edges={['left', 'bottom', 'right']}>
       <View style={styles.drillPage}>
         <ScrollView style={styles.illustration}>
           {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
@@ -68,7 +69,7 @@ export const DrillPageMinimal = (props) => {
           <ButtonNext onPress={goToNextDrill} text={I18n.t('drillPageMinimal.next')} />
         )}
       </View>
-    </>
+    </SafeAreaView>
   );
 };
 
diff --git a/src/Components/FitnessFilters.js b/src/Components/FitnessFilters.js
index 4fc691ef..16a927ec 100644
--- a/src/Components/FitnessFilters.js
+++ b/src/Components/FitnessFilters.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import filterStyle from '../styles/filters.style';
@@ -131,7 +132,7 @@ export class FitnessFilters extends React.Component {
     } = this.state;
 
     return (
-      <View style={filterStyle.wrapper}>
+      <SafeAreaView style={filterStyle.wrapper} edges={['left', 'bottom', 'right']}>
         <ScrollView contentContainerStyle={filterStyle.filters}>
           <View style={filterStyle.filter}>
             <Button
@@ -218,7 +219,7 @@ export class FitnessFilters extends React.Component {
             text={I18n.t('fitnessFilters.cta', { count: this.state.displayedDrills.length })}
           />
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 }
diff --git a/src/Components/FrisbeeFilters.js b/src/Components/FrisbeeFilters.js
index 05b5d181..59dfc0b1 100644
--- a/src/Components/FrisbeeFilters.js
+++ b/src/Components/FrisbeeFilters.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ScrollView, View, Text } from 'react-native';
 import { connect } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import filterStyle from '../styles/filters.style';
@@ -99,7 +100,7 @@ export class FrisbeeFilters extends React.Component {
   render() {
     const { selectedFavorites, selectedLevels, selectedGoals, numberOfPlayers } = this.state;
     return (
-      <View style={filterStyle.wrapper}>
+      <SafeAreaView style={filterStyle.wrapper}>
         <ScrollView contentContainerStyle={filterStyle.filters}>
           <View style={filterStyle.filter}>
             <Button
@@ -152,7 +153,7 @@ export class FrisbeeFilters extends React.Component {
             text={I18n.t('fitnessFilters.cta', { count: this.state.displayedDrills.length })}
           />
         </View>
-      </View>
+      </SafeAreaView>
     );
   }
 }
diff --git a/src/Components/PlayEditorPage.js b/src/Components/PlayEditorPage.js
index 1a3fc2b8..5f23b5a7 100644
--- a/src/Components/PlayEditorPage.js
+++ b/src/Components/PlayEditorPage.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -64,7 +63,7 @@ export const PlayEditorPage = (props) => {
 
   const saveCurrentPlay = () => {
     const defaultTitle = I18n.t('playEditorPage.untitledPlay');
-    if (currentPlay.title == I18n.t('playEditorPage.untitledPlay')) {
+    if (currentPlay.title === I18n.t('playEditorPage.untitledPlay')) {
       let newTitle = defaultTitle;
 
       let counter = 1;
@@ -98,7 +97,7 @@ export const PlayEditorPage = (props) => {
   };
 
   return (
-    <SafeAreaView style={styles.playEditorPage}>
+    <SafeAreaView style={styles.playEditorPage} edges={['right', 'bottom', 'right']}>
       <View style={styles.centeredView}>
         {modalRenameVisible ? (
           <RenamePlayModal currentPlay={currentPlay} onRename={setTitle} close={() => setModalRenameVisible(false)} />
@@ -146,6 +145,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(PlayEditorPage);
 const styles = StyleSheet.create({
   playEditorPage: {
     flex: 1,
+    backgroundColor: theme.COLOR_PRIMARY,
   },
   centeredView: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
@@ -156,8 +156,6 @@ const styles = StyleSheet.create({
     minHeight: 40,
     width: '100%',
     backgroundColor: theme.COLOR_PRIMARY,
-    position: 'absolute',
-    bottom: 0,
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-evenly',
diff --git a/src/Components/TrainingPage.js b/src/Components/TrainingPage.js
index bb1d5f0e..5a1d9065 100644
--- a/src/Components/TrainingPage.js
+++ b/src/Components/TrainingPage.js
@@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import { StyleSheet, View, Text, TouchableOpacity } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import ViewPager from '@react-native-community/viewpager';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import I18n from '../utils/i18n';
 import DrillList from './shared/DrillList';
@@ -93,7 +94,7 @@ const TrainingPage = (props) => {
     const goToFirstDrill = () =>
       navigation.navigate('DrillPageMinimal', { drill: training.drills[0], training, program });
     return (
-      <View key={index}>
+      <SafeAreaView key={index} edges={['left', 'bottom', 'right']}>
         <DrillList
           ListHeaderComponent={renderHeader(training, index)}
           ListFooterComponent={<View style={{ paddingBottom: 30 }} />}
@@ -105,7 +106,7 @@ const TrainingPage = (props) => {
         <View style={styles.footer}>
           <Button onPress={goToFirstDrill} text={I18n.t('trainingPage.start')} testID={`start${index}`} />
         </View>
-      </View>
+      </SafeAreaView>
     );
   };
 
@@ -180,10 +181,6 @@ const styles = StyleSheet.create({
     paddingLeft: 20,
   },
   footer: {
-    position: 'absolute',
-    paddingBottom: 20,
-    paddingTop: 5,
-    bottom: 0,
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
     width: '100%',
     alignItems: 'center',
diff --git a/src/Components/VideoPage.js b/src/Components/VideoPage.js
index 74d187df..7b4d9eef 100644
--- a/src/Components/VideoPage.js
+++ b/src/Components/VideoPage.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Text, Share } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import theme from '../styles/theme.style';
 import VimeoVideo from './shared/VimeoVideo';
@@ -22,7 +23,7 @@ const VideoPage = (props) => {
   };
 
   return (
-    <View style={styles.videoPage}>
+    <SafeAreaView style={styles.videoPage} edges={['left', 'right', 'bottom']}>
       <View style={styles.video}>
         <VimeoVideo vimeoId={video.video} sounds shouldPlay />
       </View>
@@ -35,7 +36,7 @@ const VideoPage = (props) => {
           <Button onPress={share} icon="share" text={I18n.t('videoPage.share')} testID="shareButton" small light />
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -63,10 +64,6 @@ const styles = StyleSheet.create({
     fontSize: theme.FONT_SIZE_SMALL,
   },
   footer: {
-    position: 'absolute',
-    paddingBottom: 20,
-    paddingTop: 5,
-    bottom: 0,
     width: '100%',
     alignItems: 'center',
   },
diff --git a/src/Components/__snapshots__/DictionaryPage.test.js.snap b/src/Components/__snapshots__/DictionaryPage.test.js.snap
index d6c9d99e..6e80dcf2 100644
--- a/src/Components/__snapshots__/DictionaryPage.test.js.snap
+++ b/src/Components/__snapshots__/DictionaryPage.test.js.snap
@@ -245,7 +245,7 @@ exports[`<DictionaryPage /> renders correctly 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
diff --git a/src/Components/__snapshots__/DrillListPage.test.js.snap b/src/Components/__snapshots__/DrillListPage.test.js.snap
index 646cac49..d5d067f7 100644
--- a/src/Components/__snapshots__/DrillListPage.test.js.snap
+++ b/src/Components/__snapshots__/DrillListPage.test.js.snap
@@ -1051,6 +1051,79 @@ exports[`<DrillListPage /> renders fitness drills sorted by duration 1`] = `
     >
       3 drills available
     </Text>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "center",
+          "backgroundColor": "#fff",
+          "borderColor": "#2a9e91",
+          "borderRadius": 5,
+          "borderWidth": 1,
+          "flexDirection": "row",
+          "height": 30,
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 10,
+          "paddingVertical": 0,
+          "width": "auto",
+        }
+      }
+      testID="filterButton"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": undefined,
+              "fontSize": 12,
+            },
+            Array [
+              Object {
+                "marginRight": 20,
+              },
+              Object {
+                "color": "#2a9e91",
+                "fontSize": 16,
+                "fontWeight": "bold",
+              },
+              Object {
+                "marginRight": 5,
+              },
+            ],
+            Object {
+              "fontFamily": "material-community",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            Object {},
+          ]
+        }
+      >
+        󰈶
+      </Text>
+      <Text
+        style={
+          Object {
+            "color": "#2a9e91",
+            "fontSize": 16,
+            "fontWeight": "bold",
+          }
+        }
+      >
+        Filter
+      </Text>
+    </View>
   </View>
   <RCTScrollView
     contentContainerStyle={
diff --git a/src/Components/__snapshots__/DrillPageMinimal.test.js.snap b/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
index a169a040..d808f2d0 100644
--- a/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
+++ b/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
@@ -1,7 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<DrillPageMinimal /> renders correctly with a training and a drill 1`] = `
-Array [
+<RNCSafeAreaView
+  edges={
+    Array [
+      "left",
+      "bottom",
+      "right",
+    ]
+  }
+>
   <View
     style={
       Object {
@@ -456,7 +464,7 @@ Array [
         </View>
       </View>
     </RCTScrollView>
-  </View>,
+  </View>
   <View
     style={
       Object {
@@ -486,7 +494,7 @@ Array [
           "backgroundColor": "#2a9e91",
           "borderRadius": 5,
           "flexDirection": "row",
-          "height": 40,
+          "height": 50,
           "justifyContent": "center",
           "opacity": 1,
           "paddingHorizontal": 20,
@@ -508,6 +516,6 @@ Array [
         Next drill
       </Text>
     </View>
-  </View>,
-]
+  </View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/FitnessFilters.test.js.snap b/src/Components/__snapshots__/FitnessFilters.test.js.snap
index bc80404d..72fe8068 100644
--- a/src/Components/__snapshots__/FitnessFilters.test.js.snap
+++ b/src/Components/__snapshots__/FitnessFilters.test.js.snap
@@ -1,12 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FitnessFilters /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "left",
+      "bottom",
+      "right",
+    ]
+  }
   style={
     Object {
       "backgroundColor": "#fff",
+      "flex": 1,
       "height": "100%",
-      "paddingTop": 20,
     }
   }
 >
@@ -845,10 +852,6 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
-        "bottom": 0,
-        "paddingBottom": 10,
-        "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -869,7 +872,7 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
           "backgroundColor": "#2a9e91",
           "borderRadius": 5,
           "flexDirection": "row",
-          "height": 40,
+          "height": 50,
           "justifyContent": "center",
           "opacity": 1,
           "paddingHorizontal": 20,
@@ -892,5 +895,5 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
index ed05924f..0ecd6f88 100644
--- a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
+++ b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<FrisbeeFilters /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
   style={
     Object {
       "backgroundColor": "#fff",
+      "flex": 1,
       "height": "100%",
-      "paddingTop": 20,
     }
   }
 >
@@ -470,10 +470,6 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
-        "bottom": 0,
-        "paddingBottom": 10,
-        "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -494,7 +490,7 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
           "backgroundColor": "#2a9e91",
           "borderRadius": 5,
           "flexDirection": "row",
-          "height": 40,
+          "height": 50,
           "justifyContent": "center",
           "opacity": 1,
           "paddingHorizontal": 20,
@@ -517,5 +513,5 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/__snapshots__/ImporterPage.test.js.snap b/src/Components/__snapshots__/ImporterPage.test.js.snap
index 04c88f27..6aabcc02 100644
--- a/src/Components/__snapshots__/ImporterPage.test.js.snap
+++ b/src/Components/__snapshots__/ImporterPage.test.js.snap
@@ -116,7 +116,7 @@ exports[`<ImporterPage /> renders correctly after download 1`] = `
             "backgroundColor": "#2a9e91",
             "borderRadius": 5,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
@@ -156,7 +156,7 @@ exports[`<ImporterPage /> renders correctly after download 1`] = `
             "borderRadius": 5,
             "borderWidth": 1,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
diff --git a/src/Components/__snapshots__/PlayEditorPage.test.js.snap b/src/Components/__snapshots__/PlayEditorPage.test.js.snap
index f85b5d00..e0147ac5 100644
--- a/src/Components/__snapshots__/PlayEditorPage.test.js.snap
+++ b/src/Components/__snapshots__/PlayEditorPage.test.js.snap
@@ -2,8 +2,16 @@
 
 exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
 <RNCSafeAreaView
+  edges={
+    Array [
+      "right",
+      "bottom",
+      "right",
+    ]
+  }
   style={
     Object {
+      "backgroundColor": "#232b2b",
       "flex": 1,
     }
   }
@@ -800,12 +808,10 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#232b2b",
-        "bottom": 0,
         "flexDirection": "row",
         "height": "8%",
         "justifyContent": "space-evenly",
         "minHeight": 40,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -992,7 +998,7 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
                   "borderRadius": 5,
                   "borderWidth": 1,
                   "flexDirection": "row",
-                  "height": 40,
+                  "height": 50,
                   "justifyContent": "center",
                   "marginTop": 20,
                   "opacity": 1,
@@ -1225,8 +1231,16 @@ exports[`<PlayEditorPage /> renders correctly  with a currentPlay 1`] = `
 
 exports[`<PlayEditorPage /> renders correctly 1`] = `
 <RNCSafeAreaView
+  edges={
+    Array [
+      "right",
+      "bottom",
+      "right",
+    ]
+  }
   style={
     Object {
+      "backgroundColor": "#232b2b",
       "flex": 1,
     }
   }
@@ -1938,12 +1952,10 @@ exports[`<PlayEditorPage /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#232b2b",
-        "bottom": 0,
         "flexDirection": "row",
         "height": "8%",
         "justifyContent": "space-evenly",
         "minHeight": 40,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -2111,7 +2123,7 @@ exports[`<PlayEditorPage /> renders correctly 1`] = `
                   "borderRadius": 5,
                   "borderWidth": 1,
                   "flexDirection": "row",
-                  "height": 40,
+                  "height": 50,
                   "justifyContent": "center",
                   "marginTop": 20,
                   "opacity": 1,
diff --git a/src/Components/__snapshots__/TrainingPage.test.js.snap b/src/Components/__snapshots__/TrainingPage.test.js.snap
index ce99d6af..387e8ea9 100644
--- a/src/Components/__snapshots__/TrainingPage.test.js.snap
+++ b/src/Components/__snapshots__/TrainingPage.test.js.snap
@@ -15,8 +15,15 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
     }
   }
 >
-  <View
+  <RNCSafeAreaView
     collapsable={false}
+    edges={
+      Array [
+        "left",
+        "bottom",
+        "right",
+      ]
+    }
     style={
       Array [
         undefined,
@@ -1330,10 +1337,6 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         Object {
           "alignItems": "center",
           "backgroundColor": "#fff",
-          "bottom": 0,
-          "paddingBottom": 20,
-          "paddingTop": 5,
-          "position": "absolute",
           "width": "100%",
         }
       }
@@ -1354,7 +1357,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
             "backgroundColor": "#2a9e91",
             "borderRadius": 5,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
@@ -1377,9 +1380,16 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         </Text>
       </View>
     </View>
-  </View>
-  <View
+  </RNCSafeAreaView>
+  <RNCSafeAreaView
     collapsable={false}
+    edges={
+      Array [
+        "left",
+        "bottom",
+        "right",
+      ]
+    }
     style={
       Array [
         undefined,
@@ -2658,10 +2668,6 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         Object {
           "alignItems": "center",
           "backgroundColor": "#fff",
-          "bottom": 0,
-          "paddingBottom": 20,
-          "paddingTop": 5,
-          "position": "absolute",
           "width": "100%",
         }
       }
@@ -2682,7 +2688,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
             "backgroundColor": "#2a9e91",
             "borderRadius": 5,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "opacity": 1,
             "paddingHorizontal": 20,
@@ -2705,6 +2711,6 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         </Text>
       </View>
     </View>
-  </View>
+  </RNCSafeAreaView>
 </RNCViewPager>
 `;
diff --git a/src/Components/__snapshots__/VideoPage.test.js.snap b/src/Components/__snapshots__/VideoPage.test.js.snap
index 428c267e..9404ccca 100644
--- a/src/Components/__snapshots__/VideoPage.test.js.snap
+++ b/src/Components/__snapshots__/VideoPage.test.js.snap
@@ -1,7 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<VideoPage /> renders correctly 1`] = `
-<View
+<RNCSafeAreaView
+  edges={
+    Array [
+      "left",
+      "right",
+      "bottom",
+    ]
+  }
   style={
     Object {
       "backgroundColor": "#fff",
@@ -115,10 +122,6 @@ exports[`<VideoPage /> renders correctly 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "bottom": 0,
-        "paddingBottom": 20,
-        "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
@@ -166,5 +169,5 @@ exports[`<VideoPage /> renders correctly 1`] = `
       </Text>
     </View>
   </View>
-</View>
+</RNCSafeAreaView>
 `;
diff --git a/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap b/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap
index 896d0b39..d17ab4ca 100644
--- a/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap
+++ b/src/Components/editor/__snapshots__/RenamePlayModal.test.js.snap
@@ -120,7 +120,7 @@ exports[`<RenamePlayModal /> renders correctly 1`] = `
                     "backgroundColor": "#2a9e91",
                     "borderRadius": 5,
                     "flexDirection": "row",
-                    "height": 40,
+                    "height": 50,
                     "justifyContent": "center",
                     "marginTop": 10,
                     "opacity": 1,
@@ -164,7 +164,7 @@ exports[`<RenamePlayModal /> renders correctly 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
diff --git a/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap b/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap
index e257182b..c3776a2b 100644
--- a/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap
+++ b/src/Components/editor/toolbar/__snapshots__/SavedPlaysList.test.js.snap
@@ -183,7 +183,7 @@ exports[`<SavedPlaysList /> renders an empty state with no plays 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
@@ -691,7 +691,7 @@ exports[`<SavedPlaysList /> renders correctly with plays 1`] = `
               "borderRadius": 5,
               "borderWidth": 1,
               "flexDirection": "row",
-              "height": 40,
+              "height": 50,
               "justifyContent": "center",
               "marginTop": 20,
               "opacity": 1,
diff --git a/src/Components/shared/Button.js b/src/Components/shared/Button.js
index e629f14b..0632a3d7 100644
--- a/src/Components/shared/Button.js
+++ b/src/Components/shared/Button.js
@@ -25,7 +25,7 @@ const Button = ({ onPress, icon, text, light, small, style, testID }) => {
 const styles = StyleSheet.create({
   button: {
     width: '80%',
-    height: 40,
+    height: 50,
     borderRadius: 5,
     backgroundColor: theme.MAIN_COLOR,
     paddingVertical: 10,
diff --git a/src/Components/shared/__snapshots__/Button.test.js.snap b/src/Components/shared/__snapshots__/Button.test.js.snap
index 1d5e03da..826a18c5 100644
--- a/src/Components/shared/__snapshots__/Button.test.js.snap
+++ b/src/Components/shared/__snapshots__/Button.test.js.snap
@@ -17,7 +17,7 @@ exports[`<Button /> renders correctly 1`] = `
       "backgroundColor": "#2a9e91",
       "borderRadius": 5,
       "flexDirection": "row",
-      "height": 40,
+      "height": 50,
       "justifyContent": "center",
       "opacity": 1,
       "paddingHorizontal": 20,
@@ -60,7 +60,7 @@ exports[`<Button /> renders correctly when light 1`] = `
       "borderRadius": 5,
       "borderWidth": 1,
       "flexDirection": "row",
-      "height": 40,
+      "height": 50,
       "justifyContent": "center",
       "opacity": 1,
       "paddingHorizontal": 20,
diff --git a/src/Components/shared/__snapshots__/Modal.test.js.snap b/src/Components/shared/__snapshots__/Modal.test.js.snap
index 928746c1..a7396b0b 100644
--- a/src/Components/shared/__snapshots__/Modal.test.js.snap
+++ b/src/Components/shared/__snapshots__/Modal.test.js.snap
@@ -93,7 +93,7 @@ exports[`<Modal /> renders correctly 1`] = `
             "borderRadius": 5,
             "borderWidth": 1,
             "flexDirection": "row",
-            "height": 40,
+            "height": 50,
             "justifyContent": "center",
             "marginTop": 20,
             "opacity": 1,
diff --git a/src/styles/filters.style.js b/src/styles/filters.style.js
index 021850cd..3ef912b0 100644
--- a/src/styles/filters.style.js
+++ b/src/styles/filters.style.js
@@ -2,7 +2,7 @@ import theme from '../styles/theme.style';
 
 export default {
   wrapper: {
-    paddingTop: 20,
+    flex: 1,
     height: '100%',
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
   },
@@ -22,10 +22,6 @@ export default {
     justifyContent: 'space-between',
   },
   footer: {
-    position: 'absolute',
-    paddingBottom: 10,
-    paddingTop: 5,
-    bottom: 0,
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
     width: '100%',
     alignItems: 'center',

From 0782e2f9169ef28caa9718308ea475f03ae43556 Mon Sep 17 00:00:00 2001
From: arribbar <barthelemy.arribe@mediapps.io>
Date: Wed, 3 Feb 2021 21:44:23 +0100
Subject: [PATCH 3/6] Display Fitness Filter on DrillList page

---
 src/Components/DrillListPage.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/Components/DrillListPage.js b/src/Components/DrillListPage.js
index 987ad8d2..2e04a5d3 100644
--- a/src/Components/DrillListPage.js
+++ b/src/Components/DrillListPage.js
@@ -38,16 +38,14 @@ export const DrillListPage = (props) => {
     <View style={styles.drillListPage}>
       <View style={styles.filtersArea}>
         <Text style={styles.counter}>{I18n.t('drillListPage.availableDrills', { count: displayedDrills.length })}</Text>
-        {type === DrillTypes.FRISBEE && (
-          <Button
-            onPress={openFilters}
-            icon="filter-variant"
-            text={I18n.t('drillListPage.filter')}
-            testID="filterButton"
-            small
-            light={!filterIsOn}
-          />
-        )}
+        <Button
+          onPress={openFilters}
+          icon="filter-variant"
+          text={I18n.t('drillListPage.filter')}
+          testID="filterButton"
+          small
+          light={!filterIsOn}
+        />
       </View>
       <DrillList navigation={navigation} drillsToDisplay={displayedDrills} />
     </View>

From 665a3ed41fa41e52612ff1726bb8caa14db106b9 Mon Sep 17 00:00:00 2001
From: arribbar <barthelemy.arribe@mediapps.io>
Date: Wed, 3 Feb 2021 21:45:33 +0100
Subject: [PATCH 4/6] Fix french error in locale

---
 src/utils/locales/fr.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/locales/fr.js b/src/utils/locales/fr.js
index 5b5b104d..f8386c4f 100644
--- a/src/utils/locales/fr.js
+++ b/src/utils/locales/fr.js
@@ -95,7 +95,7 @@ export default {
     junior: 'Juniors',
     programs: 'Programmes',
     leanTitle: 'Exercices',
-    leanSubtitle: 'Tous nos exercises pour garder la forme !',
+    leanSubtitle: 'Tous nos exercices pour garder la forme !',
     bodyweightTitle: 'Sans matériel',
     bodyweightSubtitle: 'Des programmes conçus pour plusieurs semaines',
     gymTitle: 'En salle',

From 5b77018abc8b19ac3b7e3d1953390607a5b9ef66 Mon Sep 17 00:00:00 2001
From: Martin Salles <salles.martin@gmail.com>
Date: Wed, 3 Feb 2021 23:14:25 +0100
Subject: [PATCH 5/6] Try to fix MinimalDrillPage and spacing

---
 src/Components/DrillPageMinimal.js            |  19 +-
 src/Components/TrainingPage.js                |   1 +
 src/Components/VideoPage.js                   |  26 +-
 .../DrillPageMinimal.test.js.snap             | 681 +++++++++---------
 .../__snapshots__/FitnessFilters.test.js.snap |   1 +
 .../__snapshots__/FrisbeeFilters.test.js.snap |   1 +
 .../__snapshots__/ImporterPage.test.js.snap   | 145 ++++
 .../__snapshots__/TrainingPage.test.js.snap   |   2 +
 .../__snapshots__/VideoPage.test.js.snap      |  16 +-
 src/styles/filters.style.js                   |   1 +
 10 files changed, 516 insertions(+), 377 deletions(-)

diff --git a/src/Components/DrillPageMinimal.js b/src/Components/DrillPageMinimal.js
index 1dcf931f..dbcd7d91 100644
--- a/src/Components/DrillPageMinimal.js
+++ b/src/Components/DrillPageMinimal.js
@@ -54,14 +54,12 @@ export const DrillPageMinimal = (props) => {
   }, [navigation, currentDrillIndex, training]);
 
   return (
-    <SafeAreaView edges={['left', 'bottom', 'right']}>
-      <View style={styles.drillPage}>
-        <ScrollView style={styles.illustration}>
-          {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
-          {drill.type === DrillTypes.FITNESS && <FitnessDrillIllustration drill={drill} />}
-          <Description drill={drill} minimal />
-        </ScrollView>
-      </View>
+    <SafeAreaView edges={['left', 'bottom', 'right']} style={styles.drillPage}>
+      <ScrollView style={styles.illustration}>
+        {drill.type === DrillTypes.FRISBEE && <FrisbeeDrillIllustration drill={drill} />}
+        {drill.type === DrillTypes.FITNESS && <FitnessDrillIllustration drill={drill} />}
+        <Description drill={drill} minimal />
+      </ScrollView>
       <View style={styles.footer}>
         {isLastTraining ? (
           <ButtonNext onPress={finishTraining} text={I18n.t('drillPageMinimal.finish')} />
@@ -81,7 +79,7 @@ const styles = StyleSheet.create({
   drillPage: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
     flex: 1,
-    marginBottom: 50,
+    marginBottom: 60,
   },
   headerTitle: {
     flexDirection: 'column',
@@ -117,17 +115,14 @@ const styles = StyleSheet.create({
     fontSize: theme.FONT_SIZE_LARGE,
     fontWeight: 'bold',
     textAlign: 'center',
-    marginRight: 46, // Matches the details icon width
   },
   illustration: {
     flexGrow: 1,
     flexShrink: 0,
   },
   footer: {
-    position: 'absolute',
     paddingBottom: 10,
     paddingTop: 5,
-    bottom: 0,
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
     width: '100%',
     alignItems: 'center',
diff --git a/src/Components/TrainingPage.js b/src/Components/TrainingPage.js
index 5a1d9065..e6912a8c 100644
--- a/src/Components/TrainingPage.js
+++ b/src/Components/TrainingPage.js
@@ -182,6 +182,7 @@ const styles = StyleSheet.create({
   },
   footer: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+    paddingBottom: 10,
     width: '100%',
     alignItems: 'center',
   },
diff --git a/src/Components/VideoPage.js b/src/Components/VideoPage.js
index 7b4d9eef..72b250a8 100644
--- a/src/Components/VideoPage.js
+++ b/src/Components/VideoPage.js
@@ -30,12 +30,18 @@ const VideoPage = (props) => {
       <View style={styles.title}>
         <Text style={styles.text}>{video.title}</Text>
         <Text style={styles.textAuthor}>{video.text}</Text>
+        {video.youtube && (
+          <Button
+            onPress={share}
+            icon="share"
+            text={I18n.t('videoPage.share')}
+            testID="shareButton"
+            style={styles.share}
+            small
+            light
+          />
+        )}
       </View>
-      {video.youtube && (
-        <View style={styles.footer}>
-          <Button onPress={share} icon="share" text={I18n.t('videoPage.share')} testID="shareButton" small light />
-        </View>
-      )}
     </SafeAreaView>
   );
 };
@@ -56,15 +62,15 @@ const styles = StyleSheet.create({
   },
   text: {
     color: theme.COLOR_PRIMARY,
-    fontSize: theme.FONT_SIZE_MEDIUM,
+    fontSize: theme.FONT_SIZE_LARGE,
     fontWeight: 'bold',
   },
   textAuthor: {
     color: theme.COLOR_SECONDARY,
-    fontSize: theme.FONT_SIZE_SMALL,
+    fontSize: theme.FONT_SIZE_MEDIUM,
   },
-  footer: {
-    width: '100%',
-    alignItems: 'center',
+  share: {
+    marginTop: 10,
+    alignSelf: 'flex-start',
   },
 });
diff --git a/src/Components/__snapshots__/DrillPageMinimal.test.js.snap b/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
index d808f2d0..dde2f794 100644
--- a/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
+++ b/src/Components/__snapshots__/DrillPageMinimal.test.js.snap
@@ -9,158 +9,201 @@ exports[`<DrillPageMinimal /> renders correctly with a training and a drill 1`]
       "right",
     ]
   }
+  style={
+    Object {
+      "backgroundColor": "#fff",
+      "flex": 1,
+      "marginBottom": 60,
+    }
+  }
 >
-  <View
+  <RCTScrollView
     style={
       Object {
-        "backgroundColor": "#fff",
-        "flex": 1,
-        "marginBottom": 50,
+        "flexGrow": 1,
+        "flexShrink": 0,
       }
     }
   >
-    <RCTScrollView
-      style={
-        Object {
-          "flexGrow": 1,
-          "flexShrink": 0,
+    <View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
         }
-      }
-    >
-      <View>
+      >
         <View
           style={
-            Object {
-              "flex": 1,
-            }
+            Array [
+              Object {
+                "height": 250,
+              },
+              false,
+            ]
           }
         >
           <View
             style={
-              Array [
-                Object {
-                  "height": 250,
-                },
-                false,
-              ]
+              Object {
+                "alignItems": "center",
+                "flex": 1,
+                "height": 250,
+                "justifyContent": "center",
+              }
             }
           >
             <View
               style={
                 Object {
-                  "alignItems": "center",
-                  "flex": 1,
+                  "position": "absolute",
+                }
+              }
+            >
+              <ActivityIndicator
+                animating={true}
+                color="#A6A6A6"
+                hidesWhenStopped={true}
+                size="large"
+              />
+              <Text>
+                Loading…
+              </Text>
+            </View>
+            <View
+              pointerEvents="box-none"
+              style={
+                Object {
                   "height": 250,
-                  "justifyContent": "center",
+                  "overflow": "hidden",
+                  "width": "100%",
                 }
               }
             >
-              <View
+              <ViewManagerAdapter_ExpoVideoView
+                proxiedProperties={
+                  Object {
+                    "onError": [Function],
+                    "onFullscreenUpdate": [Function],
+                    "onLoad": [Function],
+                    "onLoadStart": [Function],
+                    "onReadyForDisplay": [Function],
+                    "onStatusUpdate": [Function],
+                    "resizeMode": "mock",
+                    "source": undefined,
+                    "status": Object {},
+                    "useNativeControls": true,
+                  }
+                }
                 style={
                   Object {
+                    "bottom": 0,
+                    "left": 0,
                     "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   }
                 }
-              >
-                <ActivityIndicator
-                  animating={true}
-                  color="#A6A6A6"
-                  hidesWhenStopped={true}
-                  size="large"
-                />
-                <Text>
-                  Loading…
-                </Text>
-              </View>
+              />
+            </View>
+          </View>
+        </View>
+        <RCTScrollView
+          data={
+            Array [
+              Object {
+                "id": 0,
+                "subtitle": "This is a subtitle",
+                "title": "Warmup",
+                "vimeoId": "462695757",
+              },
+              Object {
+                "id": 1,
+                "subtitle": "This is a subtitle",
+                "title": "Do the drill",
+                "vimeoId": "462695757",
+              },
+              Object {
+                "id": 2,
+                "subtitle": "This is a subtitle",
+                "title": "Last step",
+                "vimeoId": "462695757",
+              },
+            ]
+          }
+          disableVirtualization={false}
+          getItem={[Function]}
+          getItemCount={[Function]}
+          horizontal={false}
+          initialNumToRender={10}
+          keyExtractor={[Function]}
+          maxToRenderPerBatch={10}
+          nestedScrollEnabled={true}
+          onContentSizeChange={[Function]}
+          onEndReachedThreshold={2}
+          onLayout={[Function]}
+          onMomentumScrollEnd={[Function]}
+          onScroll={[Function]}
+          onScrollBeginDrag={[Function]}
+          onScrollEndDrag={[Function]}
+          removeClippedSubviews={false}
+          renderItem={[Function]}
+          scrollEventThrottle={50}
+          stickyHeaderIndices={Array []}
+          updateCellsBatchingPeriod={50}
+          viewabilityConfigCallbackPairs={Array []}
+          windowSize={21}
+        >
+          <View>
+            <View
+              onLayout={[Function]}
+              style={null}
+            >
               <View
-                pointerEvents="box-none"
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "height": 250,
-                    "overflow": "hidden",
-                    "width": "100%",
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "padding": 20,
                   }
                 }
               >
-                <ViewManagerAdapter_ExpoVideoView
-                  proxiedProperties={
-                    Object {
-                      "onError": [Function],
-                      "onFullscreenUpdate": [Function],
-                      "onLoad": [Function],
-                      "onLoadStart": [Function],
-                      "onReadyForDisplay": [Function],
-                      "onStatusUpdate": [Function],
-                      "resizeMode": "mock",
-                      "source": undefined,
-                      "status": Object {},
-                      "useNativeControls": true,
-                    }
-                  }
+                <View
                   style={
                     Object {
-                      "bottom": 0,
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
+                      "alignItems": "center",
+                      "flexGrow": 0,
+                      "flexShrink": 0,
                     }
                   }
-                />
-              </View>
-            </View>
-          </View>
-          <RCTScrollView
-            data={
-              Array [
-                Object {
-                  "id": 0,
-                  "subtitle": "This is a subtitle",
-                  "title": "Warmup",
-                  "vimeoId": "462695757",
-                },
-                Object {
-                  "id": 1,
-                  "subtitle": "This is a subtitle",
-                  "title": "Do the drill",
-                  "vimeoId": "462695757",
-                },
-                Object {
-                  "id": 2,
-                  "subtitle": "This is a subtitle",
-                  "title": "Last step",
-                  "vimeoId": "462695757",
-                },
-              ]
-            }
-            disableVirtualization={false}
-            getItem={[Function]}
-            getItemCount={[Function]}
-            horizontal={false}
-            initialNumToRender={10}
-            keyExtractor={[Function]}
-            maxToRenderPerBatch={10}
-            nestedScrollEnabled={true}
-            onContentSizeChange={[Function]}
-            onEndReachedThreshold={2}
-            onLayout={[Function]}
-            onMomentumScrollEnd={[Function]}
-            onScroll={[Function]}
-            onScrollBeginDrag={[Function]}
-            onScrollEndDrag={[Function]}
-            removeClippedSubviews={false}
-            renderItem={[Function]}
-            scrollEventThrottle={50}
-            stickyHeaderIndices={Array []}
-            updateCellsBatchingPeriod={50}
-            viewabilityConfigCallbackPairs={Array []}
-            windowSize={21}
-          >
-            <View>
-              <View
-                onLayout={[Function]}
-                style={null}
-              >
+                >
+                  <Text
+                    style={
+                      Array [
+                        Object {
+                          "color": "#232b2b",
+                          "fontSize": 20,
+                        },
+                        Object {},
+                        Object {
+                          "fontWeight": "bold",
+                        },
+                      ]
+                    }
+                  >
+                     
+                    Warmup
+                  </Text>
+                </View>
                 <View
                   accessible={true}
                   focusable={true}
@@ -173,307 +216,259 @@ exports[`<DrillPageMinimal /> renders correctly with a training and a drill 1`]
                   onStartShouldSetResponder={[Function]}
                   style={
                     Object {
-                      "flexDirection": "row",
+                      "flex": 1,
                       "opacity": 1,
-                      "padding": 20,
                     }
                   }
+                  testID="doneIcon"
                 >
                   <View
                     style={
                       Object {
-                        "alignItems": "center",
-                        "flexGrow": 0,
-                        "flexShrink": 0,
+                        "opacity": 1,
                       }
                     }
                   >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#232b2b",
-                            "fontSize": 20,
-                          },
-                          Object {},
-                          Object {
-                            "fontWeight": "bold",
-                          },
-                        ]
-                      }
-                    >
-                       
-                      Warmup
-                    </Text>
+                    <Text />
                   </View>
                   <View
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
                     style={
                       Object {
-                        "flex": 1,
-                        "opacity": 1,
+                        "opacity": 0,
                       }
                     }
-                    testID="doneIcon"
                   >
-                    <View
-                      style={
-                        Object {
-                          "opacity": 1,
-                        }
-                      }
-                    >
-                      <Text />
-                    </View>
-                    <View
-                      style={
-                        Object {
-                          "opacity": 0,
-                        }
-                      }
-                    >
-                      <Text />
-                    </View>
+                    <Text />
                   </View>
                 </View>
               </View>
+            </View>
+            <View
+              onLayout={[Function]}
+              style={null}
+            >
               <View
-                onLayout={[Function]}
-                style={null}
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "padding": 20,
+                  }
+                }
               >
                 <View
-                  accessible={true}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Object {
-                      "flexDirection": "row",
-                      "opacity": 1,
-                      "padding": 20,
+                      "alignItems": "center",
+                      "flexGrow": 0,
+                      "flexShrink": 0,
                     }
                   }
                 >
-                  <View
+                  <Text
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "flexGrow": 0,
-                        "flexShrink": 0,
-                      }
+                      Array [
+                        Object {
+                          "color": "#232b2b",
+                          "fontSize": 20,
+                        },
+                        Object {},
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#232b2b",
-                            "fontSize": 20,
-                          },
-                          Object {},
-                          Object {},
-                        ]
-                      }
-                    >
-                       
-                      Do the drill
-                    </Text>
-                  </View>
+                     
+                    Do the drill
+                  </Text>
                 </View>
               </View>
+            </View>
+            <View
+              onLayout={[Function]}
+              style={null}
+            >
               <View
-                onLayout={[Function]}
-                style={null}
+                accessible={true}
+                focusable={true}
+                onClick={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "flexDirection": "row",
+                    "opacity": 1,
+                    "padding": 20,
+                  }
+                }
               >
                 <View
-                  accessible={true}
-                  focusable={true}
-                  onClick={[Function]}
-                  onResponderGrant={[Function]}
-                  onResponderMove={[Function]}
-                  onResponderRelease={[Function]}
-                  onResponderTerminate={[Function]}
-                  onResponderTerminationRequest={[Function]}
-                  onStartShouldSetResponder={[Function]}
                   style={
                     Object {
-                      "flexDirection": "row",
-                      "opacity": 1,
-                      "padding": 20,
+                      "alignItems": "center",
+                      "flexGrow": 0,
+                      "flexShrink": 0,
                     }
                   }
                 >
-                  <View
+                  <Text
                     style={
-                      Object {
-                        "alignItems": "center",
-                        "flexGrow": 0,
-                        "flexShrink": 0,
-                      }
+                      Array [
+                        Object {
+                          "color": "#232b2b",
+                          "fontSize": 20,
+                        },
+                        Object {},
+                        Object {},
+                      ]
                     }
                   >
-                    <Text
-                      style={
-                        Array [
-                          Object {
-                            "color": "#232b2b",
-                            "fontSize": 20,
-                          },
-                          Object {},
-                          Object {},
-                        ]
-                      }
-                    >
-                       
-                      Last step
-                    </Text>
-                  </View>
+                     
+                    Last step
+                  </Text>
                 </View>
               </View>
             </View>
-          </RCTScrollView>
-        </View>
+          </View>
+        </RCTScrollView>
+      </View>
+      <View
+        style={
+          Object {
+            "paddingBottom": 10,
+          }
+        }
+      >
         <View
           style={
             Object {
-              "paddingBottom": 10,
+              "borderBottomColor": "#e5e5e5",
+              "borderBottomWidth": 1,
+            }
+          }
+        />
+        <View
+          style={
+            Object {
+              "padding": 10,
             }
           }
         >
-          <View
+          <Text
             style={
-              Object {
-                "borderBottomColor": "#e5e5e5",
-                "borderBottomWidth": 1,
-              }
+              Array [
+                Object {
+                  "color": "#232b2b",
+                  "fontSize": 20,
+                  "fontWeight": "bold",
+                  "marginBottom": 5,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
-          />
-          <View
+          >
+            Equipment
+          </Text>
+          <Text
             style={
-              Object {
-                "padding": 10,
-              }
+              Array [
+                Object {
+                  "color": "#A6A6A6",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
           >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#232b2b",
-                    "fontSize": 20,
-                    "fontWeight": "bold",
-                    "marginBottom": 5,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Equipment
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#A6A6A6",
-                    "fontSize": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Equipment needs for the drill
-            </Text>
-          </View>
-          <View
-            style={
-              Object {
-                "borderBottomColor": "#e5e5e5",
-                "borderBottomWidth": 1,
-              }
+            Equipment needs for the drill
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "borderBottomColor": "#e5e5e5",
+              "borderBottomWidth": 1,
             }
-          />
-          <View
+          }
+        />
+        <View
+          style={
+            Object {
+              "padding": 10,
+            }
+          }
+        >
+          <Text
             style={
-              Object {
-                "padding": 10,
-              }
+              Array [
+                Object {
+                  "color": "#232b2b",
+                  "fontSize": 20,
+                  "fontWeight": "bold",
+                  "marginBottom": 5,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
           >
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#232b2b",
-                    "fontSize": 20,
-                    "fontWeight": "bold",
-                    "marginBottom": 5,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Description
-            </Text>
-            <Text
-              style={
-                Array [
-                  Object {
-                    "color": "#A6A6A6",
-                    "fontSize": 16,
-                    "textAlign": "center",
-                  },
-                  Object {
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              Description of the drill
-            </Text>
-          </View>
-          <View
+            Description
+          </Text>
+          <Text
             style={
-              Object {
-                "borderBottomColor": "#e5e5e5",
-                "borderBottomWidth": 1,
-              }
+              Array [
+                Object {
+                  "color": "#A6A6A6",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+                Object {
+                  "textAlign": "left",
+                },
+              ]
             }
-          />
+          >
+            Description of the drill
+          </Text>
         </View>
+        <View
+          style={
+            Object {
+              "borderBottomColor": "#e5e5e5",
+              "borderBottomWidth": 1,
+            }
+          }
+        />
       </View>
-    </RCTScrollView>
-  </View>
+    </View>
+  </RCTScrollView>
   <View
     style={
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
-        "bottom": 0,
         "paddingBottom": 10,
         "paddingTop": 5,
-        "position": "absolute",
         "width": "100%",
       }
     }
diff --git a/src/Components/__snapshots__/FitnessFilters.test.js.snap b/src/Components/__snapshots__/FitnessFilters.test.js.snap
index 72fe8068..5a2de73f 100644
--- a/src/Components/__snapshots__/FitnessFilters.test.js.snap
+++ b/src/Components/__snapshots__/FitnessFilters.test.js.snap
@@ -852,6 +852,7 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
+        "paddingBottom": 10,
         "width": "100%",
       }
     }
diff --git a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
index 0ecd6f88..43d04c62 100644
--- a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
+++ b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
@@ -470,6 +470,7 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#fff",
+        "paddingBottom": 10,
         "width": "100%",
       }
     }
diff --git a/src/Components/__snapshots__/ImporterPage.test.js.snap b/src/Components/__snapshots__/ImporterPage.test.js.snap
index 6aabcc02..b065b9b6 100644
--- a/src/Components/__snapshots__/ImporterPage.test.js.snap
+++ b/src/Components/__snapshots__/ImporterPage.test.js.snap
@@ -1,5 +1,150 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ImporterPage /> goes back to home on cancel 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#fff",
+      "flex": 1,
+      "justifyContent": "space-around",
+      "padding": 20,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": undefined,
+          "fontSize": 72,
+        },
+        undefined,
+        Object {
+          "fontFamily": "material-community",
+          "fontStyle": "normal",
+          "fontWeight": "normal",
+        },
+        Object {},
+      ]
+    }
+  >
+    󰇚
+  </Text>
+  <View>
+    <Text
+      style={
+        Object {
+          "fontSize": 16,
+          "marginBottom": 5,
+        }
+      }
+    >
+      You are about to import and save the play Title
+    </Text>
+    <Text
+      style={
+        Object {
+          "fontSize": 16,
+          "marginBottom": 5,
+        }
+      }
+    >
+      Are you sure?
+    </Text>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "space-around",
+          "marginTop": 20,
+        }
+      }
+    >
+      <View
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#2a9e91",
+            "borderRadius": 5,
+            "flexDirection": "row",
+            "height": 50,
+            "justifyContent": "center",
+            "opacity": 1,
+            "paddingHorizontal": 20,
+            "paddingVertical": 10,
+            "width": 120,
+          }
+        }
+        testID="button"
+      >
+        <Text
+          style={
+            Object {
+              "color": "#fff",
+              "fontSize": 16,
+              "textAlign": "center",
+            }
+          }
+        >
+          Yes
+        </Text>
+      </View>
+      <View
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#fff",
+            "borderColor": "#2a9e91",
+            "borderRadius": 5,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "height": 50,
+            "justifyContent": "center",
+            "opacity": 1,
+            "paddingHorizontal": 20,
+            "paddingVertical": 10,
+            "width": 120,
+          }
+        }
+        testID="button"
+      >
+        <Text
+          style={
+            Object {
+              "color": "#2a9e91",
+              "fontSize": 16,
+              "fontWeight": "bold",
+            }
+          }
+        >
+          Cancel
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`<ImporterPage /> renders an error message if the play could not be found 1`] = `
 <View
   style={
diff --git a/src/Components/__snapshots__/TrainingPage.test.js.snap b/src/Components/__snapshots__/TrainingPage.test.js.snap
index 387e8ea9..e27a23d6 100644
--- a/src/Components/__snapshots__/TrainingPage.test.js.snap
+++ b/src/Components/__snapshots__/TrainingPage.test.js.snap
@@ -1337,6 +1337,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         Object {
           "alignItems": "center",
           "backgroundColor": "#fff",
+          "paddingBottom": 10,
           "width": "100%",
         }
       }
@@ -2668,6 +2669,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
         Object {
           "alignItems": "center",
           "backgroundColor": "#fff",
+          "paddingBottom": 10,
           "width": "100%",
         }
       }
diff --git a/src/Components/__snapshots__/VideoPage.test.js.snap b/src/Components/__snapshots__/VideoPage.test.js.snap
index 9404ccca..5588d228 100644
--- a/src/Components/__snapshots__/VideoPage.test.js.snap
+++ b/src/Components/__snapshots__/VideoPage.test.js.snap
@@ -100,7 +100,7 @@ exports[`<VideoPage /> renders correctly 1`] = `
       style={
         Object {
           "color": "#232b2b",
-          "fontSize": 16,
+          "fontSize": 20,
           "fontWeight": "bold",
         }
       }
@@ -111,21 +111,12 @@ exports[`<VideoPage /> renders correctly 1`] = `
       style={
         Object {
           "color": "#A6A6A6",
-          "fontSize": 14,
+          "fontSize": 16,
         }
       }
     >
       Rise Up Ultimate
     </Text>
-  </View>
-  <View
-    style={
-      Object {
-        "alignItems": "center",
-        "width": "100%",
-      }
-    }
-  >
     <View
       accessible={true}
       focusable={true}
@@ -139,7 +130,7 @@ exports[`<VideoPage /> renders correctly 1`] = `
       style={
         Object {
           "alignItems": "center",
-          "alignSelf": "center",
+          "alignSelf": "flex-start",
           "backgroundColor": "#fff",
           "borderColor": "#2a9e91",
           "borderRadius": 5,
@@ -147,6 +138,7 @@ exports[`<VideoPage /> renders correctly 1`] = `
           "flexDirection": "row",
           "height": 30,
           "justifyContent": "center",
+          "marginTop": 10,
           "opacity": 1,
           "paddingHorizontal": 10,
           "paddingVertical": 0,
diff --git a/src/styles/filters.style.js b/src/styles/filters.style.js
index 3ef912b0..eb428f5a 100644
--- a/src/styles/filters.style.js
+++ b/src/styles/filters.style.js
@@ -23,6 +23,7 @@ export default {
   },
   footer: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+    paddingBottom: 10,
     width: '100%',
     alignItems: 'center',
   },

From ef34c3ab4b44f56807f96a3aa75d28555be7fd3c Mon Sep 17 00:00:00 2001
From: Martin Salles <salles.martin@gmail.com>
Date: Wed, 3 Feb 2021 23:28:52 +0100
Subject: [PATCH 6/6] bring back padding

---
 src/Components/TrainingPage.js                           | 1 +
 src/Components/__snapshots__/FitnessFilters.test.js.snap | 1 +
 src/Components/__snapshots__/FrisbeeFilters.test.js.snap | 1 +
 src/Components/__snapshots__/TrainingPage.test.js.snap   | 2 ++
 src/styles/filters.style.js                              | 1 +
 5 files changed, 6 insertions(+)

diff --git a/src/Components/TrainingPage.js b/src/Components/TrainingPage.js
index e6912a8c..18fea202 100644
--- a/src/Components/TrainingPage.js
+++ b/src/Components/TrainingPage.js
@@ -182,6 +182,7 @@ const styles = StyleSheet.create({
   },
   footer: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+    paddingTop: 5,
     paddingBottom: 10,
     width: '100%',
     alignItems: 'center',
diff --git a/src/Components/__snapshots__/FitnessFilters.test.js.snap b/src/Components/__snapshots__/FitnessFilters.test.js.snap
index 5a2de73f..1d67e007 100644
--- a/src/Components/__snapshots__/FitnessFilters.test.js.snap
+++ b/src/Components/__snapshots__/FitnessFilters.test.js.snap
@@ -853,6 +853,7 @@ exports[`<FitnessFilters /> renders correctly 1`] = `
         "alignItems": "center",
         "backgroundColor": "#fff",
         "paddingBottom": 10,
+        "paddingTop": 5,
         "width": "100%",
       }
     }
diff --git a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
index 43d04c62..93e7f2de 100644
--- a/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
+++ b/src/Components/__snapshots__/FrisbeeFilters.test.js.snap
@@ -471,6 +471,7 @@ exports[`<FrisbeeFilters /> renders correctly 1`] = `
         "alignItems": "center",
         "backgroundColor": "#fff",
         "paddingBottom": 10,
+        "paddingTop": 5,
         "width": "100%",
       }
     }
diff --git a/src/Components/__snapshots__/TrainingPage.test.js.snap b/src/Components/__snapshots__/TrainingPage.test.js.snap
index e27a23d6..880671d9 100644
--- a/src/Components/__snapshots__/TrainingPage.test.js.snap
+++ b/src/Components/__snapshots__/TrainingPage.test.js.snap
@@ -1338,6 +1338,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
           "alignItems": "center",
           "backgroundColor": "#fff",
           "paddingBottom": 10,
+          "paddingTop": 5,
           "width": "100%",
         }
       }
@@ -2670,6 +2671,7 @@ exports[`<TrainingPage /> renders correctly with a training within a program 1`]
           "alignItems": "center",
           "backgroundColor": "#fff",
           "paddingBottom": 10,
+          "paddingTop": 5,
           "width": "100%",
         }
       }
diff --git a/src/styles/filters.style.js b/src/styles/filters.style.js
index eb428f5a..6f222ed0 100644
--- a/src/styles/filters.style.js
+++ b/src/styles/filters.style.js
@@ -23,6 +23,7 @@ export default {
   },
   footer: {
     backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
+    paddingTop: 5,
     paddingBottom: 10,
     width: '100%',
     alignItems: 'center',