feat(dark-theme): Applies dark theme on inline-dialogs, tooltips, flags and more

css/_connection-info.scss

 %connection-info {
     font-size: 12px;
     font-weight: 400;
-    color: $modalTextColor;
 
     td {
         padding: 2px 0;
     &__download
     {
         @extend .connection-info__icon;
-        color: $downloadConnectionIconColor;
     }
 
     &__status
     &__upload
     {
         @extend .connection-info__icon;
-        color: $uploadConnectionIconColor;
     }
 
     .showmore {

css/_filmstrip.scss

                 width: 100%;
 
                 & button {
-                    background: $toolbarBackground;
                     flex-grow: 1;
                     flex-shrink: 1;
                     overflow: hidden;
                 }
 
                 & > * {
-                    color: $toolbarButtonColor;
                     flex-grow: 0;
                     flex-shrink: 0;
                     margin-left: 2px;
                 }
-
-                /**
-                 * Making sure any svg-s in an invite button group will be
-                 * colored the way we want.
-                 */
-                & path {
-                    fill: $toolbarButtonColor;
-                }
             }
         }
 

css/_popup_menu.scss

     // Link Appearance
     &__link,
     &__contents {
-        color: $modalTextColor;
         display: block;
         box-sizing: border-box;
         text-decoration: none;
         padding: 0 5px;
 
         &.disabled {
-            color: gray !important;
             pointer-events: none;
         }
     }

css/_toolbars.scss

  * Common toolbar styles.
  */
 .toolbar {
-    color: $modalTextColor;
     height: 100%;
     pointer-events: auto;
     position: relative;
         vertical-align: middle;
         width: $defaultToolbarSize;
 
-        &_hangup {
-            color: $hangupColor;
-            font-size: $hangupFontSize;
-        }
-
         &[disabled] {
             opacity: 0.5;
         }
 
         &:hover, &:active {
+            color: $toolbarButtonColor;
             cursor: pointer;
             text-decoration: none;
         }
 
+        &_hangup, &_hangup:hover {
+            color: $hangupColor;
+            font-size: $hangupFontSize;
+        }
+
         &:not(.toggled) {
             &:hover, &:active {
                 // sum opacity with background layer should give us 0.8

css/_variables.scss

 $audioLevelShadow: rgba(9, 36, 77, 0.9);
 $videoStateIndicatorColor: $defaultColor;
 $videoStateIndicatorBackground: $toolbarBackground;
+$videoStateIndicatorSize: 40px;
 
 /**
  * Feedback Modal

css/_videolayout_default.scss

             float: left;
             pointer-events: all;
         }
+
+        /**
+         * Need to overwrite the background for the top toolbar dark theme div
+         * wrapper needed before we're able to move all top toolbar indicators
+         * creation to react.
+         */
+        .ckAJgx {
+            background: none;
+        }
     }
 
     &__toolbar {

css/modals/invite/_invite.scss

             user-select: text;
         }
 
-        .dial-in-numbers-trigger {
-            position: relative;
-            width: 100%;
-
-            .dial-in-numbers-trigger-icon {
-                position: absolute;
-                right: 10px;
-                top: 4px;
-            }
-        }
-
         .is-disabled,
         .is-loading {
             .dial-in-numbers-trigger-icon {
         &__input-container {
             flex: 1;
             margin-right: 10px;
+
+            .dropdown-button-trigger {
+                text-align: left;
+            }
         }
     }
 

css/modals/video-quality/_video-quality.scss

 .video-quality-dialog {
-    color: $modalTextColor;
 
     .hide-warning {
         height: 0;
 
     .video-quality-dialog-contents {
         align-items: center;
-        color: $modalTextColor;
         display: flex;
         flex-direction: column;
         padding: 10px;
             @mixin sliderTrackStyles() {
                 height: 15px;
                 border-radius: 10px;
-                background: black;
+                background: #0E1624;
             }
 
             &::-ms-track {
             transform: translate(-50%, 0%);
 
             &::before {
-                background: rgb(140, 156, 189);
                 content: '';
                 border-radius: 50%;
                 left: 0;
         }
 
         .video-quality-dialog-label-container.active {
-            color: $toolbarToggleBackground;
+            color: $videoQualityActive;
 
             &::before {
-                background: $toolbarToggleBackground;
+                background: $videoQualityActive;
                 height: 12px;
                 top: -19px;
                 width: 12px;
 
 .video-state-indicator {
     background: $videoStateIndicatorBackground;
-    color: $videoStateIndicatorColor;
     cursor: default;
     font-size: 13px;
-    height: 40px;
+    height: $videoStateIndicatorSize;
     line-height: 20px;
     text-align: left;
-    min-width: 40px;
+    min-width: $videoStateIndicatorSize;
     border-radius: 50%;
     position: absolute;
     box-sizing: border-box;
 
     i {
-        cursor: pointer;
+        line-height: $videoStateIndicatorSize;
     }
 
     /**
      * Give the label padding so it has more volume and can be easily clicked.
      */
     .video-quality-label-status {
-        padding: 10px 5px;
+        line-height: $videoStateIndicatorSize;
+        min-width: $videoStateIndicatorSize;
         text-align: center;
     }
 }

css/themes/_light.scss

 $filmstripOnlyOverlayBg: #000;
 $reloadProgressBarBg: #0074E0;
 
-/**
-* Connection indicator
-**/
-$downloadConnectionIconColor: #4abd04;
-$uploadConnectionIconColor: #ffa800;
-
 /**
  * Dialog colors
  **/
 $selectBg: $controlBackground;
 $selectActiveBg: darken($controlBackground, 5%);
 $selectActiveItemBg: darken($controlBackground, 20%);
+
+/**
+ * TODO: Replace by themed component.
+ */
+$videoQualityActive: #4C9AFF;

modules/UI/videolayout/RemoteVideo.js

 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { I18nextProvider } from 'react-i18next';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import { i18next } from '../../../react/features/base/i18n';
 import {
     ReactDOM.render(
         <Provider store = { APP.store }>
             <I18nextProvider i18n = { i18next }>
-                <RemoteVideoMenuTriggerButton
-                    initialVolumeValue = { initialVolumeValue }
-                    isAudioMuted = { this.isAudioMuted }
-                    isModerator = { isModerator }
-                    onMenuDisplay = {this._onRemoteVideoMenuDisplay.bind(this)}
-                    onRemoteControlToggle = { onRemoteControlToggle }
-                    onVolumeChange = { onVolumeChange }
-                    participantID = { participantID }
-                    remoteControlState = { remoteControlState } />
+                <AtlasKitThemeProvider mode = 'dark'>
+                    <RemoteVideoMenuTriggerButton
+                        initialVolumeValue = { initialVolumeValue }
+                        isAudioMuted = { this.isAudioMuted }
+                        isModerator = { isModerator }
+                        onMenuDisplay
+                            = {this._onRemoteVideoMenuDisplay.bind(this)}
+                        onRemoteControlToggle = { onRemoteControlToggle }
+                        onVolumeChange = { onVolumeChange }
+                        participantID = { participantID }
+                        remoteControlState = { remoteControlState } />
+                </AtlasKitThemeProvider>
             </I18nextProvider>
         </Provider>,
         remoteVideoMenuContainer);

modules/UI/videolayout/SmallVideo.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import { I18nextProvider } from 'react-i18next';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import { Provider } from 'react-redux';
 
 import { i18next } from '../../../react/features/base/i18n';
     const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
 
     ReactDOM.render(
-        <I18nextProvider i18n = { i18next }>
-            <div>
-                { this._showConnectionIndicator
-                    ? <ConnectionIndicator
-                        alwaysVisible = { showConnectionIndicator }
-                        connectionStatus = { this._connectionStatus }
-                        iconSize = { iconSize }
-                        isLocalVideo = { this.isLocal }
-                        enableStatsDisplay = { !interfaceConfig.filmStripOnly }
-                        statsPopoverPosition = { this.statsPopoverLocation }
-                        userID = { this.id } />
-                    : null }
-                { this._showRaisedHand
-                    ? <RaisedHandIndicator
-                        iconSize = { iconSize }
-                        tooltipPosition = { tooltipPosition } />
-                    : null }
-                { this._showDominantSpeaker
-                    ? <DominantSpeakerIndicator
-                        iconSize = { iconSize }
-                        tooltipPosition = { tooltipPosition } />
-                    : null }
-            </div>
-        </I18nextProvider>,
+            <I18nextProvider i18n = { i18next }>
+                <div>
+                    <AtlasKitThemeProvider mode = 'dark'>
+                        { this._showConnectionIndicator
+                            ? <ConnectionIndicator
+                                alwaysVisible = { showConnectionIndicator }
+                                connectionStatus = { this._connectionStatus }
+                                iconSize = { iconSize }
+                                isLocalVideo = { this.isLocal }
+                                enableStatsDisplay
+                                    = { !interfaceConfig.filmStripOnly }
+                                statsPopoverPosition
+                                    = { this.statsPopoverLocation }
+                                userID = { this.id } />
+                            : null }
+                        { this._showRaisedHand
+                            ? <RaisedHandIndicator
+                                iconSize = { iconSize }
+                                tooltipPosition = { tooltipPosition } />
+                            : null }
+                        { this._showDominantSpeaker
+                            ? <DominantSpeakerIndicator
+                                iconSize = { iconSize }
+                                tooltipPosition = { tooltipPosition } />
+                            : null }
+                    </AtlasKitThemeProvider>
+                </div>
+            </I18nextProvider>,
         indicatorToolbar
     );
 };

package.json

   "author": "",
   "readmeFilename": "README.md",
   "dependencies": {
-    "@atlaskit/avatar": "4.0.5",
-    "@atlaskit/button": "3.0.0",
-    "@atlaskit/button-group": "1.1.3",
-    "@atlaskit/dropdown-menu": "1.4.0",
-    "@atlaskit/field-text": "2.7.0",
-    "@atlaskit/flag": "3.0.0",
-    "@atlaskit/icon": "7.0.0",
-    "@atlaskit/inline-dialog": "3.2.0",
-    "@atlaskit/inline-message": "2.1.1",
-    "@atlaskit/modal-dialog": "2.1.2",
-    "@atlaskit/multi-select": "6.2.0",
-    "@atlaskit/spinner": "2.2.3",
-    "@atlaskit/tabs": "2.0.0",
-    "@atlaskit/toggle": "2.0.4",
+    "@atlaskit/avatar": "8.0.5",
+    "@atlaskit/button": "5.4.2",
+    "@atlaskit/button-group": "1.5.3",
+    "@atlaskit/dropdown-menu": "3.10.2",
+    "@atlaskit/droplist": "4.11.1",
+    "@atlaskit/field-text": "4.0.1",
+    "@atlaskit/flag": "6.1.0",
+    "@atlaskit/icon": "10.0.0",
+    "@atlaskit/inline-dialog": "5.0.2",
+    "@atlaskit/inline-message": "3.0.1",
+    "@atlaskit/modal-dialog": "2.6.0",
+    "@atlaskit/multi-select": "7.1.3",
+    "@atlaskit/spinner": "4.0.0",
+    "@atlaskit/tabs": "4.0.1",
+    "@atlaskit/theme": "2.2.0",
+    "@atlaskit/toggle": "2.6.1",
+    "@atlaskit/tooltip": "6.0.0",
     "@atlassian/aui": "6.0.6",
     "autosize": "1.18.13",
     "es6-iterator": "2.0.1",

react/features/app/components/AbstractApp.js

 import { Provider } from 'react-redux';
 import { compose, createStore } from 'redux';
 import Thunk from 'redux-thunk';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 
 import { i18next } from '../../base/i18n';
 import {
             return (
                 <I18nextProvider i18n = { i18next }>
                     <Provider store = { this._getStore() }>
-                        {
-                            this._createElement(component)
-                        }
+                        <AtlasKitThemeProvider mode = 'dark'>
+                            {
+                                this._createElement(component)
+                            }
+                        </AtlasKitThemeProvider>
                     </Provider>
                 </I18nextProvider>
             );

react/features/base/dialog/components/StatelessDialog.web.js

 import AKButton from '@atlaskit/button';
 import AKButtonGroup from '@atlaskit/button-group';
 import ModalDialog from '@atlaskit/modal-dialog';
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
      */
     render() {
         return (
-            <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>
+
+            /**
+             * 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>
         );
     }
 

react/features/device-selection/components/DeviceSelector.web.js

 import AKDropdownMenu from '@atlaskit/dropdown-menu';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
                 <span className = 'device-selector-trigger-text'>
                     { triggerText }
                 </span>
-                <ExpandIcon
+                <ChevronDownIcon
                     label = 'expand'
                     size = 'large' />
             </div>

react/features/dial-out/components/DialOutNumbersForm.web.js

-import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
-import AKFieldText, { FieldText } from '@atlaskit/field-text';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import { DropdownMenuStateless as DropdownMenu } from '@atlaskit/dropdown-menu';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
                 { _dialOutCodes ? this._createDropdownMenu(
                         this._formatCountryCodes(_dialOutCodes)) : null }
                 <div className = 'dial-out-input'>
-                    <AKFieldText
+                    <TextField
                         autoFocus = { true }
                         isLabelHidden = { true }
                         label = { 'dial-out-input-field' }
     }
 
     /**
-     * Creates a {@code StatelessDropdownMenu} instance.
+     * Creates a {@code DropdownMenu} instance.
      *
      * @param {Array} items - The content to display within the dropdown.
      * @returns {ReactElement}
 
         return (
             <div className = 'dropdown-container'>
-                <StatelessDropdownMenu
+                <DropdownMenu
                     isOpen = { this.state.isDropdownOpen }
                     items = { [ { items } ] }
                     onItemActivated = { this._onSelect }
                     onOpenChange = { this._onOpenChange }
                     shouldFitContainer = { false }>
                     { this._createDropdownTrigger(dialCode, code) }
-                </StatelessDropdownMenu>
+                </DropdownMenu>
             </div>
         );
     }
                     className = 'dial-out-flag-icon'
                     countryCode = { `${countryCode}` } />
                 { /**
-                   * FIXME Replace FieldText with AtlasKit Button when an issue
+                   * FIXME Replace TextField with AtlasKit Button when an issue
                    * with icons shrinking due to button text is fixed.
                    */ }
-                <FieldText
+                <TextField
                     className = 'input-control dial-out-code'
                     isLabelHidden = { true }
                     isReadOnly = { true }
                     type = 'text'
                     value = { dialCode || '' } />
                 <span className = 'dropdown-trigger-icon'>
-                    <ExpandIcon
+                    <ChevronDownIcon
                         label = 'expand'
-                        size = 'medium' />
+                        size = 'small' />
                 </span>
             </div>
         );
 
     /**
      * Transforms the passed in numbers object into an array of objects that can
-     * be parsed by {@code StatelessDropdownMenu}.
+     * be parsed by {@code DropdownMenu}.
      *
      * @param {Object} countryCodes - The list of country codes.
      * @private
     }
 
     /**
-     * This is a no-op function used to stub out FieldText's onChange in order
-     * to prevent FieldText from printing prop type validation errors. FieldText
+     * This is a no-op function used to stub out TextField's onChange in order
+     * to prevent TextField from printing prop type validation errors. TextField
      * is used as a trigger for the dropdown in {@code DialOutNumbersForm} to
      * get the desired AtlasKit input look for the UI.
      *

react/features/display-name/components/DisplayNamePrompt.web.js

-import AKFieldText from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 
 import { Dialog } from '../../base/dialog';
 import { translate } from '../../base/i18n';
                 onSubmit = { this._onSubmit }
                 titleKey = 'dialog.displayNameRequired'
                 width = 'small'>
-                <AKFieldText
+                <TextField
                     autoFocus = { true }
                     compact = { true }
                     label = { this.props.t('dialog.enterDisplayName') }

react/features/invite/components/AddPasswordForm.js

 import Button from '@atlaskit/button';
-import { FieldText } from '@atlaskit/field-text';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
                 onSubmit = { this._onSubmit } >
                 <div className = 'form-control__container'>
                     <div className = 'form-control__input-container'>
-                        <FieldText
+                        <TextField
                             autoFocus = { true }
                             compact = { true }
                             id = 'newPasswordInput'
                         id = 'addPasswordBtn'
                         isDisabled = { !this.state.password }
                         onClick = { this._onSubmit }
-                        shouldFitContainer = { true }
                         type = 'button'>
                         { t('dialog.add') }
                     </Button>

react/features/invite/components/DialInNumbersForm.js

 import Button from '@atlaskit/button';
-import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
-import { FieldText } from '@atlaskit/field-text';
-import ExpandIcon from '@atlaskit/icon/glyph/expand';
+import DropdownMenu, {
+    DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
         // Bind event handlers so they are only bound once for every instance.
         this._onCopyClick = this._onCopyClick.bind(this);
-        this._onDropdownTriggerInputChange
-            = this._onDropdownTriggerInputChange.bind(this);
         this._onOpenChange = this._onOpenChange.bind(this);
         this._onSelect = this._onSelect.bind(this);
         this._setCopyElement = this._setCopyElement.bind(this);
             return null;
         }
 
-        const items = this._formatNumbers(numbers);
+        const items = this._renderDropdownItems(numbers);
 
         return (
             <div className = 'form-control dial-in-numbers'>
                     </span>
                 </label>
                 <div className = 'form-control__container'>
-                    { this._createDropdownMenu(items, selectedNumber.content) }
+                    <div className = 'form-control__input-container'>
+                        { this._createDropdownMenu(items, selectedNumber) }
+                    </div>
                     <Button
                         appearance = 'default'
                         onClick = { this._onCopyClick }
-                        shouldFitContainer = { true }
                         type = 'button'>
                         { t('dialog.copy') }
                     </Button>
     }
 
     /**
-     * Creates a {@code StatelessDropdownMenu} instance.
+     * Creates a {@code DropdownMenu} instance.
      *
      * @param {Array} items - The content to display within the dropdown.
      * @param {string} triggerText - The text to display within the
      */
     _createDropdownMenu(items, triggerText) {
         return (
-            <StatelessDropdownMenu
+            <DropdownMenu
                 isOpen = { this.state.isDropdownOpen }
-                items = { [ { items } ] }
-                onItemActivated = { this._onSelect }
                 onOpenChange = { this._onOpenChange }
-                shouldFitContainer = { true }>
-                { this._createDropdownTrigger(triggerText) }
-            </StatelessDropdownMenu>
+                shouldFitContainer = { true }
+                trigger = { triggerText || '' }
+                triggerButtonProps = {{
+                    className: 'dropdown-button-trigger',
+                    shouldFitContainer: true }}
+                triggerType = 'button'>
+                <DropdownItemGroup>
+                    { items }
+                </DropdownItemGroup>
+            </DropdownMenu>
         );
     }
 
     /**
-     * Creates a React {@code Component} with a readonly HTMLInputElement as a
-     * trigger for displaying the dropdown menu. The {@code Component} will also
-     * display the currently selected number.
+     * Formats the region and number string.
      *
-     * @param {string} triggerText - Text to display in the HTMLInputElement.
+     * @param {string} region - The region string.
+     * @param {string} number - The number string.
+     * @returns {string} - The new formatted string.
      * @private
-     * @returns {ReactElement}
-     */
-    _createDropdownTrigger(triggerText) {
-        return (
-            <div className = 'dial-in-numbers-trigger'>
-                <div className = 'form-control__input-container'>
-                    <FieldText
-                        compact = { true }
-                        isLabelHidden = { true }
-                        isReadOnly = { true }
-                        label = 'Select Dial-In Number'
-                        onChange = { this._onDropdownTriggerInputChange }
-                        ref = { this._setInput }
-                        shouldFitContainer = { true }
-                        type = 'text'
-                        value = { triggerText || '' } />
-                </div>
-                <span className = 'dial-in-numbers-trigger-icon'>
-                    <ExpandIcon
-                        label = 'expand'
-                        size = 'medium' />
-                </span>
-            </div>
-        );
-    }
-
-    /**
-     * Detects whether the response from dialInNumbersUrl returned an array or
-     * an object with dial-in numbers and calls the appropriate method to
-     * transform the numbers into the format expected by
-     * {@code StatelessDropdownMenu}.
-     *
-     * @param {Array<string>|Object} dialInNumbers - The numbers returned from
-     * requesting dialInNumbersUrl.
-     * @private
-     * @returns {Array<Object>}
-     */
-    _formatNumbers(dialInNumbers) {
-        if (Array.isArray(dialInNumbers)) {
-            return this._formatNumbersArray(dialInNumbers);
-        }
-
-        return this._formatNumbersObject(dialInNumbers);
-    }
-
-    /**
-     * Transforms the passed in numbers array into an array of objects that can
-     * be parsed by {@code StatelessDropdownMenu}.
-     *
-     * @param {Array<string>} dialInNumbers - An array with dial-in numbers to
-     * display and copy.
-     * @private
-     * @returns {Array<Object>}
      */
-    _formatNumbersArray(dialInNumbers) {
-        return dialInNumbers.map(number => {
-            return {
-                content: number,
-                number
-            };
-        });
-    }
-
-    /**
-     * Transforms the passed in numbers object into an array of objects that can
-     * be parsed by {@code StatelessDropdownMenu}.
-     *
-     * @param {Object} dialInNumbers - The numbers object to parse. The
-     * expected format is an object with keys being the name of the country
-     * and the values being an array of numbers as strings.
-     * @private
-     * @returns {Array<Object>}
-     */
-    _formatNumbersObject(dialInNumbers) {
-        const phoneRegions = Object.keys(dialInNumbers);
-
-        if (!phoneRegions.length) {
-            return [];
-        }
-
-        const formattedNumbers = phoneRegions.map(region => {
-            const numbers = dialInNumbers[region];
-
-            return numbers.map(number => {
-                return {
-                    content: `${region}: ${number}`,
-                    number
-                };
-            });
-        });
-
-        return Array.prototype.concat(...formattedNumbers);
+    _formatRegionNumber(region, number) {
+        return `${region}: ${number}`;
     }
 
     /**
         });
 
         const callNumber = t('invite.callNumber', {
-            number: this.state.selectedNumber.number
+            number: this.state.selectedNumber
         });
         const stepOne = `1) ${callNumber}`;
 
         }
     }
 
-    /**
-     * This is a no-op function used to stub out FieldText's onChange in order
-     * to prevent FieldText from printing prop type validation errors. FieldText
-     * is used as a trigger for the dropdown in {@code DialInNumbersForm} to
-     * get the desired AtlasKit input look for the UI.
-     *
-     * @returns {void}
-     */
-    _onDropdownTriggerInputChange() {
-        // Intentionally left empty.
-    }
-
     /**
      * Sets the internal state to either open or close the dropdown. If the
      * dropdown is disabled, the state will always be set to false.
     _onSelect(selection) {
         this.setState({
             isDropdownOpen: false,
-            selectedNumber: selection.item
+            selectedNumber: selection
         });
     }
 
+    /**
+     * Renders a DropDownItem for the given id and text.
+     *
+     * @param {string} id - The key identifier of the DropdownItem.
+     * @param {string} text - The text to display in the dropdown item.
+     * @returns {React.Component}
+     * @private
+     */
+    _renderDropDownItem(id, text) {
+        return (
+
+            /**
+             * Arrow functions are not allowed in props, but I leave this until
+             * I figure a better way to implement the same thing.
+             */
+            /* eslint-disable react/jsx-no-bind */
+            <DropdownItem
+                key = { id }
+                onClick = { () => this._onSelect(text || id) }>
+                { text }
+            </DropdownItem>
+            /* eslint-disable react/jsx-no-bind */
+        );
+    }
+
+    /**
+     * Detects whether the response from dialInNumbersUrl returned an array or
+     * an object with dial-in numbers and calls the appropriate method to
+     * transform the numbers into the format expected by
+     * {@code DropdownMenu}.
+     *
+     * @param {Array<string>|Object} dialInNumbers - The numbers returned from
+     * requesting dialInNumbersUrl.
+     * @private
+     * @returns {Array<Object>}
+     */
+    _renderDropdownItems(dialInNumbers) {
+        if (Array.isArray(dialInNumbers)) {
+            return dialInNumbers.map(number =>
+                this._renderDropDownItem(number)
+            );
+        }
+
+        const phoneRegions = Object.keys(dialInNumbers);
+
+        if (!phoneRegions.length) {
+            return [];
+        }
+
+        const dropdownItems = phoneRegions.map(region => {
+            const numbers = dialInNumbers[region];
+
+            return numbers.map(number =>
+                this._renderDropDownItem(number,
+                    this._formatRegionNumber(region, number))
+            );
+        });
+
+        return Array.prototype.concat(...dropdownItems);
+    }
+
     /**
      * Sets the internal reference to the DOM/HTML element backing the React
      * {@code Component} text area.
      * @returns {void}
      */
     _setDefaultNumber(dialInNumbers) {
-        const numbers = this._formatNumbers(dialInNumbers);
+        let number = '';
+
+        if (Array.isArray(dialInNumbers)) {
+            number = dialInNumbers[0];
+        } else if (Object.keys(dialInNumbers).length > 0) {
+            const region = Object.keys(dialInNumbers)[0];
+
+            number = this._formatRegionNumber(region, dialInNumbers[region]);
+        }
 
         this.setState({
-            selectedNumber: numbers[0]
+            selectedNumber: number
         });
     }
 }

react/features/invite/components/ShareLinkForm.js

 import Button from '@atlaskit/button';
-import { FieldText } from '@atlaskit/field-text';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
                 </label>
                 <div className = 'form-control__container'>
                     <div className = 'form-control__input-container'>
-                        <FieldText
-                            compact = { true }
+                        <TextField
                             id = 'inviteLinkRef'
                             isLabelHidden = { true }
                             isReadOnly = { true }
                     <Button
                         appearance = 'default'
                         onClick = { this._onClick }
-                        shouldFitContainer = { true }
                         type = 'button'>
                         { t('dialog.copy') }
                     </Button>
     }
 
     /**
-     * This is a no-op function used to stub out FieldText's onChange in order
-     * to prevent FieldText from printing prop type validation errors. FieldText
+     * This is a no-op function used to stub out TextField's onChange in order
+     * to prevent TextField from printing prop type validation errors. TextField
      * is used as a trigger for the dropdown in {@code ShareLinkForm} to get the
      * desired AtlasKit input look for the UI.
      *

react/features/room-lock/components/PasswordRequiredPrompt.web.js

 // @flow
-
-import AKFieldText from '@atlaskit/field-text';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { FieldTextStateless as TextField } from '@atlaskit/field-text';
 
 import { setPassword } from '../../base/conference';
 import { Dialog } from '../../base/dialog';
     _renderBody() {
         return (
             <div>
-                <AKFieldText
+                <TextField
                     autoFocus = { true }
                     compact = { true }
                     label = { this.props.t('dialog.passwordLabel') }

react/features/toolbox/components/ToolbarButton.web.js

 /* @flow */
 
-import AKInlineDialog from '@atlaskit/inline-dialog';
-import { Tooltip } from '@atlaskit/tooltip';
+import InlineDialog from '@atlaskit/inline-dialog';
+import Tooltip from '@atlaskit/tooltip';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
 
 import { TOOLTIP_TO_POPUP_POSITION } from '../constants';
-import { isButtonEnabled } from '../functions';
 import StatelessToolbarButton from './StatelessToolbarButton';
 
 declare var APP: Object;
 
     _onClick: Function;
 
-    _onMouseOut: Function;
-
-    _onMouseOver: Function;
-
-    state: {
-
-        /**
-         * Whether or not the tooltip for the button should be displayed.
-         *
-         * @type {boolean}
-         */
-        showTooltip: boolean
-    }
-
     /**
      * Toolbar button component's property types.
      *
     constructor(props: Object) {
         super(props);
 
-        this.state = {
-            showTooltip: false
-        };
-
         // Bind methods to save the context
         this._onClick = this._onClick.bind(this);
-        this._onMouseOut = this._onMouseOut.bind(this);
-        this._onMouseOver = this._onMouseOver.bind(this);
     }
 
     /**
         const buttonComponent = ( // eslint-disable-line no-extra-parens
             <Tooltip
                 description = { button.tooltipText || t(button.tooltipKey) }
-                onMouseOut = { this._onMouseOut }
-                onMouseOver = { this._onMouseOver }
-                position = { tooltipPosition }
-                visible = { this.state.showTooltip }>
+                position = { tooltipPosition }>
                 <StatelessToolbarButton { ...props }>
                     { this.props.children }
                 </StatelessToolbarButton>
             const { dataAttr, dataInterpolate, position } = popupConfig;
 
             children = ( // eslint-disable-line no-extra-parens
-                <AKInlineDialog
+                <InlineDialog
                     content = { t(dataAttr, dataInterpolate) }
                     isOpen = { Boolean(popupConfig) }
                     position = { position }>
                     { buttonComponent }
-                </AKInlineDialog>
+                </InlineDialog>
             );
         }
 
      */
     _onClick(event) {
         this.props.onClick(event);
-        this.setState({ showTooltip: false });
     }
 
     /**
             });
     }
 
-    /**
-     * Hides any displayed tooltip.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onMouseOut(): void {
-        this.setState({ showTooltip: false });
-    }
-
-    /**
-     * Hides any displayed tooltip.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onMouseOver(): void {
-        const { button } = this.props;
-
-        this.setState({
-            showTooltip: isButtonEnabled(button.buttonName)
-                && !button.unclickable
-        });
-    }
-
     /**
      * Sets shortcut and tooltip for current toolbar button.
      *