From f8e53a8a7213962f4a6224f6924bac64e6874ffd Mon Sep 17 00:00:00 2001
From: Arnaud Vergnet <vergnet@etud.insa-toulouse.fr>
Date: Sat, 18 Apr 2020 17:20:07 +0200
Subject: [PATCH] Fixed padding issues

---
 src/components/Custom/CustomModal.js          |  9 ++++-
 src/components/Lists/WebSectionList.js        |  3 ++
 .../Amicale/Clubs/ClubDisplayScreen.js        |  3 +-
 src/screens/FeedItemScreen.js                 |  5 +--
 src/screens/Planning/PlanningDisplayScreen.js |  3 +-
 src/screens/Proximo/ProximoAboutScreen.js     |  3 +-
 src/screens/Proxiwash/ProxiwashAboutScreen.js |  3 +-
 src/screens/ScannerScreen.js                  | 34 +++++++++++--------
 8 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/src/components/Custom/CustomModal.js b/src/components/Custom/CustomModal.js
index 0a9696b..598acc4 100644
--- a/src/components/Custom/CustomModal.js
+++ b/src/components/Custom/CustomModal.js
@@ -3,6 +3,8 @@
 import * as React from 'react';
 import {withTheme} from 'react-native-paper';
 import {Modalize} from "react-native-modalize";
