Improve look of toolbar

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

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
+            <div className={classNames(styles.infoBubble, styles.memberName)}>
-              className={classNames(
-                styles.infoBubble,
-                styles.memberName,
-                styles.infoBubbleIcon
-              )}
-            >
               {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>
     );

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 {
+.toolbar {
-  background-color: var(--background-85);
-}
-
-.button {
-  display: none;
-}
-
-.videoTile:not(.isLocal):hover::before {
-  content: "";
   position: absolute;
   top: 0;
   left: 0;
+
   width: 100%;
-  height: calc(
+  height: 42px;
-    16px + 20px + 16px
+
-  ); /* top padding + button size + buttom padding */
+  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 {
+.videoTile:not(.isLocal):not(:hover) .toolbar {
-  display: initial;
+  //display: none;
 }
 
-.button button svg {
+.button {
-  height: 20px;
+  margin-right: 16px;
-  width: 20px;
 }
 
-.audioButton {
+.button svg {
-  right: 16px;
+  width: 16px;
-  top: 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;