From bd25b7f3b7efb98b19daa37751aab3e4a0315d11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 16:05:36 +0200
Subject: [PATCH] Improve look of toolbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 src/video-grid/VideoTile.jsx        | 29 +++++++------------
 src/video-grid/VideoTile.module.css | 45 +++++++++++++++--------------
 2 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/src/video-grid/VideoTile.jsx b/src/video-grid/VideoTile.jsx
index f6103e1..c1f842a 100644
--- a/src/video-grid/VideoTile.jsx
+++ b/src/video-grid/VideoTile.jsx
@@ -54,6 +54,15 @@ export const VideoTile = forwardRef(
         ref={ref}
         {...rest}
       >
+        {showOptions && (
+          <div className={classNames(styles.toolbar)}>
+            <AudioButton
+              className={styles.button}
+              volume={localVolume}
+              onPress={onOptionsPress}
+            />
+          </div>
+        )}
         {(videoMuted || noVideo) && (
           <>
             <div className={styles.videoMutedOverlay} />
@@ -66,30 +75,14 @@ export const VideoTile = forwardRef(
           </div>
         ) : (
           (showName || audioMuted || (videoMuted && !noVideo)) && (
-            <div
-              className={classNames(
-                styles.infoBubble,
-                styles.memberName,
-                styles.infoBubbleIcon
-              )}
-            >
+            <div className={classNames(styles.infoBubble, styles.memberName)}>
               {audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
               {videoMuted && !noVideo && <VideoMutedIcon />}
               {showName && <span title={name}>{name}</span>}
             </div>
           )
         )}
-        {showOptions && (
-          <div
-            className={classNames(
-              styles.infoBubble,
-              styles.button,
-              styles.audioButton
-            )}
-          >
-            <AudioButton volume={localVolume} onPress={onOptionsPress} />
-          </div>
-        )}
+
         <video ref={mediaRef} playsInline disablePictureInPicture />
       </animated.div>
     );
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 91ca091..7d1790a 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -49,6 +49,7 @@
   height: 24px;
   padding: 0 8px;
   color: var(--primary-content);
+  background-color: var(--background-85);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -59,38 +60,36 @@
   z-index: 1;
 }
 
-.infoBubbleIcon {
-  background-color: var(--background-85);
-}
-
-.button {
-  display: none;
-}
-
-.videoTile:not(.isLocal):hover::before {
-  content: "";
+.toolbar {
   position: absolute;
   top: 0;
   left: 0;
+
   width: 100%;
-  height: calc(
-    16px + 20px + 16px
-  ); /* top padding + button size + buttom padding */
+  height: 42px;
+
+  color: var(--primary-content);
   background-color: var(--background-85);
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  overflow: hidden;
+  z-index: 1;
 }
 
-.videoTile:hover .button {
-  display: initial;
+.videoTile:not(.isLocal):not(:hover) .toolbar {
+  //display: none;
 }
 
-.button button svg {
-  height: 20px;
-  width: 20px;
+.button {
+  margin-right: 16px;
 }
 
-.audioButton {
-  right: 16px;
-  top: 16px;
+.button svg {
+  width: 16px;
+  height: 16px;
 }
 
 .memberName {
@@ -130,7 +129,9 @@
 
 .presenterLabel {
   position: absolute;
-  top: 20px;
+  top: calc(
+    16px + 20px + 16px + 20px
+  ); /* top padding + button size + buttom padding + top padding */
   left: 50%;
   transform: translateX(-50%);
   background-color: #17191c;