From ea2ea89ef76e36505f2f1114f12c1917a91f6803 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Mon, 29 Jun 2020 15:45:47 +0300
Subject: [PATCH] fix(prejoin): dialout popup buttons

---
 css/_prejoin-dialog.scss     |   5 ++
 css/_premeeting-screens.scss | 122 +++++++++++++++++------------------
 2 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/css/_prejoin-dialog.scss b/css/_prejoin-dialog.scss
index 5c084bcfc..3e77ca271 100644
--- a/css/_prejoin-dialog.scss
+++ b/css/_prejoin-dialog.scss
@@ -96,6 +96,11 @@
             padding: 0 8px;
         }
     }
+
+    .prejoin-dialog-btn.primary,
+    .action-btn.prejoin-dialog-btn.text {
+        width: 310px;
+    }
 }
 
 .prejoin-dialog-callout {
diff --git a/css/_premeeting-screens.scss b/css/_premeeting-screens.scss
index a93691854..de1f76afa 100644
--- a/css/_premeeting-screens.scss
+++ b/css/_premeeting-screens.scss
@@ -1,7 +1,7 @@
 /**
  * Shared style for full screen local track based dialogs/modals.
  */
- .premeeting-screen {
+.premeeting-screen {
     align-items: stretch;
     background: #1C2025;
     bottom: 0;
@@ -14,6 +14,66 @@
     top: 0;
     z-index: $toolbarZ + 1;
 
+    .action-btn {
+        border-radius: 3px;
+        color: #fff;
+        cursor: pointer;
+        display: inline-block;
+        font-size: 15px;
+        line-height: 24px;
+        margin-top: 16px;
+        padding: 7px 16px;
+        position: relative;
+        text-align: center;
+        width: 286px;
+
+        &.primary {
+            background: #0376DA;
+            border: 1px solid #0376DA;
+        }
+
+        &.secondary {
+            background: transparent;
+            border: 1px solid #5E6D7A;
+        }
+
+        &.text {
+            width: auto;
+            font-size: 13px;
+            margin: 0;
+            padding: 0;
+        }
+
+        &.disabled {
+            background: #5E6D7A;
+            border: 1px solid #5E6D7A;
+            color: #AFB6BC;
+            cursor: initial;
+
+            .icon {
+                & > svg {
+                    fill: #AFB6BC;
+                }
+            }
+
+            .options {
+                border-left: 1px solid #AFB6BC;
+            }
+        }
+
+        .options {
+            align-items: center;
+            border-left: 1px solid #fff;
+            display: flex;
+            height: 100%;
+            justify-content: center;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 40px;
+        }
+    }
+
     .content {
         align-items: center;
         background-image: linear-gradient(transparent, black);
@@ -97,66 +157,6 @@
                 color: $defaultWarningColor;
             }
         }
-
-        .action-btn {
-            border-radius: 3px;
-            color: #fff;
-            cursor: pointer;
-            display: inline-block;
-            font-size: 15px;
-            line-height: 24px;
-            margin-top: 16px;
-            padding: 7px 16px;
-            position: relative;
-            text-align: center;
-            width: 286px;
-
-            &.primary {
-                background: #0376DA;
-                border: 1px solid #0376DA;
-            }
-
-            &.secondary {
-                background: transparent;
-                border: 1px solid #5E6D7A;
-            }
-
-            &.text {
-                width: auto;
-                font-size: 13px;
-                margin: 0;
-                padding: 0;
-            }
-
-            &.disabled {
-                background: #5E6D7A;
-                border: 1px solid #5E6D7A;
-                color: #AFB6BC;
-                cursor: initial;
-
-                .icon {
-                    & > svg {
-                        fill: #AFB6BC;
-                    }
-                }
-
-                .options {
-                    border-left: 1px solid #AFB6BC;
-                }
-            }
-
-            .options {
-                align-items: center;
-                border-left: 1px solid #fff;
-                display: flex;
-                height: 100%;
-                justify-content: center;
-                position: absolute;
-                right: 0;
-                top: 0;
-                width: 40px;
-            }
-        }
     }
 
     .media-btn-container {