Composer - fix modals, and other tweaks (#4298)

* fix depreciated import

* add animations to old dropdown

* wrap modals in fullwindowoverlay

* move errors inside header

* add background to bottom bar and stop overlap

* nest dialogs on android

* fix android (wrap in gesturehandlerrootview)

* make borders all the same color

* revert threadgate button back to solid

src/view/com/modals/Modal.tsx

@@ -1,10 +1,11 @@
-import React, {useEffect, useRef} from 'react'
+import React, {Fragment, useEffect, useRef} from 'react'
 import {StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import BottomSheet from '@discord/bottom-sheet/src'
 
 import {useModalControls, useModals} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
+import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 import * as AddAppPassword from './AddAppPasswords'
@@ -127,24 +128,28 @@ export function ModalsContainer() {
     )
   }
 
+  const Container = activeModal ? FullWindowOverlay : Fragment
+
   return (
-    <BottomSheet
-      ref={bottomSheetRef}
-      snapPoints={snapPoints}
-      handleHeight={HANDLE_HEIGHT}
-      index={isModalActive ? 0 : -1}
-      enablePanDownToClose
-      android_keyboardInputMode="adjustResize"
-      keyboardBlurBehavior="restore"
-      backdropComponent={
-        isModalActive ? createCustomBackdrop(onClose) : undefined
-      }
-      handleIndicatorStyle={{backgroundColor: pal.text.color}}
-      handleStyle={[styles.handle, pal.view]}
-      onChange={onBottomSheetChange}>
-      {element}
-      <KeyboardPadding />
-    </BottomSheet>
+    <Container>
+      <BottomSheet
+        ref={bottomSheetRef}
+        snapPoints={snapPoints}
+        handleHeight={HANDLE_HEIGHT}
+        index={isModalActive ? 0 : -1}
+        enablePanDownToClose
+        android_keyboardInputMode="adjustResize"
+        keyboardBlurBehavior="restore"
+        backdropComponent={
+          isModalActive ? createCustomBackdrop(onClose) : undefined
+        }
+        handleIndicatorStyle={{backgroundColor: pal.text.color}}
+        handleStyle={[styles.handle, pal.view]}
+        onChange={onBottomSheetChange}>
+        {element}
+        <KeyboardPadding />
+      </BottomSheet>
+    </Container>
   )
 }
 

src/view/com/modals/Threadgate.tsx

@@ -7,18 +7,19 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {Text} from '../util/text/Text'
-import {s, colors} from 'lib/styles'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import isEqual from 'lodash.isequal'
+
+import {useModalControls} from '#/state/modals'
+import {useMyListsQuery} from '#/state/queries/my-lists'
+import {ThreadgateSetting} from '#/state/queries/threadgate'
 import {usePalette} from 'lib/hooks/usePalette'
+import {colors, s} from 'lib/styles'
 import {isWeb} from 'platform/detection'
 import {ScrollView} from 'view/com/modals/util'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
-import {ThreadgateSetting} from '#/state/queries/threadgate'
-import {useMyListsQuery} from '#/state/queries/my-lists'
-import isEqual from 'lodash.isequal'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Text} from '../util/text/Text'
 
 export const snapPoints = ['60%']
 
@@ -155,7 +156,7 @@ function Selectable({
       accessibilityLabel={label}
       accessibilityHint=""
       style={[styles.selectable, pal.border, pal.view, style]}>
-      <Text type="xl" style={[pal.text]}>
+      <Text type="lg" style={[pal.text]}>
         {label}
       </Text>
       {isSelected ? (