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] 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>