From 5ac90dc100c131adb6672c862c5ec53578cd342a Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 9 Sep 2020 11:10:35 +0500
Subject: [PATCH] fix all buttons

---
 apps/mobile/.gitignore                        |   4 +
 apps/mobile/.vscode/launch.json               |   1 +
 apps/mobile/android/app/_BUCK                 |  55 --
 apps/mobile/android/app/build_defs.bzl        |  19 -
 apps/mobile/ios/Podfile.lock                  |   6 +
 .../src/components/AddTopicDialog/index.js    |  50 +-
 apps/mobile/src/components/Button/index.js    |  68 +-
 .../src/components/ExportDialog/index.js      |  21 +-
 apps/mobile/src/components/Loading/index.js   |  22 +-
 .../src/components/MergeEditor/index.js       | 642 ++++++++----------
 .../src/components/NotebookItem/index.js      |  46 +-
 .../src/components/Premium/PremiumDialog.js   |  38 +-
 apps/mobile/src/components/Seperator/index.js |  15 +
 .../src/components/VaultDialog/index.js       | 149 ++--
 14 files changed, 441 insertions(+), 695 deletions(-)
 delete mode 100644 apps/mobile/android/app/_BUCK
 delete mode 100644 apps/mobile/android/app/build_defs.bzl
 create mode 100644 apps/mobile/src/components/Seperator/index.js

diff --git a/apps/mobile/.gitignore b/apps/mobile/.gitignore
index ad572e632..ab3f579e9 100644
--- a/apps/mobile/.gitignore
+++ b/apps/mobile/.gitignore
@@ -57,3 +57,7 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+
+# Other
+react-native-mmkv-storage/
diff --git a/apps/mobile/.vscode/launch.json b/apps/mobile/.vscode/launch.json
index 70e3c4d0f..a39dad9e5 100644
--- a/apps/mobile/.vscode/launch.json
+++ b/apps/mobile/.vscode/launch.json
@@ -4,6 +4,7 @@
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
   "configurations": [
+    
     {
       "name": "Debug Android",
       "cwd": "${workspaceFolder}",
diff --git a/apps/mobile/android/app/_BUCK b/apps/mobile/android/app/_BUCK
deleted file mode 100644
index 7c2fef741..000000000
--- a/apps/mobile/android/app/_BUCK
+++ /dev/null
@@ -1,55 +0,0 @@
-# To learn about Buck see [Docs](https://buckbuild.com/).
-# To run your application with Buck:
-# - install Buck
-# - `npm start` - to start the packager
-# - `cd android`
-# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
-# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
-# - `buck install -r android/app` - compile, install and run application
-#
-
-load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
-
-lib_deps = []
-
-create_aar_targets(glob(["libs/*.aar"]))
-
-create_jar_targets(glob(["libs/*.jar"]))
-
-android_library(
-    name = "all-libs",
-    exported_deps = lib_deps,
-)
-
-android_library(
-    name = "app-code",
-    srcs = glob([
-        "src/main/java/**/*.java",
-    ]),
-    deps = [
-        ":all-libs",
-        ":build_config",
-        ":res",
-    ],
-)
-
-android_build_config(
-    name = "build_config",
-    package = "com.streetwriters.notesnook",
-)
-
-android_resource(
-    name = "res",
-    package = "com.streetwriters.notesnook",
-    res = "src/main/res",
-)
-
-android_binary(
-    name = "app",
-    keystore = "//android/keystores:debug",
-    manifest = "src/main/AndroidManifest.xml",
-    package_type = "debug",
-    deps = [
-        ":app-code",
-    ],
-)
diff --git a/apps/mobile/android/app/build_defs.bzl b/apps/mobile/android/app/build_defs.bzl
deleted file mode 100644
index fff270f8d..000000000
--- a/apps/mobile/android/app/build_defs.bzl
+++ /dev/null
@@ -1,19 +0,0 @@
-"""Helper definitions to glob .aar and .jar targets"""
-
-def create_aar_targets(aarfiles):
-    for aarfile in aarfiles:
-        name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
-        lib_deps.append(":" + name)
-        android_prebuilt_aar(
-            name = name,
-            aar = aarfile,
-        )
-
-def create_jar_targets(jarfiles):
-    for jarfile in jarfiles:
-        name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
-        lib_deps.append(":" + name)
-        prebuilt_jar(
-            name = name,
-            binary_jar = jarfile,
-        )
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
index 36c9ba83f..70545b6d8 100644
--- a/apps/mobile/ios/Podfile.lock
+++ b/apps/mobile/ios/Podfile.lock
@@ -321,6 +321,8 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.10):
     - React
+  - RNDeviceInfo (6.0.2):
+    - React
   - RNGestureHandler (1.7.0):
     - React
   - RNReanimated (1.13.0):
@@ -397,6 +399,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - rn-fetch-blob (from `../node_modules/rn-fetch-blob`)
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -495,6 +498,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/rn-fetch-blob"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
+  RNDeviceInfo:
+    :path: "../node_modules/react-native-device-info"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -562,6 +567,7 @@ SPEC CHECKSUMS:
   ReactCommon: a0a1edbebcac5e91338371b72ffc66aa822792ce
   rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba
   RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
+  RNDeviceInfo: bdd61e8b070d13a1dd9d022091981075ed4cde16
   RNGestureHandler: b6b359bb800ae399a9c8b27032bdbf7c18f08a08
   RNReanimated: 89f5e0a04d1dd52fbf27e7e7030d8f80a646a3fc
   RNScreens: b748efec66e095134c7166ca333b628cd7e6f3e2
diff --git a/apps/mobile/src/components/AddTopicDialog/index.js b/apps/mobile/src/components/AddTopicDialog/index.js
index 22faeeac1..3ad9a388f 100644
--- a/apps/mobile/src/components/AddTopicDialog/index.js
+++ b/apps/mobile/src/components/AddTopicDialog/index.js
@@ -7,6 +7,7 @@ import {getElevation, ToastEvent, db} from '../../utils/utils';
 import {eSendEvent} from '../../services/eventManager';
 import {eOnNewTopicAdded} from '../../services/events';
 import {Toast} from '../Toast';
+import {Button} from '../Button';
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {
@@ -134,7 +135,7 @@ export class AddTopicDialog extends React.Component {
                 });
               }}
               defaultValue={toEdit ? toEdit.title : null}
