5 files changed, 91 insertions, 38 deletions
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index b5c4da19d..a070d2f0f 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -7,8 +7,8 @@ import {
   ViewStyle,
 } from 'react-native'
 import {Text} from '../text/Text'
-import {useTheme} from '../../../lib/ThemeContext'
-import {choose} from '../../../../lib/functions'
+import {useTheme} from 'lib/ThemeContext'
+import {choose} from 'lib/functions'
 
 export type ButtonType =
   | 'primary'
diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx
index f911529d2..8fddd5941 100644
--- a/src/view/com/util/forms/DropdownButton.tsx
+++ b/src/view/com/util/forms/DropdownButton.tsx
@@ -13,11 +13,13 @@ import RootSiblings from 'react-native-root-siblings'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
-import {colors} from '../../../lib/styles'
-import {toShareUrl} from '../../../../lib/strings'
-import {useStores} from '../../../../state'
-import {ReportPostModal, ConfirmModal} from '../../../../state/models/shell-ui'
-import {TABS_ENABLED} from '../../../../build-flags'
+import {colors} from 'lib/styles'
+import {toShareUrl} from 'lib/strings/url-helpers'
+import {useStores} from 'state/index'
+import {ReportPostModal, ConfirmModal} from 'state/models/shell-ui'
+import {TABS_ENABLED} from 'lib/build-flags'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useTheme} from 'lib/ThemeContext'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 
@@ -36,6 +38,9 @@ export function DropdownButton({
   label,
   menuWidth,
   children,
+  openToRight = false,
+  rightOffset = 0,
+  bottomOffset = 0,
 }: {
   type?: DropdownButtonType
   style?: StyleProp<ViewStyle>
@@ -43,6 +48,9 @@ export function DropdownButton({
   label?: string
   menuWidth?: number
   children?: React.ReactNode
+  openToRight?: boolean
+  rightOffset?: number
+  bottomOffset?: number
 }) {
   const ref = useRef<TouchableOpacity>(null)
 
@@ -59,12 +67,11 @@ export function DropdownButton({
         if (!menuWidth) {
           menuWidth = 200
         }
-        createDropdownMenu(
-          pageX + width - menuWidth,
-          pageY + height,
-          menuWidth,
-          items,
-        )
+        const newX = openToRight
+          ? pageX + width + rightOffset
+          : pageX + width - menuWidth
+        const newY = pageY + height + bottomOffset
+        createDropdownMenu(newX, newY, menuWidth, items)
       },
     )
   }
@@ -97,6 +104,8 @@ export function DropdownButton({
 export function PostDropdownBtn({
   style,
   children,
+  itemUri,
+  itemCid,
   itemHref,
   isAuthor,
   onCopyPostText,
@@ -104,6 +113,8 @@ export function PostDropdownBtn({
 }: {
   style?: StyleProp<ViewStyle>
   children?: React.ReactNode
+  itemUri: string
+  itemCid: string
   itemHref: string
   itemTitle: string
   isAuthor: boolean
@@ -140,7 +151,7 @@ export function PostDropdownBtn({
       icon: 'circle-exclamation',
       label: 'Report post',
       onPress() {
-        store.shell.openModal(new ReportPostModal(itemHref))
+        store.shell.openModal(new ReportPostModal(itemUri, itemCid))
       },
     },
     isAuthor
@@ -180,24 +191,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
@@ -241,3 +242,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) => {
+  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 string}
+              />
+            )}
+            <Text style={[styles.label, pal.text]}>{item.label}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </>
+  )
+}
diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx
index 81489c447..57a875cd3 100644
--- a/src/view/com/util/forms/RadioButton.tsx
+++ b/src/view/com/util/forms/RadioButton.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
-import {useTheme} from '../../../lib/ThemeContext'
-import {choose} from '../../../../lib/functions'
+import {useTheme} from 'lib/ThemeContext'
+import {choose} from 'lib/functions'
 
 export function RadioButton({
   type = 'default-light',
diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx
index b33cd9831..901b0cdd8 100644
--- a/src/view/com/util/forms/RadioGroup.tsx
+++ b/src/view/com/util/forms/RadioGroup.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react'
 import {View} from 'react-native'
 import {RadioButton} from './RadioButton'
 import {ButtonType} from './Button'
-import {s} from '../../../lib/styles'
+import {s} from 'lib/styles'
 
 export interface RadioGroupItem {
   label: string
diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx
index 77e8fa203..005d1165e 100644
--- a/src/view/com/util/forms/ToggleButton.tsx
+++ b/src/view/com/util/forms/ToggleButton.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 import {Text} from '../text/Text'
 import {Button, ButtonType} from './Button'
-import {useTheme} from '../../../lib/ThemeContext'
-import {choose} from '../../../../lib/functions'
-import {colors} from '../../../lib/styles'
+import {useTheme} from 'lib/ThemeContext'
+import {choose} from 'lib/functions'
+import {colors} from 'lib/styles'
 
 export function ToggleButton({
   type = 'default-light',