Redesign Friends bar and Staff Alert

src/components/friends/FriendsView.scss

@@ -129,19 +129,38 @@
             margin-bottom:21px;
         }
 		
+		&.friend-bar-search-item-active {
+            margin-bottom:10.5em;
+			background-color: #b69b83;
+			border: 2px solid #e2c1a3;
+        }
+
         .friend-bar-item-head {
             &.avatar {
-                top: -30px;
-                left: -30px;
+                top: -31px;
+                left: -25px;
             }
             &.group {
-                top: -5px;
-                left: -5px;
+                top: -31px;
+                left: -25px;
             }
 
             pointer-events: none;
         }
 		
+		.friend-bar-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        //    white-space: nowrap;
+            font-size: 13px;
+            line-height: 1;
+            color: #fff;
+        }
+		
+		.font-size-friend {
+				font-size: 12px;
+			}
+		
 		.avatar-image {
                 max-height: 80px;
             }

src/components/friends/views/friends-bar/FriendBarItemView.tsx

@@ -1,7 +1,7 @@
-import { MouseEventType } from '@nitrots/nitro-renderer';
+import { FindNewFriendsMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api';
-import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
+import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer  } from '../../../../api';
+import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
 
 export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@@ -33,9 +33,15 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     if(!friend)
     {
 		return (
-            <div ref={ elementRef } className="btn btn-friendsgen friend-bar-item friend-bar-search">
+            <div ref={ elementRef } className={ 'btn btn-friendsgen friend-bar-item friend-bar-search ' + (isVisible ? 'friend-bar-search-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
                 <div className="friend-bar-item-head position-absolute"/>
-                <div className="text-truncate">{ LocalizeText('friend.bar.find.title') }</div>
+                <div className="friend-bar-text">{ LocalizeText('friend.bar.find.title') }</div>
+                { isVisible &&
+                    <div className="search-content mt-3">
+						<div className="bg-white text-black px-1 py-1 font-size-friend">{ LocalizeText('friend.bar.find.text') }</div>
+                        <Button className="mt-2 mb-4" variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
+                    </div>
+                }
             </div>
         );
     }
@@ -44,8 +50,11 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
         <div ref={ elementRef } className={ 'btn btn-friendsgensuccess friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
             <div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
                 { (friend.id > 0) && <LayoutAvatarImageView headOnly={ !isVisible } figure={ friend.figure } direction={ 2 } /> }
-                { (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> } 
+                <LayoutAvatarImageView headOnly={true} figure={
+					friend.id > 0 ? friend.figure : (friend.id <= 0 && friend.figure === 'ADM') ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : friend.figure
+					} isgroup={friend.id <= 0 ? 1 : 0} direction={friend.id > 0 ? 2 : 3} />
             </div>
+			
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
             <div className="d-flex justify-content-between">

src/components/friends/views/friends-list/FriendsListView.tsx

@@ -3,11 +3,11 @@ import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalizeText, MessengerFriend, SendMessageComposer } from '../../../../api';
 import { Button, Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
+import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
+import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
 import { FriendsRemoveConfirmationView } from './FriendsListRemoveConfirmationView';
 import { FriendsRoomInviteView } from './FriendsListRoomInviteView';
 import { FriendsSearchView } from './FriendsListSearchView';
-import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
-import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
 
 export const FriendsListView: FC<{}> = props =>
 {

src/components/friends/views/messenger/FriendsMessengerView.tsx

@@ -114,18 +114,16 @@ export const FriendsMessengerView: FC<{}> = props =>
                         <Text bold>{ LocalizeText('toolbar.icon.label.messenger') }</Text>
                         <Column fit overflow="auto">
                             <Column>
-                                { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread =>
-                                {
+                                { visibleThreads && (visibleThreads.length > 0) && visibleThreads.map(thread => {
                                     return (
                                         <LayoutGridItem key={ thread.threadId } itemActive={ (activeThread === thread) } onClick={ event => setActiveThreadId(thread.threadId) }>
                                             { thread.unread &&
                                             <LayoutItemCountView count={ thread.unreadCount } /> }
                                             <Flex fullWidth alignItems="center" gap={ 1 }>
 												<Flex alignItems="center" className="friend-head px-1">
-                                                    { (thread.participant.id > 0) &&
-                                                    <LayoutAvatarImageView figure={ thread.participant.figure } headOnly={ true } direction={ 3 } /> }
-                                                    { (thread.participant.id <= 0) &&
-                                                    <LayoutBadgeImageView isGroup={ true } badgeCode={ thread.participant.figure } /> }
+													<LayoutAvatarImageView figure={ 
+														thread.participant.id > 0 ? thread.participant.figure : thread.participant.id <= 0 && thread.participant.figure === 'ADM' ? 'ha-3409-1413-70.lg-285-89.ch-3032-1334-109.sh-3016-110.hd-185-1359.ca-3225-110-62.wa-3264-62-62.fa-1206-90.hr-3322-1403' : thread.participant.figure
+													} headOnly={true} direction={thread.participant.id > 0 ? 2 : 3} scale={0.9} />
                                                 </Flex>
                                                 <Text truncate grow>{ thread.participant.name }</Text>
                                             </Flex>