Refactor dimension handling

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

src/screens/welcome.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { Button, Text } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { openDocumentTree } from 'react-native-scoped-storage';
-import { PaddedView } from '../components';
+import { RootView } from '../components';
 import styles from '../styles';
 import { noOp } from '../utilities';
 import { updateStorageUri } from '../state';
+import { useDimensions } from '../contexts';
 
 const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
   const dispatch = useDispatch();
+  const dimensions = useDimensions();
 
   const selectStorageLocation = async () => {
     const uri = await openDocumentTree(true).catch(noOp);
@@ -18,19 +20,26 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
   };
 
   return (
-    <PaddedView centered>
+    <RootView centered padded>
       <Text
         variant="displayMedium"
-        style={[styles.bigMarginBottom, styles.centerText]}>
+        style={[
+          {
+            marginBottom: dimensions.responsive.verticalScale(30),
+          },
+          styles.centerText,
+        ]}>
         Welcome to Terminally Online!
       </Text>
       <Button
         mode="contained"
         onPress={selectStorageLocation}
-        style={styles.extremeMarginBottom}>
+        style={{
+          marginBottom: dimensions.responsive.verticalScale(100),
+        }}>
         Select Storage Location
       </Button>
-    </PaddedView>
+    </RootView>
   );
 };