fix all actionsheet dialogs on tablet

2025-12-21 22:19:41 +01:00 · 2020-12-19 13:15:34 +05:00
parent 4e3d5483db
commit ee48fe02e0
19 changed files with 254 additions and 276 deletions
--- a/apps/mobile/html/Web.bundle/site/constants.js
+++ b/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:${
-        isTablet
-          ? 'calc(100% - 260px) !important'
-          : 'calc(100% - 110px) !important'
-      };
+      height:calc(100% - 115px) !important
    }
 
                `;
--- a/apps/mobile/html/Web.bundle/site/index.html
+++ b/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) {
-    isTablet = tab;
+  function loadAction(premium) {
+    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>
--- a/apps/mobile/html/Web.bundle/site/listeners.js
+++ b/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,9 +212,7 @@ function attachMessageListener() {
          if (range.length == 0) {
            let correction = isTablet ? 265 : 110;
            setTimeout(() => {
-              document
-                .querySelector('.app-main')
-                .scrollTo({
+              document.querySelector('.app-main').scrollTo({
                top:
                  editor.getBounds(editor.getSelection().index).bottom -
                  (window.innerHeight - correction),
--- a/apps/mobile/html/Web.bundle/site/styles.css
+++ b/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 {
--- a/apps/mobile/initializer.root.js
+++ b/apps/mobile/initializer.root.js
@@ -170,6 +170,8 @@ 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) {
--- a/apps/mobile/src/components/ActionSheet/styles.js
+++ b/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: {
--- a/apps/mobile/src/components/ActionSheetComponent/ActionSheetWrapper.js
+++ b/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;
--- a/apps/mobile/src/components/ActionSheetComponent/index.js
+++ b/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>
  );
 };
--- a/apps/mobile/src/components/Dialog/DialogHeader.js
+++ b/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',
--- a/apps/mobile/src/components/DialogManager/index.js
+++ b/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
-            ref={(ref) => (this.actionSheet = ref)}
-            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}
+          <ActionSheetWrapper
+            fwdRef={this.actionSheet}
            onClose={() => {
              translatePrem.setValue(-dWidth * 5);
              this.onActionSheetHide();
@@ -369,7 +333,7 @@ export class DialogManager extends Component {
                this.actionSheet._setModalVisible();
              }}
            />
-          </ActionSheet>
+          </ActionSheetWrapper>
        )}

        <Dialog
--- a/apps/mobile/src/components/Menu/UserSection.js
+++ b/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,
          }}>
+          {DDS.isLargeTablet() ? null : (
            <Paragraph size={SIZE.xs} color={colors.icon}>
              You are not logged in
            </Paragraph>
-          <Paragraph color={colors.accent}>Login to sync notes.</Paragraph>
+          )}
+          <Paragraph
+            style={{
+              flexWrap: 'wrap',
+            }}
+            color={colors.accent}>
+            Login to sync notes.
+          </Paragraph>
        </View>
      )}
    </PressableButton>
--- a/apps/mobile/src/components/Menu/index.js
+++ b/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
--- a/apps/mobile/src/components/MoveNoteDialog/index.js
+++ b/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 {colors} = state;
+  const [, dispatch] = useTracked();
  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
-      ref={actionSheetRef}
-      animationType="slide"
-      containerStyle={style}
-      gestureEnabled
-      initialOffsetFromBottom={1}
-      onClose={_onClose}>
-      <IntComponent close={close} note={note} setNote={update} />
-    </ActionSheet>
+    <ActionSheetWrapper fwdRef={actionSheetRef} onClose={_onClose}>
+      <MoveNoteComponent close={close} note={note} setNote={update} />
+    </ActionSheetWrapper>
  );
 };

 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,
--- a/apps/mobile/src/components/Premium/PendingDialog.js
+++ b/apps/mobile/src/components/Premium/PendingDialog.js
@@ -1,13 +1,14 @@
-import React, { createRef } from 'react';
-import { Platform, View } from 'react-native';
-import { DDS } from '../../services/DeviceDetection';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { dWidth } from '../../utils';
-import { hexToRGBA } from '../../utils/ColorUtils';
-import { db } from '../../utils/DB';
-import { eClosePendingDialog, eOpenPendingDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
+import React, {createRef} from 'react';
+import {Platform, View} from 'react-native';
+import {DDS} from '../../services/DeviceDetection';
+import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
+import {dWidth} from '../../utils';
+import {hexToRGBA} from '../../utils/ColorUtils';
+import {db} from '../../utils/DB';
+import {eClosePendingDialog, eOpenPendingDialog} from '../../utils/Events';
+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';
@@ -49,36 +50,10 @@ class PendingDialog extends React.Component {
  render() {
    const {colors} = this.props;
    return (
-      <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}>
+      <ActionSheetWrapper fwdRef={actionSheet}>
        <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>
    );
  }
 }
--- a/apps/mobile/src/components/Premium/PremiumDialog.js
+++ b/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
-        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)
-        }
+      <ActionSheetWrapper
        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}
-        ref={this.actionSheetRef}
-        initialOffsetFromBottom={1}>
+        fwdRef={this.actionSheetRef}>
        <View
          style={{
-            width: DDS.isLargeTablet() ? 500 : dWidth,
+            width: "100%",
            backgroundColor: colors.bg,
            justifyContent: 'space-between',
            paddingHorizontal: 12,
@@ -264,9 +242,7 @@ class PremiumDialog extends React.Component {
                    paddingVertical: 10,
                    marginRight: 10,
                  }}>
-                  <Paragraph
-                    size={SIZE.lg}
-                   >
+                  <Paragraph 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>
    );
  }
 }
--- a/apps/mobile/src/components/RestoreDialog/index.js
+++ b/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(true);
-  const insets = useSafeAreaInsets();
+  const [restoring, setRestoring] = useState(false);
  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 = () => {
-    if (restoring) {
-      showIsWorking();
-      return;
-    }
+  return !visible ? null : (
+    <ActionSheetWrapper
+      fwdRef={actionSheetRef}
+      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 {
-      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()}>
+  return (
+    <>
      <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;
--- a/apps/mobile/src/components/SortDialog/index.js
+++ b/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
-        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}>
+      <ActionSheetWrapper fwdRef={actionSheet}>
        <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,
-                  paddingHorizontal:12
+                  borderRadius: 0,
+                  paddingHorizontal: 12,
                }}>
                <Heading
                  size={SIZE.sm}
@@ -211,7 +185,7 @@ class SortDialog extends React.Component {
            }}
          />
        </View>
-      </ActionSheet>
+      </ActionSheetWrapper>
    );
  }
 }
--- a/apps/mobile/src/services/DeviceDetection.js
+++ b/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;
--- a/apps/mobile/src/views/Editor/EditorHeader.js
+++ b/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) {