1 files changed, 65 insertions, 32 deletions

diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index d5d6e3aaa..dc140b035 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -1,15 +1,23 @@
-import React, {useCallback} from 'react'
-import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native'
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {colors, gradients} from '../../lib/styles'
+import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import Image from 'view/com/util/images/Image'
+import {colors, gradients} from 'lib/styles'
 import {
   openCamera,
   openCropper,
   openPicker,
   PickedMedia,
 } from './images/image-crop-picker/ImageCropPicker'
-import {useStores} from '../../../state'
+import {useStores} from 'state/index'
+import {
+  requestPhotoAccessIfNeeded,
+  requestCameraAccessIfNeeded,
+} from 'lib/permissions'
+import {DropdownButton} from './forms/DropdownButton'
+import {usePalette} from 'lib/hooks/usePalette'
 
 export function UserBanner({
   banner,
@@ -19,39 +27,57 @@ export function UserBanner({
   onSelectNewBanner?: (img: PickedMedia) => void
 }) {
   const store = useStores()
-  const handleEditBanner = useCallback(() => {
-    Alert.alert('Select upload method', '', [
-      {
-        text: 'Take a new photo',
-        onPress: () => {
-          openCamera(store, {
+  const pal = usePalette('default')
+  const dropdownItems = [
+    {
+      label: 'Camera',
+      icon: 'camera' as IconProp,
+      onPress: async () => {
+        if (!(await requestCameraAccessIfNeeded())) {
+          return
+        }
+        onSelectNewBanner?.(
+          await openCamera(store, {
             mediaType: 'photo',
             // compressImageMaxWidth: 3000, TODO needed?
             width: 3000,
             // compressImageMaxHeight: 1000, TODO needed?
             height: 1000,
-          }).then(onSelectNewBanner)
-        },
+          }),
+        )
       },
-      {
-        text: 'Select from gallery',
-        onPress: () => {
-          openPicker(store, {
+    },
+    {
+      label: 'Library',
+      icon: 'image' as IconProp,
+      onPress: async () => {
+        if (!(await requestPhotoAccessIfNeeded())) {
+          return
+        }
+        const items = await openPicker(store, {
+          mediaType: 'photo',
+        })
+        onSelectNewBanner?.(
+          await openCropper(store, {
             mediaType: 'photo',
-          }).then(async items => {
-            await openCropper(store, {
-              mediaType: 'photo',
-              path: items[0].path,
-              // compressImageMaxWidth: 3000, TODO needed?
-              width: 3000,
-              // compressImageMaxHeight: 1000, TODO needed?
-              height: 1000,
-            }).then(onSelectNewBanner)
-          })
-        },
+            path: items[0].path,
+            // compressImageMaxWidth: 3000, TODO needed?
+            width: 3000,
+            // compressImageMaxHeight: 1000, TODO needed?
+            height: 1000,
+          }),
+        )
       },
-    ])
-  }, [store, onSelectNewBanner])
+    },
+    // TODO: Remove banner https://github.com/bluesky-social/social-app/issues/122
+    // {
+    //   label: 'Remove',
+    //   icon: ['far', 'trash-can'],
+    //   onPress: () => {
+    //     // Remove banner api call
+    //   },
+    // },
+  ]
 
   const renderSvg = () => (
     <Svg width="100%" height="150" viewBox="50 0 200 100">
@@ -72,20 +98,27 @@ export function UserBanner({
 
   // setUserBanner is only passed as prop on the EditProfile component
   return onSelectNewBanner ? (
-    <TouchableOpacity onPress={handleEditBanner}>
+    <DropdownButton
+      type="bare"
+      items={dropdownItems}
+      openToRight
+      rightOffset={-200}
+      bottomOffset={-10}
+      menuWidth={170}>
       {banner ? (
         <Image style={styles.bannerImage} source={{uri: banner}} />
       ) : (
         renderSvg()
       )}
-      <View style={styles.editButtonContainer}>
+      <View style={[styles.editButtonContainer, pal.btn]}>
         <FontAwesomeIcon
           icon="camera"
           size={12}
           style={{color: colors.white}}
+          color={pal.text.color as string}
         />
       </View>
-    </TouchableOpacity>
+    </DropdownButton>
   ) : banner ? (
     <Image
       style={styles.bannerImage}