feat(modals): use dark theme

2018-03-12 21:45:00 -07:00 · 2018-03-12 21:45:00 -07:00 · 134ff71c78
parent fef1d8b520
commit 134ff71c78
13 changed files with 621 additions and 268 deletions
--- a/.flowconfig
+++ b/.flowconfig
@ -18,6 +18,7 @@

 ; Ignore packages in node_modules which we (i.e. the jitsi-meet project) have
 ; seen to cause errors and we have chosen not to fix.
+.*/node_modules/@atlaskit/.*/*.js.flow
 .*/node_modules/@atlassian
 .*/node_modules/bower/lib/node_modules/bower-json/test/.*
 .*/node_modules/immutable/dist/immutable.js.flow
--- a/css/_aui_reset.scss
+++ b/css/_aui_reset.scss
@ -135,7 +135,6 @@ h3 {
  margin: 30px 0 0 0;
 }
 h4 {
-  color: #333;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.25;
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@ -101,7 +101,7 @@
            }

            &-content {
-                background-color: $auiDialogContentBg;
+                background-color: $auiDialogBg;
                box-sizing: border-box;
                color: $auiDialogColor;
                font-size: em(14, 12);
@ -126,6 +126,11 @@
        }
    }

+    .input-control {
+        background-color: $auiDialogContentBg;
+        color: $auiDialogColor;
+    }
+
    .form-control:not(:last-child) {
        border-bottom: 1px solid $auiBorderColor;
    }
