From 526d50d9dc3b643f42960b8c3471c01858b0af3e Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 1 Mar 2022 03:44:32 -0500
Subject: [PATCH] Update friend request widget

---
 .../FriendRequestDialogView.tsx               | 51 ++++++++-----------
 .../FriendRequestDialogView.types.ts          |  7 ---
 .../FriendRequestWidgetView.tsx               |  2 +-
 3 files changed, 23 insertions(+), 37 deletions(-)
 delete mode 100644 src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts

diff --git a/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx b/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx
index 1b9d4a82..0238a8c3 100644
--- a/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx
+++ b/src/views/room/widgets/friend-request/FriendRequestDialogView.tsx
@@ -1,47 +1,40 @@
-import { FC, useCallback } from 'react';
+import { FC } from 'react';
 import { LocalizeText, RoomWidgetFriendRequestMessage } from '../../../../api';
-import { NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
-import { NitroLayoutBase } from '../../../../layout/base';
+import { Base, Button, Column, Flex, Text } from '../../../../common';
 import { useRoomContext } from '../../context/RoomContext';
 import { UserLocationView } from '../user-location/UserLocationView';
-import { FriendRequestDialogViewProps } from './FriendRequestDialogView.types';
+
+interface FriendRequestDialogViewProps
+{
+    requestId: number;
+    userId: number;
+    userName: string;
+    close: () => void;
+}
 
 export const FriendRequestDialogView: FC<FriendRequestDialogViewProps> = props =>
 {
     const { requestId = -1, userId = -1, userName = null, close = null } = props;
     const { widgetHandler = null } = useRoomContext();
 
-    const accept = useCallback(() =>
+    const respond = (flag: boolean) =>
     {
-        widgetHandler.processWidgetMessage(new RoomWidgetFriendRequestMessage(RoomWidgetFriendRequestMessage.ACCEPT, requestId));
+        widgetHandler.processWidgetMessage(new RoomWidgetFriendRequestMessage((flag ? RoomWidgetFriendRequestMessage.ACCEPT : RoomWidgetFriendRequestMessage.DECLINE), requestId));
 
         close();
-    }, [ requestId, widgetHandler, close ]);
-
-    const decline = useCallback(() =>
-    {
-        widgetHandler.processWidgetMessage(new RoomWidgetFriendRequestMessage(RoomWidgetFriendRequestMessage.ACCEPT, requestId));
-
-        close();
-    }, [ requestId, widgetHandler, close ]);
+    }
 
     return (
         <UserLocationView userId={ userId }>
-            <NitroLayoutBase className="nitro-friend-request-dialog nitro-context-menu p-2">
-                <NitroLayoutFlexColumn>
-                    <NitroLayoutBase className="h6">
-                        { LocalizeText('widget.friendrequest.from', [ 'username' ], [ userName ]) }
-                    </NitroLayoutBase>
-                    <NitroLayoutFlex className="justify-content-end align-items-center" gap={ 2 }>
-                        <NitroLayoutButton variant="danger" size="sm" onClick={ decline }>
-                            { LocalizeText('widget.friendrequest.decline') }
-                        </NitroLayoutButton>
-                        <NitroLayoutButton variant="success" size="sm" onClick={ accept }>
-                            { LocalizeText('widget.friendrequest.accept') }
-                        </NitroLayoutButton>
-                    </NitroLayoutFlex>
-                </NitroLayoutFlexColumn>
-            </NitroLayoutBase>
+            <Base className="nitro-friend-request-dialog nitro-context-menu p-2">
+                <Column>
+                    <Text variant="white" fontSize={ 6 }>{ LocalizeText('widget.friendrequest.from', [ 'username' ], [ userName ]) }</Text>
+                    <Flex justifyContent="end" gap={ 1 }>
+                        <Button variant="danger" onClick={ event => respond(false) }>{ LocalizeText('widget.friendrequest.decline') }</Button>
+                        <Button variant="success" onClick={ event => respond(true) }>{ LocalizeText('widget.friendrequest.accept') }</Button>
+                    </Flex>
+                </Column>
+            </Base>
         </UserLocationView>
     );
 }
diff --git a/src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts b/src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts
deleted file mode 100644
index c9deed82..00000000
--- a/src/views/room/widgets/friend-request/FriendRequestDialogView.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export interface FriendRequestDialogViewProps
-{
-    requestId: number;
-    userId: number;
-    userName: string;
-    close: () => void;
-}
diff --git a/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx b/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx
index 9a0bf147..fa53b347 100644
--- a/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx
+++ b/src/views/room/widgets/friend-request/FriendRequestWidgetView.tsx
@@ -38,7 +38,7 @@ export const FriendRequestWidgetView: FC<{}> = props =>
                 newValue.splice(index, 1);
 
                 return newValue;
-            })
+            });
     }, [ friendRequests ]);
 
     const onRoomWidgetUpdateFriendRequestEvent = useCallback((event: RoomWidgetUpdateFriendRequestEvent) =>