Merge branch 'main' into 4-update-to-react-native-070

src/state/models/profile-view.ts

@@ -43,7 +43,7 @@ export class ProfileViewModel {
   postsCount: number = 0
   myState = new ProfileViewMyStateModel()
 
-  // data to be implemented in the protocol
+  // TODO TEMP data to be implemented in the protocol
   userAvatar: string | null = null
   userBanner: string | null = null
 
@@ -121,13 +121,14 @@ export class ProfileViewModel {
 
   async updateProfile(
     fn: (existing?: Profile.Record) => Profile.Record,
-    userAvatar: string | null,
-    userBanner: string | null,
+    userAvatar: string | null, // TODO TEMP
+    userBanner: string | null, // TODO TEMP
   ) {
-    await apilib.updateProfile(this.rootStore, this.did, fn)
-    // add userBanner & userAvatar in the protocol when suported
+    // TODO TEMP add userBanner & userAvatar in the protocol when suported
     this.userAvatar = userAvatar
     this.userBanner = userBanner
+
+    await apilib.updateProfile(this.rootStore, this.did, fn)
     await this.refresh()
   }
 

src/view/com/modals/EditProfile.tsx

@@ -16,7 +16,7 @@ import * as Profile from '../../../third-party/api/src/client/types/app/bsky/act
 import {UserBanner} from '../util/UserBanner'
 import {UserAvatar} from '../util/UserAvatar'
 
-export const snapPoints = ['60%']
+export const snapPoints = ['80%']
 
 export function Component({
   profileView,
@@ -59,8 +59,8 @@ export function Component({
             description,
           }
         },
-        userAvatar,
-        userBanner,
+        userAvatar, // TEMP
+        userBanner, // TEMP
       )
       Toast.show('Profile updated')
       onUpdate?.()
@@ -79,14 +79,12 @@ export function Component({
         <Text style={styles.title}>Edit my profile</Text>
         <View style={styles.photos}>
           <UserBanner
-            isMe
             userBanner={userBanner}
             setUserBanner={setUserBanner}
             handle={profileView.handle}
           />
           <View style={styles.avi}>
             <UserAvatar
-              isMe
               size={80}
               userAvatar={userAvatar}
               handle={profileView.handle}
@@ -100,7 +98,7 @@ export function Component({
             <ErrorMessage message={error} />
           </View>
         )}
-        <View style={styles.group}>
+        <View>
           <Text style={styles.label}>Display Name</Text>
           <BottomSheetTextInput
             style={styles.textInput}
@@ -109,7 +107,7 @@ export function Component({
             onChangeText={v => setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))}
           />
         </View>
-        <View style={styles.group}>
+        <View style={s.pb10}>
           <Text style={styles.label}>Description</Text>
           <BottomSheetTextInput
             style={[styles.textArea]}
@@ -148,13 +146,11 @@ const styles = StyleSheet.create({
     fontSize: 24,
     marginBottom: 18,
   },
-  group: {
-    marginBottom: 10,
-  },
   label: {
     fontWeight: 'bold',
     paddingHorizontal: 4,
     paddingBottom: 4,
+    marginTop: 20,
   },
   textInput: {
     borderWidth: 1,
@@ -195,6 +191,7 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
   },
   photos: {
-    marginBottom: 48,
+    marginBottom: 36,
+    marginHorizontal: -14,
   },
 })

src/view/com/util/UserAvatar.tsx

@@ -100,8 +100,8 @@ export function UserAvatar({
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
-          size={24}
-          style={{color: colors.gray1 + '99'}}
+          size={12}
+          style={{color: colors.white}}
         />
       </View>
     </TouchableOpacity>
@@ -135,15 +135,14 @@ function getInitials(str: string): string {
 const styles = StyleSheet.create({
   editButtonContainer: {
     position: 'absolute',
-    width: 50,
-    height: 50,
-    top: '50%',
-    left: '50%',
-    borderRadius: 25,
+    width: 24,
+    height: 24,
+    bottom: 0,
+    right: 0,
+    borderRadius: 12,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: colors.gray5 + '99',
-    transform: [{translateX: -25}, {translateY: -25}],
+    backgroundColor: colors.gray5,
   },
   avatarImage: {
     width: 80,

src/view/com/util/UserBanner.tsx

@@ -89,8 +89,8 @@ export function UserBanner({
       <View style={styles.editButtonContainer}>
         <FontAwesomeIcon
           icon="camera"
-          size={24}
-          style={{color: colors.gray1 + '99'}}
+          size={12}
+          style={{color: colors.white}}
         />
       </View>
     </TouchableOpacity>
@@ -108,15 +108,14 @@ export function UserBanner({
 const styles = StyleSheet.create({
   editButtonContainer: {
     position: 'absolute',
-    width: 50,
-    height: 50,
-    top: '50%',
-    left: '50%',
-    borderRadius: 25,
+    width: 24,
+    height: 24,
+    bottom: 8,
+    right: 8,
+    borderRadius: 12,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: colors.gray5 + '99',
-    transform: [{translateX: -25}, {translateY: -25}],
+    backgroundColor: colors.gray5,
   },
   bannerImage: {
     width: '100%',