fix all buttons

apps/mobile/.gitignore

@@ -57,3 +57,7 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+
+# Other
+react-native-mmkv-storage/

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}",

apps/mobile/android/app/_BUCK

@@ -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",
-    ],
-)

apps/mobile/android/app/build_defs.bzl

@@ -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,
-        )

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

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={{
+                title={toEdit ? 'Save' : 'Add'}
-                  paddingVertical: pv,
+              />
-                  paddingHorizontal: ph,
+              <Button
-                  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
                 activeOpacity={opacity}
                 onPress={() => this.close()}
-                style={{
+                title="Cancel"
-                  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>
             </View>
           </View>
         </View>

apps/mobile/src/components/Button/index.js

@@ -1,42 +1,57 @@
 import React from 'react';
-import {
+import {ActivityIndicator, StyleSheet, Text} from 'react-native';
-  ActivityIndicator,
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import {opacity, ph, pv, SIZE, WEIGHT, COLOR_SCHEME} 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
+    <PressableButton
-      activeOpacity={opacity}
       onPress={onPress}
-      style={[
+      color={grayed ? colors.nav : usedColor}
-        styles.button,
+      selectedColor={grayed ? colors.nav : usedColor}
-        {
+      alpha={grayed ? (!colors.night ? -0.04 : 0.04) : -0.1}
-          backgroundColor: grayed ? colors.nav : colors.accent,
+      customStyle={{
         height: height,
-          width: width,
+        width: width? width : null,
-        },
+        paddingVertical: pv,
-      ]}>
+        paddingHorizontal: ph,
-      {loading ? <ActivityIndicator color={colors.accent} /> : null}
+        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',

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>
           )}

apps/mobile/src/components/Loading/index.js

@@ -3,11 +3,11 @@ import {
   ActivityIndicator,
   StyleSheet,
   Text,
-  View,
+  View
-  TouchableOpacity,
 } from 'react-native';
-import {SIZE, pv, ph, WEIGHT, opacity} from '../../common/common';
+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
+          <Button
-            activeOpacity={opacity}
             onPress={onDone}
-            style={[
+            title="Done"
-              styles.button,
+            />
-              {
-                borderColor: colors.accent,
-                backgroundColor: colors.accent,
-              },
-            ]}>
-            <Text style={styles.buttonText}>Close</Text>
-          </TouchableOpacity>
         </>
       ) : (
         <>

apps/mobile/src/components/MergeEditor/index.js

@@ -1,24 +1,25 @@
 import React, {createRef, useEffect, useState} from 'react';
-import { Modal, Text, TouchableOpacity, View } from 'react-native';
+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 {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 {db, h} from '../../utils/utils';
+import {Button} from '../Button';
 import {simpleDialogEvent, updateEvent} from '../DialogManager/recievers';
 import {TEMPLATE_APPLY_CHANGES} from '../DialogManager/templates';
-import { ACTIONS } from '../../provider/actions';
 
 const {Value, timing} = Animated;
 
@@ -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 = () => {
@@ -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,
@@ -196,11 +194,9 @@ const MergeEditor = () => {
     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;
@@ -279,12 +275,19 @@ 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}>
+      <SafeAreaView
+        style={{
+          backgroundColor: colors.nav,
+        }}>
         <View
           style={{
             height: '100%',
@@ -293,7 +296,7 @@ const MergeEditor = () => {
           }}>
           <View
             style={{
-            backgroundColor: '#f0f0f0',
+              backgroundColor: colors.nav,
               width: '100%',
               height: 50,
               flexDirection: 'row',
@@ -309,11 +312,11 @@ const MergeEditor = () => {
               }}>
               <Icon
                 style={{
-                width: 50,
-                height: 50,
                   textAlign: 'center',
                   textAlignVertical: 'center',
                   marginLeft: -8,
+                  paddingRight: 10,
+                  paddingVertical: 10,
                 }}
                 onPress={close}
                 size={SIZE.xxl}
@@ -365,82 +368,34 @@ const MergeEditor = () => {
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-              justifyContent: 'space-between',
+                justifyContent: 'flex-end',
               }}>
               {keepContentFrom === 'secondary' ? (
-              <TouchableOpacity
+                <Button
+                  width={null}
                   onPress={onPressSaveCopyFromPrimaryWebView}
-                style={{
+                  title="Save Copy"
-                  ...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}
-
+              <View style={{width: 10}} />
               {keepContentFrom === 'secondary' ? (
-              <TouchableOpacity
+                <Button
+                  width={null}
+                  title="Discard"
+                  color={colors.errorText}
                   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}
-
+              <View style={{width: 10}} />
               {keepContentFrom === 'secondary' ? null : (
-              <TouchableOpacity
+                <Button
+                  width={null}
+                  title={keepContentFrom === 'primary' ? 'Undo' : 'Keep'}
                   onPress={onPressKeepFromPrimaryWebView}
-                style={{
+                  color={
-                  ...getElevation(5),
+                    keepContentFrom === 'primary' ? colors.errorText : 'accent'
-                  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>
@@ -484,7 +439,7 @@ const MergeEditor = () => {
 
           <View
             style={{
-            backgroundColor: '#f0f0f0',
+              backgroundColor: colors.nav,
               width: '100%',
               height: 50,
               flexDirection: 'row',
@@ -544,82 +499,36 @@ const MergeEditor = () => {
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
-              justifyContent: 'space-between',
+                justifyContent: 'flex-end',
               }}>
               {keepContentFrom === 'primary' ? (
-              <TouchableOpacity
+                <Button
+                  width={null}
                   onPress={onPressSaveCopyFromSecondaryWebView}
-                style={{
+                  title="Save Copy"
-                  ...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}
-
+              <View style={{width: 10}} />
               {keepContentFrom === 'primary' ? (
-              <TouchableOpacity
+                <Button
+                  width={null}
+                  title="Discard"
+                  color={colors.errorText}
                   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}
-
+              <View style={{width: 10}} />
               {keepContentFrom === 'primary' ? null : (
-              <TouchableOpacity
+                <Button
+                  width={null}
+                  title={keepContentFrom === 'secondary' ? 'Undo' : 'Keep'}
                   onPress={onPressKeepFromSecondaryWebView}
-                style={{
+                  color={
-                  ...getElevation(5),
-                  height: 35,
-                  backgroundColor:
                     keepContentFrom === 'secondary'
                       ? colors.errorText
-                      : colors.accent,
+                      : '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>
               )}
             </View>
           </View>
@@ -661,6 +570,7 @@ const MergeEditor = () => {
             />
           </Animated.View>
         </View>
+      </SafeAreaView>
     </Modal>
   );
 };

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,
@@ -48,7 +49,7 @@ export const NotebookItem = ({
         type: ACTIONS.HEADER_STATE,
         state: {
           canGoBack: true,
-          menu:false
+          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
+          <Button
-            activeOpacity={opacity}
+            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>

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;
@@ -155,8 +157,8 @@ class PremiumDialog extends React.Component {
               </Text>
             </TouchableOpacity>
 
-            <TouchableOpacity
+            <Seperator />
-              activeOpacity={opacity}
+            <Button
               onPress={() => {
                 this.close();
                 eSendEvent(eCloseSideMenu);
@@ -165,27 +167,11 @@ class PremiumDialog extends React.Component {
                   fromHome: true,
                 });
               }}
-              style={{
+              title="Start your 14 day trial"
-                ...getElevation(3),
+              height={50}
-                padding: pv + 2,
+              width="100%"
-                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>
             <Text
               style={{
                 fontSize: SIZE.xxs,

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

apps/mobile/src/components/VaultDialog/index.js

@@ -1,9 +1,9 @@
 import React, {Component, createRef} from 'react';
-import { Modal, Text, TouchableOpacity, View } from 'react-native';
+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 {ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {ACTIONS} from '../../provider/actions';
 import {
   eSendEvent,
@@ -18,9 +18,9 @@ import {
 } from '../../services/events';
 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();
 
@@ -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,8 +172,7 @@ export class VaultDialog extends Component {
           await this._deleteNote();
         }
       })
-      .catch(e => {
+      .catch((e) => {
-
         this._takeErrorAction(e);
       });
   }
@@ -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,7 +233,6 @@ export class VaultDialog extends Component {
       });
       return;
     } else {
-      
     }
   }
 
@@ -322,7 +316,7 @@ export class VaultDialog extends Component {
                 maxWidth: '90%',
                 alignSelf: 'center',
                 marginTop: 10,
-                marginBottom: 5
+                marginBottom: 5,
               }}>
               {!novault
                 ? 'Set a password to create vault'
@@ -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,28 +418,12 @@ export class VaultDialog extends Component {
                 flexDirection: 'row',
                 marginTop: 20,
               }}>
-              <TouchableOpacity
+              <Button onPress={this.close} title="Cancel" />
-                activeOpacity={opacity}
+
+              <Button
                 onPress={this.onPress}
-                secureTextEntry
+                title={
-                style={{
+                  note.locked
-                  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
                     ? this.state.deleteNote
                       ? 'Delete'
                       : this.state.share
@@ -453,31 +431,10 @@ export class VaultDialog extends Component {
                       : this.state.goToEditor
                       ? 'Open'
                       : 'Unlock'
-                    : 'Lock'}
+                    : 'Lock'
-                </Text>
+                }
-              </TouchableOpacity>
+                grayed
-
+              />
-              <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>
             </View>
           </View>
         </View>