fix all actionsheet dialogs on tablet

apps/mobile/html/Web.bundle/site/constants.js

@@ -283,23 +283,22 @@ const setTheme = function () {
   
   #titleInput {
     color:${pageTheme.colors.pri};
-    font-size:${32 * 1.5 * pageTheme.colors.factor};
+    font-size:${32 * 1 * pageTheme.colors.factor};
 
   }
 
   #textCopy {
     color:${pageTheme.colors.pri};
-    font-size:${32 * 1.5 * pageTheme.colors.factor};
+    font-size:${32 * pageTheme.colors.factor};
-
+    min-height: ${32 * pageTheme.colors.factor + 6};
   }
 
+ 
+
   #titleInput::-webkit-input-placeholder {
     color:${pageTheme.colors.icon}
   }
 
-  #titlebar {
-    background-color:${pageTheme.colors.shade};
-  }
 
   .ql-picker-options {
     background-color: ${pageTheme.colors.nav};
@@ -368,11 +367,7 @@ const setTheme = function () {
       font-family: 'Poppins', sans-serif;
       margin: 0px;
       position: relative;
-      height:${
+      height:calc(100% - 115px) !important
-        isTablet
-          ? 'calc(100% - 260px) !important'
-          : 'calc(100% - 110px) !important'
-      };
     }
  
                 `;

apps/mobile/html/Web.bundle/site/index.html

@@ -84,7 +84,7 @@
 </body>
 <script>
   let editor;
-  let isTablet = false;
+  let isTablet = true;
   </script>
 <script src="quill.js"></script>
 <script src="constants.js"></script>
@@ -472,8 +472,8 @@
   };
 
   attachMessageListener();
-  function loadAction(premium, tab) {
+  function loadAction(premium) {
-    isTablet = tab;
+    isTablet = true;
     let titleIn = document.getElementById('titlebar');
     titleIn.style['padding-left'] = 0;
     titleIn.style['padding-right'] = 0;
@@ -565,6 +565,7 @@
         }
   }
 
+  loadAction(true)
 </script>
 
 </html>

apps/mobile/html/Web.bundle/site/listeners.js

@@ -72,9 +72,25 @@ function onTitleChange(ele) {
 
 function autosize() {
   if (isTablet) {
-    document.getElementById('textCopy').innerHTML = document
+    let ele = document.getElementById('textCopy');
+    ele.innerHTML = document
       .getElementById(titleInput)
       .value.replace(/\n/g, '<br/>');
+    console.log(document.getElementById('titlebar').scrollHeight);
+    let newHeight = document.getElementById('titlebar').scrollHeight;
+    let css = document.createElement('style');
+    css.type = 'text/css';
+    let node = `
+      .ql-container {
+        box-sizing: border-box;
+        font-family: 'Poppins', sans-serif;
+        margin: 0px;
+        position: relative;
+        height:calc(100% - ${newHeight + 65}px) !important
+        };
+   `;
+    css.appendChild(document.createTextNode(node));
+    document.getElementsByTagName('head')[0].appendChild(css);
   }
 }
 
@@ -196,14 +212,12 @@ function attachMessageListener() {
           if (range.length == 0) {
             let correction = isTablet ? 265 : 110;
             setTimeout(() => {
-              document
+              document.querySelector('.app-main').scrollTo({
-                .querySelector('.app-main')
+                top:
-                .scrollTo({
+                  editor.getBounds(editor.getSelection().index).bottom -
-                  top:
+                  (window.innerHeight - correction),
-                    editor.getBounds(editor.getSelection().index).bottom -
+                behavior: 'smooth',
-                    (window.innerHeight - correction),
+              });
-                  behavior: 'smooth',
-                });
             }, 200);
           }
         }

apps/mobile/html/Web.bundle/site/styles.css

@@ -34,6 +34,7 @@
   outline: none;
   overflow-y: hidden;
   padding: 12px 12px;
+  padding-top: 0px;
   tab-size: 4;
   -moz-tab-size: 4;
   text-align: left;
@@ -1103,7 +1104,7 @@
   background-color: transparent;
   padding-left: 12px;
   padding-right: 12px;
-  min-height: 195px;
+  min-height: 60px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -1128,9 +1129,12 @@
   font-weight: 600 !important;
 }
 
+#titleInput {
+  padding-bottom: 10px;
+}
+
 #formBox > div {
   visibility: hidden;
-  min-height: 60px;
 }
 
 .info-bar {

apps/mobile/initializer.root.js

@@ -170,8 +170,10 @@ const AppStack = React.memo(
       let size = event?.nativeEvent?.layout;
       updatedDimensions = size;
       if (!size || (size.width === dimensions.width && mode !== null)) {
+        console.log(mode);
+        DDS.setSize(size);
         dispatch({type: Actions.DEVICE_MODE, state: mode});
-
+     
         return;
       }
 
@@ -188,9 +190,8 @@ const AppStack = React.memo(
       });
 
       setWidthHeight(size);
+      console.log(size,"SIZES")
       DDS.setSize(size);
-      DDS.checkSmallTab(size.width > size.height ? 'LANDSCAPE' : 'PORTRAIT');
-
       if (DDS.isLargeTablet()) {
         setDeviceMode('tablet', size);
       } else if (DDS.isSmallTab) {

apps/mobile/src/components/ActionSheet/styles.js

@@ -19,7 +19,7 @@ export const styles = StyleSheet.create({
     borderRadius: 100,
     backgroundColor: '#f0f0f0',
     marginVertical: 5,
-    marginTop: 10,
+    marginTop: 0,
     alignSelf: 'center',
   },
   parentContainer: {

apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import {Platform} from 'react-native';
+import {ScrollView} from 'react-native';
+import {useTracked} from '../../provider';
+import {DDS} from '../../services/DeviceDetection';
+import { hexToRGBA } from '../../utils/ColorUtils';
+import ActionSheet from '../ActionSheet';
+import {GetPremium} from './GetPremium';
+
+const ActionSheetWrapper = ({
+  children,
+  fwdRef,
+  gestureEnabled=true,
+  onClose,
+  onOpen,
+  closeOnTouchBackdrop=true
+}) => {
+  const [state] = useTracked();
+  const {colors} = state;
+  const largeTablet = DDS.isLargeTablet();
+
+  const style = React.useMemo(() => {
+    return {
+      width: largeTablet ? 500 : '100%',
+      minHeight: largeTablet ? 100 : null,
+      maxHeight: largeTablet ? 500 : '90%',
+      borderTopRightRadius: 10,
+      borderTopLeftRadius: 10,
+      backgroundColor: colors.bg,
+      padding: largeTablet ? 8 : 0,
+      zIndex: 10,
+      paddingVertical: 12,
+      borderBottomRightRadius: largeTablet ? 10 : 1,
+      borderBottomLeftRadius: largeTablet ? 10 : 1,
+      marginBottom: largeTablet ? 50 : 0,
+      alignSelf: 'center',
+    };
+  }, [colors.bg]);
+
+  return (
+    <ActionSheet
+      ref={fwdRef}
+      containerStyle={style}
+      gestureEnabled={gestureEnabled}
+      extraScroll={largeTablet ? 50 : 0}
+	  initialOffsetFromBottom={1}
+	  closeOnTouchBackdrop={closeOnTouchBackdrop}
+      indicatorColor={
+        Platform.OS === 'ios'
+          ? hexToRGBA(colors.accent + '19')
+          : hexToRGBA(colors.shade)
+      }
+      onOpen={onOpen}
+      keyboardShouldPersistTaps="always"
+      premium={
+        <GetPremium
+          context="sheet"
+          close={() => fwdRef?.current?._hideModal()}
+          offset={50}
+        />
+      }
+      onClose={onClose}>
+      {children}
+    </ActionSheet>
+  );
+};
+
+export default ActionSheetWrapper;

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

@@ -1,5 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {Keyboard} from 'react-native';
+import {ScrollView} from 'react-native';
 import {
   ActivityIndicator,
   Clipboard,
@@ -511,7 +512,7 @@ export const ActionSheetComponent = ({
   };
 
   return (
-    <View
+    <ScrollView
       onLayout={() => {
         if (!item.dateDeleted) {
           localRefresh(item.type, true);
@@ -521,6 +522,8 @@ export const ActionSheetComponent = ({
         paddingBottom: 30,
         backgroundColor: colors.bg,
         paddingHorizontal: 0,
+        borderBottomRightRadius:DDS.isLargeTablet()? 10 : 1,
+        borderBottomLeftRadius:DDS.isLargeTablet()? 10 : 1
       }}>
       <TouchableOpacity
         style={{
@@ -763,6 +766,6 @@ export const ActionSheetComponent = ({
         />
       ) : null}
       <Toast context="local" />
-    </View>
+    </ScrollView>
   );
 };

apps/mobile/src/components/Dialog/DialogHeader.js

@@ -19,7 +19,10 @@ const DialogHeader = ({icon, title, paragraph, button}) => {
           justifyContent: 'space-between',
           height: 50,
         }}>
-        <View>
+        <View
+          style={{
+            width: '100%',
+          }}>
           <View
             style={{
               flexDirection: 'row',

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

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {Component, createRef} from 'react';
 import {Platform} from 'react-native';
 import {DDS} from '../../services/DeviceDetection';
 import {
@@ -29,6 +29,7 @@ import {
 } from '../../utils/Events';
 import ActionSheet from '../ActionSheet';
 import {ActionSheetComponent} from '../ActionSheetComponent';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import {GetPremium, translatePrem} from '../ActionSheetComponent/GetPremium';
 import {AddNotebookDialog} from '../AddNotebookDialog';
 import {AddTopicDialog} from '../AddTopicDialog';
@@ -52,7 +53,7 @@ import {TEMPLATE_DELETE, TEMPLATE_PERMANANT_DELETE} from './Templates';
 export class DialogManager extends Component {
   constructor(props) {
     super(props);
-    this.actionSheet;
+    this.actionSheet = createRef();
     this.opened = false;
     this.state = {
       item: {},
@@ -89,13 +90,13 @@ export class DialogManager extends Component {
         actionSheetVisible: true,
       },
       () => {
-        this.actionSheet._setModalVisible();
+        this.actionSheet.current?._setModalVisible();
       },
     );
   };
 
   _hideActionSheet = () => {
-    this.actionSheet._setModalVisible(false);
+    this.actionSheet.current?._setModalVisible(false);
   };
 
   _showMoveNote = () => {
@@ -300,49 +301,12 @@ export class DialogManager extends Component {
   render() {
     let {colors} = this.props;
     let {actionSheetData, item, simpleDialog} = this.state;
+    console.log(DDS.isLargeTablet())
     return (
       <>
         {!this.state.actionSheetVisible ? null : (
-          <ActionSheet
+          <ActionSheetWrapper
-            ref={(ref) => (this.actionSheet = ref)}
+            fwdRef={this.actionSheet}
-            containerStyle={{
-              backgroundColor: colors.bg,
-              width: DDS.isLargeTablet() ? 500 : '100%',
-              alignSelf: 'center',
-              borderRadius: 10,
-              marginBottom: DDS.isLargeTablet() ? 50 : 0,
-              borderBottomRightRadius: DDS.isLargeTablet() ? 10 : 1,
-              borderBottomLeftRadius: DDS.isLargeTablet() ? 10 : 1,
-            }}
-            extraScroll={DDS.isTab ? 50 : 0}
-            indicatorColor={
-              Platform.ios
-                ? hexToRGBA(colors.accent + '19')
-                : hexToRGBA(colors.shade)
-            }
-            premium={
-              <GetPremium
-                context="sheet"
-                close={() => this.actionSheet._hideModal()}
-                offset={50}
-              />
-            }
-            keyboardShouldPersistTaps="always"
-            //delayActionSheetDraw={true}
-            //delayActionSheetDrawTime={10}
-            footerAlwaysVisible={DDS.isTab}
-            footerHeight={DDS.isTab ? 20 : 10}
-            footerStyle={
-              DDS.isTab
-                ? {
-                    borderRadius: 10,
-                    backgroundColor: colors.bg,
-                  }
-                : null
-            }
-            initialOffsetFromBottom={1}
-            bounceOnOpen={false}
-            gestureEnabled={true}
             onClose={() => {
               translatePrem.setValue(-dWidth * 5);
               this.onActionSheetHide();
@@ -369,7 +333,7 @@ export class DialogManager extends Component {
                 this.actionSheet._setModalVisible();
               }}
             />
-          </ActionSheet>
+          </ActionSheetWrapper>
         )}
 
         <Dialog

apps/mobile/src/components/Menu/UserSection.js

@@ -3,6 +3,7 @@ import {ActivityIndicator, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {useTracked} from '../../provider';
 import {Actions} from '../../provider/Actions';
+import {DDS} from '../../services/DeviceDetection';
 import {eSendEvent, ToastEvent} from '../../services/EventManager';
 import {getElevation, SUBSCRIPTION_STATUS_STRINGS} from '../../utils';
 import {db} from '../../utils/DB';
@@ -16,7 +17,7 @@ export const UserSection = ({noTextMode}) => {
   const [state, dispatch] = useTracked();
   const {colors, syncing, user} = state;
 
-  return user && user.email ? (
+  return !user && !user?.email ? (
     <View
       style={{
         width: '100%',
@@ -25,7 +26,7 @@ export const UserSection = ({noTextMode}) => {
         backgroundColor: colors.shade,
         marginTop: 10,
       }}>
-      <View
+      {/*   <View
         style={{
           flexDirection: 'row',
           justifyContent: 'space-between',
@@ -42,7 +43,7 @@ export const UserSection = ({noTextMode}) => {
         <Paragraph color="white" size={SIZE.xs}>
           {SUBSCRIPTION_STATUS_STRINGS[user.subscription.status]}
         </Paragraph>
-      </View>
+      </View> */}
 
       <TouchableOpacity
         activeOpacity={0.8}
@@ -57,7 +58,10 @@ export const UserSection = ({noTextMode}) => {
           } catch (e) {
             ToastEvent.show(e.message, 'error');
           } finally {
-            dispatch({type: Actions.LAST_SYNC,lastSync: await db.lastSynced()});
+            dispatch({
+              type: Actions.LAST_SYNC,
+              lastSync: await db.lastSynced(),
+            });
             dispatch({type: Actions.ALL});
             dispatch({
               type: Actions.SYNCING,
@@ -84,17 +88,16 @@ export const UserSection = ({noTextMode}) => {
             {syncing ? 'Syncing ' : 'Last synced: '}
             {!syncing ? (
               user?.lastSynced ? (
-                <TimeSince time={user.lastSynced} />
+                <TimeSince time={user?.lastSynced} />
               ) : (
                 'never'
               )
             ) : null}
             {'\n'}
             <Paragraph
-              size={SIZE.xs}
+              size={DDS.isLargeTablet() ? SIZE.xxs : SIZE.xs}
               color={colors.icon}
               style={{
-                fontSize: SIZE.xs,
                 color: colors.icon,
               }}>
               {syncing ? 'Fetching your notes ' : 'Tap to sync '}
@@ -147,12 +150,21 @@ export const UserSection = ({noTextMode}) => {
       {noTextMode ? null : (
         <View
           style={{
-            marginLeft: 10,
+            marginLeft: DDS.isLargeTablet() ? 5 : 10,
+            flex: 1,
           }}>
-          <Paragraph size={SIZE.xs} color={colors.icon}>
+          {DDS.isLargeTablet() ? null : (
-            You are not logged in
+            <Paragraph size={SIZE.xs} color={colors.icon}>
+              You are not logged in
+            </Paragraph>
+          )}
+          <Paragraph
+            style={{
+              flexWrap: 'wrap',
+            }}
+            color={colors.accent}>
+            Login to sync notes.
           </Paragraph>
-          <Paragraph color={colors.accent}>Login to sync notes.</Paragraph>
         </View>
       )}
     </PressableButton>

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

@@ -22,7 +22,7 @@ import { UserSection } from './UserSection';
 export const Menu = React.memo(
   () => {
     const [state, dispatch] = useTracked();
-    const {colors} = state;
+    const {colors,deviceMode} = state;
     const insets = useSafeAreaInsets();
     const noTextMode = false;
     function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
@@ -59,7 +59,7 @@ export const Menu = React.memo(
         style={{
           height: '100%',
           width: '100%',
-          backgroundColor: colors.bg,
+          backgroundColor:deviceMode !== "mobile"? colors.nav : colors.bg,
           paddingTop: insets.top,
         }}>
         <FlatList

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

@@ -26,6 +26,7 @@ import {
 } from '../../utils/Events';
 import {pv, SIZE, WEIGHT} from '../../utils/SizeUtils';
 import ActionSheet from '../ActionSheet';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import DialogHeader from '../Dialog/dialog-header';
 import {PressableButton} from '../PressableButton';
 import {Toast} from '../Toast';
@@ -38,8 +39,7 @@ const notebookInput = createRef();
 const topicInput = createRef();
 const actionSheetRef = createRef();
 const MoveNoteDialog = () => {
-  const [state, dispatch] = useTracked();
+  const [, dispatch] = useTracked();
-  const {colors} = state;
   const [visible, setVisible] = useState(false);
   const [note, setNote] = useState(null);
   function open(note) {
@@ -75,36 +75,16 @@ const MoveNoteDialog = () => {
     setNote(note);
   };
 
-  const style = React.useMemo(() => {
-    return {
-      width: DDS.isLargeTablet() ? 500 : '100%',
-      height: DDS.isLargeTablet() ? 500 : null,
-      maxHeight: DDS.isLargeTablet() ? 500 : '90%',
-      borderTopRightRadius: DDS.isLargeTablet() ? 5 : 10,
-      borderTopLeftRadius: DDS.isLargeTablet() ? 5 : 10,
-      backgroundColor: colors.bg,
-      padding: DDS.isLargeTablet() ? 8 : 0,
-      zIndex: 10,
-      paddingVertical: 12,
-    };
-  }, [colors.bg]);
-
   return !visible ? null : (
-    <ActionSheet
+    <ActionSheetWrapper fwdRef={actionSheetRef} onClose={_onClose}>
-      ref={actionSheetRef}
+      <MoveNoteComponent close={close} note={note} setNote={update} />
-      animationType="slide"
+    </ActionSheetWrapper>
-      containerStyle={style}
-      gestureEnabled
-      initialOffsetFromBottom={1}
-      onClose={_onClose}>
-      <IntComponent close={close} note={note} setNote={update} />
-    </ActionSheet>
   );
 };
 
 export default MoveNoteDialog;
 
-const IntComponent = ({close, note, setNote}) => {
+const MoveNoteComponent = ({close, note, setNote}) => {
   const [state, dispatch] = useTracked();
   const {colors, selectedItemsList} = state;
   const [expanded, setExpanded] = useState('');
@@ -137,7 +117,7 @@ const IntComponent = ({close, note, setNote}) => {
     newTopicTitle = null;
   };
 
-  const handlePress = async (item,index) => {
+  const handlePress = async (item, index) => {
     if (
       note?.notebooks?.findIndex(
         (o) =>
@@ -398,7 +378,7 @@ const IntComponent = ({close, note, setNote}) => {
                   }
                   renderItem={({item, index}) => (
                     <PressableButton
-                      onPress={() => handlePress(item,index)}
+                      onPress={() => handlePress(item, index)}
                       type="gray"
                       customStyle={{
                         height: 50,

apps/mobile/src/components/Premium/PendingDialog.js

@@ -1,13 +1,14 @@
-import React, { createRef } from 'react';
+import React, {createRef} from 'react';
-import { Platform, View } from 'react-native';
+import {Platform, View} from 'react-native';
-import { DDS } from '../../services/DeviceDetection';
+import {DDS} from '../../services/DeviceDetection';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import { dWidth } from '../../utils';
+import {dWidth} from '../../utils';
-import { hexToRGBA } from '../../utils/ColorUtils';
+import {hexToRGBA} from '../../utils/ColorUtils';
-import { db } from '../../utils/DB';
+import {db} from '../../utils/DB';
-import { eClosePendingDialog, eOpenPendingDialog } from '../../utils/Events';
+import {eClosePendingDialog, eOpenPendingDialog} from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
+import {SIZE} from '../../utils/SizeUtils';
 import ActionSheet from '../ActionSheet';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
@@ -37,8 +38,8 @@ class PendingDialog extends React.Component {
     });
   }
   async componentDidMount() {
-      eSubscribeEvent(eOpenPendingDialog, this.open.bind(this));
+    eSubscribeEvent(eOpenPendingDialog, this.open.bind(this));
-      eSubscribeEvent(eClosePendingDialog, this.close.bind(this));  
+    eSubscribeEvent(eClosePendingDialog, this.close.bind(this));
   }
 
   componentWillUnmount() {
@@ -49,36 +50,10 @@ class PendingDialog extends React.Component {
   render() {
     const {colors} = this.props;
     return (
-      <ActionSheet
+      <ActionSheetWrapper fwdRef={actionSheet}>
-        containerStyle={{
-          backgroundColor: colors.bg,
-          alignSelf: 'center',
-          width: DDS.isTab ? 500 : '100%',
-          borderRadius: 10,
-          marginBottom: DDS.isTab ? 50 : 0,
-        }}
-        indicatorColor={
-          Platform.ios
-            ? hexToRGBA(colors.accent + '19')
-            : hexToRGBA(colors.shade)
-        }
-        extraScroll={DDS.isTab ? 50 : 0}
-        gestureEnabled={true}
-        footerAlwaysVisible={DDS.isTab}
-        footerHeight={DDS.isTab ? 20 : 10}
-        footerStyle={
-          DDS.isTab
-            ? {
-                borderRadius: 10,
-                backgroundColor: colors.bg,
-              }
-            : null
-        }
-        ref={actionSheet}
-        initialOffsetFromBottom={1}>
         <View
           style={{
-            width: DDS.isTab ? 500 : dWidth,
+            width: '100%',
             backgroundColor: colors.bg,
             justifyContent: 'space-between',
             paddingHorizontal: 12,
@@ -111,7 +86,7 @@ class PendingDialog extends React.Component {
           </Paragraph>
           <Seperator />
         </View>
-      </ActionSheet>
+      </ActionSheetWrapper>
     );
   }
 }

apps/mobile/src/components/Premium/PremiumDialog.js

@@ -11,6 +11,7 @@ import {db} from '../../utils/DB';
 import {eOpenLoginDialog, eOpenPendingDialog} from '../../utils/Events';
 import {SIZE} from '../../utils/SizeUtils';
 import ActionSheet from '../ActionSheet';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import {Button} from '../Button';
 import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
@@ -23,7 +24,7 @@ class PremiumDialog extends React.Component {
       products: null,
       scrollEnabled: false,
       product: null,
-      visible: false,
+      visible: true,
     };
     this.routeIndex = 0;
     this.count = 0;
@@ -46,9 +47,13 @@ class PremiumDialog extends React.Component {
     this.actionSheetRef.current?._setModalVisible(false);
   }
 
+  componentDidMount() {
+    this.actionSheetRef.current?._setModalVisible(true);
+  }
+
   async getSkus() {
     try {
-      let u = await db.user.getUser()
+      let u = await db.user.getUser();
       this.setState({
         user: u,
       });
@@ -67,21 +72,7 @@ class PremiumDialog extends React.Component {
   render() {
     const {colors} = this.props;
     return !this.state.visible ? null : (
-      <ActionSheet
+      <ActionSheetWrapper
-        containerStyle={{
-          backgroundColor: colors.bg,
-          width: DDS.isLargeTablet() ? 500 : '100%',
-          alignSelf: 'center',
-          borderRadius: 10,
-          marginBottom: DDS.isLargeTablet() ? 50 : 0,
-          borderBottomRightRadius: 0,
-          borderBottomLeftRadius: 0,
-        }}
-        indicatorColor={
-          Platform.ios
-            ? hexToRGBA(colors.accent + '19')
-            : hexToRGBA(colors.shade)
-        }
         onOpen={async () => {
           try {
             await this.getSkus();
@@ -89,28 +80,15 @@ class PremiumDialog extends React.Component {
             console.log(e);
           }
         }}
-        extraScroll={DDS.isLargeTablet() ? 50 : 10}
-        footerAlwaysVisible={DDS.isLargeTablet()}
-        footerHeight={DDS.isLargeTablet() ? 20 : 10}
-        footerStyle={
-          DDS.isLargeTablet()
-            ? {
-                borderRadius: 10,
-                backgroundColor: colors.bg,
-              }
-            : null
-        }
         onClose={() => {
           this.setState({
             visible: false,
           });
         }}
-        gestureEnabled={true}
+        fwdRef={this.actionSheetRef}>
-        ref={this.actionSheetRef}
-        initialOffsetFromBottom={1}>
         <View
           style={{
-            width: DDS.isLargeTablet() ? 500 : dWidth,
+            width: "100%",
             backgroundColor: colors.bg,
             justifyContent: 'space-between',
             paddingHorizontal: 12,
@@ -139,7 +117,7 @@ class PremiumDialog extends React.Component {
             style={{
               width: '100%',
               maxHeight: DDS.isLargeTablet() ? dHeight * 0.35 : dHeight * 0.45,
-            }}>                  
+            }}>
             {[
               {
                 title: 'Cross Platfrom Sync',
@@ -264,9 +242,7 @@ class PremiumDialog extends React.Component {
                     paddingVertical: 10,
                     marginRight: 10,
                   }}>
-                  <Paragraph
+                  <Paragraph size={SIZE.lg}>
-                    size={SIZE.lg}
-                   >
                     {item.localizedPrice}
                     <Paragraph color={colors.accent} size={SIZE.sm}>
                       /mo
@@ -300,7 +276,7 @@ class PremiumDialog extends React.Component {
             />
           </View>
         </View>
-      </ActionSheet>
+      </ActionSheetWrapper>
     );
   }
 }

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

@@ -20,6 +20,7 @@ import {SIZE} from '../../utils/SizeUtils';
 import storage from '../../utils/storage';
 import {sleep, timeConverter} from '../../utils/TimeUtils';
 import ActionSheet from '../ActionSheet';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import {Button} from '../Button';
 import BaseDialog from '../Dialog/base-dialog';
 import DialogButtons from '../Dialog/dialog-buttons';
@@ -32,12 +33,8 @@ import Paragraph from '../Typography/Paragraph';
 const actionSheetRef = createRef();
 
 const RestoreDialog = () => {
-  const [state, dispatch] = useTracked();
-  const {colors} = state;
   const [visible, setVisible] = useState(false);
-  const [files, setFiles] = useState([]);
+  const [restoring, setRestoring] = useState(false);
-  const [restoring, setRestoring] = useState(true);
-  const insets = useSafeAreaInsets();
   useEffect(() => {
     eSubscribeEvent(eOpenRestoreDialog, open);
     eSubscribeEvent(eCloseRestoreDialog, close);
@@ -53,6 +50,14 @@ const RestoreDialog = () => {
     actionSheetRef.current?._setModalVisible(true);
   };
 
+  const close = () => {
+    if (restoring) {
+      showIsWorking();
+      return;
+    }
+    setVisible(false);
+  };
+
   const showIsWorking = () => {
     ToastEvent.show(
       'Please wait, we are restoring your data.',
@@ -61,14 +66,31 @@ const RestoreDialog = () => {
     );
   };
 
-  const close = () => {
+  return !visible ? null : (
-    if (restoring) {
+    <ActionSheetWrapper
-      showIsWorking();
+      fwdRef={actionSheetRef}
-      return;
+      gestureEnabled={!restoring}
-    }
+      closeOnTouchBackdrop={!restoring}
+      onClose={close}>
+      <RestoreDataComponent
+        close={close}
+        restoring={restoring}
+        setRestoring={setRestoring}
+      />
+    </ActionSheetWrapper>
+  );
+};
 
-    setVisible(false);
+export default RestoreDialog;
-  };
+
+const RestoreDataComponent = ({close, setRestoring, restoring}) => {
+  const [state, dispatch] = useTracked();
+  const {colors} = state;
+  const [files, setFiles] = useState([]);
+
+  useEffect(() => {
+    checkBackups();
+  }, []);
 
   const restore = async (item, index) => {
     if (restoring) {
@@ -93,7 +115,7 @@ const RestoreDialog = () => {
       setRestoring(false);
       dispatch({type: Actions.ALL});
       ToastEvent.show('Restore Complete!', 'success', 'local');
-      setVisible(false);
+      close();
     } catch (e) {
       setRestoring(false);
       ToastEvent.show(e.message, 'error', 'local');
@@ -127,35 +149,15 @@ const RestoreDialog = () => {
     }
   };
 
-  const style = React.useMemo(() => {
+  return (
-    return {
+    <>
-      width: DDS.isLargeTablet() ? 500 : '100%',
-      height: DDS.isLargeTablet() ? 500 : null,
-      maxHeight: DDS.isLargeTablet() ? 500 : '90%',
-      borderTopRightRadius: DDS.isLargeTablet() ? 5 : 10,
-      borderTopLeftRadius: DDS.isLargeTablet() ? 5 : 10,
-      backgroundColor: colors.bg,
-      padding: DDS.isLargeTablet() ? 8 : 0,
-      zIndex: 10,
-      paddingVertical: 12,
-    };
-  }, [colors.bg]);
-
-  return !visible ? null : (
-    <ActionSheet
-      ref={actionSheetRef}
-      containerStyle={style}
-      gestureEnabled={!restoring}
-      closeOnTouchBackdrop={!restoring}
-      initialOffsetFromBottom={1}
-      onClose={close}
-      onOpen={() => checkBackups()}>
       <View>
         <View
           style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
-            paddingHorizontal: 12,
+            paddingHorizontal: 8,
+            paddingRight: 8,
             alignItems: 'center',
             paddingTop: restoring ? 25 : 0,
           }}>
@@ -284,8 +286,6 @@ const RestoreDialog = () => {
         </ScrollView>
       </View>
       <Toast context="local" />
-    </ActionSheet>
+    </>
   );
 };
-
-export default RestoreDialog;

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

@@ -14,6 +14,7 @@ import {MMKV} from '../../utils/mmkv';
 import {SIZE} from '../../utils/SizeUtils';
 import {sleep} from '../../utils/TimeUtils';
 import ActionSheet from '../ActionSheet';
+import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
 import {updateEvent} from '../DialogManager/recievers';
 import {PressableButton} from '../PressableButton';
 import Seperator from '../Seperator';
@@ -74,39 +75,12 @@ class SortDialog extends React.Component {
     if (!this.state.visible) return null;
 
     return (
-      <ActionSheet
+      <ActionSheetWrapper fwdRef={actionSheet}>
-        containerStyle={{
-          backgroundColor: colors.bg,
-          alignSelf: 'center',
-          width: DDS.isTab ? 500 : '100%',
-          borderRadius: 10,
-          marginBottom: DDS.isTab ? 50 : 0,
-        }}
-        indicatorColor={
-          Platform.ios
-            ? hexToRGBA(colors.accent + '19')
-            : hexToRGBA(colors.shade)
-        }
-        extraScroll={DDS.isTab ? 50 : 0}
-        gestureEnabled={true}
-        footerAlwaysVisible={DDS.isTab}
-        footerHeight={DDS.isTab ? 20 : 10}
-        footerStyle={
-          DDS.isTab
-            ? {
-                borderRadius: 10,
-                backgroundColor: colors.bg,
-              }
-            : null
-        }
-        ref={actionSheet}
-        initialOffsetFromBottom={1}>
         <View
           style={{
-            width: DDS.isTab ? 500 : dWidth,
+            width: '100%',
             backgroundColor: colors.bg,
             justifyContent: 'space-between',
-          
             borderRadius: 10,
             paddingTop: 10,
           }}>
@@ -186,8 +160,8 @@ class SortDialog extends React.Component {
                   justifyContent: 'space-between',
                   flexDirection: 'row',
                   alignItems: 'center',
-                  borderRadius:0,
+                  borderRadius: 0,
-                  paddingHorizontal:12
+                  paddingHorizontal: 12,
                 }}>
                 <Heading
                   size={SIZE.sm}
@@ -211,7 +185,7 @@ class SortDialog extends React.Component {
             }}
           />
         </View>
-      </ActionSheet>
+      </ActionSheetWrapper>
     );
   }
 }

apps/mobile/src/services/DeviceDetection.js

@@ -30,22 +30,25 @@ export class DeviceDetectionService {
     this.isPhoneOrTablet();
     this.isIosOrAndroid();
     this.detectIphoneX();
-    this.checkSmallTab();
+    this.checkSmallTab(size.width > size.height ? 'LANDSCAPE' : 'PORTRAIT');
   }
 
   getDeviceSize = () => {
     let dpi = this.pixelDensity * 160;
     let deviceWidthInInches = this.adjustedWidth / dpi;
     let deviceHeightInInches = this.adjustedHeight / dpi;
-    return Math.sqrt(
+    let diagonalSize = Math.sqrt(
       Math.pow(deviceWidthInInches, 2) + Math.pow(deviceHeightInInches, 2),
     );
+    return Platform.isPad ? diagonalSize + 2 : diagonalSize;
   };
 
   checkSmallTab(orientation) {
     this.width = Dimensions.get('screen').width;
     this.height = Dimensions.get('screen').height;
     let deviceSize = this.getDeviceSize();
+
+    console.log(deviceSize, orientation, DeviceInfo.isTablet(), 'DATA');
     if (
       (!DeviceInfo.isTablet() && orientation === 'LANDSCAPE') ||
       (DeviceInfo.isTablet() && (orientation === 'PORTRAIT' || deviceSize < 9))
@@ -53,6 +56,15 @@ export class DeviceDetectionService {
       this.isTab = true;
       this.isPhone = false;
       this.isSmallTab = true;
+    } else if (
+      DeviceInfo.isTablet() &&
+      orientation === 'LANDSCAPE' &&
+      deviceSize > 9
+    ) {
+      console.log('setting large tablet');
+      this.isTab = true;
+      this.isPhone = false;
+      this.isSmallTab = false;
     } else {
       if (!DeviceInfo.isTablet()) {
         this.isTab = false;

apps/mobile/src/views/Editor/EditorHeader.js

@@ -2,7 +2,7 @@ import React, {useEffect} from 'react';
 import {BackHandler, Keyboard, Platform, View} from 'react-native';
 import RNExitApp from 'react-native-exit-app';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import { notesnook } from '../../../e2e/test.ids';
+import {notesnook} from '../../../e2e/test.ids';
 import {ActionIcon} from '../../components/ActionIcon';
 import {
   ActionSheetEvent,
@@ -50,7 +50,7 @@ let tapCount = 0;
 
 const EditorHeader = () => {
   const [state] = useTracked();
-  const {colors, premiumUser, fullscreen,deviceMode} = state;
+  const {colors, premiumUser, fullscreen, deviceMode} = state;
   const insets = useSafeAreaInsets();
 
   useEffect(() => {
@@ -58,7 +58,7 @@ const EditorHeader = () => {
   }, [colors.bg]);
 
   useEffect(() => {
-    post("tablet",DDS.isLargeTablet())
+    post('tablet', DDS.isLargeTablet());
   }, [deviceMode]);
 
   useEffect(() => {
@@ -71,8 +71,6 @@ const EditorHeader = () => {
     };
   }, []);
 
-
-
   useEffect(() => {
     if (fullscreen && DDS.isTab) {
       handleBack = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -122,8 +120,6 @@ const EditorHeader = () => {
     }
   };
 
-  
-
   const _onBackPress = async () => {
     if (getIntent() && sideMenuRef.current === null) {
       if (tapCount > 0) {