From f69a274cd83241e1e75c3f0b5bf4b3b243fec8ef Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Mon, 22 Nov 2021 19:10:11 -0500
Subject: [PATCH] Updates

---
 src/App.scss                                  |  3 ++
 src/assets/styles/bootstrap/_variables.scss   |  2 +-
 .../user-profile-icon/UserProfileIconView.tsx |  6 +--
 .../FriendsGroupItemView.tsx                  |  7 ++--
 .../FriendsGroupItemView.types.ts             |  4 +-
 .../views/friends-list/FriendsListView.tsx    | 10 ++++-
 .../request-item/FriendsRequestItemView.tsx   | 37 -------------------
 .../FriendsRequestItemView.types.ts           |  5 ---
 .../views/user/InfoStandWidgetUserView.tsx    | 14 +++----
 9 files changed, 28 insertions(+), 60 deletions(-)
 delete mode 100644 src/views/friends/views/request-item/FriendsRequestItemView.tsx
 delete mode 100644 src/views/friends/views/request-item/FriendsRequestItemView.types.ts

diff --git a/src/App.scss b/src/App.scss
index 047843ef..d88b1aef 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -50,6 +50,9 @@ $chat-history-height: 300px;
 $friends-list-width: 250px;
 $friends-list-height: 300px;
 
+$help-width: 275px;
+$help-height: 450px;
+
 .nitro-app {
     width: 100%;
     height: 100%;
diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index 374a9abb..cc8c7a99 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -478,7 +478,7 @@ $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg") !d
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
+$link-color:                              $body-color !default;
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
diff --git a/src/layout/user-profile-icon/UserProfileIconView.tsx b/src/layout/user-profile-icon/UserProfileIconView.tsx
index d532570b..cb527364 100644
--- a/src/layout/user-profile-icon/UserProfileIconView.tsx
+++ b/src/layout/user-profile-icon/UserProfileIconView.tsx
@@ -5,9 +5,7 @@ import { UserProfileIconViewProps } from './UserProfileIconView.types';
 
 export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
 {
-    const { userId = 0, userName = null } = props;
-
-    const { className = '', children = null, ...rest } = props;
+    const { userId = 0, userName = null, className = '', children = null, ...rest  } = props;
 
     const getClassName = useMemo(() =>
     {
@@ -19,7 +17,7 @@ export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
     }, [ className ]);
 
     return (
-        <NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) }>
+        <NitroLayoutBase className={ getClassName } onClick={ event => GetUserProfile(userId) } { ... rest }>
             { children }
         </NitroLayoutBase>
     );
diff --git a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
index 1c7b2932..5e9d745e 100644
--- a/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.tsx
@@ -9,7 +9,7 @@ import { FriendsGroupItemViewProps } from './FriendsGroupItemView.types';
 
 export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
 {
-    const { friend = null } = props;
+    const { friend = null, selected = false, children = null, ...rest } = props;
 
     const [ isExpanded, setIsExpanded ] = useState<boolean>(false);
 
@@ -50,7 +50,7 @@ export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
     if(!friend) return null;
 
     return (
-        <div className="px-2 py-1 d-flex gap-1 align-items-center">
+        <NitroLayoutFlex className="px-2 py-1 align-items-center" gap={ 1 } { ...rest }>
             <UserProfileIconView userId={ friend.id } />
             <div>{ friend.name }</div>
             <NitroLayoutFlex className="ms-auto align-items-center" gap={ 1 }>
@@ -70,6 +70,7 @@ export const FriendsGroupItemView: FC<FriendsGroupItemViewProps> = props =>
                         <NitroLayoutBase className="nitro-friends-spritesheet icon-none cursor-pointer" onClick={ () => updateRelationship(MessengerFriend.RELATIONSHIP_NONE) } />
                     </> }
             </NitroLayoutFlex>
-        </div>
+            { children }
+        </NitroLayoutFlex>
     );
 }
diff --git a/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts b/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
index 345532b1..ed8ccd86 100644
--- a/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
+++ b/src/views/friends/views/friends-group-item/FriendsGroupItemView.types.ts
@@ -1,6 +1,8 @@
+import { NitroLayoutFlexProps } from '../../../../layout';
 import { MessengerFriend } from '../../common/MessengerFriend';
 
-export interface FriendsGroupItemViewProps
+export interface FriendsGroupItemViewProps extends NitroLayoutFlexProps
 {
     friend: MessengerFriend;
+    selected?: boolean;
 }
