From dcc1b7cb70214325c26a2f02a6efbc91056f0992 Mon Sep 17 00:00:00 2001
From: Dank074 <torresefrain10@gmail.com>
Date: Thu, 12 Aug 2021 01:48:51 -0500
Subject: [PATCH] style fixes

---
 src/views/user-profile/UserProfileVew.scss    | 10 +++++
 .../FriendsContainerView.tsx                  | 38 ++++++++++++-------
 .../user-container/UserContainerView.tsx      |  2 +-
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/views/user-profile/UserProfileVew.scss b/src/views/user-profile/UserProfileVew.scss
index 4e8c2218..86945fc4 100644
--- a/src/views/user-profile/UserProfileVew.scss
+++ b/src/views/user-profile/UserProfileVew.scss
@@ -10,6 +10,11 @@
         .avatar-image {
             left: -10px;
         }
+
+        .add-friend {
+            margin: 5px;
+            margin-left: 10px;
+        }
     }
 
     .badge-container
@@ -60,6 +65,11 @@
                     text-decoration: underline;
                     width: 100%;
 
+                    .relationship-text
+                    {
+                        cursor: pointer;
+                    }
+
                     .avatar-image {
                         position: absolute;
                         width: 50px;
diff --git a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx
index c11ab7cb..5593da4f 100644
--- a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx
+++ b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx
@@ -1,4 +1,6 @@
+import { UserProfileComposer, UserRelationshipDataParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
+import { SendMessageHook } from '../../../../hooks';
 import { LocalizeText } from '../../../../utils';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
 import { FriendsContainerViewProps } from './FriendsContainerView.types';
@@ -7,28 +9,36 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
 {
     const { relationships = null, friendsCount = null } = props;
 
+    const OnUserClick = useCallback((user: UserRelationshipDataParser) =>
+    {
+        if(user)
+            SendMessageHook(new UserProfileComposer(user.userId));
+    }, []);
+    
     const RelationshipComponent = useCallback(({ type }) =>
     {
-        const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ? 
-                            Math.floor(Math.random() * relationships.get(type).length) : -1;
+        const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ?
+            Math.floor(Math.random() * relationships.get(type).length) : -1;
 
-        const randomUser =  randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null;
+        const randomUser = randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null;
 
-       return (
-                <div className="relationship-container d-flex">
-                    <i className={`icon icon-relationship-${type}`} />
-                    <span className="relationship">
+        return (
+            <div className="relationship-container d-flex">
+                <i className={`icon icon-relationship-${type}`} />
+                <span className="relationship">
+                    <span className="relationship-text" onClick={() => OnUserClick(randomUser)}>
                         {
                             randomUser ? randomUser.username : LocalizeText('extendedprofile.add.friends')
                         }
-                        {
-                            randomUser && 
-                            <AvatarImageView figure={randomUser.figure} headOnly={true} direction={4} />
-                        }
                     </span>
-                </div>
-            );
-    }, [relationships]);
+                    {
+                        randomUser &&
+                        <AvatarImageView figure={randomUser.figure} headOnly={true} direction={4} />
+                    }
+                </span>
+            </div>
+        );
+    }, [OnUserClick, relationships]);
 
     return (
         <div className="friends-container">
diff --git a/src/views/user-profile/views/user-container/UserContainerView.tsx b/src/views/user-profile/views/user-container/UserContainerView.tsx
index f2194408..28a5ad6b 100644
--- a/src/views/user-profile/views/user-container/UserContainerView.tsx
+++ b/src/views/user-profile/views/user-container/UserContainerView.tsx
@@ -21,7 +21,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
 
         if(requestSent) return (<span><i className="icon icon-pf-tick" />{LocalizeText('extendedprofile.friendrequestsent')}</span>);
 
-        return (<button className="btn btn-success btn-sm w-100">{LocalizeText('extendedprofile.addasafriend')}</button>)
+        return (<button className="btn btn-success btn-sm add-friend">{LocalizeText('extendedprofile.addasafriend')}</button>)
     }, [id, isFriend, requestSent]);
 
     return (