-              onChangeText={value => {
+              onChangeText={(value) => {
                 this.title = value;
               }}
               placeholder="Enter title of topic"
@@ -148,51 +149,16 @@ export class AddTopicDialog extends React.Component {
                 flexDirection: 'row',
                 marginTop: 20,
               }}>
-              <TouchableOpacity
+              <Button
                 activeOpacity={opacity}
                 onPress={async () => await this.addNewTopic()}
-                style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderColor: colors.accent,
-                  backgroundColor: colors.accent,
-                  borderWidth: 1,
-                }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: 'white',
-                    fontSize: SIZE.sm,
-                  }}>
-                  {toEdit ? 'Save' : 'Add'}
-                </Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity
+                title={toEdit ? 'Save' : 'Add'}
+              />
+              <Button
                 activeOpacity={opacity}
                 onPress={() => this.close()}
-                style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  backgroundColor: colors.nav,
-                }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: colors.icon,
-                    fontSize: SIZE.sm,
-                  }}>
-                  Cancel
-                </Text>
-              </TouchableOpacity>
+                title="Cancel"
+              />
             </View>
           </View>
         </View>
diff --git a/apps/mobile/src/components/Button/index.js b/apps/mobile/src/components/Button/index.js
index 0d5c7f0b0..cde7c717c 100644
--- a/apps/mobile/src/components/Button/index.js
+++ b/apps/mobile/src/components/Button/index.js
@@ -1,42 +1,57 @@
 import React from 'react';
