feat: ✨ Improve profile popup modal design and add user bio.

Nerimity · Nov 3, 2023 · 1253b8f · 1253b8f
1 parent 1d5c859
commit 1253b8f
Showing 1 changed file with 50 additions and 8 deletions.
diff --git a/src/components/context-menu/ProfileContextMenu.tsx b/src/components/context-menu/ProfileContextMenu.tsx
@@ -9,6 +9,10 @@ import Avatar from '../ui/Avatar';
 import {RawUser} from '../../store/RawData';
 import {User} from '../../store/users';
 import {UserDetails, fetchUser} from '../../services/UserService';
+import UserPresence from '../UserPresence';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import Colors from '../ui/Colors';
+import Markup from '../Markup';
 
 export const ProfileContextMenu = observer(
   (props: {close: () => void; userId: string; user?: RawUser | User}) => {
@@ -27,6 +31,12 @@ export const ProfileContextMenu = observer(
         {user ? (
           <View style={styles.modalContainer}>
             <BannerArea user={user} />
+            {userDetails?.profile?.bio && (
+              <>
+                <Heading icon="info" title="Bio" />
+                <Markup text={userDetails?.profile?.bio} inline />
+              </>
+            )}
           </View>
         ) : (
           <Text>Loading...</Text>
@@ -36,32 +46,64 @@ export const ProfileContextMenu = observer(
   },
 );
 
+const Heading = (props: {icon: string; title: string}) => {
+  return (
+    <View style={styles.headingContainer}>
+      <Icon name={props.icon} color={Colors.primaryColor} />
+      <Text style={styles.headingTitle}>{props.title}</Text>
+    </View>
+  );
+};
+
 function BannerArea(props: {user: RawUser | User}) {
   return (
     <View style={styles.bannerOuterContainer}>
       <Banner margin={0} user={props.user!}>
         <View style={styles.bannerContainer}>
           <Avatar user={props.user!} size={80} />
-          <Text style={styles.usernameAndTag}>
-            {props.user?.username}
-            <Text style={styles.userTag}>:{props.user?.tag}</Text>
-          </Text>
+          <View style={styles.bannerDetails}>
+            <Text style={styles.usernameAndTag}>
+              {props.user?.username}
+              <Text style={styles.userTag}>:{props.user?.tag}</Text>
+            </Text>
+            <UserPresence showOffline userId={props.user.id} animate />
+          </View>
         </View>
       </Banner>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  modalContainer: {},
+  modalContainer: {
+    minHeight: 300,
+  },
   bannerOuterContainer: {
     marginBottom: 60,
   },
-  bannerContainer: {marginTop: 'auto', marginBottom: -60, marginLeft: 15},
+  bannerContainer: {
+    marginTop: 'auto',
+    marginBottom: -60,
+    marginLeft: 14,
+    flexDirection: 'row',
+  },
+  bannerDetails: {
+    marginTop: 20,
+    marginLeft: 8,
+    flexWrap: 'wrap',
+    flex: 1,
+  },
   usernameAndTag: {
-    marginTop: 5,
-    marginLeft: -10,
     fontSize: 16,
   },
   userTag: {color: 'rgba(255,255,255,0.4)'},
+  headingContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  headingTitle: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
 });