From 2bc2a242dc30df1856ccc6dddbffce542ba5917f Mon Sep 17 00:00:00 2001
From: DuckieTM <info@camwijs.nl>
Date: Thu, 20 Mar 2025 19:37:21 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=A0=20updated=20Room=20settings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/layout/LayoutMiniCameraView.tsx    |  59 +++++++---
 .../chat-history/ChatHistoryView.tsx          |   4 +-
 .../navigator/views/NavigatorRoomInfoView.tsx |  94 +++++++--------
 .../room-tools/RoomToolsWidgetView.tsx        |  37 +-----
 src/css/chat/ChatHistoryView.css              |   2 +
 src/css/common/Buttons.css                    | 109 ++++++++++++++++++
 src/css/common/MiniCamera.css                 |  13 +++
 src/index.tsx                                 |   3 +
 8 files changed, 226 insertions(+), 95 deletions(-)
 create mode 100644 src/css/common/Buttons.css
 create mode 100644 src/css/common/MiniCamera.css

diff --git a/src/common/layout/LayoutMiniCameraView.tsx b/src/common/layout/LayoutMiniCameraView.tsx
index f66786d..70962bb 100644
--- a/src/common/layout/LayoutMiniCameraView.tsx
+++ b/src/common/layout/LayoutMiniCameraView.tsx
@@ -3,29 +3,30 @@ import { FC, useRef } from 'react';
 import { LocalizeText, PlaySound, SoundNames } from '../../api';
 import { DraggableWindow } from '../draggable-window';
 
