From 226c280fdabd175bf0261c57dd156884126ec847 Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Wed, 30 Jun 2021 14:13:29 -0300
Subject: [PATCH] Updates

---
 .../widgets/room-tools/RoomToolsWidgetView.scss  | 16 +++++++++++++---
 .../widgets/room-tools/RoomToolsWidgetView.tsx   | 12 ++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
index 1f15d7c7..088ab7c2 100644
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
+++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss
@@ -2,9 +2,8 @@
     position: fixed;
     bottom: 125px;
     left: -133px;
-    background: rgba(20, 20, 20, .95);
-    border: 1px solid #101010;
-    box-shadow: inset 0px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
+    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;
     border-bottom-right-radius: $border-radius;
     transition: all .2s ease;
@@ -12,4 +11,15 @@
     &.open {
         left: 0px;
     }
+
+    .list-group-item {
+        background: transparent;
+        padding: 3px 0px;
+        color: $white;
+        border-color: rgba($black, 0.3);
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
 }
diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
index b3c32b35..d3fd1fee 100644
--- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -33,20 +33,20 @@ export const RoomToolsWidgetView: FC<RoomToolsWidgetViewProps> = props =>
     
     return (
         <div className={'nitro-room-tools py-2 ps-3 d-flex' + classNames({' open': isExpended})}>
-            <div className="w-100 me-1">
-                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('settings') }>
+            <div className="list-group list-group-flush w-100 me-1">
+                <div className="list-group-item text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('settings') }>
                     <i className="fas fa-cog me-2" />{ LocalizeText('room.settings.button.text') }
                 </div>
-                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('zoom') }>
+                <div className="list-group-item text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('zoom') }>
                     <i className={ 'fas me-2 ' +classNames({'fa-search-minus': !isZoomedIn, 'fa-search-plus': isZoomedIn}) } />{ LocalizeText('room.zoom.button.text') }
                 </div>
-                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('chat_history') }>
+                <div className="list-group-item text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('chat_history') }>
                     <i className="fas fa-comment-alt me-2" />{ LocalizeText('room.chathistory.button.text') }
                 </div>
-                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('like_room') }>
+                <div className="list-group-item text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('like_room') }>
                     <i className="fas fa-heart me-2" />{ LocalizeText('room.like.button.text') }
                 </div>
-                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('room_link') }>
+                <div className="list-group-item text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('room_link') }>
                     <i className="fas fa-link me-2" />{ LocalizeText('navigator.embed.caption') }
                 </div>
             </div>