[TMA - 457]Change followers to friends (#149)

* One commit to replace followers with friends

* Move block unblock to drawer and some cosmetic changes

* Options to edit own profile when viewing

* Changes for University Class

* Small fix

* Made ProfileOnboarding a scroll view and other small changes

* Small fix

* Small fix thanks to ivan and tanmay

* Add ?

11 files changed, 243 insertions, 132 deletions

diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index f533e42d..38e4d597 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -63,7 +63,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
 
   const onNotificationTap = async () => {
     switch (notification_type) {
-      case 'FLO':
+      case 'FRD':
         if (!userXInStore(state, screenType, id)) {
           await fetchUserX(
             dispatch,
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 17713ea3..a6c3abdc 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -33,10 +33,10 @@ import ProfileHeader from './ProfileHeader';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {
-  followUnfollowUser,
+  friendUnfriendUser,
   blockUnblockUser,
-  loadFollowData,
-  updateUserXFollowersAndFollowing,
+  loadFriendsData,
+  updateUserXFriends,
   updateMomentCategories,
 } from '../../store/actions';
 import {
@@ -49,7 +49,6 @@ import {
 import {Cover} from '.';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useNavigation} from '@react-navigation/native';
-import {deleteMomentCategories} from '../../services';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -64,9 +63,13 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
 
-  const {followers = EMPTY_PROFILE_PREVIEW_LIST} = userXId
+  const {friends = EMPTY_PROFILE_PREVIEW_LIST} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.follow);
+    : useSelector((state: RootState) => state.friends);
+
+  const {
+    friends: friendsLoggedInUser = EMPTY_PROFILE_PREVIEW_LIST,
+  } = useSelector((state: RootState) => state.friends);
 
   const {moments = EMPTY_MOMENTS_LIST} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
@@ -92,7 +95,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
     new Map(),
   );
-  const [isFollowed, setIsFollowed] = useState<boolean>(false);
+  const [isFriend, setIsFriend] = useState<boolean>(false);
   const [isBlocked, setIsBlocked] = useState<boolean>(false);
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
@@ -143,16 +146,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   }, [createImagesMap]);
 
   /**
-   * This hook is called on load of profile and when you update the followers list.
+   * This hook is called on load of profile and when you update the friends list.
    */
   useEffect(() => {
-    const isActuallyFollowed = followers.some(
-      (follower) => follower.username === loggedInUser.username,
+    const isActuallyAFriend = friendsLoggedInUser.some(
+      (friend) => friend.username === user.username,
     );
-    if (isFollowed != isActuallyFollowed) {
-      setIsFollowed(isActuallyFollowed);
+    if (isFriend != isActuallyAFriend) {
+      setIsFriend(isActuallyAFriend);
     }
-  }, [followers]);
+  }, [friends]);
 
   useEffect(() => {
     const isActuallyBlocked = blockedUsers.some(
@@ -164,7 +167,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   }, [blockedUsers, user]);
 
   /**
-   * The object returned by this method is added to the list of blocked / followed users by the reducer.
+   * The object returned by this method is added to the list of blocked / friended users by the reducer.
    * Which helps us prevent an extra api call to the backend just to fetch a user.
    */
   const getUserAsProfilePreviewType = (
@@ -181,28 +184,28 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   };
 
   /**
-   * Handles a click on the follow / unfollow button.
-   * followUnfollowUser takes care of updating the following list for loggedInUser
-   * updateUserXFollowersAndFollowing updates followers and following list for the followed user.
+   * Handles a click on the friend / unfriend button.
+   * friendUnfriendUser takes care of updating the friends list for loggedInUser
+   * updateUserXFriends updates friends list for the new friend.
    */
 
-  const handleFollowUnfollow = async () => {
+  const handleFriendUnfriend = async () => {
     await dispatch(
-      followUnfollowUser(
+      friendUnfriendUser(
         loggedInUser,
         getUserAsProfilePreviewType(user, profile),
-        isFollowed,
+        isFriend,
       ),
     );
-    await dispatch(updateUserXFollowersAndFollowing(user.userId, state));
+    await dispatch(updateUserXFriends(user.userId, state));
   };
 
   /**
    * Handles a click on the block / unblock button.
-   * loadFollowData updates followers / following list for the logged in user
-   * updateUserXFollowersAndFollowing updates followers and following list for the followed user.
+   * loadFriends updates friends list for the logged in user
+   * updateUserXFriends updates friends list for the user.
    */
-  const handleBlockUnblock = async () => {
+  const handleBlockUnblock = async (callback?: () => void) => {
     await dispatch(
       blockUnblockUser(
         loggedInUser,
@@ -210,8 +213,11 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
         isBlocked,
       ),
     );
-    await dispatch(loadFollowData(loggedInUser.userId));
-    await dispatch(updateUserXFollowersAndFollowing(user.userId, state));
+    await dispatch(loadFriendsData(loggedInUser.userId));
+    await dispatch(updateUserXFriends(user.userId, state));
+    if (callback) {
+      callback();
+    }
   };
 
   /**
@@ -272,16 +278,18 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       }>
       <Cover {...{userXId, screenType}} />
       <ProfileCutout />
-      <ProfileHeader {...{userXId, screenType}} />
+      <ProfileHeader
+        {...{userXId, screenType, handleBlockUnblock, isBlocked}}
+      />
       <ProfileBody
         {...{
           onLayout,
           userXId,
           screenType,
-          isFollowed,
-          handleFollowUnfollow,
-          isBlocked,
+          isFriend,
+          handleFriendUnfriend,
           handleBlockUnblock,
+          isBlocked,
         }}
       />
       <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Friends.tsx
index 44ae4399..23ce28fe 100644
--- a/src/components/profile/Followers.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,21 +1,16 @@
 import React from 'react';
-import {View, StyleSheet, ViewProps, Text} from 'react-native';
+import {View, StyleSheet, Text} from 'react-native';
 import {ProfilePreviewType, ScreenType} from '../../types';
 import {ProfilePreview} from '..';
 import {useNavigation} from '@react-navigation/native';
 import {Button} from 'react-native-elements';
 
-interface FollowersListProps {
+interface FriendsProps {
   result: Array<ProfilePreviewType>;
-  sectionTitle: string;
   screenType: ScreenType;
 }
 
-const Followers: React.FC<FollowersListProps> = ({
-  result,
-  sectionTitle,
-  screenType,
-}) => {
+const Friends: React.FC<FriendsProps> = ({result, screenType}) => {
   const navigation = useNavigation();
   return (
     <>
@@ -28,14 +23,14 @@ const Followers: React.FC<FollowersListProps> = ({
             navigation.pop();
           }}
         />
-        <Text style={styles.title}>{sectionTitle}</Text>
+        <Text style={styles.title}>Friends</Text>
       </View>
       {result.map((profilePreview) => (
         <ProfilePreview
-          style={styles.follower}
+          style={styles.friend}
           key={profilePreview.id}
           {...{profilePreview}}
-          previewType={'Follow'}
+          previewType={'Friend'}
           screenType={screenType}
         />
       ))}
@@ -45,7 +40,7 @@ const Followers: React.FC<FollowersListProps> = ({
 
 const styles = StyleSheet.create({
   header: {flexDirection: 'row'},
-  follower: {
+  friend: {
     marginVertical: 10,
   },
   title: {
@@ -67,4 +62,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Followers;
+export default Friends;
diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FriendsCount.tsx
index 95b953dc..91d54cab 100644
--- a/src/components/profile/FollowCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -5,32 +5,23 @@ import {useNavigation} from '@react-navigation/native';
 import {RootState} from '../../store/rootReducer';
 import {useSelector} from 'react-redux';
 import {ScreenType} from '../../types';
-import {EMPTY_PROFILE_PREVIEW_LIST} from '../../store/initialStates';
 
-interface FollowCountProps extends ViewProps {
-  mode: 'followers' | 'following';
+interface FriendsCountProps extends ViewProps {
   userXId: string | undefined;
   screenType: ScreenType;
 }
 
-const FollowCount: React.FC<FollowCountProps> = ({
+const FriendsCount: React.FC<FriendsCountProps> = ({
   style,
-  mode,
   userXId,
   screenType,
 }) => {
-  const {
-    followers = EMPTY_PROFILE_PREVIEW_LIST,
-    following = EMPTY_PROFILE_PREVIEW_LIST,
-  } = userXId
+  const count = (userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.follow);
+    : useSelector((state: RootState) => state.friends)
+  )?.friends.length;
 
-  const isFollowers = mode === 'followers';
-  const count = isFollowers ? followers.length : following.length;
-
-  const navigation = useNavigation();
-  const displayed: string =
+  const displayedCount: string =
     count < 5e3
       ? `${count}`
       : count < 1e5
@@ -38,20 +29,21 @@ const FollowCount: React.FC<FollowCountProps> = ({
       : count < 1e6
       ? `${(count / 1e3).toFixed(0)}k`
       : `${count / 1e6}m`;
+
+  const navigation = useNavigation();
+
   return (
     <TouchableOpacity
+      style={{right: '20%'}}
       onPress={() =>
-        navigation.push('FollowersListScreen', {
-          isFollowers,
+        navigation.push('FriendsListScreen', {
           userXId,
           screenType,
         })
       }>
       <View style={[styles.container, style]}>
-        <Text style={styles.count}>{displayed}</Text>
-        <Text style={styles.label}>
-          {isFollowers ? 'Followers' : 'Following'}
-        </Text>
+        <Text style={styles.count}>{displayedCount}</Text>
+        <Text style={styles.label}>Friends</Text>
       </View>
     </TouchableOpacity>
   );
@@ -66,9 +58,9 @@ const styles = StyleSheet.create({
     fontSize: 18,
   },
   label: {
-    fontWeight: '400',
+    fontWeight: '500',
     fontSize: 16,
   },
 });
 
-export default FollowCount;
+export default FriendsCount;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 85634daa..70f98a4b 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -9,18 +9,18 @@ import {NO_PROFILE} from '../../store/initialStates';
 
 interface ProfileBodyProps {
   onLayout: (event: LayoutChangeEvent) => void;
-  isFollowed: boolean;
+  isFriend: boolean;
   isBlocked: boolean;
-  handleFollowUnfollow: Function;
-  handleBlockUnblock: Function;
+  handleFriendUnfriend: () => void;
+  handleBlockUnblock: () => void;
   userXId: string | undefined;
   screenType: ScreenType;
 }
 const ProfileBody: React.FC<ProfileBodyProps> = ({
   onLayout,
-  isFollowed,
+  isFriend,
   isBlocked,
-  handleFollowUnfollow,
+  handleFriendUnfriend,
   handleBlockUnblock,
   userXId,
   screenType,
@@ -48,21 +48,26 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
             );
           }}>{`${website}`}</Text>
       )}
-      {userXId && (
+
+      {userXId && isBlocked && (
         <View style={styles.toggleButtonContainer}>
-          {!isBlocked && (
-            <ToggleButton
-              toggleState={isFollowed}
-              handleToggle={handleFollowUnfollow}
-              buttonType={TOGGLE_BUTTON_TYPE.FOLLOW_UNFOLLOW}
-            />
-          )}
           <ToggleButton
             toggleState={isBlocked}
             handleToggle={handleBlockUnblock}
             buttonType={TOGGLE_BUTTON_TYPE.BLOCK_UNBLOCK}
           />
         </View>
+
+      )}
+      {userXId && !isBlocked && (
+        <View style={styles.toggleButtonContainer}>
+          <ToggleButton
+            toggleState={isFriend}
+            handleToggle={handleFriendUnfriend}
+            buttonType={TOGGLE_BUTTON_TYPE.FRIEND_UNFRIEND}
+          />
+        </View>
+
       )}
     </View>
   );
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 0eb2d469..5c14b374 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -1,20 +1,31 @@
 import React, {useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
+import {UniversityIcon} from '.';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
-import FollowCount from './FollowCount';
+import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
 
 type ProfileHeaderProps = {
   userXId: string | undefined;
   screenType: ScreenType;
+  isBlocked: boolean;
+  handleBlockUnblock: () => void;
 };
 
-const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
-  const {profile: {name = ''} = {}} = userXId
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  userXId,
+  screenType,
+  isBlocked,
+  handleBlockUnblock,
+}) => {
+  const {
+    profile: {name = '', university_class = 2021} = {},
+    user: {username: userXName = ''},
+  } = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
 
@@ -22,12 +33,15 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
 
   return (
     <View style={styles.container}>
-      {!userXId && (
-        <ProfileMoreInfoDrawer
-          isOpen={drawerVisible}
-          setIsOpen={setDrawerVisible}
-        />
-      )}
+      <ProfileMoreInfoDrawer
+        isOpen={drawerVisible}
+        isBlocked={isBlocked}
+        handleBlockUnblock={handleBlockUnblock}
+        userXId={userXId}
+        userXName={userXName}
+        setIsOpen={setDrawerVisible}
+      />
+
       <View style={styles.row}>
         <Avatar
           style={styles.avatar}
@@ -36,18 +50,17 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({userXId, screenType}) => {
         />
         <View style={styles.header}>
           <Text style={styles.name}>{name}</Text>
-          <View style={styles.row}>
-            <FollowCount
-              style={styles.follows}
-              mode="followers"
+
+          <View style={styles.friendsAndUniversity}>
+            <FriendsCount
+              style={styles.friends}
               screenType={screenType}
               userXId={userXId}
             />
-            <FollowCount
-              style={styles.follows}
-              mode="following"
-              screenType={screenType}
-              userXId={userXId}
+            <UniversityIcon
+              style={styles.university}
+              university="brown"
+              university_class={university_class}
             />
           </View>
         </View>
@@ -66,8 +79,8 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   header: {
+    flexDirection: 'column',
     justifyContent: 'center',
-    alignItems: 'center',
     marginTop: SCREEN_HEIGHT / 40,
     marginLeft: SCREEN_WIDTH / 10,
     marginBottom: SCREEN_HEIGHT / 50,
@@ -77,13 +90,19 @@ const styles = StyleSheet.create({
     left: '10%',
   },
   name: {
+    marginHorizontal: '20%',
     fontSize: 20,
-    fontWeight: '700',
+    fontWeight: '500',
+    alignSelf: 'center',
     marginBottom: SCREEN_HEIGHT / 80,
   },
-  follows: {
-    marginHorizontal: SCREEN_HEIGHT / 50,
+  friends: {
+    marginRight: SCREEN_HEIGHT / 80,
+  },
+  university: {
+    marginLeft: SCREEN_HEIGHT / 50,
   },
+  friendsAndUniversity: {flexDirection: 'row', flex: 1, marginLeft: '20%'},
 });
 
 export default ProfileHeader;
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 80ad9bba..76f0f27f 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -12,14 +12,19 @@ import {GenericMoreInfoDrawer} from '../common';
 interface ProfileMoreInfoDrawerProps {
   isOpen: boolean;
   setIsOpen: (visible: boolean) => void;
+  userXId: string | undefined;
+  userXName: string;
+  isBlocked: boolean;
+  handleBlockUnblock: (callback?: () => void) => void;
 }
 
 const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
-  const {setIsOpen} = props;
   const navigation = useNavigation();
+  const {setIsOpen, userXId, isBlocked, handleBlockUnblock, userXName} = props;
   const {
     user: {userId, username},
   } = useSelector((state: RootState) => state.user);
+  const isOwnProfile = !userXId || userXName === username;
 
   const goToEditProfile = () => {
     navigation.push('EditProfile', {
@@ -29,6 +34,10 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
     setIsOpen(false);
   };
 
+  const onBlockUnblock = () => {
+    handleBlockUnblock(() => setIsOpen(false));
+  };
+
   return (
     <>
       <TouchableOpacity
@@ -38,14 +47,29 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
         }}>
         <MoreIcon height={30} width={30} color={TAGG_DARK_BLUE} />
       </TouchableOpacity>
-      <GenericMoreInfoDrawer
-        {...props}
-        showIcons={true}
-        textColor={'black'}
-        buttons={[
-          ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
-        ]}
-      />
+      {!isOwnProfile ? (
+        <GenericMoreInfoDrawer
+          {...props}
+          showIcons={false}
+          textColor={'red'}
+          buttons={[
+            [
+              (isBlocked ? 'Unblock' : 'Block') + ` ${userXName}`,
+              onBlockUnblock,
+              undefined,
+            ],
+          ]}
+        />
+      ) : (
+        <GenericMoreInfoDrawer
+          {...props}
+          showIcons={true}
+          textColor={'black'}
+          buttons={[
+            ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
+          ]}
+        />
+      )}
     </>
   );
 };
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 49c79e2d..bd015811 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -28,7 +28,7 @@ const NO_USER: UserType = {
 };
 
 /**
- * This component returns user's profile picture followed by username as a touchable component.
+ * This component returns user's profile picture friended by username as a touchable component.
  * What happens when someone clicks on this component is partly decided by the prop isComment.
  * If isComment is true then it means that we are not displaying this tile as a part of search results.
  * And hence we do not cache the search results.
@@ -189,13 +189,13 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.commentUsername;
       nameStyle = styles.commentName;
       break;
-    case 'Follow':
-      containerStyle = styles.followContainer;
-      avatarStyle = styles.followAvatar;
-      nameContainerStyle = styles.followNameContainer;
+    case 'Friend':
+      containerStyle = styles.friendContainer;
+      avatarStyle = styles.friendAvatar;
+      nameContainerStyle = styles.friendNameContainer;
       usernameToDisplay = '@' + username;
-      usernameStyle = styles.followUsername;
-      nameStyle = styles.followName;
+      usernameStyle = styles.friendUsername;
+      nameStyle = styles.friendName;
       break;
     default:
       containerStyle = styles.searchResultContainer;
@@ -233,7 +233,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={usernameStyle}>{usernameToDisplay}</Text>
           </>
         )}
-        {previewType === 'Follow' && (
+        {previewType === 'Friend' && (
           <>
             <Text style={usernameStyle}>{usernameToDisplay}</Text>
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
@@ -319,28 +319,28 @@ const styles = StyleSheet.create({
     color: 'white',
     textAlign: 'center',
   },
-  followContainer: {
+  friendContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     marginVertical: 10,
   },
-  followAvatar: {
+  friendAvatar: {
     height: 42,
     width: 42,
     marginRight: 15,
     borderRadius: 20,
   },
-  followNameContainer: {
+  friendNameContainer: {
     justifyContent: 'space-evenly',
     alignSelf: 'stretch',
   },
-  followUsername: {
+  friendUsername: {
     fontSize: 14,
     fontWeight: '700',
     color: '#3C3C3C',
     letterSpacing: 0.6,
   },
-  followName: {
+  friendName: {
     fontSize: 12,
     fontWeight: '500',
     color: '#6C6C6C',
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 88eb9f8a..df7380d7 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
-import {getToggleButtonText, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
 
 type ToggleButtonProps = {
   toggleState: boolean;
@@ -15,9 +15,15 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
   handleToggle,
   buttonType,
 }) => {
+  const buttonColor = toggleState
+    ? styles.buttonColorToggled
+    : styles.buttonColor;
+  const textColor = toggleState ? styles.textColorToggled : styles.textColor;
   return (
-    <TouchableOpacity style={styles.button} onPress={() => handleToggle()}>
-      <Text style={styles.text}>
+    <TouchableOpacity
+      style={[styles.button, buttonColor]}
+      onPress={() => handleToggle()}>
+      <Text style={[styles.text, textColor]}>
         {getToggleButtonText(buttonType, toggleState)}
       </Text>
     </TouchableOpacity>
@@ -30,15 +36,18 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.25,
     height: SCREEN_WIDTH * 0.1,
-    borderRadius: 8,
     borderColor: TAGG_TEXT_LIGHT_BLUE,
-    backgroundColor: 'white',
     borderWidth: 3,
     marginRight: '2%',
   },
   text: {
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
   },
+  buttonColor: {
+    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+  },
+  textColor: {color: 'white'},
+  buttonColorToggled: {backgroundColor: 'white'},
+  textColorToggled: {color: TAGG_TEXT_LIGHT_BLUE},
 });
 export default ToggleButton;
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
new file mode 100644
index 00000000..15c23715
--- /dev/null
+++ b/src/components/profile/UniversityIcon.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {StyleSheet, ViewProps} from 'react-native';
+import {Image, Text, View} from 'react-native-animatable';
+import {getUniversityClass} from '../../utils';
+
+export interface UniversityIconProps extends ViewProps {
+  university: string;
+  university_class: number;
+}
+
+/**
+ * Component to display university icon and class
+ */
+const UniversityIcon: React.FC<UniversityIconProps> = ({
+  style,
+  university,
+  university_class,
+}) => {
+  var universityIcon;
+  switch (university) {
+    case 'brown':
+      universityIcon = require('../../assets/universities/brown.png');
+      break;
+    default:
+      universityIcon = require('../../assets/universities/brown.png');
+      break;
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <Image source={universityIcon} style={styles.icon} />
+      <Text style={styles.univClass}>
+        {getUniversityClass(university_class)}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    marginBottom: '10%',
+  },
+  univClass: {
+    fontSize: 15,
+    fontWeight: '500',
+  },
+  icon: {
+    alignSelf: 'center',
+    width: 20,
+    height: 22.5,
+  },
+});
+
+export default UniversityIcon;
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index dc3872b1..260f4217 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -4,6 +4,7 @@ export {default as ProfileCutout} from './ProfileCutout';
 export {default as ProfileBody} from './ProfileBody';
 export {default as ProfileHeader} from './ProfileHeader';
 export {default as ProfilePreview} from './ProfilePreview';
-export {default as Followers} from './Followers';
+export {default as Friends} from './Friends';
 export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer';
 export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer';
+export {default as UniversityIcon} from './UniversityIcon';