-import {
-  ActivityIndicator,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {opacity, ph, pv, SIZE, WEIGHT, COLOR_SCHEME} from '../../common/common';
+import {ActivityIndicator, StyleSheet, Text} from 'react-native';
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
+import {PressableButton} from '../PressableButton';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
 export const Button = ({
-  height = 50,
+  height = 40,
   width = '48%',
   onPress = () => {},
   loading = false,
   grayed,
-  title=""
+  title = '',
+  icon,
+  color = 'accent',
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, tags, premiumUser} = state;
+  const usedColor = 'accent' ? colors.accent : color;
 
   return (
-    <TouchableOpacity
-      activeOpacity={opacity}
+    <PressableButton
       onPress={onPress}
-      style={[
-        styles.button,
-        {
-          backgroundColor: grayed ? colors.nav : colors.accent,
-          height: height,
-          width: width,
-        },
-      ]}>
-      {loading ? <ActivityIndicator color={colors.accent} /> : null}
+      color={grayed ? colors.nav : usedColor}
+      selectedColor={grayed ? colors.nav : usedColor}
+      alpha={grayed ? (!colors.night ? -0.04 : 0.04) : -0.1}
+      customStyle={{
+        height: height,
+        width: width? width : null,
+        paddingVertical: pv,
+        paddingHorizontal: ph,
+        borderRadius: 5,
+        alignSelf: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'row',
+      }}>
+      {loading ? <ActivityIndicator color={usedColor} /> : null}
+      {icon && !loading ? (
+        <Icon
+          name={icon}
+          style={{
+            marginRight: 5,
+          }}
+          color={grayed ? colors.icon : 'white'}
+          size={SIZE.lg}
+        />
+      ) : null}
       <Text
         style={[styles.buttonText, {color: grayed ? colors.icon : 'white'}]}>
         {title}
       </Text>
-    </TouchableOpacity>
+    </PressableButton>
   );
 };
 
@@ -49,17 +64,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  button: {
-    paddingVertical: pv,
-    paddingHorizontal: ph,
-    marginTop: 10,
-    borderRadius: 5,
-    alignSelf: 'center',
-    width: '48%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
   buttonText: {
     fontFamily: WEIGHT.medium,
     color: 'white',
diff --git a/apps/mobile/src/components/ExportDialog/index.js b/apps/mobile/src/components/ExportDialog/index.js
index 67ce302c3..bdd5df28a 100644
--- a/apps/mobile/src/components/ExportDialog/index.js
+++ b/apps/mobile/src/components/ExportDialog/index.js
@@ -20,11 +20,12 @@ const {
   eOpenExportDialog,
   eCloseExportDialog,
 } = require('../../services/events');
+import {Button} from '../Button/index';
 
 const ExportDialog = () => {
   const [state, dispatch] = useTracked();
   const {colors, tags, premiumUser} = state;
-  const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(true);
   const [notes, setNotes] = useState([]);
   const [exporting, setExporting] = useState(false);
   const [complete, setComplete] = useState(false);
@@ -44,8 +45,6 @@ const ExportDialog = () => {
   };
 
   const close = (data) => {
-
-    
     setComplete(false);
     setExporting(false);
     setNotes([]);
@@ -118,7 +117,10 @@ const ExportDialog = () => {
           ) : (
             <View style={styles.buttonContainer}>
               {actions.map((item) => (
-                <TouchableOpacity
+                <Button
+                  width="100%"
+                  title={item.title}
+                  icon={item.icon}
                   activeOpacity={opacity}
                   onPress={() => {
                     setExporting(true);
@@ -126,16 +128,7 @@ const ExportDialog = () => {
                       setComplete(true);
                     }, 1000);
                   }}
-                  style={[
-                    styles.button,
-                    {
-                      borderColor: colors.accent,
-                      backgroundColor: colors.accent,
-                    },
-                  ]}>
-                  <Icon name={item.icon} color="white" size={SIZE.lg} />
-                  <Text style={styles.buttonText}>{item.title}</Text>
-                </TouchableOpacity>
+                />
               ))}
             </View>
           )}
diff --git a/apps/mobile/src/components/Loading/index.js b/apps/mobile/src/components/Loading/index.js
index c98ea6729..892251f0e 100644
--- a/apps/mobile/src/components/Loading/index.js
+++ b/apps/mobile/src/components/Loading/index.js
@@ -3,11 +3,11 @@ import {
   ActivityIndicator,
   StyleSheet,
   Text,
-  View,
-  TouchableOpacity,
+  View
 } from 'react-native';
-import {SIZE, pv, ph, WEIGHT, opacity} from '../../common/common';
-import {useTracked} from '../../provider';
+import { ph, pv, SIZE, WEIGHT } from '../../common/common';
+import { useTracked } from '../../provider';
+import { Button } from '../Button';
 
 export const Loading = ({
   height = 150,
@@ -31,18 +31,10 @@ export const Loading = ({
             ]}>
             {doneText}
           </Text>
-          <TouchableOpacity
-            activeOpacity={opacity}
+          <Button
             onPress={onDone}
-            style={[
-              styles.button,
-              {
-                borderColor: colors.accent,
-                backgroundColor: colors.accent,
-              },
-            ]}>
-            <Text style={styles.buttonText}>Close</Text>
-          </TouchableOpacity>
+            title="Done"
+            />
         </>
       ) : (
         <>
diff --git a/apps/mobile/src/components/MergeEditor/index.js b/apps/mobile/src/components/MergeEditor/index.js
index 49eaa9aa9..22081ecf6 100644
--- a/apps/mobile/src/components/MergeEditor/index.js
+++ b/apps/mobile/src/components/MergeEditor/index.js
@@ -1,26 +1,27 @@
-import React, { createRef, useEffect, useState } from 'react';
-import { Modal, Text, TouchableOpacity, View } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import React, {createRef, useEffect, useState} from 'react';
+import {Modal, Text, TouchableOpacity, View, SafeAreaView} from 'react-native';
+import Animated, {Easing} from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import WebView from 'react-native-webview';
-import { normalize, SIZE, WEIGHT } from '../../common/common';
-import { useTracked } from '../../provider';
+import {normalize, SIZE} from '../../common/common';
+import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
 import {
+  eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
-  eSendEvent,
 } from '../../services/eventManager';
 import {
   eApplyChanges,
   eShowMergeDialog,
   refreshNotesPage,
 } from '../../services/events';
-import { getElevation, h, db } from '../../utils/utils';
-import { simpleDialogEvent, updateEvent } from '../DialogManager/recievers';
-import { TEMPLATE_APPLY_CHANGES } from '../DialogManager/templates';
-import { ACTIONS } from '../../provider/actions';
+import {db, h} from '../../utils/utils';
+import {Button} from '../Button';
+import {simpleDialogEvent, updateEvent} from '../DialogManager/recievers';
+import {TEMPLATE_APPLY_CHANGES} from '../DialogManager/templates';
 
-const { Value, timing } = Animated;
+const {Value, timing} = Animated;
 
 const firstWebViewHeight = new Value(h * 0.5 - 50);
 const secondWebViewHeight = new Value(h * 0.5 - 50);
@@ -78,7 +79,7 @@ let secondaryText = '';
 
 const MergeEditor = () => {
   const [state, dispatch] = useTracked();
-  const { colors } = state;
+  const {colors} = state;
   const [visible, setVisible] = useState(false);
   const [primary, setPrimary] = useState(true);
   const [secondary, setSecondary] = useState(true);
@@ -86,10 +87,10 @@ const MergeEditor = () => {
   const [copyToSave, setCopyToSave] = useState(null);
   const [disardedContent, setDiscardedContent] = useState(null);
 
-  const postMessageToPrimaryWebView = message =>
+  const postMessageToPrimaryWebView = (message) =>
     primaryWebView.current?.postMessage(JSON.stringify(message));
 
-  const postMessageToSecondaryWebView = message =>
+  const postMessageToSecondaryWebView = (message) =>
     secondaryWebView.current?.postMessage(JSON.stringify(message));
 
   const onPrimaryWebViewLoad = () => {
@@ -97,7 +98,7 @@ const MergeEditor = () => {
       type: 'delta',
       value: primaryDelta,
     });
-    let c = { ...colors };
+    let c = {...colors};
     c.factor = normalize(1);
     postMessageToPrimaryWebView({
       type: 'theme',
@@ -110,7 +111,7 @@ const MergeEditor = () => {
       type: 'delta',
       value: secondaryDelta,
     });
-    let c = { ...colors };
+    let c = {...colors};
     c.factor = normalize(1);
     postMessageToSecondaryWebView({
       type: 'theme',
@@ -118,7 +119,7 @@ const MergeEditor = () => {
     });
   };
 
-  const _onShouldStartLoadWithRequest = request => {
+  const _onShouldStartLoadWithRequest = (request) => {
     if (request.url.includes('https')) {
       Linking.openURL(request.url);
       return false;
@@ -127,8 +128,7 @@ const MergeEditor = () => {
     }
   };
 
-  const onMessageFromPrimaryWebView = evt => {
-
+  const onMessageFromPrimaryWebView = (evt) => {
     if (evt.nativeEvent.data !== '') {
       let data = JSON.parse(evt.nativeEvent.data);
       primaryDelta = data.delta;
@@ -136,8 +136,7 @@ const MergeEditor = () => {
     }
   };
 
-  const onMessageFromSecondaryWebView = evt => {
-
+  const onMessageFromSecondaryWebView = (evt) => {
     if (evt.nativeEvent.data !== '') {
       let data = JSON.parse(evt.nativeEvent.data);
       secondaryDelta = data.delta;
@@ -146,14 +145,13 @@ const MergeEditor = () => {
   };
 
   const applyChanges = async () => {
-
     if (keepContentFrom === 'primary') {
       await db.notes.add({
         content: {
           text: primaryText,
           delta: {
             data: primaryDelta,
-            resolved: true
+            resolved: true,
           },
         },
         id: note.id,
@@ -165,7 +163,7 @@ const MergeEditor = () => {
           text: secondaryText,
           delta: {
             data: primaryDelta,
-            resolved: true
+            resolved: true,
           },
         },
         id: note.id,
@@ -191,16 +189,14 @@ const MergeEditor = () => {
       });
     }
     eSendEvent(refreshNotesPage);
-    updateEvent({ type: ACTIONS.NOTES });
-    updateEvent({ type: ACTIONS.FAVORITES });
+    updateEvent({type: ACTIONS.NOTES});
+    updateEvent({type: ACTIONS.FAVORITES});
     close();
   };
 
-  const show = async item => {
+  const show = async (item) => {
     note = item;
 
-
-
     let rawDelta = await db.delta.raw(note.content.delta);
     primaryDelta = rawDelta.data;
     secondaryDelta = rawDelta.conflicted.data;
@@ -216,7 +212,7 @@ const MergeEditor = () => {
       eUnSubscribeEvent(eApplyChanges, applyChanges);
       eUnSubscribeEvent(eShowMergeDialog, show);
     };
-  },[]);
+  }, []);
 
   const onPressKeepFromPrimaryWebView = () => {
     if (keepContentFrom == 'primary') {
@@ -279,388 +275,302 @@ const MergeEditor = () => {
     'Web.bundle/loader.html';
   const injectedJS = `if (!window.location.search) {
          var link = document.getElementById('progress-bar');
-          link.href = './site2/plaineditor.html?${params}';
+          link.href = './site/plaineditor.html?${params}';
           link.click();  
     }`;
 
+
+
+
   return (
     <Modal transparent={false} animated animationType="fade" visible={visible}>
-      <View
+      <SafeAreaView
         style={{
-          height: '100%',
-          width: '100%',
-          backgroundColor: 'rgba(0,0,0,0.3)',
+          backgroundColor: colors.nav,
         }}>
         <View
           style={{
-            backgroundColor: '#f0f0f0',
+            height: '100%',
             width: '100%',
-            height: 50,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingHorizontal: 12,
+            backgroundColor: 'rgba(0,0,0,0.3)',
           }}>
           <View
             style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-            }}>
-            <Icon
-              style={{
-                width: 50,
-                height: 50,
-                textAlign: 'center',
-                textAlignVertical: 'center',
-                marginLeft: -8,
-              }}
-              onPress={close}
-              size={SIZE.xxl}
-              name="chevron-left"
-            />
-            <TouchableOpacity
-              onPress={() => {
-                if (keepContentFrom === 'primary') return;
-                if (!primary) {
-                  openEditorAnimation(
-                    firstWebViewHeight,
-                    secondary && keepContentFrom !== 'secondary'
-                      ? secondWebViewHeight
-                      : null,
-                    secondary && keepContentFrom !== 'secondary',
-                  );
-                  setPrimary(true);
-                } else {
-                  closeEditorAnimation(
-                    firstWebViewHeight,
-                    secondary && keepContentFrom !== 'secondary'
-                      ? secondWebViewHeight
-                      : null,
-                  );
-                  setPrimary(false);
-                }
-              }}
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              }}>
-              <Text
-                style={{
-                  color: colors.icon,
-                  fontSize: SIZE.xxs,
-                }}>
-                Saved on 10/10/20 {'\n'}
-                12:30pm on Tablet
-              </Text>
-              <Icon
-                size={SIZE.lg}
-                name={primary ? 'chevron-up' : 'chevron-down'}
-              />
-            </TouchableOpacity>
-          </View>
-
-          <View
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-            }}>
-            {keepContentFrom === 'secondary' ? (
-              <TouchableOpacity
-                onPress={onPressSaveCopyFromPrimaryWebView}
-                style={{
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor: colors.accent,
-                  borderRadius: 5,
-                  paddingHorizontal: 12,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  marginRight: 10,
-                }}>
-                <Text
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
-                  }}>
-                  Save as a copy
-                </Text>
-              </TouchableOpacity>
-            ) : null}
-
-            {keepContentFrom === 'secondary' ? (
-              <TouchableOpacity
-                onPress={onPressDiscardFromPrimaryWebView}
-                style={{
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor: colors.errorText,
-                  borderRadius: 5,
-                  paddingHorizontal: 12,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <Text
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
-                  }}>
-                  Discard
-                </Text>
-              </TouchableOpacity>
-            ) : null}
-
-            {keepContentFrom === 'secondary' ? null : (
-              <TouchableOpacity
-                onPress={onPressKeepFromPrimaryWebView}
-                style={{
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor:
-                    keepContentFrom === 'primary'
-                      ? colors.errorText
-                      : colors.accent,
-                  borderRadius: 5,
-                  paddingHorizontal: 12,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <Text
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
-                  }}>
-                  {keepContentFrom === 'primary' ? 'Undo' : 'Keep'}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-        </View>
-
-        <Animated.View
-          style={{
-            height: firstWebViewHeight,
-          }}>
-          <WebView
-            onLoad={onPrimaryWebViewLoad}
-            ref={primaryWebView}
-            style={{
+              backgroundColor: colors.nav,
               width: '100%',
-              height: '100%',
-            }}
-            injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
-            onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
-            cacheMode="LOAD_DEFAULT"
-            domStorageEnabled={true}
-            scrollEnabled={false}
-            bounces={false}
-            allowFileAccess={true}
-            scalesPageToFit={true}
-            allowingReadAccessToURL={Platform.OS === 'android' ? true : null}
-            allowFileAccessFromFileURLs={true}
-            allowUniversalAccessFromFileURLs={true}
-            originWhitelist={['*']}
-            javaScriptEnabled={true}
-            cacheEnabled={true}
-            onMessage={onMessageFromPrimaryWebView}
-            source={
-              Platform.OS === 'ios'
-                ? { uri: sourceUri }
-                : {
-                  uri: 'file:///android_asset/plaineditor.html',
-                  baseUrl: 'file:///android_asset/',
-                }
-            }
-          />
-        </Animated.View>
-
-        <View
-          style={{
-            backgroundColor: '#f0f0f0',
-            width: '100%',
-            height: 50,
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            paddingHorizontal: 12,
-          }}>
-          <View
-            style={{
+              height: 50,
               flexDirection: 'row',
-              alignItems: 'center',
               justifyContent: 'space-between',
+              alignItems: 'center',
+              paddingHorizontal: 12,
             }}>
-            <TouchableOpacity
-              onPress={() => {
-                if (keepContentFrom === 'secondary') return;
-                if (!secondary) {
-                  openEditorAnimation(
-                    secondWebViewHeight,
-                    primary && keepContentFrom !== 'primary'
-                      ? firstWebViewHeight
-                      : null,
-                    primary && keepContentFrom !== 'primary',
-                  );
-                  setSecondary(true);
-                } else {
-                  closeEditorAnimation(
-                    secondWebViewHeight,
-                    primary && keepContentFrom !== 'primary'
-                      ? firstWebViewHeight
-                      : null,
-                  );
-                  setSecondary(false);
-                }
-              }}
+            <View
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
               }}>
-              <Text
-                style={{
-                  color: colors.icon,
-                  fontSize: SIZE.xxs,
-                }}>
-                Saved on 10/10/20 {'\n'}
-                12:30pm on Tablet
-              </Text>
               <Icon
-                size={SIZE.lg}
-                name={secondary ? 'chevron-up' : 'chevron-down'}
+                style={{
+                  textAlign: 'center',
+                  textAlignVertical: 'center',
+                  marginLeft: -8,
+                  paddingRight: 10,
+                  paddingVertical: 10,
+                }}
+                onPress={close}
+                size={SIZE.xxl}
+                name="chevron-left"
               />
-            </TouchableOpacity>
+              <TouchableOpacity
+                onPress={() => {
+                  if (keepContentFrom === 'primary') return;
+                  if (!primary) {
+                    openEditorAnimation(
+                      firstWebViewHeight,
+                      secondary && keepContentFrom !== 'secondary'
+                        ? secondWebViewHeight
+                        : null,
+                      secondary && keepContentFrom !== 'secondary',
+                    );
+                    setPrimary(true);
+                  } else {
+                    closeEditorAnimation(
+                      firstWebViewHeight,
+                      secondary && keepContentFrom !== 'secondary'
+                        ? secondWebViewHeight
+                        : null,
+                    );
+                    setPrimary(false);
+                  }
+                }}
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}>
+                <Text
+                  style={{
+                    color: colors.icon,
+                    fontSize: SIZE.xxs,
+                  }}>
+                  Saved on 10/10/20 {'\n'}
+                  12:30pm on Tablet
+                </Text>
+                <Icon
+                  size={SIZE.lg}
+                  name={primary ? 'chevron-up' : 'chevron-down'}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+              }}>
+              {keepContentFrom === 'secondary' ? (
+                <Button
+                  width={null}
+                  onPress={onPressSaveCopyFromPrimaryWebView}
+                  title="Save Copy"
+                />
+              ) : null}
+              <View style={{width: 10}} />
+              {keepContentFrom === 'secondary' ? (
+                <Button
+                  width={null}
+                  title="Discard"
+                  color={colors.errorText}
+                  onPress={onPressDiscardFromPrimaryWebView}
+                />
+              ) : null}
+              <View style={{width: 10}} />
+              {keepContentFrom === 'secondary' ? null : (
+                <Button
+                  width={null}
+                  title={keepContentFrom === 'primary' ? 'Undo' : 'Keep'}
+                  onPress={onPressKeepFromPrimaryWebView}
+                  color={
+                    keepContentFrom === 'primary' ? colors.errorText : 'accent'
+                  }
+                />
+              )}
+            </View>
           </View>
 
+          <Animated.View
+            style={{
+              height: firstWebViewHeight,
+            }}>
+            <WebView
+              onLoad={onPrimaryWebViewLoad}
+              ref={primaryWebView}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+              injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
+              onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
+              cacheMode="LOAD_DEFAULT"
+              domStorageEnabled={true}
+              scrollEnabled={false}
+              bounces={false}
+              allowFileAccess={true}
+              scalesPageToFit={true}
+              allowingReadAccessToURL={Platform.OS === 'android' ? true : null}
+              allowFileAccessFromFileURLs={true}
+              allowUniversalAccessFromFileURLs={true}
+              originWhitelist={['*']}
+              javaScriptEnabled={true}
+              cacheEnabled={true}
+              onMessage={onMessageFromPrimaryWebView}
+              source={
+                Platform.OS === 'ios'
+                  ? {uri: sourceUri}
+                  : {
+                      uri: 'file:///android_asset/plaineditor.html',
+                      baseUrl: 'file:///android_asset/',
+                    }
+              }
+            />
+          </Animated.View>
+
           <View
             style={{
+              backgroundColor: colors.nav,
+              width: '100%',
+              height: 50,
               flexDirection: 'row',
-              alignItems: 'center',
               justifyContent: 'space-between',
+              alignItems: 'center',
+              paddingHorizontal: 12,
             }}>
-            {keepContentFrom === 'primary' ? (
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+              }}>
               <TouchableOpacity
-                onPress={onPressSaveCopyFromSecondaryWebView}
+                onPress={() => {
+                  if (keepContentFrom === 'secondary') return;
+                  if (!secondary) {
+                    openEditorAnimation(
+                      secondWebViewHeight,
+                      primary && keepContentFrom !== 'primary'
+                        ? firstWebViewHeight
+                        : null,
+                      primary && keepContentFrom !== 'primary',
+                    );
+                    setSecondary(true);
+                  } else {
+                    closeEditorAnimation(
+                      secondWebViewHeight,
+                      primary && keepContentFrom !== 'primary'
+                        ? firstWebViewHeight
+                        : null,
+                    );
+                    setSecondary(false);
+                  }
+                }}
                 style={{
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor: colors.accent,
-                  borderRadius: 5,
-                  paddingHorizontal: 12,
+                  flexDirection: 'row',
                   alignItems: 'center',
-                  justifyContent: 'center',
-                  marginRight: 10,
+                  justifyContent: 'space-between',
                 }}>
                 <Text
                   style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
+                    color: colors.icon,
+                    fontSize: SIZE.xxs,
                   }}>
-                  Save as a copy
+                  Saved on 10/10/20 {'\n'}
+                  12:30pm on Tablet
                 </Text>
+                <Icon
+                  size={SIZE.lg}
+                  name={secondary ? 'chevron-up' : 'chevron-down'}
+                />
               </TouchableOpacity>
-            ) : null}
+            </View>
 
-            {keepContentFrom === 'primary' ? (
-              <TouchableOpacity
-                onPress={onPressDiscardFromSecondaryWebView}
-                style={{
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor: colors.errorText,
-                  borderRadius: 5,
-                  paddingHorizontal: 12,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <Text
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
-                  }}>
-                  Discard
-                </Text>
-              </TouchableOpacity>
-            ) : null}
-
-            {keepContentFrom === 'primary' ? null : (
-              <TouchableOpacity
-                onPress={onPressKeepFromSecondaryWebView}
-                style={{
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor:
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+              }}>
+              {keepContentFrom === 'primary' ? (
+                <Button
+                  width={null}
+                  onPress={onPressSaveCopyFromSecondaryWebView}
+                  title="Save Copy"
+                />
+              ) : null}
+              <View style={{width: 10}} />
+              {keepContentFrom === 'primary' ? (
+                <Button
+                  width={null}
+                  title="Discard"
+                  color={colors.errorText}
+                  onPress={onPressDiscardFromSecondaryWebView}
+                />
+              ) : null}
+              <View style={{width: 10}} />
+              {keepContentFrom === 'primary' ? null : (
+                <Button
+                  width={null}
+                  title={keepContentFrom === 'secondary' ? 'Undo' : 'Keep'}
+                  onPress={onPressKeepFromSecondaryWebView}
+                  color={
                     keepContentFrom === 'secondary'
                       ? colors.errorText
-                      : colors.accent,
-                  borderRadius: 5,
-                  paddingHorizontal: 12,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <Text
-                  style={{
-                    color: 'white',
-                    textAlign: 'center',
-                    fontFamily: WEIGHT.regular,
-                    fontSize: SIZE.sm - 2,
-                  }}>
-                  {keepContentFrom === 'secondary' ? 'Undo' : 'Keep'}
-                </Text>
-              </TouchableOpacity>
-            )}
+                      : 'accent'
+                  }
+                />
+              )}
+            </View>
           </View>
-        </View>
 
-        <Animated.View
-          style={{
-            height: secondWebViewHeight,
-          }}>
-          <WebView
-            onLoad={onSecondaryWebViewLoad}
-            ref={secondaryWebView}
+          <Animated.View
             style={{
-              width: '100%',
-              height: '100%',
-            }}
-            injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
-            onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
-            cacheMode="LOAD_DEFAULT"
-            domStorageEnabled={true}
-            scrollEnabled={false}
-            bounces={false}
-            allowFileAccess={true}
-            scalesPageToFit={true}
-            allowingReadAccessToURL={Platform.OS === 'android' ? true : null}
-            allowFileAccessFromFileURLs={true}
-            allowUniversalAccessFromFileURLs={true}
-            originWhitelist={['*']}
-            javaScriptEnabled={true}
-            cacheEnabled={true}
-            onMessage={onMessageFromSecondaryWebView}
-            source={
-              Platform.OS === 'ios'
-                ? { uri: sourceUri }
-                : {
-                  uri: 'file:///android_asset/plaineditor.html',
-                  baseUrl: 'file:///android_asset/',
-                }
-            }
-          />
-        </Animated.View>
-      </View>
+              height: secondWebViewHeight,
+            }}>
+            <WebView
+              onLoad={onSecondaryWebViewLoad}
+              ref={secondaryWebView}
+              style={{
+                width: '100%',
+                height: '100%',
+              }}
+              injectedJavaScript={Platform.OS === 'ios' ? injectedJS : null}
+              onShouldStartLoadWithRequest={_onShouldStartLoadWithRequest}
+              cacheMode="LOAD_DEFAULT"
+              domStorageEnabled={true}
+              scrollEnabled={false}
+              bounces={false}
+              allowFileAccess={true}
+              scalesPageToFit={true}
+              allowingReadAccessToURL={Platform.OS === 'android' ? true : null}
+              allowFileAccessFromFileURLs={true}
+              allowUniversalAccessFromFileURLs={true}
+              originWhitelist={['*']}
+              javaScriptEnabled={true}
+              cacheEnabled={true}
+              onMessage={onMessageFromSecondaryWebView}
+              source={
+                Platform.OS === 'ios'
+                  ? {uri: sourceUri}
+                  : {
+                      uri: 'file:///android_asset/plaineditor.html',
+                      baseUrl: 'file:///android_asset/',
+                    }
+              }
+            />
+          </Animated.View>
+        </View>
+      </SafeAreaView>
     </Modal>
   );
 };
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index de1cea8bb..fb6b0defd 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -7,6 +7,7 @@ import {ACTIONS} from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
 import {db, ToastEvent} from '../../utils/utils';
 import {ActionSheetEvent, moveNoteHideEvent} from '../DialogManager/recievers';
