Get volume button inline with design

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

src/button/Button.tsx

@@ -30,7 +30,7 @@ import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
 import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
 import { TooltipTrigger } from "../Tooltip";
-import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
+import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
 
 export type ButtonVariant =
   | "default"
@@ -239,11 +239,11 @@ export function InviteButton({
   );
 }
 
-export function OptionsButton(props: Omit<Props, "variant">) {
+export function AudioButton(props: Omit<Props, "variant">) {
   return (
     <TooltipTrigger tooltip={() => "Options"}>
-      <Button variant="icon" {...props}>
-        <OverflowIcon />
+      <Button variant="icon" {...props} tooltip={() => "Volume"}>
+        <AudioIcon />
       </Button>
     </TooltipTrigger>
   );

src/video-grid/VideoTile.jsx

@@ -20,7 +20,7 @@ import classNames from "classnames";
 import styles from "./VideoTile.module.css";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
 import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
-import { OptionsButton } from "../button/Button";
+import { AudioButton } from "../button/Button";
 
 export const VideoTile = forwardRef(
   (
@@ -65,7 +65,13 @@ export const VideoTile = forwardRef(
           </div>
         ) : (
           (showName || audioMuted || (videoMuted && !noVideo)) && (
-            <div className={classNames(styles.infoBubble, styles.memberName)}>
+            <div
+              className={classNames(
+                styles.infoBubble,
+                styles.memberName,
+                styles.infoBubbleIcon
+              )}
+            >
               {audioMuted && !(videoMuted && !noVideo) && <MicMutedIcon />}
               {videoMuted && !noVideo && <VideoMutedIcon />}
               {showName && <span title={name}>{name}</span>}
@@ -73,8 +79,14 @@ export const VideoTile = forwardRef(
           )
         )}
         {showOptions && (
-          <div className={classNames(styles.infoBubble, styles.optionsButton)}>
-            <OptionsButton onPress={onOptionsPress} />
+          <div
+            className={classNames(
+              styles.infoBubble,
+              styles.button,
+              styles.audioButton
+            )}
+          >
+            <AudioButton onPress={onOptionsPress} />
           </div>
         )}
         <video ref={mediaRef} playsInline disablePictureInPicture />

src/video-grid/VideoTile.module.css

@@ -49,7 +49,6 @@
   height: 24px;
   padding: 0 8px;
   color: white;
-  background-color: rgba(23, 25, 28, 0.85);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -60,16 +59,24 @@
   z-index: 1;
 }
 
-.optionsButton {
-  right: 16px;
-  top: 16px;
+.infoBubbleIcon {
+  background-color: rgba(23, 25, 28, 0.85);
 }
 
-.optionsButton button svg {
+.button button:hover svg * {
+  fill: white !important; /* To override .iconButton:not(.stroke):hover svg */
+}
+
+.button button svg {
   height: 20px;
   width: 20px;
 }
 
+.audioButton {
+  right: 16px;
+  top: 16px;
+}
+
 .memberName {
   left: 16px;
   bottom: 16px;