From 44ce76bcb10b1c5117d5f95f48234813fb610df9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 1 Aug 2022 18:56:59 +0200
Subject: [PATCH 01/20] Get volume button inline with design
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/button/Button.tsx               |  8 ++++----
 src/video-grid/VideoTile.jsx        | 20 ++++++++++++++++----
 src/video-grid/VideoTile.module.css | 17 ++++++++++++-----
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index e993661..a119364 100644
--- a/src/button/Button.tsx
+++ b/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>
   );
diff --git a/src/video-grid/VideoTile.jsx b/src/video-grid/VideoTile.jsx
index 206f8a4..286d301 100644
--- a/src/video-grid/VideoTile.jsx
+++ b/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 />
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 3bc7aa8..5d6e813 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/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;

From ce55ed8221869e2c1f442368ca7e8d9857ca9e3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 1 Aug 2022 19:24:28 +0200
Subject: [PATCH 02/20] Use vars
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.module.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 5d6e813..3bd6a52 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -48,7 +48,7 @@
   position: absolute;
   height: 24px;
   padding: 0 8px;
-  color: white;
+  color: var(--primary-content);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,7 +64,9 @@
 }
 
 .button button:hover svg * {
-  fill: white !important; /* To override .iconButton:not(.stroke):hover svg */
+  fill: var(
+    --primary-content
+  ) !important; /* To override .iconButton:not(.stroke):hover svg */
 }
 
 .button button svg {

From e62d76a6f2742bbf84738a5cf7ae2eeebcf007d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 1 Aug 2022 19:26:56 +0200
Subject: [PATCH 03/20] Use more vars
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/index.css                       | 1 +
 src/video-grid/VideoTile.module.css | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index 7ec1e9c..3eb297c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,6 +38,7 @@ limitations under the License.
   --quinary-content: #394049;
   --system: #21262c;
   --background: #15191e;
+  --backgrouund-85: rgba(23, 25, 28, 0.85);
   --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
 }
 
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 3bd6a52..6a92468 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -60,7 +60,7 @@
 }
 
 .infoBubbleIcon {
-  background-color: rgba(23, 25, 28, 0.85);
+  background-color: var(--backgrouund-85);
 }
 
 .button button:hover svg * {

From 0e5231ba437117e63d5365fe32d21424427d292c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 1 Aug 2022 19:29:28 +0200
Subject: [PATCH 04/20] Make buttons only visible on hover
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.module.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 6a92468..0a484d2 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -63,6 +63,14 @@
   background-color: var(--backgrouund-85);
 }
 