@ -138,7 +143,6 @@
 }

 .modal-dialog-form {
-    color: $modalTextColor;
    margin-top: 5px !important;

    .input-control {
--- a/css/modals/desktop-picker/_desktop-picker.scss
+++ b/css/modals/desktop-picker/_desktop-picker.scss
@ -36,13 +36,12 @@
 }

 .desktop-picker-source {
-    color: $defaultDarkFontColor;
    margin-top: 10px;
    text-align: center;

    &.is-selected {
        .desktop-source-preview-image-container {
-            background: rgba(0, 0, 0, 0.1);
+            background: rgba(255,255,255,0.3);
            border-radius: $borderRadius;
        }
    }
--- a/css/modals/device-selection/_device-selection.scss
+++ b/css/modals/device-selection/_device-selection.scss
@ -1,6 +1,4 @@
 .device-selection {
-    color: $feedbackInputTextColor;
-
    .device-selectors {
        font-size: 14px;

@ -22,19 +20,15 @@

        /* device-selector-trigger stylings attempt to mimic AtlasKit button */
        .device-selector-trigger {
-            background-color: rgba(9, 30, 66, 0.04);
-            border-radius: 3px;
-            color: #505f79;
+            background-color: #0E1624;
+            border: 1px solid #455166;
+            border-radius: 5px;
            display: flex;
            height: 2.3em;
            justify-content: space-between;
            line-height: 2.3em;
            overflow: hidden;
            padding: 0 8px;
-
-            &:hover {
-                background-color: rgba(9,30,66,.08);
-            }
        }
        .device-selector-trigger-disabled {
            .device-selector-trigger {
@ -108,19 +102,21 @@
    .audio-output-preview {
        font-size: 14px;
        margin-top: 10px;
+
        a {
+            color: 4C9AFF;
            cursor: pointer;
            text-decoration: none;
        }
    }

    .audio-input-preview {
-        background: #f4f5f7;
+        background: #7b7b7b;
        border-radius: 5px;
        height: 6px;

        .audio-input-preview-level {
-            background: #0052cc;
+            background: #4C9AFF;
            border-radius: 5px;
            height: 100%;
            -webkit-transition: width .1s ease-in-out;
--- a/css/modals/speaker_stats/_speaker_stats.scss
+++ b/css/modals/speaker_stats/_speaker_stats.scss
@ -42,10 +42,6 @@
        width: 55%;
    }

-    .speaker-stats-item:nth-child(even) {
-        background: whitesmoke;
-    }
-
    .speaker-stats-item__name,
    .speaker-stats-item__time {
        overflow: hidden;
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@ -14,11 +14,11 @@ $sliderThumbBackground: #3572b0;
 /**
 * Buttons
 */
-$buttonBackground: #f5f5f5;
-$buttonHoverBackground: #e9e9e9;
-$buttonBorder: #ccc;
-$buttonHoverBorder: #999;
-$buttonColor: #333;
+$buttonBackground: #44A5FF;
+$buttonHoverBackground: #2c4062;
+$buttonBorder: transparent;
+$buttonHoverBorder: transparent;
+$buttonColor: #eceef1;

 $buttonLightBackground: #f5f5f5;
 $buttonLightHoverBackground: #e9e9e9;
@ -47,10 +47,10 @@ $reloadProgressBarBg: #0074E0;
 /**
 * Dialog colors
 **/
-$auiDialogColor: #333;
-$auiDialogBg: #f5f5f5;
-$auiDialogContentBg: $baseLight;
-$auiBorderColor: #ccc;
+$auiDialogColor: #eceef1;
+$auiDialogBg: #253858;
+$auiDialogContentBg: #344563;
+$auiBorderColor: #253858;
 $dialogTitleFontWeight: 400;
 $dialogErrorText: #344563;

@ -58,7 +58,7 @@ $dialogErrorText: #344563;
 * Inlay colors
 **/
 $inlayColorBg: lighten($defaultBackground, 20%);
-$inlayBorderColor: lighten($auiDialogContentBg, 10%);
+$inlayBorderColor: lighten($baseLight, 10%);
 $inlayIconBg: #000;
 $inlayIconColor: #fff;
 $inlayFilmstripOnlyColor: #474747;
--- a/css/unsupported-browser/_no-mobile-app.scss
+++ b/css/unsupported-browser/_no-mobile-app.scss
@ -5,7 +5,7 @@
    width: auto;

    &__title {
-        border-bottom: 1px solid $auiBorderColor;
+        border-bottom: 1px solid $inlayBorderColor;
        color: $unsupportedBrowserTitleColor;
        font-weight: 400;
        letter-spacing: 0.5px;
--- a/package-lock.json
+++ b/package-lock.json
@ -4,28 +4,25 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@atlaskit/analytics-next": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@atlaskit/analytics-next/-/analytics-next-1.1.3.tgz",
+      "integrity": "sha512-1r9kU2ZbleLCEpJhoPoor/IBbyRue22sutT/+5b8PY43xRgN4HzYT+lWBJRI9fWpG9yJJXLnr9uAjO8LJUKrCg==",
+      "requires": {
+        "prop-types": "15.6.0"
+      }
+    },
    "@atlaskit/avatar": {
      "version": "8.0.5",
      "resolved": "https://registry.npmjs.org/@atlaskit/avatar/-/avatar-8.0.5.tgz",
      "integrity": "sha1-mJ4NkoR7N4yphKI+oHWY9jUhP/I=",
      "requires": {
        "@atlaskit/dropdown-menu": "3.10.2",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "@atlaskit/util-shared-styles": "2.10.6",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
-      }
-    },
-    "@atlaskit/blanket": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-2.4.3.tgz",
-      "integrity": "sha1-5kJGkzk+FxcZ1z8MDiw4OnqkzYA=",
-      "requires": {
-        "@atlaskit/util-shared-styles": "2.10.6",
-        "babel-runtime": "6.26.0",
-        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/button": {
@ -33,11 +30,11 @@
      "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-5.4.2.tgz",
      "integrity": "sha1-CSu+/KR+fPJJBQzRu9/E18o0KYQ=",
      "requires": {
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "babel-runtime": "6.26.0",
        "classnames": "2.2.5",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/dropdown-menu": {
@ -93,7 +90,7 @@
        "@atlaskit/item": "4.2.11",
        "@atlaskit/layer": "2.7.2",
        "@atlaskit/spinner": "4.0.0",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "@atlaskit/tooltip": "6.0.0",
        "babel-runtime": "6.26.0",
        "classnames": "2.2.5",
@ -219,10 +216,159 @@
      "integrity": "sha1-pasqvkxDkjQXiTb2JYNHmaiZRQ0=",
      "requires": {
        "@atlaskit/field-base": "8.1.13",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
+      }
+    },
+    "@atlaskit/field-text-area": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@atlaskit/field-text-area/-/field-text-area-1.2.0.tgz",
+      "integrity": "sha512-dLZk+KX8F8/nslTYAQEpf3iZnlhmey5uWhtoytBRax2aeBAHAt102E26C86B7Rw5r9JX81c7MuSZWW2pjbdY/Q==",
+      "requires": {
+        "@atlaskit/button": "6.6.3",
+        "@atlaskit/field-base": "8.2.1",
+        "@atlaskit/icon": "10.12.2",
+        "@atlaskit/theme": "2.4.0",
+        "@atlaskit/util-readme": "3.6.5",
+        "babel-runtime": "6.26.0",
+        "prop-types": "15.6.0",
+        "styled-components": "1.4.6"
+      },
+      "dependencies": {
+        "@atlaskit/button": {
+          "version": "6.6.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-6.6.3.tgz",
+          "integrity": "sha512-+NLQrWv6HeJPC32Q6o+3w59F3secYWPT+9AM9nblPOjvRXmIVosafkro8wncVzX07/nx7MnBIXtYJRE+Cv+9Vg==",
+          "requires": {
+            "@atlaskit/analytics-next": "1.1.3",
+            "@atlaskit/theme": "2.4.1",
+            "babel-runtime": "6.26.0",
+            "styled-components": "1.4.6"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "@atlaskit/field-base": {
+          "version": "8.2.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/field-base/-/field-base-8.2.1.tgz",
+          "integrity": "sha512-s18bwvmGug6sYZ6nuHLP33T2AWYZemteZCIaFPwlEKT4MkTXNX3KX9bYy8TRJmQo2+NC4uPVUUT2U8MeF4wBnQ==",
+          "requires": {
+            "@atlaskit/icon": "10.12.2",
+            "@atlaskit/inline-dialog": "5.3.2",
+            "@atlaskit/spinner": "4.2.1",
+            "@atlaskit/theme": "2.4.1",
+            "babel-runtime": "6.26.0",
+            "styled-components": "1.4.6"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "@atlaskit/icon": {
+          "version": "10.12.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-10.12.2.tgz",
+          "integrity": "sha512-OGNCVg8CdyaF/pD6DyhSaiK2pfb5R0jTWezlKCeKNXpmNiLUF4/B5MkOJFBMAHZc1A3EpBr9YNqH/uhJvG9G/Q==",
+          "requires": {
+            "@atlaskit/theme": "2.4.1",
+            "babel-runtime": "6.26.0",
+            "styled-components": "1.4.6",
+            "uuid": "3.1.0"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "@atlaskit/inline-dialog": {
+          "version": "5.3.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/inline-dialog/-/inline-dialog-5.3.2.tgz",
+          "integrity": "sha512-FUZZBi9x6Cr1bpd/f00Q262wLlTfl0Sl7PJUQLoHxy0u7Zg9lBLrUEoxuGh0OlOlqvQA99lJK23igZYOXDe9xA==",
+          "requires": {
+            "@atlaskit/layer": "2.9.1",
+            "@atlaskit/theme": "2.4.1",
+            "styled-components": "1.4.6"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "@atlaskit/layer": {
+          "version": "2.9.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/layer/-/layer-2.9.1.tgz",
+          "integrity": "sha512-nyIVGeS2OhuGR5gIMTYUfRmCG8z/9KMgUzTpbpsB70sH6+d4KSFhfkz+KhKNIa8gvKI6zBc+3UBYSlUW1t1qmQ==",
+          "requires": {
+            "styled-components": "1.4.6"
+          }
+        },
+        "@atlaskit/spinner": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-4.2.1.tgz",
+          "integrity": "sha512-PWJ3hFMl+7rls0vvwFtH6qOu9HKeIHQFtDvJ/+HykmhzIp1tQ+S5DQ+et4ciHfNSh2On2GNiLcZHwXahHvR5WA==",
+          "requires": {
+            "@atlaskit/theme": "2.4.1",
+            "babel-runtime": "6.26.0",
+            "react-transition-group": "2.2.1",
+            "styled-components": "1.4.6"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "react-transition-group": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
+          "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==",
+          "requires": {
+            "chain-function": "1.0.0",
+            "classnames": "2.2.5",
+            "dom-helpers": "3.3.1",
+            "loose-envify": "1.3.1",
+            "prop-types": "15.6.0",
+            "warning": "3.0.0"
+          }
+        }
      }
    },
    "@atlaskit/flag": {
@ -232,12 +378,12 @@
      "requires": {
        "@atlaskit/button": "5.4.2",
        "@atlaskit/icon": "7.1.0",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "@atlaskit/util-shared-styles": "2.10.6",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
        "react-transition-group": "1.2.1",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      },
      "dependencies": {
        "@atlaskit/icon": {
@ -247,7 +393,7 @@
          "requires": {
            "babel-runtime": "6.26.0",
            "prop-types": "15.6.0",
-            "styled-components": "1.3.0"
+            "styled-components": "1.4.6"
          }
        }
      }
@ -259,7 +405,7 @@
      "requires": {
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/inline-dialog": {
@ -268,10 +414,10 @@
      "integrity": "sha1-xwPi9seo0M+nrcPXgJK0bE7ShkQ=",
      "requires": {
        "@atlaskit/layer": "2.7.2",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/inline-message": {
@ -282,10 +428,10 @@
        "@atlaskit/button": "3.6.0",
        "@atlaskit/icon": "7.1.0",
        "@atlaskit/inline-dialog": "5.0.2",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      },
      "dependencies": {
        "@atlaskit/button": {
@ -297,7 +443,7 @@
            "babel-runtime": "6.26.0",
            "classnames": "2.2.5",
            "prop-types": "15.6.0",
-            "styled-components": "1.3.0"
+            "styled-components": "1.4.6"
          }
        },
        "@atlaskit/icon": {
@ -307,7 +453,7 @@
          "requires": {
            "babel-runtime": "6.26.0",
            "prop-types": "15.6.0",
-            "styled-components": "1.3.0"
+            "styled-components": "1.4.6"
          }
        }
      }
@ -375,6 +521,33 @@
        }
      }
    },
+    "@atlaskit/layer-manager": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@atlaskit/layer-manager/-/layer-manager-2.8.0.tgz",
+      "integrity": "sha512-/o4c+zyF3nOeR3xJGFeUpOh8TUbcX293285Nvxcbo1F+knM7WA1JhE786XkTK05nZ2HCqK6zHKSlyIoKdJYtkw==",
+      "requires": {
+        "focusin": "2.0.0",
+        "prop-types": "15.6.0",
+        "react-transition-group": "2.2.1",
+        "styled-components": "1.4.6",
+        "tabbable": "1.1.2"
+      },
+      "dependencies": {
+        "react-transition-group": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
+          "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==",
+          "requires": {
+            "chain-function": "1.0.0",
+            "classnames": "2.2.5",
+            "dom-helpers": "3.3.1",
+            "loose-envify": "1.3.1",
+            "prop-types": "15.6.0",
+            "warning": "3.0.0"
+          }
+        }
+      }
+    },
    "@atlaskit/lozenge": {
      "version": "3.4.2",
      "resolved": "https://registry.npmjs.org/@atlaskit/lozenge/-/lozenge-3.4.2.tgz",
@ -383,7 +556,7 @@
        "@atlaskit/util-shared-styles": "1.7.1",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      },
      "dependencies": {
        "@atlaskit/util-shared-styles": {
@ -397,15 +570,100 @@
      }
    },
    "@atlaskit/modal-dialog": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-2.6.0.tgz",
-      "integrity": "sha1-gqXtcN8W5s6ttZHQDeYvTzx3jiE=",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@atlaskit/modal-dialog/-/modal-dialog-3.4.0.tgz",
+      "integrity": "sha512-5KOZrwCanzXD3b9+kQYIS4tACAj/HjcwY+yLGY1SCxlDxj94uUNr+tTAznng3EKRf64UbqshrRQXBj8Fcol4sw==",
      "requires": {
-        "@atlaskit/blanket": "2.4.3",
-        "@atlaskit/util-shared-styles": "2.10.6",
-        "babel-runtime": "6.26.0",
+        "@atlaskit/blanket": "4.1.1",
+        "@atlaskit/button": "6.6.3",
+        "@atlaskit/icon": "10.12.2",
+        "@atlaskit/layer-manager": "2.8.0",
+        "@atlaskit/theme": "2.4.0",
+        "focusin": "2.0.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "raf-schd": "2.1.0",
+        "react-transition-group": "2.2.1",
+        "styled-components": "1.4.6",
+        "tabbable": "1.1.2"
+      },
+      "dependencies": {
+        "@atlaskit/blanket": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/@atlaskit/blanket/-/blanket-4.1.1.tgz",
+          "integrity": "sha512-LPqRNVkR6+mI67EutF6iQIUARf1MWpjdVxeLaMJZOG/ej8u9dYIkoOOVeliXx/bx+4X5NfnKikeg34MB6VU5DQ==",
+          "requires": {
+            "@atlaskit/theme": "2.4.1",
+            "styled-components": "1.4.6"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "@atlaskit/button": {
+          "version": "6.6.3",
+          "resolved": "https://registry.npmjs.org/@atlaskit/button/-/button-6.6.3.tgz",
+          "integrity": "sha512-+NLQrWv6HeJPC32Q6o+3w59F3secYWPT+9AM9nblPOjvRXmIVosafkro8wncVzX07/nx7MnBIXtYJRE+Cv+9Vg==",
+          "requires": {
+            "@atlaskit/analytics-next": "1.1.3",
+            "@atlaskit/theme": "2.4.1",
+            "babel-runtime": "6.26.0",
+            "styled-components": "1.4.6"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "@atlaskit/icon": {
+          "version": "10.12.2",
+          "resolved": "https://registry.npmjs.org/@atlaskit/icon/-/icon-10.12.2.tgz",
+          "integrity": "sha512-OGNCVg8CdyaF/pD6DyhSaiK2pfb5R0jTWezlKCeKNXpmNiLUF4/B5MkOJFBMAHZc1A3EpBr9YNqH/uhJvG9G/Q==",
+          "requires": {
+            "@atlaskit/theme": "2.4.1",
+            "babel-runtime": "6.26.0",
+            "styled-components": "1.4.6",
+            "uuid": "3.1.0"
+          },
+          "dependencies": {
+            "@atlaskit/theme": {
+              "version": "2.4.1",
+              "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.1.tgz",
+              "integrity": "sha512-I4AMg+asUUwaruwsWDaUzub2zhEKYHhZ5tRlaNQ+8dhATpO1RSu6g9FSgwnAZ20M4Cf+YITVND/wyNpAON5HCQ==",
+              "requires": {
+                "prop-types": "15.6.0",
+                "styled-components": "1.4.6"
+              }
+            }
+          }
+        },
+        "react-transition-group": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.2.1.tgz",
+          "integrity": "sha512-q54UBM22bs/CekG8r3+vi9TugSqh0t7qcEVycaRc9M0p0aCEu+h6rp/RFiW7fHfgd1IKpd9oILFTl5QK+FpiPA==",
+          "requires": {
+            "chain-function": "1.0.0",
+            "classnames": "2.2.5",
+            "dom-helpers": "3.3.1",
+            "loose-envify": "1.3.1",
+            "prop-types": "15.6.0",
+            "warning": "3.0.0"
+          }
+        }
      }
    },
    "@atlaskit/multi-select": {
@ -419,12 +677,12 @@
        "@atlaskit/spinner": "3.4.2",
        "@atlaskit/tag": "3.1.3",
        "@atlaskit/tag-group": "3.5.3",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "@atlaskit/util-shared-styles": "2.10.6",
        "babel-runtime": "6.26.0",
        "classnames": "2.2.5",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0",
+        "styled-components": "1.4.6",
        "uid": "0.0.2"
      },
      "dependencies": {
@ -437,7 +695,7 @@
            "classnames": "2.2.5",
            "create-error": "0.3.1",
            "prop-types": "15.6.0",
-            "styled-components": "1.3.0"
+            "styled-components": "1.4.6"
          }
        },
        "@atlaskit/spinner": {
@ -450,7 +708,7 @@
            "prop-types": "15.6.0",
            "prop-types-extra": "1.0.1",
            "react-transition-group": "1.2.1",
-            "styled-components": "1.3.0"
+            "styled-components": "1.4.6"
          }
        }
      }
@ -460,12 +718,12 @@
      "resolved": "https://registry.npmjs.org/@atlaskit/spinner/-/spinner-4.0.0.tgz",
      "integrity": "sha1-u8MaEjYPwzNhegZsMPhmRmJoOhA=",
      "requires": {
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
        "prop-types-extra": "1.0.1",
        "react-transition-group": "1.2.1",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/tabs": {
@ -473,14 +731,14 @@
      "resolved": "https://registry.npmjs.org/@atlaskit/tabs/-/tabs-4.0.1.tgz",
      "integrity": "sha1-vM2WQ8nSO9kR+0GCK4U1oYJHHM8=",
      "requires": {
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "@atlaskit/util-shared-styles": "1.7.1",
        "classnames": "2.2.5",
        "css-element-queries": "0.3.2",
        "debounce": "1.1.0",
        "keycode": "2.1.9",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      },
      "dependencies": {
        "@atlaskit/util-shared-styles": {
@ -571,13 +829,12 @@
      }
    },
    "@atlaskit/theme": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.2.0.tgz",
-      "integrity": "sha1-uHNsuA3U7TnizAkPLbFdz4eEgBo=",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@atlaskit/theme/-/theme-2.4.0.tgz",
+      "integrity": "sha512-JORaZ4/9Bm8V2qsSC4O8Zn6aTHM0MJA4nVJPzxlvFJlz0CX6GTQ+CJiPPssJGidBR8Y78j0LvNXASH5ijLBChw==",
      "requires": {
-        "@atlaskit/util-shared-styles": "2.10.6",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/tooltip": {
@ -586,11 +843,11 @@
      "integrity": "sha1-rn3xMCmvO1iZqcuKNPPIT8K7mpc=",
      "requires": {
        "@atlaskit/layer": "2.7.2",
-        "@atlaskit/theme": "2.2.0",
+        "@atlaskit/theme": "2.4.0",
        "@atlaskit/util-shared-styles": "2.10.6",
        "babel-runtime": "6.26.0",
        "prop-types": "15.6.0",
-        "styled-components": "1.3.0"
+        "styled-components": "1.4.6"
      }
    },
    "@atlaskit/util-common": {
@ -603,6 +860,19 @@
        "keycode": "2.1.9"
      }
    },
+    "@atlaskit/util-readme": {
+      "version": "3.6.5",
+      "resolved": "https://registry.npmjs.org/@atlaskit/util-readme/-/util-readme-3.6.5.tgz",
+      "integrity": "sha1-M6jgyQEI9liaYtiZdOH30J59zuc=",
+      "requires": {
+        "@atlaskit/util-shared-styles": "2.10.6",
+        "decamelize": "1.2.0",
+        "prop-types": "15.6.0",
+        "react-docgen": "2.20.1",
+        "react-syntax-highlighter": "3.0.2",
+        "styled-components": "1.4.6"
+      }
+    },
    "@atlaskit/util-shared-styles": {
      "version": "2.10.6",
      "resolved": "https://registry.npmjs.org/@atlaskit/util-shared-styles/-/util-shared-styles-2.10.6.tgz",
@ -1107,6 +1377,11 @@
      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
    },
+    "ast-types": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz",
+      "integrity": "sha512-UY7+9DPzlJ9VM8eY0b2TUZcZvF+1pO0hzMtAyjBYKhOmnvRlqYNYnWdtsMj0V16CGaMlpL0G1jnLbLo4AyotuQ=="
+    },
    "async": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/async/-/async-0.9.0.tgz",
@ -2194,7 +2469,7 @@
    "babylon": {
      "version": "6.18.0",
      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
-      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+      "integrity": "sha1-ry87iPpvXB5MY00aD46sT1WzleM="
    },
    "balanced-match": {
      "version": "1.0.0",
@ -3342,14 +3617,6 @@
      "resolved": "https://registry.npmjs.org/css-element-queries/-/css-element-queries-0.3.2.tgz",
      "integrity": "sha1-U12AiRs68hOV0AXxmQX+UVS1zP8="
    },
-    "css-in-js-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz",
-      "integrity": "sha512-yuWmPMD9FLi50Xf3k8W8oO3WM1eVnxEGCldCLyfusQ+CgivFk0s23yst4ooW6tfxMuSa03S6uUEga9UhX6GRrA==",
-      "requires": {
-        "hyphenate-style-name": "1.0.2"
-      }
-    },
    "css-loader": {
      "version": "0.28.7",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz",
@ -3675,7 +3942,6 @@
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-      "dev": true,
      "requires": {
        "esutils": "2.0.2"
      }
@ -4128,7 +4394,7 @@
        "esprima": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
-          "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==",
+          "integrity": "sha1-RJnt3NERDgshi6zy+n9/WfVcqAQ=",
          "dev": true
        },
        "globals": {
@ -5017,6 +5283,11 @@
        }
      }
    },
+    "focusin": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/focusin/-/focusin-2.0.0.tgz",
+      "integrity": "sha1-WMARgN+xlJ8D493u4GNzn8M7b/w="
+    },
    "for-in": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -5995,29 +6266,6 @@
      "integrity": "sha1-nMj/ABF3lXoRcmq1CNQVu4Cxi88=",
      "dev": true
    },
-    "glamor": {
-      "version": "2.20.40",
-      "resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.40.tgz",
-      "integrity": "sha512-DNXCd+c14N9QF8aAKrfl4xakPk5FdcFwmH7sD0qnC0Pr7xoZ5W9yovhUrY/dJc3psfGGXC58vqQyRtuskyUJxA==",
-      "requires": {
-        "fbjs": "0.8.16",
-        "inline-style-prefixer": "3.0.8",
-        "object-assign": "4.1.1",
-        "prop-types": "15.6.0",
-        "through": "2.3.8"
-      },
-      "dependencies": {
-        "inline-style-prefixer": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
-          "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=",
-          "requires": {
-            "bowser": "1.9.2",
-            "css-in-js-utils": "2.0.0"
-          }
-        }
-      }
-    },
    "glob": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@ -6236,6 +6484,11 @@
        "sntp": "2.1.0"
      }
    },
+    "highlight.js": {
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.8.0.tgz",
+      "integrity": "sha1-OO7vQM1F6t2+yMnlI4+3p4OjtoU="
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -6496,7 +6749,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        },
        "supports-color": {
@ -7467,6 +7720,21 @@
        "signal-exit": "3.0.2"
      }
    },
