PLT-4316 - Webrtc improvements (#4525)

3 files changed, 26 insertions, 52 deletions

diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss
index 5e71e3a7b..0049fe1b8 100644
--- a/webapp/sass/components/_tooltip.scss
+++ b/webapp/sass/components/_tooltip.scss
@@ -8,3 +8,9 @@
         word-break: break-word;
     }
 }
+
+#webrtcTooltip {
+    .tooltip-inner {
+        word-break: normal;
+    }
+}
diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss
index b025ab00c..c9deada26 100644
--- a/webapp/sass/components/_webrtc.scss
+++ b/webapp/sass/components/_webrtc.scss
@@ -2,10 +2,14 @@
 
 .webrtc__user-profile {
     @include webrtc-button;
+    position: absolute;
+    right: 7px;
     text-align: center;
+    top: 5px;
 
     #webrtc-btn {
-        display: inherit;
+        height: 23px;
+        width: 23px;
     }
 }
 
@@ -15,6 +19,11 @@
     margin-right: 10px;
     position: relative;
     top: 13px;
+
+    svg {
+        position: relative;
+        width: 20px;
+    }
 }
 
 .webrtc__notification--rhs {
diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index e252086ae..6a041d6ec 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -32,68 +32,27 @@
 @mixin webrtc-button {
     .webrtc__button {
         @include border-radius(50px);
+        background: $button--ready;
         display: block;
-        height: 32px;
-        width: 32px;
+        height: 33px;
+        text-align: center;
+        width: 33px;
 
         &.on,
         &:hover {
             background: darken($button--ready, 5%);
         }
 
-        &:hover circle {
-            fill: darken($button--ready, 5%);
-        }
-
-        circle {
-            fill: $button--ready;
-
-            &.offline {
-                fill: $video-circle-offline;
-            }
-        }
-
-        path {
-            .on {
-                display: none;
-            }
-
-            .off {
-                display: block;
-            }
-        }
-
-        &.on {
-            path {
-                .on {
-                    display: block;
-                }
-
-                .off {
-                    display: none;
-                }
-            }
+        &.offline {
+            background: $video-circle-offline;
 
-            circle {
-                fill-opacity: 0;
+            &:hover {
+                background: $video-circle-offline;
             }
         }
-    }
 
-    a {
-        &[disabled] {
-            .webrtc__button {
-                &:hover {
-                    background: none;
-                    box-shadow: none;
-                }
-
-                &:hover {
-                    circle {
-                        fill: $video-circle-offline;
-                    }
-                }
-            }
+        svg {
+            fill: $white;
         }
     }
 }