Add responsive design

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/components/actionButton.tsx

@@ -2,10 +2,11 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { FAB, Portal } from 'react-native-paper';
 import { noOp } from '../constants';
+import { verticalScale } from '../styles';
 
 const styles = StyleSheet.create({
   fab: {
-    paddingBottom: 90,
+    paddingBottom: verticalScale(75),
   },
 });
 

src/components/paddedView.tsx

@@ -1,17 +1,7 @@
 import React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleProp, View, ViewStyle } from 'react-native';
 import { useTheme } from 'react-native-paper';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: '5%',
-  },
-  centered: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+import styles from '../styles';
 
 const PaddedView = ({
   children,
@@ -21,11 +11,17 @@ const PaddedView = ({
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
-  }): React.JSX.Element => {
+}) => {
   const { colors } = useTheme();
 
   return (
-    <View style={[styles.container, centered && styles.centered, { backgroundColor: colors.background }, style]}>
+    <View
+      style={[
+        styles.padding,
+        centered && styles.centered,
+        { backgroundColor: colors.background },
+        style,
+      ]}>
       {children}
     </View>
   );