Update doorbell widget layout

src/App.scss

@@ -78,6 +78,9 @@ $nitro-group-manager-height: 355px;
 $nitro-chooser-width: 200px;
 $nitro-chooser-height: 200px;
 
+$nitro-doorbell-width: 300px;
+$nitro-doorbell-height: 200px;
+
 $nitro-guide-tool-width: 250px;
 
 .nitro-app {

src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx

@@ -48,13 +48,15 @@ export const NavigatorRoomDoorbellView: FC<NavigatorRoomDoorbellViewProps> = pro
                     { (state === UpdateDoorStateEvent.STATE_NO_ANSWER) &&
                         <Text>{ LocalizeText('navigator.doorbell.no.answer') }</Text> }
                 </Column>
-                { (state === UpdateDoorStateEvent.START_DOORBELL) &&
+                <Column gap={ 1 }>
-                    <Button variant="success" size="sm" onClick={ ring }>
+                    { (state === UpdateDoorStateEvent.START_DOORBELL) &&
-                        { LocalizeText('navigator.doorbell.button.ring') }
+                        <Button variant="success" size="sm" onClick={ ring }>
-                    </Button> }
+                            { LocalizeText('navigator.doorbell.button.ring') }
-                <Button variant="danger" size="sm" onClick={ close }>
+                        </Button> }
-                    { LocalizeText('generic.cancel') }
+                    <Button variant="danger" size="sm" onClick={ close }>
-                </Button>
+                        { LocalizeText('generic.cancel') }
+                    </Button>
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/RoomWidgets.scss

@@ -94,6 +94,11 @@
     width: 22px;
 }
 
+.nitro-widget-doorbell {
+    width: $nitro-doorbell-width;
+    height: $nitro-doorbell-height;
+}
+
 @import './avatar-info/AvatarInfoWidgetView';
 @import './chat/ChatWidgetView';
 @import './chat-input/ChatInputView';

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

@@ -1,29 +0,0 @@
-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.tsx

@@ -1,10 +1,9 @@
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetDoorbellEvent, RoomWidgetLetUserInMessage } from '../../../../api';
-import { Column } from '../../../../common';
+import { Base, Button, Column, Flex, Grid } from '../../../../common';
 import { BatchUpdates, CreateEventDispatcherHook } from '../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { useRoomContext } from '../../context/RoomContext';
-import { DoorbellWidgetItemView } from './DoorbellWidgetItemView';
 
 export const DoorbellWidgetView: FC<{}> = props =>
 {
@@ -68,9 +67,32 @@ export const DoorbellWidgetView: FC<{}> = props =>
     return (
         <NitroCardView className="nitro-widget-doorbell" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardContentView overflow="hidden">
+            <NitroCardContentView overflow="hidden" gap={ 0 }>
-                <Column overflow="auto">
+                <Column gap={ 2 }>
-                    { users && (users.length > 0) && users.map(userName => <DoorbellWidgetItemView key={ userName } userName={ userName } accept={ () => answer(userName, true) } deny={ () => answer(userName, false) } />) }
+                    <Grid gap={ 1 } className="text-black fw-bold border-bottom px-1 pb-1">
+                        <Base className="g-col-6">Username</Base>
+                        <Base className="g-col-6"></Base>
+                    </Grid>
+                </Column>
+                <Column overflow="auto" className="striped-children" gap={ 0 }>
+                    { users && (users.length > 0) && users.map(userName =>
+                        {
+                            return (
+                                <Grid key={ userName } gap={ 1 } alignItems="center" className="text-black border-bottom p-1">
+                                    <Base className="g-col-6">{ userName }</Base>
+                                    <Base className="g-col-6">
+                                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                            <Button variant="success" onClick={ () => answer(userName, true) }>
+                                                { LocalizeText('generic.accept') }
+                                            </Button>
+                                            <Button variant="danger" onClick={ () => answer(userName, false) }>
+                                                { LocalizeText('generic.deny') }
+                                            </Button>
+                                        </Flex>
+                                    </Base>
+                                </Grid>
+                            );
+                        }) }
                 </Column>
             </NitroCardContentView>
         </NitroCardView>