From 25aeb184af53cc5f5de07834cad715296bc37bac Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Mon, 17 Oct 2016 17:29:41 +0300
Subject: [PATCH] fix display name required dialog

---
 css/buttons/_button-control.scss      |  4 ++++
 css/input-control/_input-control.scss |  8 ++++++++
 lang/main.json                        |  3 ++-
 modules/UI/UI.js                      | 20 +++++++++++++-------
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/css/buttons/_button-control.scss b/css/buttons/_button-control.scss
index 98da4fd98..6af1ab5f9 100644
--- a/css/buttons/_button-control.scss
+++ b/css/buttons/_button-control.scss
@@ -67,6 +67,10 @@
             border: 1px solid $primaryButtonHoverBackground;
             background-color: $primaryButtonHoverBackground;
         }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
     }
 
     &_close {
diff --git a/css/input-control/_input-control.scss b/css/input-control/_input-control.scss
index 5f499e168..f6843c55a 100644
--- a/css/input-control/_input-control.scss
+++ b/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
diff --git a/lang/main.json b/lang/main.json
index b2cada0cb..e0706c672 100644
--- a/lang/main.json
+++ b/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.",
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 95dec167e..3075b0785 100644
--- a/modules/UI/UI.js
+++ b/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,