+import {Button} from '../Button';
 
 export const NotebookItem = ({
   item,
@@ -47,8 +48,8 @@ export const NotebookItem = ({
       dispatch({
         type: ACTIONS.HEADER_STATE,
         state: {
-          canGoBack:true,
-          menu:false
+          canGoBack: true,
+          menu: false,
         },
       });
       dispatch({
@@ -64,14 +65,14 @@ export const NotebookItem = ({
             title: hideMore ? 'Move to topic' : item.title,
             isMove: isMove,
             hideMore: hideMore,
-            root:false
+            root: false,
           })
         : NavigationService.navigate('Notebook', {
             notebook: item,
             title: hideMore ? 'Select a topic' : item.title,
             isMove: isMove,
             hideMore: hideMore,
-            root:true
+            root: true,
           });
     }
   };
@@ -144,7 +145,7 @@ export const NotebookItem = ({
                 flexWrap: 'wrap',
               }}>
               {item && item.topics
-                ? item.topics.slice(1, 4).map(topic => (
+                ? item.topics.slice(1, 4).map((topic) => (
                     <View
                       key={topic.dateCreated.toString() + topic.title}
                       style={{
@@ -258,16 +259,21 @@ export const NotebookItem = ({
                 notebookID: notebookID,
               });
             }}>
-            <Icon name="dots-horizontal" size={SIZE.lg} color={colors.heading} />
+            <Icon
+              name="dots-horizontal"
+              size={SIZE.lg}
+              color={colors.heading}
+            />
           </TouchableOpacity>
         )}
 
         {hideMore && isTopic ? (
-          <TouchableOpacity
-            activeOpacity={opacity}
+          <Button
+            width="20%"
+            title="Move"
             onPress={async () => {
               let noteIds = [];
-              selectedItemsList.forEach(item => noteIds.push(item.id));
+              selectedItemsList.forEach((item) => noteIds.push(item.id));
 
               await db.notes.move(
                 {
@@ -282,27 +288,7 @@ export const NotebookItem = ({
 
               ToastEvent.show(`Note moved to ${item.title}`, 'success');
             }}
-            style={{
-              borderWidth: 1,
-              borderRadius: 5,
-              width: '20%',
-              paddingHorizontal: ph - 5,
-              borderColor: colors.nav,
-              paddingVertical: pv - 5,
-              flexDirection: 'row',
-              justifyContent: 'center',
-              alignItems: 'center',
-              backgroundColor: colors.accent,
-            }}>
-            <Text
-              style={{
-                fontSize: SIZE.sm,
-                fontFamily: WEIGHT.regular,
-                color: 'white',
-              }}>
-              Move
-            </Text>
-          </TouchableOpacity>
+          />
         ) : null}
       </View>
     </View>
diff --git a/apps/mobile/src/components/Premium/PremiumDialog.js b/apps/mobile/src/components/Premium/PremiumDialog.js
index 78207cd42..c0334ba41 100644
--- a/apps/mobile/src/components/Premium/PremiumDialog.js
+++ b/apps/mobile/src/components/Premium/PremiumDialog.js
@@ -7,12 +7,14 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import NavigationService from '../../services/NavigationService';
 import {eSendEvent} from '../../services/eventManager';
 import {eCloseSideMenu} from '../../services/events';
+import {Button} from '../Button';
+import Seperator from '../Seperator';
 
 class PremiumDialog extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      visible: false,
+      visible: true,
       animated: false,
     };
     this.routeIndex = 0;
@@ -109,7 +111,7 @@ class PremiumDialog extends React.Component {
                 'Rich-text editor for all your note taking needs',
                 'Secure local vault',
               ]}
-              keyExtractor={(item,index) => item}
+              keyExtractor={(item, index) => item}
               renderItem={({item, index}) => (
                 <View
                   style={{
@@ -155,8 +157,8 @@ class PremiumDialog extends React.Component {
               </Text>
             </TouchableOpacity>
 
-            <TouchableOpacity
-              activeOpacity={opacity}
+            <Seperator />
+            <Button
               onPress={() => {
                 this.close();
                 eSendEvent(eCloseSideMenu);
@@ -165,27 +167,11 @@ class PremiumDialog extends React.Component {
                   fromHome: true,
                 });
               }}
-              style={{
-                ...getElevation(3),
-                padding: pv + 2,
-                backgroundColor: colors.accent,
-                borderRadius: 5,
-                marginTop: 10,
-                marginHorizontal: 12,
-                marginBottom: 10,
-                alignItems: 'center',
-                width: '100%',
-              }}>
-              <Text
-                style={{
-                  fontSize: SIZE.sm,
-                  fontFamily: WEIGHT.medium,
-                  color: 'white',
-                  textAlign: 'center',
-                }}>
-                Start your 14 day trial
-              </Text>
-            </TouchableOpacity>
+              title="Start your 14 day trial"
+              height={50}
+              width="100%"
+            />
+
             <Text
               style={{
                 fontSize: SIZE.xxs,
@@ -203,4 +189,4 @@ class PremiumDialog extends React.Component {
   }
 }
 
-export default PremiumDialog;
\ No newline at end of file
+export default PremiumDialog;
diff --git a/apps/mobile/src/components/Seperator/index.js b/apps/mobile/src/components/Seperator/index.js
new file mode 100644
index 000000000..1b8147484
--- /dev/null
+++ b/apps/mobile/src/components/Seperator/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { View } from 'react-native';
+
+const Seperator = ({half = false}) => {
+  return (
+    <View
+      style={{
+        width: half ? 10 : 20,
+        height: half ? 10 : 20,
+      }}
+    />
+  );
+};
+
+export default Seperator
diff --git a/apps/mobile/src/components/VaultDialog/index.js b/apps/mobile/src/components/VaultDialog/index.js
index 6045f0f13..4094b040d 100644
--- a/apps/mobile/src/components/VaultDialog/index.js
+++ b/apps/mobile/src/components/VaultDialog/index.js
@@ -1,10 +1,10 @@
-import React, { Component, createRef } from 'react';
-import { Modal, Text, TouchableOpacity, View } from 'react-native';
-import { TextInput } from 'react-native-gesture-handler';
+import React, {Component, createRef} from 'react';
+import {Modal, Text, View} from 'react-native';
+import {TextInput} from 'react-native-gesture-handler';
 import Share from 'react-native-share';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { opacity, ph, pv, SIZE, WEIGHT } from '../../common/common';
-import { ACTIONS } from '../../provider/actions';
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
+import {ACTIONS} from '../../provider/actions';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -16,11 +16,11 @@ import {
   eOpenVaultDialog,
   refreshNotesPage,
 } from '../../services/events';
-import { openEditorAnimation } from '../../utils/animations';
-import { db, DDS, getElevation, ToastEvent } from '../../utils/utils';
-import { updateEvent } from '../DialogManager/recievers';
-import { Toast } from '../Toast';
-
+import {openEditorAnimation} from '../../utils/animations';
+import {db, DDS, getElevation, ToastEvent} from '../../utils/utils';
+import {Button} from '../Button/index';
+import {updateEvent} from '../DialogManager/recievers';
+import {Toast} from '../Toast';
 const passInputRef = createRef();
 const confirmPassRef = createRef();
 
@@ -75,7 +75,7 @@ export class VaultDialog extends Component {
   };
 
   close = () => {
-    updateEvent({ type: ACTIONS.NOTES });
+    updateEvent({type: ACTIONS.NOTES});
 
     this.password = null;
     this.confirmPassword = null;
@@ -128,7 +128,7 @@ export class VaultDialog extends Component {
               await this._lockNote();
             }
           })
-          .catch(e => {
+          .catch((e) => {
             this._takeErrorAction(e);
           });
       }
@@ -140,7 +140,7 @@ export class VaultDialog extends Component {
       ToastEvent.show('Password is invalid', 'error', 'local');
       return;
     } else {
-      db.vault.add(this.state.note.id).then(e => {
+      db.vault.add(this.state.note.id).then((e) => {
         this.close();
       });
     }
@@ -161,13 +161,10 @@ export class VaultDialog extends Component {
   }
 
   async _openNote() {
-
     db.vault
       .open(this.state.note.id, this.password)
       .then(async (note) => {
-
         if (this.state.goToEditor) {
-
           this._openInEditor(note);
         } else if (this.state.share) {
           this._shareNote(note);
@@ -175,15 +172,14 @@ export class VaultDialog extends Component {
           await this._deleteNote();
         }
       })
-      .catch(e => {
-
+      .catch((e) => {
         this._takeErrorAction(e);
       });
   }
   async _deleteNote() {
     await db.notes.delete(this.state.note.id);
-    updateEvent({ type: ACTIONS.NOTES });
-    updateEvent({ type: ACTIONS.FAVORITES });
+    updateEvent({type: ACTIONS.NOTES});
+    updateEvent({type: ACTIONS.FAVORITES});
     eSendEvent(refreshNotesPage);
     this.close();
     ToastEvent.show('Note deleted', 'success', 'local');
@@ -204,13 +200,12 @@ export class VaultDialog extends Component {
       .then(() => {
         this.close();
       })
-      .catch(e => {
+      .catch((e) => {
         this._takeErrorAction(e);
       });
   }
 
   _openInEditor(note) {
-
     eSendEvent(eOnLoadNote, note);
 
     if (!DDS.isTab) {
@@ -238,12 +233,11 @@ export class VaultDialog extends Component {
       });
       return;
     } else {
-      
     }
   }
 
   render() {
-    const { colors } = this.props;
+    const {colors} = this.props;
     const {
       note,
       visible,
@@ -301,14 +295,14 @@ export class VaultDialog extends Component {
                 {!novault
                   ? 'Create vault'
                   : note.locked
-                    ? this.state.deleteNote
-                      ? 'Delete note'
-                      : this.state.share
-                        ? 'Share note'
-                        : this.state.goToEditor
-                          ? 'Unlock note'
-                          : 'Unlock note'
-                    : 'Lock note'}
+                  ? this.state.deleteNote
+                    ? 'Delete note'
+                    : this.state.share
+                    ? 'Share note'
+                    : this.state.goToEditor
+                    ? 'Unlock note'
+                    : 'Unlock note'
+                  : 'Lock note'}
               </Text>
             </View>
 
@@ -322,21 +316,21 @@ export class VaultDialog extends Component {
                 maxWidth: '90%',
                 alignSelf: 'center',
                 marginTop: 10,
-                marginBottom: 5
+                marginBottom: 5,
               }}>
               {!novault
                 ? 'Set a password to create vault'
                 : permanant
-                  ? 'Enter password to remove note from vault.'
-                  : note.locked
-                    ? this.state.deleteNote
-                      ? 'Unlock note to delete it.'
-                      : this.state.share
-                        ? 'Unlock note to share it.'
-                        : this.state.goToEditor
-                          ? 'Unlock note to open it in editor'
-                          : 'Enter vault password to unlock note.'
-                    : 'Enter vault password to lock note.'}
+                ? 'Enter password to remove note from vault.'
+                : note.locked
+                ? this.state.deleteNote
+                  ? 'Unlock note to delete it.'
+                  : this.state.share
+                  ? 'Unlock note to share it.'
+                  : this.state.goToEditor
+                  ? 'Unlock note to open it in editor'
+                  : 'Enter vault password to unlock note.'
+                : 'Enter vault password to lock note.'}
             </Text>
 
             {note.locked || locked || permanant ? (
@@ -352,7 +346,7 @@ export class VaultDialog extends Component {
                   fontSize: SIZE.sm,
                   fontFamily: WEIGHT.regular,
                 }}
-                onChangeText={value => {
+                onChangeText={(value) => {
                   this.password = value;
                 }}
                 secureTextEntry
@@ -376,7 +370,7 @@ export class VaultDialog extends Component {
                     fontSize: SIZE.sm,
                     fontFamily: WEIGHT.regular,
                   }}
-                  onChangeText={value => {
+                  onChangeText={(value) => {
                     this.password = value;
                   }}
                   secureTextEntry
@@ -399,7 +393,7 @@ export class VaultDialog extends Component {
                     marginTop: 10,
                   }}
                   secureTextEntry
-                  onChangeText={value => {
+                  onChangeText={(value) => {
                     this.confirmPassword = value;
                     if (value !== this.password) {
                       this.setState({
@@ -424,60 +418,23 @@ export class VaultDialog extends Component {
                 flexDirection: 'row',
                 marginTop: 20,
               }}>
-              <TouchableOpacity
-                activeOpacity={opacity}
+              <Button onPress={this.close} title="Cancel" />
+
+              <Button
                 onPress={this.onPress}
-                secureTextEntry
-                style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  borderColor: colors.accent,
-                  backgroundColor: colors.accent,
-                  borderWidth: 1,
-                }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: 'white',
-                    fontSize: SIZE.sm,
-                  }}>
-                  {note.locked
+                title={
+                  note.locked
                     ? this.state.deleteNote
                       ? 'Delete'
                       : this.state.share
-                        ? 'Share '
-                        : this.state.goToEditor
-                          ? 'Open'
-                          : 'Unlock'
-                    : 'Lock'}
-                </Text>
-              </TouchableOpacity>
-
-              <TouchableOpacity
-                activeOpacity={opacity}
-                onPress={this.close}
-                style={{
-                  paddingVertical: pv,
-                  paddingHorizontal: ph,
-                  borderRadius: 5,
-                  width: '45%',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  backgroundColor: colors.nav,
-                }}>
-                <Text
-                  style={{
-                    fontFamily: WEIGHT.medium,
-                    color: colors.icon,
-                    fontSize: SIZE.sm,
-                  }}>
-                  Cancel
-                </Text>
-              </TouchableOpacity>
+                      ? 'Share '
+                      : this.state.goToEditor
+                      ? 'Open'
+                      : 'Unlock'
+                    : 'Lock'
+                }
+                grayed
+              />
             </View>
           </View>
         </View>