style fixes

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;

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,6 +9,12 @@ 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) ?
@@ -18,9 +26,11 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
             <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')
                         }
+                    </span>
                     {
                         randomUser &&
                         <AvatarImageView figure={randomUser.figure} headOnly={true} direction={4} />
@@ -28,7 +38,7 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
                 </span>
             </div>
         );
-    }, [relationships]);
+    }, [OnUserClick, relationships]);
 
     return (
         <div className="friends-container">

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 (