-interface LayoutMiniCameraViewProps
-{
+interface LayoutMiniCameraViewProps {
     roomId: number;
     textureReceiver: (texture: NitroTexture) => Promise<void>;
     onClose: () => void;
 }
 
-export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props =>
-{
+export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props => {
     const { roomId = -1, textureReceiver = null, onClose = null } = props;
     const elementRef = useRef<HTMLDivElement>();
 
-    const getCameraBounds = () =>
-    {
-        if(!elementRef || !elementRef.current) return null;
+    const getCameraBounds = () => {
+        if (!elementRef || !elementRef.current) return null;
 
         const frameBounds = elementRef.current.getBoundingClientRect();
 
-        return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
+        return new NitroRectangle(
+            Math.floor(frameBounds.x),
+            Math.floor(frameBounds.y),
+            Math.floor(frameBounds.width),
+            Math.floor(frameBounds.height)
+        );
     };
 
-    const takePicture = () =>
-    {
+    const takePicture = () => {
         PlaySound(SoundNames.CAMERA_SHUTTER);
         textureReceiver(GetRoomEngine().createTextureFromRoom(roomId, 1, getCameraBounds()));
     };
@@ -33,12 +34,40 @@ export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props =>
     return (
         <DraggableWindow handleSelector=".nitro-room-thumbnail-camera">
             <div className="nitro-room-thumbnail-camera px-2">
-                <div ref={ elementRef } className={ 'camera-frame' } />
-                <div className="flex align-items-end h-full pb-2">
-                    <button className="btn btn-sm btn-danger w-full mb-1 me-2" onClick={ onClose }>{ LocalizeText('cancel') }</button>
-                    <button className="btn btn-sm btn-success w-full mb-1" onClick={ takePicture }>{ LocalizeText('navigator.thumbeditor.save') }</button>
+                <div
+                    style={{
+                        position: 'relative',
+                        paddingBottom: '192px', // Matches the space needed to position buttons as per the design
+                    }}
+                >
+                    <div ref={elementRef} className="camera-frame" />
+                    <div
+                        style={{
+                            position: 'absolute',
+                            bottom: '10px',
+                            left: '10px',
+                            right: '10px',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                        }}
+                    >
+                        <button
+                            className="btn btn-sm btn-danger"
+                            style={{ width: '80px' }}
+                            onClick={onClose}
+                        >
+                            {LocalizeText('cancel')}
+                        </button>
+                        <button
+                            className="btn btn-sm btn-success"
+                            style={{ width: '80px' }}
+                            onClick={takePicture}
+                        >
+                            {LocalizeText('navigator.thumbeditor.save')}
+                        </button>
+                    </div>
                 </div>
             </div>
         </DraggableWindow>
     );
-};
+};
\ No newline at end of file
diff --git a/src/components/chat-history/ChatHistoryView.tsx b/src/components/chat-history/ChatHistoryView.tsx
index 4d1e4eb..1915175 100644
--- a/src/components/chat-history/ChatHistoryView.tsx
+++ b/src/components/chat-history/ChatHistoryView.tsx
@@ -59,7 +59,7 @@ export const ChatHistoryView: FC<{}> = props => {
                         setIsVisible(false);
                         return;
                     case 'toggle':
-                        setIsVisible(prevValue => !prevChatLength.current);
+                        setIsVisible(prevValue => !prevValue);
                         return;
                 }
             },
@@ -74,7 +74,7 @@ export const ChatHistoryView: FC<{}> = props => {
     if (!isVisible) return null;
 
     return (
-        <NitroCardView className="w-[400px] h-[400px] nitro-chat-history" theme="primary-slim" uniqueKey="chat-history">
+        <NitroCardView className="nitro-chat-history" theme="primary-slim" uniqueKey="chat-history">
             <NitroCardHeaderView headerText={LocalizeText('room.chathistory.button.text')} onCloseClick={event => setIsVisible(false)} />
             <NitroCardContentView className="nitro-card-content" gap={2} overflow="hidden" style={{ height: 'calc(100% - 40px)', display: 'flex', flexDirection: 'column' }}>
                 <NitroInput placeholder={LocalizeText('generic.search')} type="text" value={searchText} onChange={event => setSearchText(event.target.value)} />
diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index b59efbd..ebefa74 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx
@@ -1,51 +1,47 @@
-import { CreateLinkEvent, GetCustomRoomFilterMessageComposer, GetSessionDataManager, NavigatorSearchComposer, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetCustomRoomFilterMessageComposer, GetSessionDataManager, NavigatorSearchComposer, RemoveOwnRoomRightsRoomMessageComposer, RoomControllerLevel, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FaLink } from 'react-icons/fa';
+import { FaLink, FaSignOutAlt } from 'react-icons/fa';
 import { DispatchUiEvent, GetGroupInformation, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
 import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
 import { RoomWidgetThumbnailEvent } from '../../../events';
-import { useHelp, useNavigator } from '../../../hooks';
+import { useHelp, useNavigator, useRoom } from '../../../hooks';
 import { classNames } from '../../../layout';
 
-export class NavigatorRoomInfoViewProps
-{
+export interface NavigatorRoomInfoViewProps {
     onCloseClick: () => void;
 }
 
-export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
-{
+export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props => {
     const { onCloseClick = null } = props;
     const [ isRoomPicked, setIsRoomPicked ] = useState(false);
     const [ isRoomMuted, setIsRoomMuted ] = useState(false);
     const { report = null } = useHelp();
     const { navigatorData = null } = useNavigator();
+    const { roomSession = null } = useRoom();
 
-    const hasPermission = (permission: string) =>
-    {
-        switch(permission)
-        {
+    const hasPermission = (permission: string) => {
+        switch(permission) {
             case 'settings':
                 return (GetSessionDataManager().userId === navigatorData.enteredGuestRoom.ownerId || GetSessionDataManager().isModerator);
             case 'staff_pick':
                 return GetSessionDataManager().securityLevel >= SecurityLevel.COMMUNITY;
+            case 'floor':
+                return roomSession?.controllerLevel >= RoomControllerLevel.GUEST;
+            case 'guest':
+                return roomSession?.controllerLevel === RoomControllerLevel.GUEST;
             default: return false;
         }
     };
 
-    const processAction = (action: string, value?: string) =>
-    {
+    const processAction = (action: string, value?: string) => {
         if(!navigatorData || !navigatorData.enteredGuestRoom) return;
 
-        switch(action)
-        {
+        switch(action) {
             case 'set_home_room':
                 let newRoomId = -1;
-
-                if(navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId)
-                {
+                if(navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) {
                     newRoomId = navigatorData.enteredGuestRoom.roomId;
                 }
-
                 if(newRoomId > 0) SendMessageComposer(new UpdateHomeRoomMessageComposer(newRoomId));
                 return;
             case 'navigator_search_tag':
@@ -81,19 +77,19 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
             case 'report_room':
                 report(ReportType.ROOM, { roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName });
                 return;
+            case 'remove_rights':
+                SendMessageComposer(new RemoveOwnRoomRightsRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));
+                return;
             case 'close':
                 onCloseClick();
                 return;
         }
-
     };
 
-    useEffect(() =>
-    {
+    useEffect(() => {
         if(!navigatorData) return;
 
         setIsRoomPicked(navigatorData.currentRoomIsStaffPick);
-
         if(navigatorData.enteredGuestRoom) setIsRoomMuted(navigatorData.enteredGuestRoom.allInRoomMuted);
     }, [ navigatorData ]);
 
@@ -107,39 +103,40 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                     <>
                         <Flex gap={ 2 } overflow="hidden">
                             <LayoutRoomThumbnailView customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } roomId={ navigatorData.enteredGuestRoom.roomId }>
-                                { hasPermission('settings') && <i className="top-0 m-1 cursor-pointer icon icon-camera-small absolute b-0 r-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
+                                { hasPermission('settings') && <i className="top-0 m-1 cursor-pointer nitro-icon icon-camera-small absolute b-0 r-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
                             </LayoutRoomThumbnailView>
                             <Column grow gap={ 1 } overflow="hidden">
                                 <div className="flex gap-1">
                                     <Column grow gap={ 1 }>
                                         <div className="flex gap-1">
-                                            <i className={ classNames('flex-shrink-0 icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
-                                            <Text bold>{ navigatorData.enteredGuestRoom.roomName }</Text>
+											<Text>{ navigatorData.enteredGuestRoom.roomName }</Text>                                                                                        
                                         </div>
                                         { navigatorData.enteredGuestRoom.showOwner &&
                                             <div className="flex items-center gap-1">
-                                                <Text variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
+                                                <Text>{ LocalizeText('navigator.roomownercaption') }</Text>
                                                 <div className="flex items-center gap-1">
                                                     <UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } />
                                                     <Text>{ navigatorData.enteredGuestRoom.ownerName }</Text>
                                                 </div>
                                             </div> }
                                         <div className="flex items-center gap-1">
-                                            <Text variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
+                                            <Text>{ LocalizeText('navigator.roomrating') }</Text>
                                             <Text>{ navigatorData.currentRoomRating }</Text>
                                         </div>
                                         { (navigatorData.enteredGuestRoom.tags.length > 0) &&
                                             <div className="flex items-center gap-1">
                                                 { navigatorData.enteredGuestRoom.tags.map(tag =>
-                                                {
-                                                    return <Text key={ tag } pointer className="p-1 rounded bg-muted" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>;
-                                                }) }
+                                                    <Text key={ tag } pointer className="p-1 rounded bg-muted" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
+                                                ) }
                                             </div> }
                                     </Column>
                                     <Column alignItems="center" gap={ 1 }>
+										<i className={ classNames('flex-shrink-0 nitro-icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } onClick={ () => processAction('set_home_room') } />
                                         { hasPermission('settings') &&
-                                            <i className="cursor-pointer icon icon-cog" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
-                                        <FaLink className="cursor-pointer fa-icon" title={ LocalizeText('navigator.embed.caption') } onClick={ event => CreateLinkEvent('navigator/toggle-room-link') } />
+                                            <i className="cursor-pointer nitro-icon icon-cog" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
+                                        <FaLink className="cursor-pointer fa-icon" title={ LocalizeText('navigator.embed.caption') } onClick={ event => processAction('toggle_room_link') } />
+                                        { hasPermission('guest') && 
+                                            <FaSignOutAlt className="cursor-pointer fa-icon" title={ LocalizeText('navigator.roominfo.removerights.tooltip') } onClick={ event => processAction('remove_rights') } /> }
                                     </Column>
                                 </div>
                                 <Text overflow="auto" style={ { maxHeight: 50 } }>{ navigatorData.enteredGuestRoom.description }</Text>
@@ -154,28 +151,31 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                         </Flex>
                         <div className="flex flex-col gap-1">
                             { hasPermission('staff_pick') &&
-                            <Button onClick={ () => processAction('toggle_pick') }>
-                                { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
-                            </Button> }
+                                <Button onClick={ () => processAction('toggle_pick') }>
+                                    { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
+                                </Button> }
                             <Button variant="danger" onClick={ () => processAction('report_room') }>
                                 { LocalizeText('help.emergency.main.report.room') }
                             </Button>
                             { hasPermission('settings') &&
-                            <>
-                                <Button onClick={ () => processAction('toggle_mute') }>
-                                    { LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
-                                </Button>
-                                <Button onClick={ () => processAction('room_filter') }>
-                                    { LocalizeText('navigator.roomsettings.roomfilter') }
-                                </Button>
+                                <>
+                                    <Button onClick={ () => processAction('toggle_mute') }>
+                                        { LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
+                                    </Button>
+                                    <Button onClick={ () => processAction('room_filter') }>
+                                        { LocalizeText('navigator.roomsettings.roomfilter') }
+                                    </Button>
+                                    <Button onClick={ () => processAction('open_floorplan_editor') }>
+                                        { LocalizeText('open.floor.plan.editor') }
+                                    </Button>
+                                </> }
+                            { hasPermission('floor') && !hasPermission('settings') && 
                                 <Button onClick={ () => processAction('open_floorplan_editor') }>
                                     { LocalizeText('open.floor.plan.editor') }
-                                </Button>
-                            </> }
+                                </Button> }
                         </div>
                     </> }
-
             </NitroCardContentView>
         </NitroCardView>
     );
-};
+};
\ No newline at end of file
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 4efac15..1afab2f 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -108,8 +108,7 @@ export const RoomToolsWidgetView: FC<{}> = props => {
     return (
         <div className="flex space-x-2 nitro-room-tools-container">
             <div className="flex flex-col items-center justify-center p-2 nitro-room-tools">
-				<div className={classNames('cursor-pointer', 'nitro-icon', (areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'))} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} />
-                <div className="cursor-pointer nitro-icon icon-cog" title={LocalizeText('room.settings.button.text')} onClick={() => handleToolClick('settings')} />
+				<div className="cursor-pointer nitro-icon icon-cog" title={LocalizeText('room.settings.button.text')} onClick={() => handleToolClick('settings')} />
                 <div className={classNames('cursor-pointer', 'nitro-icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more'))} title={LocalizeText('room.zoom.button.text')} onClick={() => handleToolClick('zoom')} />
                 <div className="cursor-pointer nitro-icon icon-chat-history" title={LocalizeText('room.chathistory.button.text')} onClick={() => handleToolClick('chat_history')} />
 				<div className={classNames('cursor-pointer', 'nitro-icon', (areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'))} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} />
@@ -123,29 +122,17 @@ export const RoomToolsWidgetView: FC<{}> = props => {
             <div className="flex flex-col justify-center">
                 <AnimatePresence>
                     {isOpen && (
-                        <motion.div
-                            initial={{ x: -100 }}
-                            animate={{ x: 0 }}
-                            exit={{ x: -100 }}
-                            transition={{ duration: 0.3 }}
-                        >
+                        <motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: -100 }} transition={{ duration: 0.3 }}>
                             <div className="flex flex-col items-center justify-center">
                                 <div className="flex flex-col px-3 py-2 rounded nitro-room-tools-info">
                                     <div className="flex flex-col gap-1">
                                         <Text wrap fontSize={4} variant="white">{roomName}</Text>
-                                        <Text fontSize={5} variant="muted">{roomOwner}</Text>
+                                        <Text fontSize={5} variant="gray">{roomOwner}</Text>
                                     </div>
                                     {roomTags && roomTags.length > 0 && (
                                         <div className="flex gap-2">
                                             {roomTags.map((tag, index) => (
-                                                <Text
-                                                    key={index}
-                                                    pointer
-                                                    small
-                                                    className="p-1 rounded bg-primary"
-                                                    variant="white"
-                                                    onClick={() => handleToolClick('navigator_search_tag', tag)}
-                                                >
+                                                <Text key={index} pointer small className="p-1 rounded bg-primary" variant="white" onClick={() => handleToolClick('navigator_search_tag', tag)}>
                                                     #{tag}
                                                 </Text>
                                             ))}
@@ -156,22 +143,10 @@ export const RoomToolsWidgetView: FC<{}> = props => {
                         </motion.div>
                     )}
                     {isOpenHistory && (
-                        <motion.div
-                            initial={{ x: -100 }}
-                            animate={{ x: 0 }}
-                            exit={{ x: -100 }}
-                            transition={{ duration: 0.3 }}
-                            className="nitro-room-tools-history"
-                        >
+                        <motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: -100 }} transition={{ duration: 0.3 }} className="nitro-room-tools-history">
                             <div className="flex flex-col px-3 py-2 rounded nitro-room-history">
                                 {roomHistory.map(history => (
-                                    <Text
-                                        key={history.roomId}
-                                        bold={history.roomId === navigatorData.currentRoomId}
-                                        variant={history.roomId === navigatorData.currentRoomId ? 'white' : 'muted'}
-                                        pointer
-                                        onClick={() => TryVisitRoom(history.roomId)}
-                                    >
+                                    <Text key={history.roomId} bold={history.roomId === navigatorData.currentRoomId} variant={history.roomId === navigatorData.currentRoomId ? 'white' : 'muted'} pointer onClick={() => TryVisitRoom(history.roomId)}>
                                         {history.roomName}
                                     </Text>
                                 ))}
diff --git a/src/css/chat/ChatHistoryView.css b/src/css/chat/ChatHistoryView.css
index cc80d13..815aafd 100644
--- a/src/css/chat/ChatHistoryView.css
+++ b/src/css/chat/ChatHistoryView.css
@@ -1,5 +1,7 @@
 .nitro-chat-history {
 	background-color: #f0f0f0;
+	width: 400px;
+    height: 400px;
 	}
 
 .nitro-chat-history .nitro-card-content {
diff --git a/src/css/common/Buttons.css b/src/css/common/Buttons.css
new file mode 100644
index 0000000..106a3cc
--- /dev/null
+++ b/src/css/common/Buttons.css
@@ -0,0 +1,109 @@
+.btn-sm {
+  min-height: 28px;
+}
+
+textarea {
+  resize: none;
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.rounded {
+  border-radius: 0.5rem;
+}
+
+.btn-primary {
+  color: #fff;
+  background-color: #3c6d82;
+  border: 2px solid #1a617f;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+
+.btn-primary:hover {
+  border: 2px solid #1a617f;
+  box-shadow: none!important;
+}
+
+.btn-success{
+  color: #fff;
+  background-color: #3c8243;
+  border: 2px solid #006d09;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+
+.btn-success:hover{
+  box-shadow: none!important;
+}
+
+.btn-danger{
+  color: #fff;
+  background-color: #a81a12;
+  border: 2px solid #b9322a;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+
+.btn-danger:hover{
+  box-shadow: none!important;
+}
+
+.btn-warning{
+  color: #222;
+  background-color: #ffc107;
+  border: 2px solid #f3c12a;
+  padding: 0.25rem 0.5rem;
+  font-size: .7875rem;
+  border-radius: 0.5rem;
+  box-shadow: none!important;
+}
+
+.btn-warning:hover{
+  box-shadow: none!important;
+}
+
+.btn-dark {
+  color: #fff;
+  background-color: #212131;
+  border: 2px solid #1c1c2a;
+  box-shadow: none!important;
+  border-radius: 8px;
+  padding: 4px 11px 4px 11px;
+}
+
+.btn-dark:hover{
+  background-color: #212131;
+  border: 2px solid #1c1c2a;
+  box-shadow: none!important;
+  border-radius: 8px;
+  padding: 4px 11px 4px 11px;
+}
+
+.btn-friendsgen{
+  background-color: #424354;
+  border: 2px solid #63647a;
+  border-radius: 10px;
+}
+
+.btn-friendsgensuccess{
+  background-color: #b69b83;
+  border: 2px solid #e2c1a3;
+  border-radius: 10px;
+}
diff --git a/src/css/common/MiniCamera.css b/src/css/common/MiniCamera.css
new file mode 100644
index 0000000..fd4a145
--- /dev/null
+++ b/src/css/common/MiniCamera.css
@@ -0,0 +1,13 @@
+.nitro-room-thumbnail-camera {
+    width: 132px;
+    height: 192px;
+    background-image: url('@/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
+
+    .camera-frame {
+        position: absolute;
+        width: 110px;
+        height: 110px;
+        margin-top: 30px;
+        margin-left: 3px;
+    }
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 5605048..870c062 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,9 @@ import './css/index.css';
 import './css/chat/Chats.css';
 import './css/chat/ChatHistoryView.css';
 
+import './css/common/MiniCamera.css';
+import './css/common/Buttons.css';
+
 import './css/floorplan/FloorplanEditorView.css';
 
 import './css/hotelview/HotelView.css';