Update Room Tools Styling

src/assets/styles/icons.scss

@@ -309,6 +309,42 @@
         height: 16px;
     }
 
+    &.icon-cog {
+        background: url("../images/icons/cog.png");
+        width: 21px;
+        height: 21px;
+    }
+
+    &.icon-chat-history {
+        background: url("../images/icons/chat-history.png");
+        width: 17px;
+        height: 21px;
+    }
+
+    &.icon-room-link {
+        background: url("../images/icons/room-link.png");
+        width: 17px;
+        height: 15px;
+    }
+
+    &.icon-zoom-more {
+        background: url("../images/icons/zoom-more.png");
+        width: 12px;
+        height: 22px;
+    }
+
+    &.icon-zoom-less {
+        background: url("../images/icons/zoom-less.png");
+        width: 12px;
+        height: 22px;
+    }
+
+    &.icon-like-room {
+        background: url("../images/icons/like-room.png");
+        width: 20px;
+        height: 22px;
+    }
+
     &.icon-arrows {
         background: url("../images/icons/arrows.png");
         width: 17px;

src/views/room/widgets/room-tools/RoomToolsWidgetView.scss

@@ -1,7 +1,7 @@
 .nitro-room-tools {
     position: absolute;
     bottom: 125px;
-    left: -133px;
+    left: -145px;
     background: rgba($dark,.95);
     box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
     border-top-right-radius: $border-radius;
@@ -36,4 +36,16 @@
             opacity: .5;
         }
     }
+
+    .tools-item {
+        .icon {
+            width: 22px;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 }

src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -45,21 +45,21 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     
     return (
         <div className={'nitro-room-tools ps-3 d-flex' + classNames({ ' open': isExpended })}>
-            <div className="list-group list-group-flush w-100 me-1">
+            <div className="d-flex flex-column gap-2 w-100 py-2 pe-2">
-                <div className="list-group-item" onClick={ () => handleToolClick('settings') }>
+                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('settings') }>
-                    <i className="fas fa-cog me-2" />{ LocalizeText('room.settings.button.text') }
+                    <i className="icon icon-cog" /> { LocalizeText('room.settings.button.text') }
                 </div>
-                <div className="list-group-item" onClick={ () => handleToolClick('zoom') }>
+                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('zoom') }>
-                    <i className={ 'fas me-2 ' +classNames({ 'fa-search-minus': !isZoomedIn, 'fa-search-plus': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
+                    <i className={ 'icon ' +classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />{ LocalizeText('room.zoom.button.text') }
                 </div>
-                <div className="list-group-item" onClick={ () => handleToolClick('chat_history') }>
+                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('chat_history') }>
-                    <i className="fas fa-comment-alt me-2" />{ LocalizeText('room.chathistory.button.text') }
+                    <i className="icon icon-chat-history" />{ LocalizeText('room.chathistory.button.text') }
                 </div>
-                <div className={ 'list-group-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
+                <div className={ 'd-flex align-items-center gap-2 cursor-pointer tools-item' + classNames({ ' disabled': isLiked })} onClick={ () => handleToolClick('like_room') }>
-                    <i className="fas fa-heart me-2" />{ LocalizeText('room.like.button.text') }
+                    <i className="icon icon-like-room" /> { LocalizeText('room.like.button.text') }
                 </div>
-                <div className="list-group-item" onClick={ () => handleToolClick('toggle_room_link') }>
+                <div className="d-flex align-items-center gap-2 cursor-pointer tools-item" onClick={ () => handleToolClick('toggle_room_link') }>
-                    <i className="fas fa-link me-2" />{ LocalizeText('navigator.embed.caption') }
+                    <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)}>