+    "lowlight": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.1.tgz",
+      "integrity": "sha512-CpDhyVhI+xHjruiGvH2F/Fr5q5aTn5A6Oyh7MI+4oI8G0A1E7p9a3Zqv9Hzx9WByK8gAiNifEueAXz+cA2xdEA==",
+      "requires": {
+        "highlight.js": "9.12.0"
+      },
+      "dependencies": {
+        "highlight.js": {
+          "version": "9.12.0",
+          "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
+          "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
+        }
+      }
+    },
    "lru-cache": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
@ -7811,7 +8079,7 @@
        "async": {
          "version": "2.6.0",
          "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
-          "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
+          "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
          "requires": {
            "lodash": "4.17.4"
          }
@ -8071,6 +8339,14 @@
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.5.3.tgz",
      "integrity": "sha1-Jp1cR2gQ7JLtvntsLygxY4T5p+g="
    },
+    "node-dir": {
+      "version": "0.1.17",
+      "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
+      "integrity": "sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=",
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
    "node-fetch": {
      "version": "1.7.3",
      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@ -9087,7 +9363,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        },
        "supports-color": {
@ -9151,7 +9427,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        },
        "supports-color": {
@ -9215,7 +9491,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        },
        "supports-color": {
@ -9279,7 +9555,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        },
        "supports-color": {
@ -9601,6 +9877,11 @@
      "integrity": "sha1-DPf4T5Rj/wrlHExLFC2VvjdyTZw=",
      "dev": true
    },
+    "raf-schd": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-2.1.0.tgz",
+      "integrity": "sha512-6OXM6ObuPnyqjiHVz/XaFTm/yEYC1PXYMt/UFCwMvLQK1Wqlc2f7eU4+8JbgjfZLiQNQU9miFEGPnFUEMEx2hA=="
+    },
    "railroad-diagrams": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
