diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index 1b25c7c13c..7a26fa1628 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -156,6 +156,7 @@ export const ProfileHeader = observer(function ProfileHeader({ diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 9016cc4cce..f4dc982be3 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -1,19 +1,25 @@ -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, {Circle, Text, Defs, LinearGradient, Stop} from 'react-native-svg' import {getGradient} from '../../lib/asset-gen' +import {colors} from '../../lib/styles' export function UserAvatar({ + isMe = false, size, - displayName, handle, + displayName, }: { + isMe?: boolean size: number - displayName: string | undefined handle: string + displayName: string | undefined }) { const initials = getInitials(displayName || handle) const gradient = getGradient(handle) - return ( + + const renderSvg = (size: number, initials: string) => ( @@ -33,6 +39,25 @@ export function UserAvatar({ ) + + const handleEditAvatar = useCallback(() => { + Alert.alert('TB Implemented') + }, []) + + return isMe ? ( + + {renderSvg(size, initials)} + + + + + ) : ( + renderSvg(size, initials) + ) } function getInitials(str: string): string { @@ -50,3 +75,17 @@ function getInitials(str: string): string { } return 'X' } + +const styles = StyleSheet.create({ + editButtonContainer: { + position: 'absolute', + bottom: 6, + right: 6, + backgroundColor: colors.gray5, + width: 20, + height: 20, + borderRadius: 10, + alignItems: 'center', + justifyContent: 'center', + }, +})