forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix up drawer background (#5785)
authored by
Eric Bailey
and committed by
GitHub
444c6e6a
34f1e4d7
+27
-8
+2
-3
src/view/shell/Drawer.tsx
+2
-3
src/view/shell/Drawer.tsx
···
22
22
import {formatCount} from '#/view/com/util/numeric/format'
23
23
import {UserAvatar} from '#/view/com/util/UserAvatar'
24
24
import {NavSignupCard} from '#/view/shell/NavSignupCard'
25
-
import {atoms as a} from '#/alf'
26
-
import {useTheme} from '#/alf'
25
+
import {atoms as a, useTheme, web} from '#/alf'
27
26
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
28
27
import {Divider} from '#/components/Divider'
29
28
import {
···
629
628
) : undefined}
630
629
</View>
631
630
<Text
632
-
style={[a.flex_1, a.text_2xl, bold && a.font_bold]}
631
+
style={[a.flex_1, a.text_2xl, bold && a.font_bold, web(a.leading_snug)]}
633
632
numberOfLines={1}>
634
633
{label}
635
634
</Text>
+12
-2
src/view/shell/index.tsx
+12
-2
src/view/shell/index.tsx
···
25
25
import {Lightbox} from '#/view/com/lightbox/Lightbox'
26
26
import {ModalsContainer} from '#/view/com/modals/Modal'
27
27
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
28
-
import {atoms as a} from '#/alf'
28
+
import {atoms as a, select, useTheme as useNewTheme} from '#/alf'
29
29
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
30
30
import {SigninDialog} from '#/components/dialogs/Signin'
31
31
import {Outlet as PortalOutlet} from '#/components/Portal'
···
36
36
import {DrawerContent} from './Drawer'
37
37
38
38
function ShellInner() {
39
+
const t = useNewTheme()
39
40
const isDrawerOpen = useIsDrawerOpen()
40
41
const isDrawerSwipeDisabled = useIsDrawerSwipeDisabled()
41
42
const setIsDrawerOpen = useSetDrawerOpen()
···
101
102
onOpen={onOpenDrawer}
102
103
onClose={onCloseDrawer}
103
104
swipeEdgeWidth={winDim.width / 2}
104
-
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}>
105
+
swipeEnabled={!canGoBack && hasSession && !isDrawerSwipeDisabled}
106
+
overlayStyle={{
107
+
backgroundColor: select(t.name, {
108
+
light: 'rgba(0, 57, 117, 0.1)',
109
+
dark: isAndroid
110
+
? 'rgba(16, 133, 254, 0.1)'
111
+
: 'rgba(1, 82, 168, 0.1)',
112
+
dim: 'rgba(10, 13, 16, 0.8)',
113
+
}),
114
+
}}>
105
115
<TabsNavigator />
106
116
</Drawer>
107
117
</ErrorBoundary>
+13
-3
src/view/shell/index.web.tsx
+13
-3
src/view/shell/index.web.tsx
···
16
16
import {Lightbox} from '#/view/com/lightbox/Lightbox'
17
17
import {ModalsContainer} from '#/view/com/modals/Modal'
18
18
import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
19
-
import {atoms as a} from '#/alf'
19
+
import {atoms as a, select, useTheme} from '#/alf'
20
20
import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
21
21
import {SigninDialog} from '#/components/dialogs/Signin'
22
22
import {Outlet as PortalOutlet} from '#/components/Portal'
···
25
25
import {DrawerContent} from './Drawer'
26
26
27
27
function ShellInner() {
28
+
const t = useTheme()
28
29
const isDrawerOpen = useIsDrawerOpen()
29
30
const setDrawerOpen = useSetDrawerOpen()
30
31
const {isDesktop} = useWebMediaQueries()
···
65
66
}}
66
67
accessibilityLabel={_(msg`Close navigation footer`)}
67
68
accessibilityHint={_(msg`Closes bottom navigation bar`)}>
68
-
<View style={styles.drawerMask}>
69
+
<View
70
+
style={[
71
+
styles.drawerMask,
72
+
{
73
+
backgroundColor: select(t.name, {
74
+
light: 'rgba(0, 57, 117, 0.1)',
75
+
dark: 'rgba(1, 82, 168, 0.1)',
76
+
dim: 'rgba(10, 13, 16, 0.8)',
77
+
}),
78
+
},
79
+
]}>
69
80
<View style={styles.drawerContainer}>
70
81
<DrawerContent />
71
82
</View>
···
101
112
height: '100%',
102
113
top: 0,
103
114
left: 0,
104
-
backgroundColor: 'rgba(0,0,0,0.25)',
105
115
},
106
116
drawerContainer: {
107
117
display: 'flex',