@ -9754,6 +10035,35 @@
        }
      }
    },
+    "react-docgen": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-2.20.1.tgz",
+      "integrity": "sha512-NYmD8nDPMWpIpqWqhSZjQ3P5iQml55IMkDG0ZInyWP7JD2ljaNhrxNWZnXPrOezUu6bYlcZUCxjw19s7zhE2uw==",
+      "requires": {
+        "async": "2.6.0",
+        "babel-runtime": "6.26.0",
+        "babylon": "5.8.38",
+        "commander": "2.14.1",
+        "doctrine": "2.1.0",
+        "node-dir": "0.1.17",
+        "recast": "0.12.9"
+      },
+      "dependencies": {
+        "async": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
+          "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
+          "requires": {
+            "lodash": "4.17.4"
+          }
+        },
+        "babylon": {
+          "version": "5.8.38",
+          "resolved": "https://registry.npmjs.org/babylon/-/babylon-5.8.38.tgz",
+          "integrity": "sha1-7JsSCxG/bM1Bc6GL8hfmC3mFn/0="
+        }
+      }
+    },
    "react-dom": {
      "version": "16.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.2.0.tgz",
@ -9984,6 +10294,16 @@
        }
      }
    },
+    "react-syntax-highlighter": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-3.0.2.tgz",
+      "integrity": "sha1-d8VWOFu/cdwul0upa/3Q7e9cMZI=",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "highlight.js": "9.8.0",
+        "lowlight": "1.9.1"
+      }
+    },
    "react-timer-mixin": {
      "version": "0.13.3",
      "resolved": "https://registry.npmjs.org/react-timer-mixin/-/react-timer-mixin-0.13.3.tgz",
@ -10084,6 +10404,30 @@
        }
      }
    },
