[INJI-691]: add google drive confirmation page

Signed-off-by: Pooja Babusingh <68894211+PoojaBabusingh@users.noreply.github.com>

components/ui/svg.tsx

@@ -188,13 +188,13 @@ export class SvgImage {
     );
   }
 
-  static DataBackupIcon() {
+  static DataBackupIcon(width, height) {
     return (
       <Backup
         color1={Theme.Colors.linearGradientStart}
         color2={Theme.Colors.linearGradientEnd}
-        width={25}
-        height={25}
+        width={width}
+        height={height}
       />
     );
   }
@@ -217,8 +217,8 @@ export class SvgImage {
     return <MagnifierZoom />;
   }
 
-  static GoogleDriveIcon() {
-    return <GoogleDriveIcon />;
+  static GoogleDriveIcon(width, height) {
+    return <GoogleDriveIcon width={width} height={height} />;
   }
 }
 

screens/Settings/BackupToggle.tsx

@@ -1,10 +1,12 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
+import {View} from 'react-native';
 import {MessageOverlay} from '../../components/MessageOverlay';
-import {Button, Text} from '../../components/ui';
+import {Button, Row, Text} from '../../components/ui';
 import {Modal} from '../../components/ui/Modal';
 import {Theme} from '../../components/ui/styleUtils';
-import {useBackupScreen} from './BackupController';
+import {SvgImage} from '../../components/ui/svg';
 import BackupAndRestoreScreen from './BackupAndRestoreScreen';
+import {useBackupScreen} from './BackupController';
 
 export const BackupToggle: React.FC<BackupToggleProps> = props => {
   const [dataBackup, setDataBackup] = useState(false);
@@ -26,22 +28,59 @@ export const BackupToggle: React.FC<BackupToggleProps> = props => {
         headerElevation={2}
         arrowLeft={true}
         onDismiss={props.onDismiss}>
-        <Text> Enable Data backup</Text>
-        <Text> You’re just a few steps away from backing up your data</Text>
+        <View style={{alignItems: 'center', paddingTop: 50}}>
+          {SvgImage.DataBackupIcon(80, 100)}
+        </View>
+
+        <Text
+          size="large"
+          style={{
+            fontWeight: 'bold',
+            paddingHorizontal: 20,
+            textAlign: 'center',
+            paddingTop: 30,
+            paddingBottom: 20,
+          }}>
+          You’re just a few steps away from backing up your data
+        </Text>
+        <Text
+          size="regular"
+          color={Theme.Colors.GrayText}
+          style={{
+            paddingHorizontal: 20,
+            textAlign: 'center',
+            paddingVertical: 10,
+          }}>
+          To initiate the data backup, please tap on the “Proceed” button to
+          link your Google Drive with Inji.
+        </Text>
+
+        <Row
+          style={{paddingHorizontal: 120, paddingTop: 70, paddingBottom: 250}}>
+          <View>{SvgImage.GoogleDriveIcon(50, 50)}</View>
+          <Text
+            size="regular"
+            style={{
+              fontWeight: 'bold',
+              paddingHorizontal: 10,
+              textAlign: 'center',
+              paddingTop: 15,
+            }}>
+            Google Drive
+          </Text>
+        </Row>
 
         <Button
-          testID="cancel"
           type="gradient"
-          title={'proceed'}
+          title={'Proceed'}
           onPress={() => {}}
-          styles={Theme.MessageOverlayStyles.button}
+          margin={[0, 8, 0, 0]}
         />
         <Button
-          testID="cancel"
-          type="solid"
-          title={'go back'}
+          type="clear"
+          title={'Go Back'}
           onPress={() => {}}
-          styles={Theme.MessageOverlayStyles.button}
+          styles={{paddingBottom: 5}}
         />
       </Modal>
 

screens/Settings/DataBackup.tsx

@@ -19,7 +19,7 @@ export const DataBackup: React.FC = ({} = props => {
           controller.DATA_BACKUP();
         }}>
         <ListItem topDivider bottomDivider>
-          {SvgImage.DataBackupIcon()}
+          {SvgImage.DataBackupIcon(25, 25)}
           <ListItem.Content>
             <ListItem.Title style={{paddingTop: 3}}>
               <Row>