Changes size of green box to match optimum focal length of tablet

components/Scan.tsx

@@ -17,10 +17,10 @@ export const Scanner = (props: ScannerProps): ReactElement => {
     </View>
     <View style={styles.centerMiddle}>
       <View style={styles.captureBox}/>
+      <Subheading style={styles.shadow}>
+        Place ID card with the barcode facing the camera. Keep the barcode in the green box.
+      </Subheading>
     </View>
-    <Text style={styles.subtitle}>
-      Hold your ID card up, with the barcode facing the camera. Keep the card in the green box.
-    </Text>
     <View style={styles.centerMiddle}>
       <Button
         mode="text"

components/Styles.tsx

@@ -38,8 +38,8 @@ export const styles = StyleSheet.create({
     borderStyle: 'solid',
     borderColor: 'green',
     borderWidth: 10,
-    height: 213,
-    width: 338,
+    height: '30%',
+    width: '90%',
     borderRadius: 20,
   },
   centerMiddle: {
@@ -73,6 +73,16 @@ export const styles = StyleSheet.create({
     padding: 20,
     textAlign: 'center',
   },
+  shadow: {
+    color: colors.onBackground,
+    fontSize: 20,
+    marginHorizontal: '15%',
+    marginVertical: 40,
+    textAlign: 'center',
+    textShadowOffset: {width: 0, height: 0},
+    textShadowRadius: 4,
+    textShadowColor: '#000000',
+  },
   heading: {
     ..._common.heading,
     color: colors.onBackground,