+    "recast": {
+      "version": "0.12.9",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.12.9.tgz",
+      "integrity": "sha512-y7ANxCWmMW8xLOaiopiRDlyjQ9ajKRENBH+2wjntIbk3A6ZR1+BLQttkmSHMY7Arl+AAZFwJ10grg2T6f1WI8A==",
+      "requires": {
+        "ast-types": "0.10.1",
+        "core-js": "2.5.3",
+        "esprima": "4.0.0",
+        "private": "0.1.8",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz",
+          "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
    "redent": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@ -11341,17 +11685,17 @@
      }
    },
    "styled-components": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-1.3.0.tgz",
-      "integrity": "sha1-BxG1qC/nhLRY/W5QVLhCdRxUOms=",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-1.4.6.tgz",
+      "integrity": "sha1-WPMuimq1EPsUgekB6DjgR38UiwY=",
      "requires": {
        "buffer": "5.1.0",
        "css-to-react-native": "1.0.6",
        "fbjs": "0.8.16",
-        "glamor": "2.20.40",
        "inline-style-prefixer": "2.0.5",
        "is-function": "1.0.1",
        "is-plain-object": "2.0.4",
+        "prop-types": "15.6.0",
        "supports-color": "3.2.3"
      }
    },
@ -11397,6 +11741,11 @@
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
    },
