Adds dark mode to the dropdown (#131)

* Adds dark mode to the bottom sheet * Make background button lighter (like before) * lint
bluesky-social · Feb 1, 2023 · 1e53309 · 1e53309
1 parent 9889035
commit 1e53309
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 26 deletions.
diff --git a/src/App.native.tsx b/src/App.native.tsx
@@ -61,17 +61,17 @@ const App = observer(() => {
 
   return (
     <GestureHandlerRootView style={s.h100pct}>
-      <RootSiblingParent>
-        <AnalyticsProvider client={segment}>
-          <RootStoreProvider value={rootStore}>
-            <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+      <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+        <RootSiblingParent>
+          <AnalyticsProvider client={segment}>
+            <RootStoreProvider value={rootStore}>
               <SafeAreaProvider>
                 <MobileShell />
               </SafeAreaProvider>
-            </ThemeProvider>
-          </RootStoreProvider>
-        </AnalyticsProvider>
-      </RootSiblingParent>
+            </RootStoreProvider>
+          </AnalyticsProvider>
+        </RootSiblingParent>
+      </ThemeProvider>
     </GestureHandlerRootView>
   )
 })

diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
@@ -18,6 +18,8 @@ import {toShareUrl} from '../../../../lib/strings'
 import {useStores} from '../../../../state'
 import {ReportPostModal, ConfirmModal} from '../../../../state/models/shell-ui'
 import {TABS_ENABLED} from '../../../../build-flags'
+import {usePalette} from '../../../lib/hooks/usePalette'
+import {useTheme} from '../../../lib/ThemeContext'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 
@@ -181,24 +183,14 @@ function createDropdownMenu(
   const onOuterPress = () => sibling.destroy()
   const sibling = new RootSiblings(
     (
-      <>
-        <TouchableWithoutFeedback onPress={onOuterPress}>
-          <View style={styles.bg} />
-        </TouchableWithoutFeedback>
-        <View style={[styles.menu, {left: x, top: y, width}]}>
-          {items.map((item, index) => (
-            <TouchableOpacity
-              key={index}
-              style={styles.menuItem}
-              onPress={() => onPressItem(index)}>
-              {item.icon && (
-                <FontAwesomeIcon style={styles.icon} icon={item.icon} />
-              )}
-              <Text style={styles.label}>{item.label}</Text>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </>
+      <DropdownItems
+        onOuterPress={onOuterPress}
+        x={x}
+        y={y}
+        width={width}
+        items={items}
+        onPressItem={onPressItem}
+      />
     ),
   )
   return sibling
@@ -242,3 +234,55 @@ const styles = StyleSheet.create({
     fontSize: 18,
   },
 })
+type DropDownItemProps = {
+  onOuterPress: () => void
+  x: number
+  y: number
+  width: number
+  items: DropdownItem[]
+  onPressItem: (index: number) => void
+}
+
+const DropdownItems = ({
+  onOuterPress,
+  x,
+  y,
+  width,
+  items,
+  onPressItem,
+}: DropDownItemProps): React.ReactNode => {
+  const pal = usePalette('default')
+  const theme = useTheme()
+  const dropDownBackgroundColor =
+    theme.colorScheme === 'dark' ? pal.btn : pal.view
+
+  return (
+    <>
+      <TouchableWithoutFeedback onPress={onOuterPress}>
+        <View style={[styles.bg]} />
+      </TouchableWithoutFeedback>
+      <View
+        style={[
+          styles.menu,
+          {left: x, top: y, width},
+          dropDownBackgroundColor,
+        ]}>
+        {items.map((item, index) => (
+          <TouchableOpacity
+            key={index}
+            style={[styles.menuItem]}
+            onPress={() => onPressItem(index)}>
+            {item.icon && (
+              <FontAwesomeIcon
+                style={styles.icon}
+                icon={item.icon}
+                color={pal.text.color as text}
+              />
+            )}
+            <Text style={[styles.label, pal.text]}>{item.label}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </>
+  )
+}