Webrtc client side (#4026)

* WebRTC Server side

* WebRTC client side

* Bug fixes and improvements

* Pushing UI improvements for webrtc (#3728)

* Pushing UI improvements for webrtc

* Updating webrtc css

* PLT-3943 WebRTC P1: bug fixes and improvements

* Video resolution set to std, reduce volume of ringtone and flip video horizontally

* Fix calling a user B while WebRTC RHS is still opened

* Leave RHS opened when call ends, Fix isBusy on popover and channel_header

* Fix pre-release feature, RHS & System Console

* PLT-3945 - Updating UI for webrtc (#3908)

* PLT-3943 Webrtc p1

* Add ongoing call indicator when RHS is opened

* UI updates to to webrtc notifcation (#3959)

1 files changed, 71 insertions, 1 deletions

diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss
index 6e4488fca..e252086ae 100644
--- a/webapp/sass/utils/_mixins.scss
+++ b/webapp/sass/utils/_mixins.scss
@@ -26,4 +26,74 @@
 @mixin cursor($value) {
     cursor: -webkit-$value;
     cursor: zoom-$value;
-}
\ No newline at end of file
+}
+
+// Webrtc button
+@mixin webrtc-button {
+    .webrtc__button {
+        @include border-radius(50px);
+        display: block;
+        height: 32px;
+        width: 32px;
+
+        &.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;
+                }
+            }
+
+            circle {
+                fill-opacity: 0;
+            }
+        }
+    }
+
+    a {
+        &[disabled] {
+            .webrtc__button {
+                &:hover {
+                    background: none;
+                    box-shadow: none;
+                }
+
+                &:hover {
+                    circle {
+                        fill: $video-circle-offline;
+                    }
+                }
+            }
+        }
+    }
+}