feat(ui) update AtlasKit components

css/_atlaskit_overrides.scss

@@ -2,65 +2,43 @@
  * Move the @atlaskit/flag container up a little bit so it does not cover the
  * toolbar with the first notification.
  */
-.jIMojv{
+.atlaskit-portal > #notifications-container {
     bottom: calc(#{$newToolbarSizeWithPadding}) !important;
 }
 
-/**
- * Disable the slide-in animation for @atlaskit/flag due to the animation
- * repeating for each queued flag once it becomes the top flag.
- */
- .mIBKA:first-child {
-    animation: cbfRuT 0s !important;
-    -webkit-animation: cbfRuT 0s !important;
-}
-
 .modal-dialog-form {
-    /**
-     * Update the @atlaskit/dropdown-menu trigger wrapper to make sure it looks
-     * click-able.
-     */
-    .cjJUnw {
-        cursor: pointer;
-    }
-
     /**
      * Override @atlaskit/dropdown-menu styling when in a modal because the
      * dropdown backgrounds clash with the modal backgrounds.
      */
-    .cksvax[data-role=droplistContent] {
-        border: 1px solid #455166;
+    .dropdown-menu div[style*="transform"] {
+        outline: 1px solid #455166;
     }
 }
 
 /**
- * Override @atlaskit/theme styling for the top toolbar so it displays over
- * the video thumbnail while obscuring as little as possible.
+ * Override @atlaskit/modal-dialog header styling
  */
-.videocontainer .tOoji {
-    background: none;
+.atlaskit-portal [role="dialog"] header {
+    .jitsi-icon svg {
+        fill: #B8C7E0;
+        cursor: pointer;
+    }
 }
 
 /**
- * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
- * with the correct height.
+ * Override @atlaskit/theme styling for the top toolbar so it displays over
+ * the video thumbnail while obscuring as little as possible.
  */
-.toolbox-button-wth-dialog .eYJELv {
-    max-height: initial;
+.videocontainer__toptoolbar > div > div {
+    background: none;
 }
 
-/**
- * Override @atlaskit/InlineDialog styling for the overflowmenu so it displays
- * a scrollable list of elements at small screen widths.
- */
-.sc-eNQAEJ {
-    overflow-y: auto;
-}
 
 /**
  * Keep overflow menu within screen vertical bounds and make it scrollable.
  */
-.toolbox-button-wth-dialog .sc-ckVGcZ.fdAqDG > :first-child {
-    max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 16px);
+ .toolbox-button-wth-dialog > div:nth-child(2) {
+    max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px);
     overflow-y: auto;
-}
+}

css/_audio-preview.scss

@@ -143,8 +143,8 @@
         top: 18px;
     }
 
-   // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div > div:nth-child(2) > div > div {
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
         outline: none;
         padding: 0;
     }

css/_base.scss

