[TMA-429] Added new profile preview type for followers tiles (#130)

* added new profile preview type for followers tiles

* added border radius for avatar

3 files changed, 49 insertions, 2 deletions

diff --git a/src/components/profile/Followers.tsx b/src/components/profile/Followers.tsx
index c665603d..44ae4399 100644
--- a/src/components/profile/Followers.tsx
+++ b/src/components/profile/Followers.tsx
@@ -35,7 +35,7 @@ const Followers: React.FC<FollowersListProps> = ({
           style={styles.follower}
           key={profilePreview.id}
           {...{profilePreview}}
-          previewType={'Comment'}
+          previewType={'Follow'}
           screenType={screenType}
         />
       ))}
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 5567fa5a..93d1f415 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -203,6 +203,14 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.commentUsername;
       nameStyle = styles.commentName;
       break;
+    case 'Follow':
+      containerStyle = styles.followContainer;
+      avatarStyle = styles.followAvatar;
+      nameContainerStyle = styles.followNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.followUsername;
+      nameStyle = styles.followName;
+      break;
     default:
       containerStyle = styles.searchResultContainer;
       avatarStyle = styles.searchResultAvatar;
@@ -240,6 +248,12 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={usernameStyle}>{usernameToDisplay}</Text>
           </>
         )}
+        {previewType === 'Follow' && (
+          <>
+            <Text style={usernameStyle}>{usernameToDisplay}</Text>
+            <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
+          </>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -320,6 +334,33 @@ const styles = StyleSheet.create({
     color: 'white',
     textAlign: 'center',
   },
+  followContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 10,
+  },
+  followAvatar: {
+    height: 42,
+    width: 42,
+    marginRight: 15,
+    borderRadius: 20,
+  },
+  followNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+  },
+  followUsername: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#3C3C3C',
+    letterSpacing: 0.6,
+  },
+  followName: {
+    fontSize: 12,
+    fontWeight: '500',
+    color: '#6C6C6C',
+    letterSpacing: 0.5,
+  },
 });
 
 export default ProfilePreview;
diff --git a/src/types/types.ts b/src/types/types.ts
index 56ec0fd0..51837a91 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -86,7 +86,13 @@ export interface CommentType {
   commenter__username: string;
 }
 
-export type PreviewType = 'Comment' | 'Search' | 'Recent' | 'Discover Users';
+export type PreviewType =
+  | 'Comment'
+  | 'Search'
+  | 'Recent'
+  | 'Discover Users'
+  | 'Follow';
+
 
 export enum ScreenType {
   Profile,