ref(css): move aui css to jitsi-meet

app.js

@@ -11,9 +11,6 @@ import 'jquery-contextmenu';
 import 'jQuery-Impromptu';
 import 'autosize';
 
-import 'aui-css';
-import 'aui-experimental-css';
-
 import conference from './conference';
 import API from './modules/API';
 import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';

css/_aui_reset.scss

@@ -0,0 +1,230 @@
+/* Fonts and line heights */
+/**
+ * RESET
+ */
+html,
+body,
+p,
+div,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+img,
+pre,
+form,
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+ul,
+ol,
+dl {
+  margin: 0;
+}
+img,
+fieldset {
+  border: 0;
+}
+@-moz-document url-prefix() {
+  img {
+    font-size: 0;
+  }
+  img:-moz-broken {
+    font-size: inherit;
+  }
+}
+/* https://github.com/necolas/normalize.css */
+/* Customised to remove styles for unsupported browsers */
+details,
+main,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+input[type="button"],
+input[type="submit"],
+input[type="reset"] {
+  -webkit-appearance: button;
+}
+/**
+ * TYPOGRAPHY - 14px base font size, agnostic font stack
+ */
+body {
+  color: #333;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.42857142857143;
+}
+/* International Font Stacks*/
+[lang|=en] {
+  font-family: Arial, sans-serif;
+}
+[lang|=ja] {
+  font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Verdana, Arial, sans-serif;
+}
+/* Default margins */
+p,
+ul,
+ol,
+dl,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+blockquote,
+pre {
+  margin: 10px 0 0 0;
+}
+/* No top margin to interfere with box padding */
+p:first-child,
+ul:first-child,
+ol:first-child,
+dl:first-child,
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child,
+blockquote:first-child,
+pre:first-child {
+  margin-top: 0;
+}
+/* Headings: desired line height in px / font size = unitless line height */
+h1 {
+  color: #333;
+  font-size: 32px;
+  font-weight: normal;
+  line-height: 1.25;
+  text-transform: none;
+  margin: 30px 0 0 0;
+}
+h2 {
+  color: #333;
+  font-size: 24px;
+  font-weight: normal;
+  line-height: 1.25;
+  text-transform: none;
+  margin: 30px 0 0 0;
+}
+h3 {
+  color: #333;
+  font-size: 20px;
+  font-weight: normal;
+  line-height: 1.5;
+  text-transform: none;
+  margin: 30px 0 0 0;
+}
+h4 {
+  color: #333;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.25;
+  text-transform: none;
+  margin: 20px 0 0 0;
+}
+h5 {
+  color: #333;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1.42857143;
+  text-transform: none;
+  margin: 20px 0 0 0;
+}
+h6 {
+  color: #707070;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1.66666667;
+  text-transform: uppercase;
+  margin: 20px 0 0 0;
+}
+h1:first-child,
+h2:first-child,
+h3:first-child,
+h4:first-child,
+h5:first-child,
+h6:first-child {
+  margin-top: 0;
+}
+/* Nice styles for using subheadings */
+h1 + h2,
+h2 + h3,
+h3 + h4,
+h4 + h5,
+h5 + h6 {
+  margin-top: 10px;
+}
+
+
+/* Other typographical elements */
+small {
+  color: #707070;
+  font-size: 12px;
+  line-height: 1.33333333333333;
+}
+code,
+kbd {
+  font-family: monospace;
+}
+var,
+address,
+dfn,
+cite {
+  font-style: italic;
+}
+cite:before {
+  content: "\2014 \2009";
+}
+blockquote {
+  border-left: 1px solid #ccc;
+  color: #707070;
+  margin-left: 19px;
+  padding: 10px 20px;
+}
+blockquote > cite {
+  display: block;
+  margin-top: 10px;
+}
+q {
+  color: #707070;
+}
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+abbr {
+  border-bottom: 1px #707070 dotted;
+  cursor: help;
+}
+
+a {
+  color: #3572b0;
+  text-decoration: none;
+}
+a:focus,
+a:hover,
+a:active {
+  text-decoration: underline;
+}

css/_base.scss

@@ -123,6 +123,9 @@ form {
 * Dialogs fade
 */
 .aui-blanket {
+    background: #000;
+    transition: opacity 0.2s, visibility 0.2s;
+    transition-delay: 0.1s;
     visibility: visible;
 }
 

css/_utils.scss

@@ -35,4 +35,8 @@
     display: -ms-flexbox !important;
     display: -webkit-flex !important;
     display: flex !important;
-}
+}
+
+.hidden {
+  display: none;
+}

css/main.scss

@@ -33,6 +33,7 @@
 /* Modules BEGIN */
 
 @import 'dial-out';
+@import 'aui_reset';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';

css/modals/_dialog.scss