diff --git a/src/views/friends/views/friends-list/FriendsListView.tsx b/src/views/friends/views/friends-list/FriendsListView.tsx
index fcf0c9c5..7ceaa48d 100644
--- a/src/views/friends/views/friends-list/FriendsListView.tsx
+++ b/src/views/friends/views/friends-list/FriendsListView.tsx
@@ -1,6 +1,7 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
+import { MessengerFriend } from '../../common/MessengerFriend';
 import { FriendsGroupView } from '../friends-group/FriendsGroupView';
 import { FriendsRequestView } from '../friends-request/FriendsRequestView';
 import { FriendsSearchView } from '../friends-search/FriendsSearchView';
@@ -11,10 +12,15 @@ const MODE_SEARCH: number = 1;
 
 export const FriendsListView: FC<FriendsListViewProps> = props =>
 {
-    
     const { onlineFriends = [], offlineFriends = [], friendRequests = [], onCloseClick = null } = props;
+    const [ selectedFriends, setSelectedFriends ] = useState<MessengerFriend[]>([]);
     const [ mode, setMode ] = useState<number>(0);
 
+    useEffect(() =>
+    {
+        setSelectedFriends([]);
+    }, [ onlineFriends, offlineFriends ]);
+
     return (
         <NitroCardView className="nitro-friends" uniqueKey="nitro-friends">
             <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ onCloseClick } />
diff --git a/src/views/friends/views/request-item/FriendsRequestItemView.tsx b/src/views/friends/views/request-item/FriendsRequestItemView.tsx
deleted file mode 100644
index 50c7d243..00000000
--- a/src/views/friends/views/request-item/FriendsRequestItemView.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { AcceptFriendMessageComposer, DeclineFriendMessageComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback } from 'react';
-import { SendMessageHook } from '../../../../hooks';
-import { UserProfileIconView } from '../../../../layout';
-import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
-
-export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
-{
-    const { request = null } = props;
-
-    const accept = useCallback(() =>
-    {
-        if(!request) return;
-        
-        SendMessageHook(new AcceptFriendMessageComposer(request.id));
-    }, [ request ]);
-
-    const decline = useCallback(() =>
-    {
-        if(!request) return;
-        
-        SendMessageHook(new DeclineFriendMessageComposer(false, request.id));
-    }, [ request ]);
-
-    if(!request) return null;
-
-    return (
-        <div className="px-2 py-1 d-flex gap-1 align-items-center">
-            <UserProfileIconView userId={ request.id } />
-            <div>{ request.name }</div>
-            <div className="ms-auto d-flex align-items-center gap-1">
-               <i className="icon icon-accept cursor-pointer" onClick={ accept } />
-               <i className="icon icon-deny cursor-pointer" onClick={ decline } />
-            </div>
-        </div>
-    );
-};
diff --git a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts b/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
deleted file mode 100644
index bc01f938..00000000
--- a/src/views/friends/views/request-item/FriendsRequestItemView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MessengerRequest } from './../../common/MessengerRequest';
-export interface FriendsRequestItemViewProps
-{
-    request: MessengerRequest;
-}
diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
index 5228d30b..26465faa 100644
--- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
+++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
@@ -4,7 +4,7 @@ import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from
 import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
-import { UserProfileIconView } from '../../../../../../layout';
+import { NitroLayoutFlex, UserProfileIconView } from '../../../../../../layout';
 import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
 import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
 import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView';
@@ -55,7 +55,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
     CreateEventDispatcherHook(RoomSessionUserBadgesEvent.RSUBE_BADGES, eventDispatcher, onRoomSessionUserBadgesEvent);
 
-    const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
+    const onUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) =>
     {
         const parser = event.getParser();
 
@@ -63,7 +63,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
             setUserRelationships(parser);
     }, [userData]);
 
-    CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent);
+    CreateMessageHook(RelationshipStatusInfoEvent, onUserRelationshipsEvent);
 
     useEffect(() =>
     {
@@ -73,7 +73,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
         SendMessageHook(new UserRelationshipsComposer(userData.webID));
 
         return () => 
-{
+        {
             setBadges([]);
             setUserRelationships(null);
         }
@@ -85,10 +85,10 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
         <div className="d-flex flex-column nitro-card nitro-infostand rounded">
             <div className="container-fluid content-area overflow-visible">
                 <div className="d-flex justify-content-between align-items-center">
-                    <div className="small text-wrap">
+                    <NitroLayoutFlex className="align-items-center">
                         <UserProfileIconView userId={ userData.webID } />
-                        { userData.name }
-                    </div>
+                        <span className="small text-wrap">{ userData.name }</span>
+                    </NitroLayoutFlex>
                     <i className="fas fa-times cursor-pointer" onClick={ close }></i>
                 </div>
                 <hr className="m-0 my-1" />