ref: merge prejoin with lobby

signal-noise · Jun 9, 2020 · 29dc63f · 29dc63f
1 parent 475a2ae
commit 29dc63f
Show file tree

Hide file tree

Showing 68 changed files with 1,415 additions and 1,211 deletions.
diff --git a/css/_lobby.scss b/css/_lobby.scss
@@ -1,115 +1,48 @@
 #lobby-screen {
-    align-items: center;
-    color: $overflowMenuItemColor;
-    display: flex;
-    flex-direction: column;
-    font-size: 1.2em;
-    margin: 48px 36px;
-
-    span {
-        padding: 8px 0;
-    }
-
-    .title {
-        color: $defaultColor;
-        font-size: 2em;
-    }
-
-    .roomName {
-        font-size: 1em;
-    }
+    .content {
 
-    .participantInfo {
-        align-items: center;
-        align-self: stretch;
-        border: 1px solid #B8C7E0;
-        border-radius: 4px;
-        display: flex;
-        flex-direction: column;
-        margin: 24px 0;
-        padding: 34px 0;
-
-        &:hover {
-            padding-top: 0px;
+        .container {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
 
-            .editButton {
-                display: flex;
+            .spinner {
+                margin: 30px;
             }
-        }
-
-        .editButton {
-            align-self: stretch;
-            display: none;
-            justify-content: flex-end;
-            padding: 5px;
-            position: relative;
-
-            button {
-                background-color: transparent;
-                border-width: 0;
-                margin: 0;
-                padding: 0;
+
+            .joining-message {
+                margin: 10px;
             }
         }
 
-        .displayName {
-            color: $defaultColor;
-            font-size: 1.3em;
-        }
-    }
-
-    .form {
-        align-self: stretch;
-        display: flex;
-        flex-direction: column;
-        margin: 32px 0;
-
-        input {
-            margin: 5px 0 15px 0;
-        }
-
-        span {
-            color: white;
-            font-size: 1.3em;
-            text-align: center;
+        .form {
+            align-items: stretch;
+            display: flex;
+            flex-direction: column;
+            min-width: 400px;
         }
-    }
-
-    .joiningContainer {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        margin: 36px 0;
 
-        span {
-            margin-top: 36px;
-            text-align: center;
+        .participant-info {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
         }
     }
 }
 
-#lobby-dialog {
-    align-self: stretch;
+#lobby-section {
     display: flex;
     flex-direction: column;
-    margin: 32px 0;
-
-    .description {
-        margin-bottom: 18px;
-    }
 
-    .field {
+    .control-row {
         display: flex;
         flex-direction: row;
+        justify-content: space-between;
+        margin-top: 15px;
 
-        :first-child {
-            align-items: center;
-            display: flex;
-            padding-right: 15px;
-        }
-
-        :last-child {
-            flex: 1;
+        label {
+            font-size: 14px;
+            font-weight: bold;
         }
     }
 }
@@ -162,11 +95,7 @@
             }
         }
     }
-}
 
-// Common styles
-
-#lobby-dialog, #lobby-screen, #knocking-participant-list {
     input {
         align-self: stretch;
         background-color: transparent;
@@ -208,4 +137,4 @@
             border-width: 0;
         }
     }
-}
+}
diff --git a/css/_prejoin.scss b/css/_prejoin.scss
@@ -1,18 +1,4 @@
 .prejoin {
-    &-full-page {
-        background: #1C2025;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: $toolbarZ + 1;
-    }
-
-    &-input-area-container {
-        position: absolute;
-        bottom: 48px;
-        width: 100%;
-        z-index: 2;
-    }
 
     &-input-area {
         margin: 0 auto;
@@ -27,65 +13,6 @@
         margin-bottom: 16px;
     }
 
-    &-btn {
-        border-radius: 3px;
-        color: #fff;
-        cursor: pointer;
-        display: inline-block;
-        font-size: 15px;
-        line-height: 24px;
-        padding: 7px 16px;
-        position: relative;
-        text-align: center;
-        width: 286px;
-
-        &--primary {
-            background: #0376DA;
-            border: 1px solid #0376DA;
-        }
-
-        &--secondary {
-            background: #2A3A4B;
-            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;
-
-            .prejoin-btn-icon {
-                & > svg {
-                    fill: #AFB6BC;
-                }
-            }
-
-            .prejoin-btn-options {
-                border-left: 1px solid #AFB6BC;
-            }
-        }
-    }
-
-    &-btn-options {
-        align-items: center;
-        border-left: 1px solid #fff;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        position: absolute;
-        right: 0;
-        top: 0;
-        width: 40px;
-    }
-
     &-text-btns {
         display: flex;
         justify-content: space-between;
@@ -179,25 +106,6 @@
         margin: 200px auto 0 auto;
     }
 
-    &-btn-container {
-        display: flex;
-        justify-content: center;
-        margin-top: 32px;
-        width: 100%;
-
-        &> div {
-            margin: 0 12px;
-        }
-
-        .settings-button-small-icon {
-            right: -8px;
-
-            &--hovered {
-                right: -10px;
-            }
-        }
-    }
-
     &-overlay {
         height: 100%;
         position: absolute;
@@ -217,22 +125,20 @@
 
     &-status {
         align-items: center;
-        bottom: 0;
+        align-self: stretch;
         color: #fff;
         display: flex;
         font-size: 13px;
         min-height: 24px;
         justify-content: center;
-        position: absolute;
         text-align: center;
-        width: 100%;
         z-index: 1;
 
         &--warning {
-            background: rgba(241, 173, 51, 0.5)
+            background: rgba(241, 173, 51, 0.7)
         }
         &--ok {
-            background: rgba(49, 183, 106, 0.5);
+            background: rgba(49, 183, 106, 0.7);
         }
     }
 
@@ -291,63 +197,3 @@
     }
 
 }
-
-.prejoin-copy {
-    &-meeting {
-        cursor: pointer;
-        color: #fff;
-        font-size: 15px;
-        font-weight: 300;
-        line-height: 24px;
-        position: relative;
-    }
-
-    &-url {
-        max-width: 278px;
-        padding: 8px 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &-badge {
-        border-radius: 4px;
-        height: 100%;
-        line-height: 38px;
-        position: absolute;
-        padding-left: 10px;
-        text-align: left;
-        top: 0;
-        width: 100%;
-
-        &--hover {
-            background: #1C2025;
-        }
-
-        &--done {
-            background: #31B76A;
-        }
-    }
-
-    &-icon {
-        position: absolute;
-        right: 8px;
-        top: 8px;
-
-       &--white {
-           &> svg > path {
-               fill: #fff
-           }
-       }
-
-       &--light {
-           &> svg > path {
-               fill: #D1DBE8;
-           }
-       }
-    }
-
-    &-textarea {
-        position: absolute;
-        left: -9999px;
-    }
-}