fix display name required dialog

css/buttons/_button-control.scss

@@ -67,6 +67,10 @@
             border: 1px solid $primaryButtonHoverBackground;
             background-color: $primaryButtonHoverBackground;
         }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
     }
 
     &_close {

css/input-control/_input-control.scss

@@ -1,6 +1,14 @@
 .input-control {
     padding: 16px 0;
 
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
     &__text {
         margin: 8px 0;
         font-size: 1em

lang/main.json

@@ -259,7 +259,8 @@
         "token": "token",
         "tokenAuthFailedTitle": "Authentication problem",
         "tokenAuthFailed": "Sorry, you're not allowed to join this call.",
-        "displayNameRequired": "Please enter your display name",
+        "displayNameRequired": "Display name is required",
+        "enterDisplayName": "Please enter your display name",
         "extensionRequired": "Extension required:",
         "firefoxExtensionPrompt": "You need to install a Firefox extension in order to use screen sharing. Please try again after you <a href='__url__'>get it from here</a>!",
         "rateExperience": "Please rate your meeting experience.",

modules/UI/UI.js

@@ -74,21 +74,27 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
  * Prompt user for nickname.
  */
 function promptDisplayName() {
-    let nickRequiredMsg
-        = APP.translation.translateString("dialog.displayNameRequired");
+    let labelKey = 'dialog.enterDisplayName';
+    let labelStr = APP.translation.translateString(labelKey);
+    let titleStr
+        = APP.translation.translateString('dialog.displayNameRequired');
     let defaultNickMsg = APP.translation.translateString("defaultNickname");
-    let message = `
-        <h2 data-i18n="dialog.displayNameRequired">${nickRequiredMsg}</h2>
-        <input name="displayName" type="text"
+    let message = (
+        `<div class="input-control">
+            <label class="input-control__label">${labelStr}</label>
+            <input name="displayName" type="text"
                data-i18n="[placeholder]defaultNickname"
-               placeholder="${defaultNickMsg}" autofocus>`;
+               class="input-control__input"
+               placeholder="${defaultNickMsg}" autofocus>
+         </div>`
+    );
 
     // Don't use a translation string, because we're too early in the call and
     // the translation may not be initialised.
     let buttons = {Ok:true};
 
     let dialog = messageHandler.openDialog(
-        null,
+        titleStr,
         message,
         true,
         buttons,