Change style of woka and name on video container

Signed-off-by: Gregoire Parant <g.parant@thecodingmachine.com>

front/src/Components/Video/VideoMediaBox.svelte

@@ -58,15 +58,12 @@
         <div class="rtc-error" />
     {/if}
     <!-- {#if !$constraintStore || $constraintStore.video === false} -->
-    <i
+    <i class="container">
-        class="container"
+        <span style="background-color: {getColorByString(name)};">{peer.userName}</span>
-        class:has-video={$constraintStore && $constraintStore.video === true}
-        class:minimized={(!$constraintStore || $constraintStore.video !== true) && minimized}
-        style="background-color: {getColorByString(name)};"
-    >
-        <span style="noselect">{peer.userName}</span>
-        <div class="woka-icon"><Woka userId={peer.userId} placeholderSrc={""} /></div>
     </i>
+    <div class="woka-icon {($constraintStore && $constraintStore.video !== false) || minimized ? '' : 'no-video'}">
+        <Woka userId={peer.userId} placeholderSrc={""} />
+    </div>
     <!-- {/if} -->
     {#if $constraintStore && $constraintStore.audio === false}
         <img
@@ -99,22 +96,6 @@
     .container {
         display: flex;
         flex-direction: column;
-        padding-top: 15px;
-
-        &.has-video {
-            left: auto;
-            transform: scale(0.5);
-            opacity: 0.5;
-        }
-
-        &.minimized {
-            transform: scale(0.5);
-            opacity: 0.5;
-        }
-
-        .woka-icon {
-            margin-right: 3px;
-        }
     }
     video.no-video {
         visibility: collapse;

front/style/style.scss

@@ -38,6 +38,8 @@ body .message-info.warning{
 .video-container {
     display: flex;
     transition: all 0.2s ease;
+    background-color: #00000099;
+    border-radius: 15px;
     cursor: url('./images/cursor_pointer.png'), pointer;
     width: 100%;
 
@@ -53,32 +55,72 @@ body .message-info.warning{
         max-width: 100%;
         width: 100%;
         cursor: url('./images/cursor_pointer.png'), pointer;
+        border-radius: 15px;
 
         &.mobile{
             width: 100%;
             height: 21vh;
         }
+        &:focus{
+            outline: none;
+        }
     }
 
     i {
         position: absolute;
         width: 100px;
         height: 100px;
-        left: calc(50% - 50px);
+        left: -6px;
-        top: calc(50% - 50px);
+        top: calc(100% - 28px);
-        background-color: black;
-        border-radius: 50%;
         text-align: center;
-        font-size: 14px;
         color: white;
+        span{
+            font-size: 14px;
+            margin: 2px;
+            background-color: white;
+            border: solid 3px black;
+            border-radius: 8px;
+        }
+    }
+
+    .woka-icon{
+        position: absolute;
+        left: 90px;
+        top: calc(100% - 24px);
+        height: 23px;
         overflow: hidden;
+        border-radius: 50%;
+        transition: all 0.2s ease;
+        &.no-video{
+            left: calc(50% - 30px);
+            top: calc(50% - 30px);
+            height: auto;
+            img{
+                height: 60px;
+                width: 60px;
+            }
+        }
+        img{
+            height: 40px;
+            width: 40px;
+        }
+    }
+    &:hover{
+        .woka-icon{
+            top: calc(100% - 30px);
+            height: 30px;
+            &.no-video{
+                top: calc(100% - 32px);
+                height: 35px;
+            }
+        }
     }
 
     img {
         position: absolute;
         display: none;
-        width: 40px;
+        width: 20px;
-        height: 40px;
+        height: 20px;
         left: 5px;
         bottom: 5px;
         padding: 10px;
@@ -147,10 +189,6 @@ body .message-info.warning{
             width: 160px;
         }
     }
-
-    video:focus{
-        outline: none;
-    }
 }
 
 .sound-progress{