@@ -45,20 +45,12 @@ body {
  * pad the modal container in order for the modals to be centered
  * while also taking the chat size into consideration.
 */
-@media (min-width: 480px + $sidebarWidth) {
-    .shift-right [class^="Modal__FillScreen"] {
+@media (min-width: 581px) {
+    .shift-right .atlaskit-portal > div:not(.Tooltip) {
         padding-left: $sidebarWidth;
     }
 }
 
-/**
- * Similarly, we offset the notifications when the chat is open by
- * padding the container.
-*/
-.shift-right [class^="styledFlagGroup-"] {
-    padding-left: $sidebarWidth;
-}
-
 .jitsi-icon svg {
     fill: white;
 }

css/_chat.scss

@@ -103,25 +103,19 @@
     position: relative;
     width: 100%;
     z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+    align-items: center;
+    box-sizing: border-box;
+    color: #fff;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
 
-    .chat-close {
-        align-items: center;
-        bottom: 8px;
-        color: white;
+    .jitsi-icon > svg {
         cursor: pointer;
-        display: flex;
-        font-size: 18px;
-        height: 40px;
-        justify-content: center;
-        line-height: 15px;
-        padding: 4px;
-        position: absolute;
-        right: 5px;
-        width: 40px;
-
-        &:hover {
-            color: rgba(255, 255, 255, 0.8);
-        }
+        fill: #A4B8D1;
     }
 }
 
@@ -184,6 +178,10 @@
         text-overflow: ellipsis;
         overflow: hidden;
     }
+
+    @media (max-width: 580px) {
+        display: none !important;
+    }
 }
 
 .chatmessage {

css/_country-picker.scss

@@ -69,7 +69,7 @@
 }
 
 // Override @Atlaskit/inline-dialog styles
-.cpick-container > div > div:nth-child(2) > div > div {
+.cpick-container > div:nth-child(2) {
     outline: none;
     padding: 8px 0 0 0;
 }

css/_prejoin.scss

@@ -129,7 +129,7 @@
     }
 
     &-dropdown-container {
-        & > div > div:nth-child(2) > div > div {
+        & > div:nth-child(2) {
             background: #fff;
             padding: 0;
         }

css/_responsive.scss

@@ -177,23 +177,23 @@
 }
 
 @media (min-width: 480px) and (max-width: 580px) {
-    .shift-right [class^="Modal__PositionerAbsolute"] {
+    .shift-right .focus-lock > div > div {
         @include full-size-modal-positioner();
     }
 
-    .shift-right [class^="Modal__Dialog-"] {
+    .shift-right .focus-lock [role="dialog"] {
         @include full-size-modal-dialog();
     }
 }
 
 @media (min-width: 580px) and (max-width: 680px) {
     .mobile-browser {
-        &.shift-right [class^="Modal__PositionerAbsolute"] {
+        &.shift-right .focus-lock > div > div {
             @include full-size-modal-positioner();
         }
 
-        &.shift-right [class^="Modal__Dialog-"] {
+        &.shift-right .focus-lock [role="dialog"] {
             @include full-size-modal-dialog();
         }
     }
-}
+}

css/_toolbars.scss

@@ -42,9 +42,11 @@
         display: none;
     }
 
-    &.shift-right {
-        margin-left: $sidebarWidth;
-        width: calc(100% - #{$sidebarWidth});
+    @media (min-width: 581px) {
+        &.shift-right {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
+        }
     }
 
     .toolbox-background {
@@ -88,31 +90,31 @@
                     margin: 0px 4px;
                     width: 38px;
                     height: 38px;
-        
+
                     &:hover {
                         background-color: #daebfa;
                         border: 1px solid #daebfa;
                     }
-        
+
                     &.toggled {
                         background: #2a3a4b;
                         border: 1px solid #5e6d7a;
-    
+
                         svg {
                             fill: #fff;
                         }
-        
+
                         &:hover {
                             background-color: #5e6d7a;
                         }
                     }
-        
+
                     &.disabled, .disabled & {
                         cursor: initial;
                         color: #fff;
                         background-color: #a4b8d1;
                     }
-    
+
                     svg {
                         fill: #5e6d7a;
                     }
@@ -124,7 +126,7 @@
                         border: 1px solid $hangupColor;
                         width: 40px;
                         height: 40px;
-                
+
                         &:hover {
                             background-color: $hangupColor;
                         }
@@ -262,7 +264,7 @@
             &:hover, &.toggled {
                 background: $newToolbarButtonHoverColor;
             }
-    
+
             &.disabled {
                 cursor: initial !important;
                 background-color: #a4b8d1 !important;

css/_video-preview.scss

@@ -63,7 +63,7 @@
     }
 
     // Override @atlaskit/InlineDialog container which is made with styled components
-    & > div > div:nth-child(2) > div > div {
+    & > div:nth-child(2) {
         outline: none;
         padding: 0;
     }

css/_videolayout_default.scss

@@ -182,10 +182,12 @@
         z-index: $zindex2;
     }
 
-    &.shift-right {
-        &#largeVideoContainer {
-            margin-left: $sidebarWidth;
-            width: calc(100% - #{$sidebarWidth});
+    @media (min-width: 581px) {
+        &.shift-right {
+            &#largeVideoContainer {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
+            }
         }
     }
 }

css/filmstrip/_tile_view.scss

@@ -47,12 +47,14 @@
         width: 100%;
         z-index: $filmstripVideosZ;
 
-        &.shift-right {
-            margin-left: $sidebarWidth;
-            width: calc(100% - #{$sidebarWidth});
+        @media (min-width: 581px) {
+            &.shift-right {
+                margin-left: $sidebarWidth;
+                width: calc(100% - #{$sidebarWidth});
 
-            #filmstripRemoteVideos {
-                width: calc(100vw - #{$sidebarWidth});
+                #filmstripRemoteVideos {
+                    width: calc(100vw - #{$sidebarWidth});
+                }
             }
         }
     }

css/modals/device-selection/_device-selection.scss

@@ -39,7 +39,7 @@
 
         .device-selector-trigger-text {
             overflow: hidden;
-            margin-left: 8px;
+            text-align: center;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 100%;

css/modals/settings/_settings.scss

@@ -23,6 +23,10 @@
         padding: 20px 0px 4px 0px;
     }
 
+    input[type="checkbox"] + svg + span {
+        color: #9FB0CC;
+    }
+
     .calendar-tab,
     .more-tab,
     .profile-edit {

modules/UI/videolayout/LargeVideoManager.js

@@ -372,7 +372,7 @@ export default class LargeVideoManager {
         let widthToUse = this.preferredWidth || window.innerWidth;
         const { isOpen } = APP.store.getState()['features/chat'];
 
-        if (isOpen) {
+        if (isOpen && window.innerWidth > 580) {
             /**
              * If chat state is open, we re-compute the container width
              * by subtracting the default width of the chat.