+import {View} from "react-native-animatable";
+import CustomTabBar from "../Tabbar/CustomTabBar";
 
 /**
  * Abstraction layer for Modalize component, using custom configuration
@@ -20,7 +22,12 @@ function CustomModal(props) {
             modalStyle={{backgroundColor: colors.card}}
             handleStyle={{backgroundColor: colors.primary}}
         >
-            {props.children}
+            <View style={{
+                paddingBottom: CustomTabBar.TAB_BAR_HEIGHT
+            }}>
+                {props.children}
+            </View>
+
         </Modalize>
     );
 }
diff --git a/src/components/Lists/WebSectionList.js b/src/components/Lists/WebSectionList.js
index 82f3e10..fca5013 100644
--- a/src/components/Lists/WebSectionList.js
+++ b/src/components/Lists/WebSectionList.js
@@ -261,6 +261,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
                         },
                     }}
                     duration={4000}
+                    style={{
+                        bottom: CustomTabBar.TAB_BAR_HEIGHT
+                    }}
                 >
                     {i18n.t("homeScreen.listUpdateFail")}
                 </Snackbar>
diff --git a/src/screens/Amicale/Clubs/ClubDisplayScreen.js b/src/screens/Amicale/Clubs/ClubDisplayScreen.js
index 54a2c08..b453655 100644
--- a/src/screens/Amicale/Clubs/ClubDisplayScreen.js
+++ b/src/screens/Amicale/Clubs/ClubDisplayScreen.js
@@ -7,6 +7,7 @@ import ImageModal from 'react-native-image-modal';
 import i18n from "i18n-js";
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
 import CustomHTML from "../../../components/Custom/CustomHTML";
+import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -90,7 +91,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
         }
         const hasManagers = resp.length > 0;
         return (
-            <Card style={{marginTop: 10, marginBottom: 10}}>
+            <Card style={{marginTop: 10, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
                 <Card.Title
                     title={i18n.t('clubs.managers')}
                     subtitle={hasManagers ? i18n.t('clubs.managersSubtitle') : i18n.t('clubs.managersUnavailable')}
diff --git a/src/screens/FeedItemScreen.js b/src/screens/FeedItemScreen.js
index c60c3dc..63404c8 100644
--- a/src/screens/FeedItemScreen.js
+++ b/src/screens/FeedItemScreen.js
@@ -7,6 +7,7 @@ import ImageModal from 'react-native-image-modal';
 import Autolink from "react-native-autolink";
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
 import {Linking} from "expo";
+import CustomTabBar from "../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -58,7 +59,7 @@ class FeedItemScreen extends React.Component<Props> {
     getContent() {
         const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture !== undefined;
         return (
-            <ScrollView style={{margin: 5}}>
+            <ScrollView style={{margin: 5,}}>
                 <Card.Title
                     title={NAME_AMICALE}
                     subtitle={this.date}
@@ -77,7 +78,7 @@ class FeedItemScreen extends React.Component<Props> {
                                 uri: this.displayData.full_picture,
                             }}
                         /></View> : null}
-                <Card.Content>
+                <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
                     {this.displayData.message !== undefined ?
                         <Autolink
                             text={this.displayData.message}
diff --git a/src/screens/Planning/PlanningDisplayScreen.js b/src/screens/Planning/PlanningDisplayScreen.js
index eab31bf..6a2e3f2 100644
--- a/src/screens/Planning/PlanningDisplayScreen.js
+++ b/src/screens/Planning/PlanningDisplayScreen.js
@@ -10,6 +10,7 @@ import BasicLoadingScreen from "../../components/Custom/BasicLoadingScreen";
 import {apiRequest} from "../../utils/WebData";
 import ErrorView from "../../components/Custom/ErrorView";
 import CustomHTML from "../../components/Custom/CustomHTML";
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -104,7 +105,7 @@ class PlanningDisplayScreen extends React.Component<Props, State> {
                     : <View/>}
 
                 {this.displayData.description !== null ?
-                    <Card.Content>
+                    <Card.Content style={{paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
                         <CustomHTML html={this.displayData.description}/>
                     </Card.Content>
                     : <View/>}
diff --git a/src/screens/Proximo/ProximoAboutScreen.js b/src/screens/Proximo/ProximoAboutScreen.js
index ab540c9..867faeb 100644
--- a/src/screens/Proximo/ProximoAboutScreen.js
+++ b/src/screens/Proximo/ProximoAboutScreen.js
@@ -4,6 +4,7 @@ import * as React from 'react';
 import {Image, ScrollView, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text} from 'react-native-paper';
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -40,7 +41,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
                         <Paragraph>18h30 - 19h30</Paragraph>
                     </Card.Content>
                 </Card>
-                <Card style={{margin: 5}}>
+                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
                     <Card.Title
                         title={i18n.t('proximoScreen.paymentMethods')}
                         left={props => <List.Icon {...props} icon={'cash'}/>}
diff --git a/src/screens/Proxiwash/ProxiwashAboutScreen.js b/src/screens/Proxiwash/ProxiwashAboutScreen.js
index 40a5e19..d573432 100644
--- a/src/screens/Proxiwash/ProxiwashAboutScreen.js
+++ b/src/screens/Proxiwash/ProxiwashAboutScreen.js
@@ -4,6 +4,7 @@ import * as React from 'react';
 import {Image, ScrollView, View} from 'react-native';
 import i18n from "i18n-js";
 import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
+import CustomTabBar from "../../components/Tabbar/CustomTabBar";
 
 type Props = {
     navigation: Object,
@@ -67,7 +68,7 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
                         <Paragraph>{i18n.t('proxiwashScreen.dryersTariff')}</Paragraph>
                     </Card.Content>
                 </Card>
-                <Card style={{margin: 5}}>
+                <Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
                     <Card.Title
                         title={i18n.t('proxiwashScreen.paymentMethods')}
                         left={props => <List.Icon {...props} icon={'cash'}/>}
diff --git a/src/screens/ScannerScreen.js b/src/screens/ScannerScreen.js
index 105f655..b326ed5 100644
--- a/src/screens/ScannerScreen.js
+++ b/src/screens/ScannerScreen.js
@@ -9,6 +9,7 @@ import URLHandler from "../utils/URLHandler";
 import {Linking} from "expo";
 import AlertDialog from "../components/Dialog/AlertDialog";
 import i18n from 'i18n-js';
+import CustomTabBar from "../components/Tabbar/CustomTabBar";
 
 type Props = {};
 type State = {
@@ -141,25 +142,30 @@ class ScannerScreen extends React.Component<Props, State> {
 
     render() {
         return (
-            <View style={styles.container}>
-                {this.state.hasPermission
-                    ? this.getScanner()
-                    : this.getPermissionScreen()
-                }
+            <View style={{
+                ...styles.container,
+                marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
+            }}>
+                    {this.state.hasPermission
+                        ? this.getScanner()
+                        : this.getPermissionScreen()
+                    }
+                <View style={{height: 50}}>
+                    <Button
+                        icon="information"
+                        mode="contained"
+                        onPress={this.showHelpDialog}
+                        style={styles.button}
+                    >
+                        {i18n.t("scannerScreen.helpButton")}
+                    </Button>
+                </View>
                 <AlertDialog
                     visible={this.state.dialogVisible}
                     onDismiss={this.onDialogDismiss}
                     title={this.state.dialogTitle}
                     message={this.state.dialogMessage}
                 />
-                <Button
-                    icon="information"
-                    mode="contained"
-                    onPress={this.showHelpDialog}
-                    style={styles.button}
-                >
-                    {i18n.t("scannerScreen.helpButton")}
-                </Button>
             </View>
         );
     }
@@ -200,8 +206,6 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#000000' // the rock-solid workaround
     },
     cameraContainer: {
         marginTop: 'auto',