Updates

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%;

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;

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 { userId = 0, userName = null, className = '', children = null, ...rest  } = props;
-
-    const { 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>
     );

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>
     );
 }

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;
 }

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 } />

src/views/friends/views/request-item/FriendsRequestItemView.tsx

@@ -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>
-    );
-};

src/views/friends/views/request-item/FriendsRequestItemView.types.ts

@@ -1,5 +0,0 @@
-import { MessengerRequest } from './../../common/MessengerRequest';
-export interface FriendsRequestItemViewProps
-{
-    request: MessengerRequest;
-}

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(() =>
     {
@@ -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 }
+                        <span className="small text-wrap">{ userData.name }</span>
-                    </div>
+                    </NitroLayoutFlex>
                     <i className="fas fa-times cursor-pointer" onClick={ close }></i>
                 </div>
                 <hr className="m-0 my-1" />