From 28ebf3d2cb2d6884c03a79c0040a187ac62fd39b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreiro?= <ferreiro@pinkroom.dev>
Date: Wed, 30 Nov 2022 15:22:49 +0000
Subject: [PATCH] add editable button cover picture

---
 src/view/com/profile/ProfileHeader.tsx |  2 +-
 src/view/com/util/UserBanner.tsx       | 49 ++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 7a26fa1628..228b6c594a 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -152,7 +152,7 @@ export const ProfileHeader = observer(function ProfileHeader({
   }
   return (
     <View style={styles.outer}>
-      <UserBanner handle={view.handle} />
+      <UserBanner isMe={isMe} handle={view.handle} />
       <View style={styles.avi}>
         <UserAvatar
           size={80}
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 16e18c84d4..04a5f2383b 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -1,10 +1,20 @@
-import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import React, {useCallback} from 'react'
+import {Alert, StyleSheet, View, TouchableOpacity} from 'react-native'
 import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
 import {getGradient} from '../../lib/asset-gen'
+import {colors} from '../../lib/styles'
 
-export function UserBanner({handle}: {handle: string}) {
+export function UserBanner({
+  handle,
+  isMe = false,
+}: {
+  handle: string
+  isMe?: boolean
+}) {
   const gradient = getGradient(handle)
-  return (
+
+  const renderSvg = () => (
     <Svg width="100%" height="120" viewBox="50 0 200 100">
       <Defs>
         <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
@@ -20,4 +30,37 @@ export function UserBanner({handle}: {handle: string}) {
       <Rect x="0" y="0" width="400" height="100" fill="url(#grad2)" />
     </Svg>
   )
+
+  const handleEditBanner = useCallback(() => {
+    Alert.alert('TB Implemented')
+  }, [])
+
+  return isMe ? (
+    <TouchableOpacity onPress={handleEditBanner}>
+      {renderSvg()}
+      <View style={styles.editButtonContainer}>
+        <FontAwesomeIcon
+          icon="camera"
+          size={10}
+          style={{color: colors.gray1}}
+        />
+      </View>
+    </TouchableOpacity>
+  ) : (
+    renderSvg()
+  )
 }
+
+const styles = StyleSheet.create({
+  editButtonContainer: {
+    position: 'absolute',
+    bottom: 6,
+    right: 6,
+    backgroundColor: colors.gray5,
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})