Add 'you are a member' line to scene headers and small other tweaks

2 files changed, 27 insertions, 5 deletions

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 61e18c2b6..536a37cb2 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -143,7 +143,9 @@ export const ProfileHeader = observer(function ProfileHeader({
           </TouchableOpacity>
         </View>
         <View style={styles.displayNameLine}>
-          <Text style={styles.displayName}>{view.displayName}</Text>
+          <Text style={styles.displayName}>
+            {view.displayName || view.handle}
+          </Text>
         </View>
         <View style={styles.handleLine}>
           {view.isScene ? (
@@ -196,19 +198,31 @@ export const ProfileHeader = observer(function ProfileHeader({
           </View>
         </View>
         {view.description ? (
-          <Text style={[s.mb5, s.f16, s['lh16-1.3']]}>{view.description}</Text>
+          <Text style={styles.description} numberOfLines={3}>
+            {view.description}
+          </Text>
         ) : undefined}
         {view.isScene && view.creator ? (
           <View style={styles.relationshipsLine}>
-            <Text style={[s.mr2, s.gray5]}>Created by</Text>
+            <FontAwesomeIcon icon={['far', 'user']} style={[s.gray5, s.mr5]} />
+            <Text style={[s.mr2, s.gray5, s.f15]}>Created by</Text>
             <UserInfoText
-              style={[s.blue3]}
+              style={[s.blue3, s.f15]}
               did={view.creator}
               prefix="@"
               asLink
             />
           </View>
         ) : undefined}
+        {view.isScene && view.myState.member ? (
+          <View style={styles.relationshipsLine}>
+            <FontAwesomeIcon
+              icon={['far', 'circle-check']}
+              style={[s.gray5, s.mr5]}
+            />
+            <Text style={[s.mr2, s.gray5, s.f15]}>You are a member</Text>
+          </View>
+        ) : undefined}
       </View>
     </View>
   )
@@ -315,9 +329,15 @@ const styles = StyleSheet.create({
     fontSize: 15,
   },
 
+  description: {
+    marginBottom: 8,
+    fontSize: 16,
+    lineHeight: 20.8, // 1.3 of 16px
+  },
+
   relationshipsLine: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginBottom: 10,
+    marginBottom: 5,
   },
 })
diff --git a/src/view/index.ts b/src/view/index.ts
index 92757f352..fcae1491a 100644
--- a/src/view/index.ts
+++ b/src/view/index.ts
@@ -16,6 +16,7 @@ import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell'
 import {faBookmark} from '@fortawesome/free-solid-svg-icons/faBookmark'
 import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark'
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'
+import {faCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck'
 import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser'
 import {faClone} from '@fortawesome/free-regular-svg-icons/faClone'
 import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
@@ -67,6 +68,7 @@ export function setup() {
     faBookmark,
     farBookmark,
     faCheck,
+    faCircleCheck,
     faCircleUser,
     faClone,
     faComment,