From af019da6e7b24b37fa481212b1c334577bf27e97 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Wed, 12 Jan 2022 23:54:53 -0500
Subject: [PATCH] Update RoomToolsWidgetView

---
 .../room-tools/RoomToolsWidgetView.tsx        | 37 +++++--------------
 1 file changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
index d9e9b6e8..1828d809 100644
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -2,6 +2,8 @@ import { RoomLikeRoomComposer } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText, RoomWidgetZoomToggleMessage } from '../../../../api';
+import { Base } from '../../../../common/Base';
+import { Column } from '../../../../common/Column';
 import { NavigatorEvent } from '../../../../events';
 import { ChatHistoryEvent } from '../../../../events/chat-history/ChatHistoryEvent';
 import { dispatchUiEvent } from '../../../../hooks/events';
@@ -10,11 +12,9 @@ import { useRoomContext } from '../../context/RoomContext';
 
 export const RoomToolsWidgetView: FC<{}> = props =>
 {
-    const { widgetHandler = null } = useRoomContext();
-
-    const [ isExpended, setIsExpanded ] = useState(false);
     const [ isZoomedIn, setIsZoomedIn ] = useState(false);
     const [ isLiked, setIsLiked ] = useState(false);
+    const { widgetHandler = null } = useRoomContext();
 
     const handleToolClick = useCallback((action: string) =>
     {
@@ -29,7 +29,6 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                 return;
             case 'chat_history':
                 dispatchUiEvent(new ChatHistoryEvent(ChatHistoryEvent.TOGGLE_CHAT_HISTORY));
-                //setIsExpanded(false); close this ??
                 return;
             case 'like_room':
                 if(isLiked) return;
@@ -44,27 +43,11 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     }, [ isZoomedIn, isLiked, widgetHandler ]);
     
     return (
-        <div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
-            <div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
-                    <i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
-                </div>
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
-                    <i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
-                </div>
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
-                    <i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
-                </div>
-                <div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
-                    <i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
-                </div>
-                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
-                    <i className="icon icon-room-link" />{ LocalizeText('navigator.embed.caption') }
-                </div>
-            </div>
-            <div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
-                <i className={ 'fas ' + classNames({ 'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended }) } />
-            </div>
-        </div>
+        <Column center className="nitro-room-tools p-2">
+            <Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
+            <Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ 'icon ' + classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />
+            <Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
+            { !isLiked && <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
+        </Column>
     );
-};
+}