Fix up drawer background (#5785)

src/view/shell/Drawer.tsx

@@ -22,8 +22,7 @@ import {useSetDrawerOpen} from '#/state/shell'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
-import {useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {
@@ -629,7 +628,7 @@ function MenuItem({
         ) : undefined}
       </View>
       <Text
-        style={[a.flex_1, a.text_2xl, bold && a.font_bold]}
+        style={[a.flex_1, a.text_2xl, bold && a.font_bold, web(a.leading_snug)]}
         numberOfLines={1}>
         {label}
       </Text>

src/view/shell/index.tsx

@@ -25,7 +25,7 @@ import {useCloseAnyActiveElement} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme as useNewTheme} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -36,6 +36,7 @@ import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
 
 function ShellInner() {
+  const t = useNewTheme()
   const isDrawerOpen = useIsDrawerOpen()
   const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
   const setIsDrawerOpen = useSetDrawerOpen()
@@ -101,7 +102,16 @@ function ShellInner() {
             onOpen={onOpenDrawer}
             onClose={onCloseDrawer}
             swipeEdgeWidth={winDim.width / 2}
-            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
+            swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}
+            overlayStyle={{
+              backgroundColor: select(t.name, {
+                light: 'rgba(0, 57, 117, 0.1)',
+                dark: isAndroid
+                  ? 'rgba(16, 133, 254, 0.1)'
+                  : 'rgba(1, 82, 168, 0.1)',
+                dim: 'rgba(10, 13, 16, 0.8)',
+              }),
+            }}>
             <TabsNavigator />
           </Drawer>
         </ErrorBoundary>

src/view/shell/index.web.tsx

@@ -16,7 +16,7 @@ import {useCloseAllActiveElements} from '#/state/util'
 import {Lightbox} from '#/view/com/lightbox/Lightbox'
 import {ModalsContainer} from '#/view/com/modals/Modal'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {atoms as a} from '#/alf'
+import {atoms as a, select, useTheme} from '#/alf'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
@@ -25,6 +25,7 @@ import {Composer} from './Composer.web'
 import {DrawerContent} from './Drawer'
 
 function ShellInner() {
+  const t = useTheme()
   const isDrawerOpen = useIsDrawerOpen()
   const setDrawerOpen = useSetDrawerOpen()
   const {isDesktop} = useWebMediaQueries()
@@ -65,7 +66,17 @@ function ShellInner() {
           }}
           accessibilityLabel={_(msg`Close navigation footer`)}
           accessibilityHint={_(msg`Closes bottom navigation bar`)}>
-          <View style={styles.drawerMask}>
+          <View
+            style={[
+              styles.drawerMask,
+              {
+                backgroundColor: select(t.name, {
+                  light: 'rgba(0, 57, 117, 0.1)',
+                  dark: 'rgba(1, 82, 168, 0.1)',
+                  dim: 'rgba(10, 13, 16, 0.8)',
+                }),
+              },
+            ]}>
             <View style={styles.drawerContainer}>
               <DrawerContent />
             </View>
@@ -101,7 +112,6 @@ const styles = StyleSheet.create({
     height: '100%',
     top: 0,
     left: 0,
-    backgroundColor: 'rgba(0,0,0,0.25)',
   },
   drawerContainer: {
     display: 'flex',