@@ -1,6 +1,10 @@
 .dialog {
-    visibility: visible;
+    box-sizing: border-box;
     height: auto;
+    min-height: 131px;
+    overflow: visible;
+    visibility: visible;
+    width: 400px;
 
     h1, h2, h3, h4, h5, h6 {
         color: $auiDialogColor;
@@ -10,10 +14,27 @@
 
         &-icon {
             color: $auiDialogColor;
+            text-indent: -999em;
 
             &-small {
                 width: 14px;
                 height: 14px;
+
+                &:before {
+                    color: inherit;
+                    font-family: "FontAwesome";
+                    font-size: 16px;
+                    -webkit-font-smoothing: antialiased;
+                    font-style: normal;
+                    font-weight: normal;
+                    left: 0;
+                    line-height: 1;
+                    margin-top: -8px;
+                    position: absolute;
+                    text-indent: 0;
+                    speak: none;
+                    top: 50%;
+                }
             }
         }
 
@@ -22,6 +43,10 @@
             right: 20px;
             position: absolute;
             top: -49px;
+
+            &:before {
+                content: "\f00d";
+            }
         }
 
         &-dialog2 {
@@ -31,8 +56,16 @@
             }
 
             &-header {
-                height: em(58, 12);
                 border-bottom: 1px solid $auiBorderColor;
+                border-radius: 5px 5px 0 0;
+                box-sizing: border-box;
+                color: #333;
+                display: table;
+                font-weight: normal;
+                height: em(58, 12);
+                margin-top: -69px;
+                padding: 0 20px;
+                width: 100%;
 
                 h2 {
                     font-size: em(20, 12);
@@ -41,19 +74,40 @@
                 }
 
                 &-main {
+                    display: table-cell;
                     padding-right: 0;
+                    max-width: 400px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    vertical-align: middle;
+                    white-space: nowrap;
+
                 }
             }
 
             &-footer {
                 border-top: 1px solid $auiBorderColor;
+                border-radius: 0 0 5px 5px;
+                box-sizing: border-box;
+                height: 51px;
+                overflow: hidden;
+                padding: 10px 20px;
+                width: 100%;
+
+                &:empty {
+                    height: 5px;
+                    padding: 0;
+                }
             }
 
             &-content {
-                font-size: em(14, 12);
-                min-height: 0;
                 background-color: $auiDialogContentBg;
+                box-sizing: border-box;
                 color: $auiDialogColor;
+                font-size: em(14, 12);
+                overflow: auto;
+                max-height: 100%;
+                padding: 20px;
 
                 p,span, h3 {
                     font-weight: $labelFontWeight;
@@ -77,6 +131,12 @@
     }
 }
 
+@media all and (max-width: 420px) {
+  .aui-dialog2-small .aui-dialog2-content {
+    height: 100%;
+  }
+}
+
 .modal-dialog-form {
     color: $modalTextColor;
     margin-top: 5px !important;

package.json

@@ -31,7 +31,6 @@
     "@atlaskit/tabs": "4.0.1",
     "@atlaskit/theme": "2.2.0",
     "@atlaskit/tooltip": "6.0.0",
-    "@atlassian/aui": "6.0.6",
     "autosize": "1.18.13",
     "es6-iterator": "2.0.3",
     "es6-symbol": "3.1.1",
@@ -114,8 +113,6 @@
     "lint"
   ],
   "browser": {
-    "aui-css": "./node_modules/@atlassian/aui/dist/aui/css/aui.min.css",
-    "aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css",
     "autosize": "./node_modules/autosize/build/jquery.autosize.js",
     "jQuery-Impromptu": "jQuery-Impromptu/src/jquery-impromptu.js"
   }

react/features/device-selection/popup.js

@@ -1,8 +1,5 @@
 /* global JitsiMeetJS */
 
-import 'aui-css';
-import 'aui-experimental-css';
-
 // FIXME: remove once atlaskit work with React 16.
 import '../base/react/prop-types-polyfill.js';
 

webpack.config.js

@@ -4,8 +4,6 @@ const process = require('process');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const webpack = require('webpack');
 
-const auiCSS = `${__dirname}/node_modules/@atlassian/aui/dist/aui/css/`;
-
 /**
  * The URL of the Jitsi Meet deployment to be proxy to in the context of
  * development with webpack-dev-server.
@@ -87,7 +85,7 @@ const config = {
         }, {
             // Expose jquery as the globals $ and jQuery because it is expected
             // to be available in such a form by multiple jitsi-meet
-            // dependencies including AUI, lib-jitsi-meet.
+            // dependencies including lib-jitsi-meet.
 
             loader: 'expose-loader?$!expose-loader?jQuery',
             test: /\/node_modules\/jquery\/.*\.js$/
@@ -104,17 +102,6 @@ const config = {
                 'style-loader',
                 'css-loader'
             ]
-        }, {
-            // Emit the static assets of AUI such as images that are referenced
-            // by CSS into the output path.
-
-            include: auiCSS,
-            loader: 'file-loader',
-            options: {
-                context: auiCSS,
-                name: '[path][name].[ext]'
-            },
-            test: /\.(gif|png|svg)$/
         } ]
     },
     node: {