+.button {
+  display: none;
+}
+
+.videoTile:hover .button {
+  display: initial;
+}
+
 .button button:hover svg * {
   fill: var(
     --primary-content

From 130073689db70bd1d3dec79c8acdf9cab1dd4858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 12:38:09 +0200
Subject: [PATCH 05/20] Fix button tooltip
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/button/Button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index a119364..abd8fe2 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -242,7 +242,7 @@ export function InviteButton({
 export function AudioButton(props: Omit<Props, "variant">) {
   return (
     <TooltipTrigger tooltip={() => "Options"}>
-      <Button variant="icon" {...props} tooltip={() => "Volume"}>
+      <Button variant="icon" {...props} tooltip={() => "Local volume"}>
         <AudioIcon />
       </Button>
     </TooltipTrigger>

From a5d5f75f52c91e58363d6ad0f8bac4ca9392bc20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 12:43:27 +0200
Subject: [PATCH 06/20] Add hover effect back
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.module.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 0a484d2..10f4d94 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -71,12 +71,6 @@
   display: initial;
 }
 
-.button button:hover svg * {
-  fill: var(
-    --primary-content
-  ) !important; /* To override .iconButton:not(.stroke):hover svg */
-}
-
 .button button svg {
   height: 20px;
   width: 20px;

From 2e57eaad1dc3584456dfbde49435af93f689fb5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 12:45:21 +0200
Subject: [PATCH 07/20] Fix var name
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/index.css                       | 2 +-
 src/video-grid/VideoTile.module.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 3eb297c..6e9a912 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,7 +38,7 @@ limitations under the License.
   --quinary-content: #394049;
   --system: #21262c;
   --background: #15191e;
-  --backgrouund-85: rgba(23, 25, 28, 0.85);
+  --background-85: rgba(23, 25, 28, 0.85);
   --bgColor3: #444; /* This isn't found anywhere in the designs or Compound */
 }
 
diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 10f4d94..504b39f 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -60,7 +60,7 @@
 }
 
 .infoBubbleIcon {
-  background-color: var(--backgrouund-85);
+  background-color: var(--background-85);
 }
 
 .button {

From aef4fd39b930c240686d9b714f061b96a81fabc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 13:33:09 +0200
Subject: [PATCH 08/20] Add env var for `background-85`
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>
---
 .env.example | 1 +
 src/main.tsx | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/.env.example b/.env.example
index 2f62d61..7359d2c 100644
--- a/.env.example
+++ b/.env.example
@@ -27,3 +27,4 @@
 # VITE_THEME_QUINARY_CONTENT=#394049
 # VITE_THEME_SYSTEM=#21262c
 # VITE_THEME_BACKGROUND=#15191e
+# VITE_THEME_BACKGROUND_85=#15191ed9
diff --git a/src/main.tsx b/src/main.tsx
index 2330bed..a1739c7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -84,6 +84,10 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
     "--background",
     import.meta.env.VITE_THEME_BACKGROUND as string
   );
+  style.setProperty(
+    "--background-85",
+    import.meta.env.VITE_THEME_BACKGROUND_85 as string
+  );
 }
 
 const history = createBrowserHistory();

From 005622800dfc01c54f951b211a0cc890065ceeb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 13:50:47 +0200
Subject: [PATCH 09/20] Fix tooltip (again)
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/button/Button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index abd8fe2..f1ba94b 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -241,8 +241,8 @@ export function InviteButton({
 
 export function AudioButton(props: Omit<Props, "variant">) {
   return (
-    <TooltipTrigger tooltip={() => "Options"}>
-      <Button variant="icon" {...props} tooltip={() => "Local volume"}>
+    <TooltipTrigger tooltip={() => "Local volume"}>
+      <Button variant="icon" {...props}>
         <AudioIcon />
       </Button>
     </TooltipTrigger>

From cd885e3b3af2b80391fcc86eb859c98b5b02ea66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 13:51:05 +0200
Subject: [PATCH 10/20] Add hover gradient
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.module.css | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 504b39f..1ba6ec1 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -67,6 +67,19 @@
   display: none;
 }
 
+.videoTile:not(.isLocal):hover::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(
+    16px + 20px + 16px
+  ); /* top padding + button size + buttom padding */
+  background-image: linear-gradient(to bottom, var(--background), transparent);
+  opacity: 0.8;
+}
+
 .videoTile:hover .button {
   display: initial;
 }

From e824b3cfe2afec3cfca9ac46cb82ff39ecf23fec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:28:52 +0200
Subject: [PATCH 11/20] Update icons
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/icons/Audio.svg      | 8 ++++----
 src/icons/AudioLow.svg   | 4 ++++
 src/icons/AudioMuted.svg | 3 +++
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 src/icons/AudioLow.svg
 create mode 100644 src/icons/AudioMuted.svg

diff --git a/src/icons/Audio.svg b/src/icons/Audio.svg
index f541ebc..0be0da9 100644
--- a/src/icons/Audio.svg
+++ b/src/icons/Audio.svg
@@ -1,5 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.97991 1.48403L4 4.80062L1 4.80062C0.447715 4.80062 0 5.24834 0 5.80062V10.2006C0 10.7529 0.447714 11.2006 0.999999 11.2006L4 11.2006L7.97991 14.5172C8.30557 14.7886 8.8 14.557 8.8 14.1331V1.86814C8.8 1.44422 8.30557 1.21265 7.97991 1.48403Z" fill="white"/>
-<path d="M14.1258 2.79107C13.8998 2.50044 13.4809 2.44808 13.1903 2.67413C12.9 2.89992 12.8475 3.3181 13.0726 3.6087L13.0731 3.60935L13.0738 3.61021L13.0829 3.62231C13.0917 3.63418 13.1059 3.65355 13.1248 3.68011C13.1625 3.73326 13.2187 3.81496 13.2872 3.92256C13.4243 4.13812 13.6097 4.45554 13.7955 4.85371C14.169 5.65407 14.5329 6.75597 14.5329 8.00036C14.5329 9.24475 14.169 10.3466 13.7955 11.147C13.6097 11.5452 13.4243 11.8626 13.2872 12.0782C13.2187 12.1858 13.1625 12.2675 13.1248 12.3206C13.1059 12.3472 13.0917 12.3665 13.0829 12.3784L13.0738 12.3905L13.0731 12.3914L13.0725 12.3921C12.8475 12.6827 12.9 13.1008 13.1903 13.3266C13.4809 13.5526 13.8998 13.5003 14.1258 13.2097L13.629 12.8232C14.1258 13.2096 14.1258 13.2097 14.1258 13.2097L14.1272 13.2079L14.1291 13.2055L14.1346 13.1982L14.1523 13.1748C14.1669 13.1552 14.187 13.1277 14.2119 13.0926C14.2617 13.0225 14.3305 12.9221 14.4121 12.794C14.5749 12.5381 14.7895 12.1698 15.0037 11.7109C15.4302 10.7969 15.8663 9.49883 15.8663 8.00036C15.8663 6.50189 15.4302 5.20379 15.0037 4.28987C14.7895 3.83089 14.5749 3.4626 14.4121 3.20673C14.3305 3.07862 14.2617 2.97818 14.2119 2.90811C14.187 2.87306 14.1669 2.84556 14.1523 2.82596L14.1346 2.80249L14.1291 2.79525L14.1272 2.79278L14.1264 2.79183C14.1264 2.79183 14.1258 2.79107 13.5996 3.20036L14.1258 2.79107Z" fill="white"/>
-<path d="M11.7264 5.19121C11.5004 4.90058 11.0815 4.84823 10.7909 5.07427C10.501 5.29973 10.4482 5.71698 10.6722 6.00752L10.6745 6.01057C10.6775 6.01457 10.6831 6.02223 10.691 6.03338C10.7069 6.05572 10.7318 6.09189 10.7628 6.14057C10.8249 6.23827 10.9103 6.38426 10.9961 6.56815C11.1696 6.93993 11.3335 7.44183 11.3335 8.00051C11.3335 8.55918 11.1696 9.06108 10.9961 9.43287C10.9103 9.61675 10.8249 9.76275 10.7628 9.86045C10.7318 9.90912 10.7069 9.94529 10.691 9.96763C10.6831 9.97879 10.6775 9.98645 10.6745 9.99044L10.6722 9.9935C10.4482 10.284 10.501 10.7013 10.7909 10.9267C11.0815 11.1528 11.5004 11.1004 11.7264 10.8098L11.2002 10.4005C11.7264 10.8098 11.7264 10.8098 11.7264 10.8098L11.7276 10.8083L11.7291 10.8064L11.7329 10.8014L11.7439 10.7868C11.7526 10.7751 11.7642 10.7593 11.7781 10.7396C11.806 10.7004 11.8436 10.6455 11.8876 10.5763C11.9755 10.4383 12.0901 10.2414 12.2043 9.99672C12.4308 9.51136 12.6669 8.81326 12.6669 8.00051C12.6669 7.18775 12.4308 6.48965 12.2043 6.0043C12.0901 5.75961 11.9755 5.56275 11.8876 5.42473C11.8436 5.35555 11.806 5.30065 11.7781 5.26138C11.7642 5.24173 11.7526 5.22596 11.7439 5.21422L11.7329 5.19964L11.7291 5.19465L11.7276 5.19274L11.727 5.19193C11.727 5.19193 11.7264 5.19121 11.2002 5.60051L11.7264 5.19121Z" fill="white"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
+<path d="M21.1888 4.1866C20.8497 3.75065 20.2214 3.67212 19.7855 4.01119C19.35 4.34988 19.2712 4.97715 19.6089 5.41304L19.6097 5.41402L19.6107 5.41531L19.6243 5.43347C19.6376 5.45126 19.6589 5.48033 19.6872 5.52017C19.7438 5.59988 19.828 5.72244 19.9308 5.88385C20.1365 6.20718 20.4145 6.68332 20.6932 7.28057C21.2535 8.48111 21.7994 10.134 21.7994 12.0005C21.7994 13.8671 21.2535 15.52 20.6932 16.7205C20.4145 17.3178 20.1365 17.7939 19.9308 18.1172C19.828 18.2786 19.7438 18.4012 19.6872 18.4809C19.6589 18.5208 19.6376 18.5498 19.6243 18.5676L19.6107 18.5858L19.6097 18.5871L19.6088 18.5882C19.2712 19.0241 19.3501 19.6512 19.7855 19.9899C20.2214 20.329 20.8497 20.2504 21.1888 19.8145L20.4435 19.2348C21.1888 19.8145 21.1888 19.8145 21.1888 19.8145L21.1908 19.8119L21.1936 19.8082L21.2019 19.7974L21.2284 19.7621C21.2503 19.7327 21.2805 19.6915 21.3179 19.6389C21.3925 19.5338 21.4958 19.3832 21.6181 19.191C21.8623 18.8072 22.1843 18.2547 22.5056 17.5663C23.1453 16.1954 23.7994 14.2482 23.7994 12.0005C23.7994 9.75284 23.1453 7.80569 22.5056 6.4348C22.1843 5.74634 21.8623 5.1939 21.6181 4.81009C21.4958 4.61793 21.3925 4.46727 21.3179 4.36217C21.2805 4.30959 21.2503 4.26835 21.2284 4.23893L21.2019 4.20373L21.1936 4.19288L21.1908 4.18917L21.1897 4.18774C21.1897 4.18774 21.1888 4.1866 20.3994 4.80054L21.1888 4.1866Z" fill="white"/>
+<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
 </svg>
diff --git a/src/icons/AudioLow.svg b/src/icons/AudioLow.svg
new file mode 100644
index 0000000..bfa80ce
--- /dev/null
+++ b/src/icons/AudioLow.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
+<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
+</svg>
diff --git a/src/icons/AudioMuted.svg b/src/icons/AudioMuted.svg
new file mode 100644
index 0000000..372ece5
--- /dev/null
+++ b/src/icons/AudioMuted.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.63174 0.583224C2.15798 0.109466 1.38987 0.109466 0.91611 0.583224C0.442351 1.05698 0.442351 1.8251 0.91611 2.29885L5.3958 6.77855H5.37083L15.3629 16.7706V16.7456L20.7144 22.0972C21.1882 22.5709 21.9563 22.5709 22.4301 22.0972C22.9038 21.6234 22.9038 20.8553 22.4301 20.3816L2.63174 0.583224ZM15.3629 3.23319V9.88521L10.2275 4.74987L13.2404 2.2391C14.0833 1.53675 15.3629 2.13608 15.3629 3.23319ZM4.07191 16.8718H7.7929V16.872L13.2404 21.4116C14.0833 22.114 15.3629 21.5146 15.3629 20.4175V20.2018L2.4839 7.32287C1.87536 7.79641 1.48389 8.53577 1.48389 9.36657V14.2838C1.48389 15.7131 2.64258 16.8718 4.07191 16.8718Z" fill="white"/>
+</svg>

From 7d5fb5f041f588996ff0fd910ea5221a2efb418a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:29:32 +0200
Subject: [PATCH 12/20] Add `VolumeIcon`
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/button/VolumeIcon.tsx | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/button/VolumeIcon.tsx

diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx
new file mode 100644
index 0000000..02e1ff2
--- /dev/null
+++ b/src/button/VolumeIcon.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2022 New Vector Ltd
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
+import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
+import { ReactComponent as Audio } from "../icons/Audio.svg";
+
+interface Props {
+  /**
+   * Number between 0 and 1
+   */
+  volume: number;
+}
+
+export function VolumeIcon({ volume }: Props) {
+  if (volume <= 0) return <AudioMuted />;
+  if (volume <= 0.75) return <AudioLow />;
+  return <Audio />;
+}

From a150619d08fc6eb2a97c07bbdf9f2fd460c0c86c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:30:12 +0200
Subject: [PATCH 13/20] Make the button icon change
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/button/Button.tsx                 | 15 +++++++++++----
 src/video-grid/VideoTile.jsx          |  3 ++-
 src/video-grid/VideoTileContainer.jsx |  1 +
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index f1ba94b..5ade524 100644
--- a/src/button/Button.tsx
+++ b/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 AudioIcon } from "../icons/Audio.svg";
+import { VolumeIcon } from "./VolumeIcon";
 
 export type ButtonVariant =
   | "default"
@@ -239,11 +239,18 @@ export function InviteButton({
   );
 }
 
-export function AudioButton(props: Omit<Props, "variant">) {
+interface AudioButtonProps extends Omit<Props, "variant"> {
+  /**
+   * A number between 0 and 1
+   */
+  volume: number;
+}
+
+export function AudioButton({ volume, ...rest }: AudioButtonProps) {
   return (
     <TooltipTrigger tooltip={() => "Local volume"}>
-      <Button variant="icon" {...props}>
-        <AudioIcon />
+      <Button variant="icon" {...rest}>
+        <VolumeIcon volume={volume} />
       </Button>
     </TooltipTrigger>
   );
diff --git a/src/video-grid/VideoTile.jsx b/src/video-grid/VideoTile.jsx
index 286d301..f6103e1 100644
--- a/src/video-grid/VideoTile.jsx
+++ b/src/video-grid/VideoTile.jsx
@@ -38,6 +38,7 @@ export const VideoTile = forwardRef(
       mediaRef,
       onOptionsPress,
       showOptions,
+      localVolume,
       ...rest
     },
     ref
@@ -86,7 +87,7 @@ export const VideoTile = forwardRef(
               styles.audioButton
             )}
           >
-            <AudioButton onPress={onOptionsPress} />
+            <AudioButton volume={localVolume} onPress={onOptionsPress} />
           </div>
         )}
         <video ref={mediaRef} playsInline disablePictureInPicture />
diff --git a/src/video-grid/VideoTileContainer.jsx b/src/video-grid/VideoTileContainer.jsx
index be7567e..c18fa4c 100644
--- a/src/video-grid/VideoTileContainer.jsx
+++ b/src/video-grid/VideoTileContainer.jsx
@@ -82,6 +82,7 @@ export function VideoTileContainer({
         avatar={getAvatar && getAvatar(member, width, height)}
         onOptionsPress={onOptionsPress}
         showOptions={!item.callFeed.isLocal()}
+        localVolume={localVolume}
         {...rest}
       />
       {videoTileSettingsModalState.isOpen && (

From 33ef680c41cae05c2a54bed959385ed4d58d62f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:30:33 +0200
Subject: [PATCH 14/20] Update design of `VideoTileSettingsModal`
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/VideoTileSettingsModal.module.css | 11 +++++++++++
 src/video-grid/VideoTileSettingsModal.tsx        | 15 +++++++++------
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/video-grid/VideoTileSettingsModal.module.css b/src/video-grid/VideoTileSettingsModal.module.css
index 8edff8a..eb6cec8 100644
--- a/src/video-grid/VideoTileSettingsModal.module.css
+++ b/src/video-grid/VideoTileSettingsModal.module.css
@@ -1,5 +1,16 @@
+.videoTileSettingsModal {
+  width: 700px;
+  height: 316px;
+  display: flex;
+}
+
 .content {
+  position: relative;
   margin: 27px 34px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .localVolumePercentage {
diff --git a/src/video-grid/VideoTileSettingsModal.tsx b/src/video-grid/VideoTileSettingsModal.tsx
index f76721d..fd6a28b 100644
--- a/src/video-grid/VideoTileSettingsModal.tsx
+++ b/src/video-grid/VideoTileSettingsModal.tsx
@@ -17,10 +17,10 @@ limitations under the License.
 import React, { ChangeEvent, useState } from "react";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 
-import selectInputStyles from "../input/SelectInput.module.css";
 import { FieldRow } from "../input/Input";
 import { Modal } from "../Modal";
 import styles from "./VideoTileSettingsModal.module.css";
+import { VolumeIcon } from "../button/VolumeIcon";
 
 interface LocalVolumeProps {
   feed: CallFeed;
@@ -39,11 +39,8 @@ const LocalVolume: React.FC<LocalVolumeProps> = ({
 
   return (
     <>
-      <h4 className={selectInputStyles.label}> Local Volume </h4>
       <FieldRow>
-        <span className={styles.localVolumePercentage}>
-          {`${Math.round(localVolume * 100)}%`}
-        </span>
+        <VolumeIcon volume={localVolume} />
         <input
           className={styles.localVolumeSlider}
           type="range"
@@ -65,7 +62,13 @@ interface Props {
 
 export const VideoTileSettingsModal = ({ feed, ...rest }: Props) => {
   return (
-    <Modal title="Feed settings" isDismissable mobileFullScreen {...rest}>
+    <Modal
+      className={styles.videoTileSettingsModal}
+      title="Local volume"
+      isDismissable
+      mobileFullScreen
+      {...rest}
+    >
       <div className={styles.content}>
         <LocalVolume feed={feed} />
       </div>

From 93db217239df3faebe6e2522816c0b8f9ed2deb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:31:16 +0200
Subject: [PATCH 15/20] Update where we jump form icon to icon
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/button/VolumeIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/button/VolumeIcon.tsx b/src/button/VolumeIcon.tsx
index 02e1ff2..d4958e4 100644
--- a/src/button/VolumeIcon.tsx
+++ b/src/button/VolumeIcon.tsx
@@ -30,6 +30,6 @@ interface Props {
 
 export function VolumeIcon({ volume }: Props) {
   if (volume <= 0) return <AudioMuted />;
-  if (volume <= 0.75) return <AudioLow />;
+  if (volume <= 0.5) return <AudioLow />;
   return <Audio />;
 }

From d56b8027869e6736492535646e2fda7128cc8a55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:46:15 +0200
Subject: [PATCH 16/20] Make modal title thicker
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/Modal.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Modal.module.css b/src/Modal.module.css
index bf654d2..96bda6f 100644
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -28,6 +28,7 @@
 }
 
 .modalHeader h3 {
+  font-weight: 600;
   font-size: 24px;
   margin: 0;
 }

From d16e42374fef6a2c4c997071367ce1d5eb9422d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:51:50 +0200
Subject: [PATCH 17/20] Use `::before` to avoid conflicts
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.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 1ba6ec1..cf8d13b 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -67,7 +67,7 @@
   display: none;
 }
 
-.videoTile:not(.isLocal):hover::after {
+.videoTile:not(.isLocal):hover::before {
   content: "";
   position: absolute;
   top: 0;

From 85dfb3c1e51b0f10cc7c87dcee7413c753452ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 2 Aug 2022 14:53:47 +0200
Subject: [PATCH 18/20] Don't use a gradient
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.module.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index cf8d13b..91ca091 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -76,8 +76,7 @@
   height: calc(
     16px + 20px + 16px
   ); /* top padding + button size + buttom padding */
-  background-image: linear-gradient(to bottom, var(--background), transparent);
-  opacity: 0.8;
+  background-color: var(--background-85);
 }
 
 .videoTile:hover .button {

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 19/20] 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;

From 90b4e44bbeebfe57fb476ca6a77d731df0016acb 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:09:53 +0200
Subject: [PATCH 20/20] Fix screen-sharing and uncomment
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.module.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 7d1790a..11cf74c 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -80,7 +80,11 @@
 }
 
 .videoTile:not(.isLocal):not(:hover) .toolbar {
-  //display: none;
+  display: none;
+}
+
+.videoTile:not(.isLocal):hover .presenterLabel {
+  top: calc(42px + 20px); /* toolbar + margin */
 }
 
 .button {
@@ -129,9 +133,7 @@
 
 .presenterLabel {
   position: absolute;
-  top: calc(
-    16px + 20px + 16px + 20px
-  ); /* top padding + button size + buttom padding + top padding */
+  top: 20px;
   left: 50%;
   transform: translateX(-50%);
   background-color: #17191c;