ref(dial-out): use AtlasKit FieldText for inputs

- Swap the telephone input with FieldText.
- Swap the dropdown trigger input with FieldText for styling
  consistency with the telephone input.
- Wrap the dropdown trigger so it can be modified with jitsi css.
- Use flexbox to have the trigger and input align horizontally
  but have the input take up width if the trigger is not displayed.

css/_dial-out.scss

@@ -4,20 +4,29 @@
 .dial-out-content {
     margin-top: 5px;
 
+    /**
+     * Wrap the contents in flex so items can be aligned on the same line.
+     */
+    .form-control {
+        display: flex;
+    }
+
    /**
     * The style of the flag icon.
     */
     .dial-out-flag-icon {
         position: absolute;
         left: 5px;
-        top: 10px;
+        top: 50%;
+        transform: translate(0, -50%);
     }
 
     /**
      * The style of the dial code element.
      */
     .dial-out-code {
-        padding-left: 25px !important;
+        margin-bottom: 0;
+        padding-left: 25px;
     }
 
     /**
@@ -31,34 +40,42 @@
      * The style of the dial input element.
      */
     .dial-out-input {
-        padding-left: 70px;
+        display: inline-block;
+        flex: 1;
+        margin-left: 5px;
     }
 
     /**
      * Re-styling the default dropdown inside the dial-out-content.
      */
     .dropdown {
-        left: $formPadding;
-        position: absolute !important;
-        width: 65px
+        position: relative;
+        width: 65px;
     }
 
     /**
      * Re-styling the default form-control inside the dial-out-content.
      */
     .form-control {
-        padding-bottom: 8px !important;
+        margin-bottom: 8px;
     }
 
     .dropdown {
-        display: inline-block;
         position: relative;
-        overflow: hidden;
+
+        input {
+            padding-left: 16px;
+
+            &:read-only {
+                color: inherit;
+            }
+        }
     }
 
     .dropdown-trigger-icon {
         position: absolute;
         right: 0;
-        top: 4px;
+        top: 50%;
+        transform: translate(0, -50%);
     }
 }

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

@@ -1,4 +1,5 @@
 import { StatelessDropdownMenu } from '@atlaskit/dropdown-menu';
+import AKFieldText, { FieldText } from '@atlaskit/field-text';
 import ExpandIcon from '@atlaskit/icon/glyph/expand';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
@@ -146,13 +147,14 @@ class DialOutNumbersForm extends Component {
             <div className = 'form-control'>
                 { this._createDropdownMenu(items) }
                 <div className = 'dial-out-input'>
-                    <input
+                    <AKFieldText
                         autoFocus = { true }
-                        className = 'input-control'
+                        isLabelHidden = { true }
+                        label = { 'dial-out-input-field' }
                         onChange = { this._onInputChange }
                         placeholder = { t('dialOut.enterPhone') }
                         ref = { this._setDialInputElement }
-                        type = 'text' />
+                        shouldFitContainer = { true } />
                 </div>
             </div>
         );
@@ -168,14 +170,16 @@ class DialOutNumbersForm extends Component {
         const { code, dialCode } = this.state.selectedCountry;
 
         return (
-            <StatelessDropdownMenu
-                isOpen = { this.state.isDropdownOpen }
-                items = { [ { items } ] }
-                onItemActivated = { this._onSelect }
-                onOpenChange = { this._onOpenChange }
-                shouldFitContainer = { true }>
-                { this._createDropdownTrigger(dialCode, code) }
-            </StatelessDropdownMenu>
+            <div className = 'dropdown-container'>
+                <StatelessDropdownMenu
+                    isOpen = { this.state.isDropdownOpen }
+                    items = { [ { items } ] }
+                    onItemActivated = { this._onSelect }
+                    onOpenChange = { this._onOpenChange }
+                    shouldFitContainer = { false }>
+                    { this._createDropdownTrigger(dialCode, code) }
+                </StatelessDropdownMenu>
+            </div>
         );
     }
 
@@ -195,9 +199,15 @@ class DialOutNumbersForm extends Component {
                 <CountryIcon
                     className = 'dial-out-flag-icon'
                     countryCode = { `${countryCode}` } />
-                <input
+                { /**
+                   * FIXME Replace FieldText with AtlasKit Button when an issue
+                   * with icons shrinking due to button text is fixed.
+                   */ }
+                <FieldText
                     className = 'input-control dial-out-code'
-                    readOnly = { true }
+                    isLabelHidden = { true }
+                    isReadOnly = { true }
+                    label = 'dial-out-code'
                     type = 'text'
                     value = { dialCode || '' } />
                 <span className = 'dropdown-trigger-icon'>