Composer - Use sheet presentation on iOS (#4278)

* use sheet presentation + tweak spacing

* line up elements + add hitslop to cancel

* fixing spacing on replies

1 files changed, 11 insertions, 9 deletions

diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts
index 301c993dd..ce1558747 100644
--- a/src/alf/util/useColorModeTheme.ts
+++ b/src/alf/util/useColorModeTheme.ts
@@ -7,19 +7,21 @@ import {useThemePrefs} from 'state/shell'
 import {dark, dim, light, ThemeName} from '#/alf/themes'
 
 export function useColorModeTheme(): ThemeName {
-  const colorScheme = useColorScheme()
-  const {colorMode, darkTheme} = useThemePrefs()
+  const theme = useThemeName()
 
   React.useLayoutEffect(() => {
-    const theme = getThemeName(colorScheme, colorMode, darkTheme)
     updateDocument(theme)
     SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
-  }, [colorMode, colorScheme, darkTheme])
+  }, [theme])
+
+  return theme
+}
+
+export function useThemeName(): ThemeName {
+  const colorScheme = useColorScheme()
+  const {colorMode, darkTheme} = useThemePrefs()
 
-  return React.useMemo(
-    () => getThemeName(colorScheme, colorMode, darkTheme),
-    [colorScheme, colorMode, darkTheme],
-  )
+  return getThemeName(colorScheme, colorMode, darkTheme)
 }
 
 function getThemeName(
@@ -53,7 +55,7 @@ function updateDocument(theme: ThemeName) {
   }
 }
 
-function getBackgroundColor(theme: ThemeName): string {
+export function getBackgroundColor(theme: ThemeName): string {
   switch (theme) {
     case 'light':
       return light.atoms.bg.backgroundColor