+    "tabbable": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-1.1.2.tgz",
+      "integrity": "sha512-77oqsKEPrxIwgRcXUwipkj9W5ItO97L6eUT1Ar7vh+El16Zm4M6V+YU1cbipHEa6q0Yjw8O3Hoh8oRgatV5s7A=="
+    },
    "table": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/table/-/table-4.0.2.tgz",
@ -11668,7 +12017,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
        }
      }
    },
@ -11682,7 +12031,7 @@
    "uglifyjs-webpack-plugin": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.2.tgz",
-      "integrity": "sha512-CG/NvzXfemUAm5Y4Guh5eEaJYHtkG7kKNpXEJHp9QpxsFVB5/qKvYWoMaq4sa99ccZ0hM3MK8vQV9XPZB4357A==",
+      "integrity": "sha1-51FtQ2ev23FcOEeEHrRvlMRcork=",
      "dev": true,
      "requires": {
        "cacache": "10.0.4",
@ -11715,7 +12064,7 @@
        "schema-utils": {
          "version": "0.4.5",
          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
-          "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
+          "integrity": "sha1-IYNvBgiqwXt4+ePiTa/xSlyhOj4=",
          "dev": true,
          "requires": {
            "ajv": "6.2.1",
@ -11725,7 +12074,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        }
      }
@ -12011,7 +12360,7 @@
        "async": {
          "version": "2.6.0",
          "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
-          "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
+          "integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
          "dev": true,
          "requires": {
            "lodash": "4.17.4"
@ -12460,7 +12809,7 @@
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
          "dev": true
        }
      }
--- a/package.json
+++ b/package.json
@ -20,16 +20,18 @@
    "@atlaskit/dropdown-menu": "3.10.2",
    "@atlaskit/droplist": "4.11.1",
    "@atlaskit/field-text": "4.0.1",
+    "@atlaskit/field-text-area": "1.2.0",
    "@atlaskit/flag": "6.1.0",
    "@atlaskit/icon": "10.0.0",
    "@atlaskit/inline-dialog": "5.0.2",
    "@atlaskit/inline-message": "3.0.1",
+    "@atlaskit/layer-manager": "2.8.0",
    "@atlaskit/lozenge": "3.4.2",
-    "@atlaskit/modal-dialog": "2.6.0",
+    "@atlaskit/modal-dialog": "3.4.0",
    "@atlaskit/multi-select": "7.1.3",
    "@atlaskit/spinner": "4.0.0",
    "@atlaskit/tabs": "4.0.1",
-    "@atlaskit/theme": "2.2.0",
+    "@atlaskit/theme": "2.4.0",
    "@atlaskit/tooltip": "6.0.0",
    "autosize": "1.18.13",
    "es6-iterator": "2.0.3",
@ -71,7 +73,7 @@
    "redux-thunk": "2.2.0",
    "strophe.js": "github:jitsi/strophejs#1.2.14-1",
    "strophejs-plugin-disco": "0.0.2",
-    "styled-components": "1.3.0",
+    "styled-components": "1.4.6",
    "url-polyfill": "github:github/url-polyfill#39734186de44612bc5a16eb25f5407adcc5b2e7c",
    "uuid": "3.1.0",
    "xmldom": "0.1.27"
--- a/react/features/base/dialog/components/StatelessDialog.web.js
+++ b/react/features/base/dialog/components/StatelessDialog.web.js
@ -1,9 +1,10 @@
 // @flow

 import Button, { ButtonGroup } from '@atlaskit/button';
-import ModalDialog from '@atlaskit/modal-dialog';
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
+import { withContextFromProps } from '@atlaskit/layer-manager';
+import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';

 import { translate } from '../../i18n';
@ -30,6 +31,8 @@ const OK_BUTTON_ID = 'modal-dialog-ok-button';
 type Props = {
    ...DialogProps,

+    i18n: Object,
+
    /**
     * Disables dismissing the dialog when the blanket is clicked. Enabled
     * by default.
@ -57,10 +60,26 @@ type Props = {
    width: string
 };

+/**
+ * ContexTypes is used as a workaround for Atlaskit's modal being displayed
+ * outside of the normal App hierarchy, thereby losing context. ContextType
+ * is responsible for taking its props and passing them into children.
+ *
+ * @type {ReactElement}
+ */
+const ContextProvider = withContextFromProps({
+    i18n: PropTypes.object
+});
+
 /**
 * Web dialog that uses atlaskit modal-dialog to display dialogs.
 */
 class StatelessDialog extends Component<Props> {
+    /**
+     * The functional component to be used for rendering the modal footer.
+     */
+    _Footer: ?Function
+
    _dialogElement: ?HTMLElement;

    /**
@ -78,30 +97,24 @@ class StatelessDialog extends Component<Props> {
        this._onKeyDown = this._onKeyDown.bind(this);
        this._onSubmit = this._onSubmit.bind(this);
        this._setDialogElement = this._setDialogElement.bind(this);
+
+        this._Footer = this._createFooterConstructor(props);
    }

    /**
-     * React Component method that executes once component is mounted.
+     * React Component method that executes before the component is updated.
     *
     * @inheritdoc
-     */
-    componentDidMount() {
-        this._updateButtonFocus();
-    }
-
-    /**
-     * React Component method that executes once component is updated.
-     *
-     * @param {Object} prevProps - The previous properties, before the update.
+     * @param {Object} nextProps - The next properties, before the update.
     * @returns {void}
     */
-    componentDidUpdate(prevProps) {
-        // if there is an update in any of the buttons enable/disable props
-        // update the focus if needed
-        if (prevProps.okDisabled !== this.props.okDisabled
-                || prevProps.cancelDisabled !== this.props.cancelDisabled
-                || prevProps.submitDisabled !== this.props.submitDisabled) {
-            this._updateButtonFocus();
+    componentWillUpdate(nextProps) {
+        // If button states have changed, update the Footer constructor function
+        // so buttons of the proper state are rendered.
+        if (nextProps.okDisabled !== this.props.okDisabled
+                || nextProps.cancelDisabled !== this.props.cancelDisabled
+                || nextProps.submitDisabled !== this.props.submitDisabled) {
+            this._Footer = this._createFooterConstructor(nextProps);
        }
    }

@ -112,36 +125,86 @@ class StatelessDialog extends Component<Props> {
     * @returns {ReactElement}
     */
    render() {
-        return (
+        const {
+            children,
+            t /* The following fixes a flow error: */ = _.identity,
+            titleString,
+            titleKey,
+            width
+        } = this.props;

-            /**
-             * Enabled light theme for dialogs until all in-dialog components
-             * support dark theme.
-             */
-            <AtlasKitThemeProvider mode = 'light'>
-                <div
-                    onKeyDown = { this._onKeyDown }
-                    ref = { this._setDialogElement }>
-                    <ModalDialog
-                        footer = { this._renderFooter() }
-                        header = { this._renderHeader() }
-                        isOpen = { true }
-                        onDialogDismissed = { this._onDialogDismissed }
-                        width = { this.props.width || 'medium' }>
-                        <div>
-                            <form
-                                className = 'modal-dialog-form'
-                                id = 'modal-dialog-form'
-                                onSubmit = { this._onSubmit }>
-                                { this.props.children }
-                            </form>
-                        </div>
-                    </ModalDialog>
-                </div>
-            </AtlasKitThemeProvider>
+        return (
+            <Modal
+                autoFocus = { true }
+                footer = { this._Footer }
+                heading = { titleString || t(titleKey) }
+                i18n = { this.props.i18n }
+                onClose = { this._onDialogDismissed }
+                onDialogDismissed = { this._onDialogDismissed }
+                shouldCloseOnEscapePress = { true }
+                width = { width || 'medium' }>
+                {
+
+                    /**
+                     * Wrapping the contents of {@link Modal} with
+                     * {@link ContextProvider} is a workaround for the
+                     * i18n context becoming undefined as modal gets rendered
+                     * outside of the normal react app context.
+                     */
+                }
+                <ContextProvider i18n = { this.props.i18n }>
+                    <div
+                        onKeyDown = { this._onKeyDown }
+                        ref = { this._setDialogElement }>
+                        <form
+                            className = 'modal-dialog-form'
+                            id = 'modal-dialog-form'
+                            onSubmit = { this._onSubmit }>
+                            { children }
+                        </form>
+                    </div>
+                </ContextProvider>
+            </Modal>
        );
    }

+    _onCancel: () => Function;
+
+    /**
+     * Returns a functional component to be used for the modal footer.
+     *
+     * @param {Object} options - The configuration for how the buttons in the
+     * footer should display. Essentially {@code StatelessDialog} props should
+     * be passed in.
+     * @private
+     * @returns {ReactElement}
+     */
+    _createFooterConstructor(options) {
+        // Filter out falsy (null) values because {@code ButtonGroup} will error
+        // if passed in anything but buttons with valid type props.
+        const buttons = [
+            this._renderOKButton(options),
+            this._renderCancelButton(options)
+        ].filter(Boolean);
+
+        return function Footer(modalFooterProps) {
+            return (
+                <ModalFooter showKeyline = { modalFooterProps.showKeyline } >
+                    {
+
+                        /**
+                         * Atlaskit has this empty span (JustifySim) so...
+                         */
+                    }
+                    <span />
+                    <ButtonGroup>
+                        { buttons }
+                    </ButtonGroup>
+                </ModalFooter>
+            );
+        };
+    }
+
    _onCancel: () => void;

    /**
@ -188,11 +251,19 @@ class StatelessDialog extends Component<Props> {
    /**
     * Renders Cancel button.
     *
+     * @param {Object} options - The configuration for the Cancel button.
+     * @param {boolean} options.cancelDisabled - True if the cancel button
+     * should not be rendered.
+     * @param {string} options.cancelTitleKey - The translation key to use as
+     * text on the button.
+     * @param {boolean} options.isModal - True if the cancel button should not
+     * be rendered.
     * @private
-     * @returns {*} The Cancel button if enabled and dialog is not modal.
+     * @returns {ReactElement|null} The Cancel button if enabled and dialog is
+     * not modal.
     */
-    _renderCancelButton() {
-        if (this.props.cancelDisabled || this.props.isModal) {
+    _renderCancelButton(options = {}) {
+        if (options.cancelDisabled || options.isModal) {
            return null;
        }

@ -207,62 +278,26 @@ class StatelessDialog extends Component<Props> {
                key = 'cancel'
                onClick = { this._onCancel }
                type = 'button'>
-                { t(this.props.cancelTitleKey || 'dialog.Cancel') }
+                { t(options.cancelTitleKey || 'dialog.Cancel') }
            </Button>
        );
    }

-    /**
-     * Renders component in dialog footer.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderFooter() {
-        // Filter out falsy (null) values because {@code ButtonGroup} will error
-        // if passed in anything but buttons with valid type props.
-        const buttons = [
-            this._renderCancelButton(),
-            this._renderOKButton()
-        ].filter(Boolean);
-
-        return (
-            <footer className = 'modal-dialog-footer'>
-                <ButtonGroup>
-                    { buttons }
-                </ButtonGroup>
-            </footer>
-        );
-    }
-
-    /**
-     * Renders component in dialog header.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderHeader() {
-        const {
-            t /* The following fixes a flow error: */ = _.identity
-        } = this.props;
-
-        return (
-            <header>
-                <h3>
-                    { this.props.titleString || t(this.props.titleKey) }
-                </h3>
-            </header>
-        );
-    }
-
    /**
     * Renders OK button.
     *
+     * @param {Object} options - The configuration for the OK button.
+     * @param {boolean} options.okDisabled - True if the button should display
+     * as disabled and clicking should have no effect.
+     * @param {string} options.okTitleKey - The translation key to use as text
+     * on the button.
+     * @param {boolean} options.submitDisabled - True if the button should not
+     * be rendered.
     * @private
-     * @returns {*} The OK button if enabled.
+     * @returns {ReactElement|null} The OK button if enabled.
     */
-    _renderOKButton() {
-        if (this.props.submitDisabled) {
+    _renderOKButton(options = {}) {
+        if (options.submitDisabled) {
            return null;
        }

@ -275,11 +310,11 @@ class StatelessDialog extends Component<Props> {
                appearance = 'primary'
                form = 'modal-dialog-form'
                id = { OK_BUTTON_ID }
-                isDisabled = { this.props.okDisabled }
+                isDisabled = { options.okDisabled }
                key = 'submit'
                onClick = { this._onSubmit }
                type = 'button'>
-                { t(this.props.okTitleKey || 'dialog.Ok') }
+                { t(options.okTitleKey || 'dialog.Ok') }
            </Button>
        );
    }
@ -327,40 +362,6 @@ class StatelessDialog extends Component<Props> {
            }
        }
    }
-
-    /**
-     * Updates focused button, if we have a reference to the dialog element.
-     * Focus on available button if there is no focus already.
-     *
-     * @private
-     * @returns {void}
-     */
-    _updateButtonFocus() {
-        const dialogElement = this._dialogElement;
-
-        if (dialogElement) {
-
-            // if we have a focused element inside the dialog, skip changing
-            // the focus
-            if (dialogElement.contains(document.activeElement)) {
-                return;
-            }
-
-            let buttonToFocus;
-
-            if (this.props.submitDisabled) {
-                buttonToFocus
-                    = dialogElement.querySelector(`[id=${CANCEL_BUTTON_ID}]`);
-            } else if (!this.props.okDisabled) {
-                buttonToFocus
-                    = dialogElement.querySelector(`[id=${OK_BUTTON_ID}]`);
-            }
-
-            if (buttonToFocus) {
-                buttonToFocus.focus();
-            }
-        }
-    }
 }

 export default translate(StatelessDialog);
--- a/react/features/device-selection/DeviceSelectionPopup.js
+++ b/react/features/device-selection/DeviceSelectionPopup.js
@ -1,5 +1,6 @@
 /* global JitsiMeetJS */

+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import Logger from 'jitsi-meet-logger';
 import React from 'react';
 import ReactDOM from 'react-dom';
@ -234,7 +235,9 @@ export default class DeviceSelectionPopup {
        ReactDOM.render(
            <I18nextProvider
                i18n = { this._i18next }>
-                <DeviceSelectionDialogBase { ...props } />
+                <AtlasKitThemeProvider mode = 'dark'>
+                    <DeviceSelectionDialogBase { ...props } />
+                </AtlasKitThemeProvider>
            </I18nextProvider>,
            document.getElementById('react'));
    }
--- a/react/features/feedback/components/FeedbackDialog.web.js
+++ b/react/features/feedback/components/FeedbackDialog.web.js
@ -1,5 +1,6 @@
 /* global interfaceConfig */

+import { FieldTextAreaStateless } from '@atlaskit/field-text-area';
 import StarIcon from '@atlaskit/icon/glyph/star';
 import StarFilledIcon from '@atlaskit/icon/glyph/star-filled';
 import PropTypes from 'prop-types';
@ -219,12 +220,14 @@ class FeedbackDialog extends Component {
                        </div>
                    </div>
                    <div className = 'details'>
-                        <textarea
+                        <FieldTextAreaStateless
                            autoFocus = { true }
                            className = 'input-control'
                            id = 'feedbackTextArea'
+                            isLabelHidden = { true }
                            onChange = { this._onMessageChange }
                            placeholder = { t('dialog.feedbackHelp') }
+                            shouldFitContainer = { true }
                            value = { message } />
                    </div>
                </div>