Update doorbell widget

src/views/room/widgets/RoomWidgets.scss

@@ -3,7 +3,6 @@
 @import './chat-input/ChatInputView';
 @import './choosers/ChooserWidgetView';
 @import './context-menu/ContextMenu';
-@import './doorbell/DoorbellWidgetView';
 @import './friend-request/FriendRequestDialogView';
 @import './furniture/FurnitureWidgets';
 @import './infostand/InfoStandWidgetView';

src/views/room/widgets/doorbell/DoorbellWidgetItemView.tsx

@@ -0,0 +1,29 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC } from 'react';
+import { Button, ButtonGroup, Flex, Text } from '../../../../common';
+
+interface DoorbellWidgetItemViewProps
+{
+    userName: string;
+    accept: () => void;
+    deny: () => void;
+}
+
+export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
+{
+    const { userName = '', accept = null, deny = null } = props;
+
+    return (
+        <Flex alignItems="center" justifyContent="between">
+            <Text bold>{ userName }</Text>
+            <ButtonGroup>
+                <Button variant="success" onClick={ accept }>
+                    <FontAwesomeIcon icon="check" />
+                </Button>
+                <Button variant="danger" onClick={ deny }>
+                    <FontAwesomeIcon icon="times" />
+                </Button>
+            </ButtonGroup>
+        </Flex>
+    );
+}

src/views/room/widgets/doorbell/DoorbellWidgetView.scss

@@ -1,22 +0,0 @@
-.nitro-widget-doorbell {
-    width: 250px;
-
-    .content-area {
-        min-height: 143px;
-        height: 143px;
-    }
-
-    .doorbell-user-list {
-
-        .list-item {
-            background: $grid-active-bg-color;
-        }
-
-        .col:nth-child(even) {
-
-            .list-item {
-                background: $white !important;
-            }
-        }
-    }
-}

src/views/room/widgets/doorbell/DoorbellWidgetView.tsx

@@ -1,9 +1,10 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetDoorbellEvent, RoomWidgetLetUserInMessage } from '../../../../api';
-import { CreateEventDispatcherHook } from '../../../../hooks';
+import { Column } from '../../../../common';
+import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { useRoomContext } from '../../context/RoomContext';
-import { DoorbellWidgetItemView } from './doorbell-item/DoorbellWidgetItemView';
+import { DoorbellWidgetItemView } from './DoorbellWidgetItemView';
 
 export const DoorbellWidgetView: FC<{}> = props =>
 {
@@ -15,10 +16,11 @@ export const DoorbellWidgetView: FC<{}> = props =>
     {
         if(users.indexOf(userName) >= 0) return;
 
-        const newUsers = [ ...users, userName ];
+        BatchUpdates(() =>
-
+        {
-        setUsers(newUsers);
+            setUsers([ ...users, userName ]);
-        setIsVisible(true);
+            setIsVisible(true);
+        });
     }, [ users ]);
 
     const removeUser = useCallback((userName: string) =>
@@ -66,13 +68,10 @@ export const DoorbellWidgetView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-widget-doorbell" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardContentView>
+            <NitroCardContentView overflow="hidden">
-                <div className="row row-cols-1 doorbell-user-list">
+                <Column overflow="auto">
-                    { (users.length > 0) && users.map(userName =>
+                    { users && (users.length > 0) && users.map(userName => <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />) }
-                        {
+                </Column>
-                            return <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />;
-                        }) }
-                </div>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.tsx

@@ -1,21 +0,0 @@
-import { FC } from 'react';
-import { DoorbellWidgetItemViewProps } from './DoorbellWidgetItemView.types';
-
-export const DoorbellWidgetItemView: FC<DoorbellWidgetItemViewProps> = props =>
-{
-    const { userName = '', accept = null, deny = null } = props;
-
-    return (
-        <div className="d-flex col align-items-center justify-content-between">
-            <span className="fw-bold text-black">{ userName }</span>
-            <div>
-                <button type="button" className="btn btn-success btn-sm me-1" onClick={ accept }>
-                    <i className="fas fa-check" />
-                </button>
-                <button type="button" className="btn btn-danger btn-sm" onClick={ deny }>
-                    <i className="fas fa-times" />
-                </button>
-            </div>
-        </div>
-    );
-}

src/views/room/widgets/doorbell/doorbell-item/DoorbellWidgetItemView.types.ts

@@ -1,6 +0,0 @@
-export interface DoorbellWidgetItemViewProps
-{
-    userName: string;
-    accept: () => void;
-    deny: () => void;
-}