From 5623a06996f866d3441ffda53acb7acf14bc546c Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Tue, 8 Nov 2016 17:46:59 +0200
Subject: [PATCH 1/3] renamed input-control block to form-control

---
 css/_side_toolbar_container.scss              |  2 +-
 css/input-control/_input-control.scss         |  2 +-
 css/modals/_dialog.scss                       |  2 +-
 css/modals/feedback/_feedback.scss            |  2 +-
 modules/UI/UI.js                              |  6 ++--
 modules/UI/authentication/LoginDialog.js      |  4 +--
 modules/UI/feedback/FeedbackWindow.js         |  2 +-
 modules/UI/invite/InviteDialogView.js         | 34 +++++++++----------
 .../contactlist/ContactListView.js            |  2 +-
 9 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss
index c174a4c71..caa36a476 100644
--- a/css/_side_toolbar_container.scss
+++ b/css/_side_toolbar_container.scss
@@ -23,7 +23,7 @@
      * Form elements and blocks.
      */
     input, select, a,
-    .sideToolbarBlock, .input-control, .button-control {
+    .sideToolbarBlock, .form-control, .button-control {
         display: block;
         margin-top: 15px;
         margin-left: 10%;
diff --git a/css/input-control/_input-control.scss b/css/input-control/_input-control.scss
index 05ea6c28f..54486687e 100644
--- a/css/input-control/_input-control.scss
+++ b/css/input-control/_input-control.scss
@@ -1,4 +1,4 @@
-.input-control {
+.form-control {
     padding: 16px 0;
 
     &:first-child {
diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss
index 6de6b9316..c25b15615 100644
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@@ -72,7 +72,7 @@
         }
     }
 
-    .input-control:not(:last-child) {
+    .form-control:not(:last-child) {
         border-bottom: 1px solid $auiBorderColor;
     }
 }
diff --git a/css/modals/feedback/_feedback.scss b/css/modals/feedback/_feedback.scss
index 881afb9cc..5086377ba 100644
--- a/css/modals/feedback/_feedback.scss
+++ b/css/modals/feedback/_feedback.scss
@@ -62,7 +62,7 @@
             text-align: center;
             padding: 10px 40px 20px 40px;
 
-            .input-control{
+            .form-control{
                 &__input {
                     background-color: $feedbackInputBg;
                     color: $feedbackInputTextColor;
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index fd6cbe549..b3735aeca 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -80,11 +80,11 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
 function promptDisplayName() {
     let labelKey = 'dialog.enterDisplayName';
     let message = (
-        `<div class="input-control">
-            <label data-i18n="${labelKey}" class="input-control__label"></label>
+        `<div class="form-control">
+            <label data-i18n="${labelKey}" class="form-control__label"></label>
             <input name="displayName" type="text"
                data-i18n="[placeholder]defaultNickname"
-               class="input-control__input"
+               class="form-control__input"
                autofocus>
          </div>`
     );
diff --git a/modules/UI/authentication/LoginDialog.js b/modules/UI/authentication/LoginDialog.js
index 8eb01d22f..8915fde69 100644
--- a/modules/UI/authentication/LoginDialog.js
+++ b/modules/UI/authentication/LoginDialog.js
@@ -11,10 +11,10 @@ function getPasswordInputHtml() {
 
     return `
         <input name="username" type="text" 
-               class="input-control__input"
+               class="form-control__input"
                placeholder=${placeholder} autofocus>
         <input name="password" type="password"
-               class="input-control__input"
+               class="form-control__input"
                data-i18n="[placeholder]dialog.userPassword">`;
 }
 
diff --git a/modules/UI/feedback/FeedbackWindow.js b/modules/UI/feedback/FeedbackWindow.js
index 1bab72a0b..1354336b3 100644
--- a/modules/UI/feedback/FeedbackWindow.js
+++ b/modules/UI/feedback/FeedbackWindow.js
@@ -66,7 +66,7 @@ function createRateFeedbackHTML() {
                 </div>
             </div>
             <div class="details">
-                <textarea id="feedbackTextArea" class="input-control__input" 
+                <textarea id="feedbackTextArea" class="form-control__input" 
                     data-i18n="[placeholder]dialog.feedbackHelp"></textarea>
             </div>
         </form>`;
diff --git a/modules/UI/invite/InviteDialogView.js b/modules/UI/invite/InviteDialogView.js
index 2919ee22f..40acaccad 100644
--- a/modules/UI/invite/InviteDialogView.js
+++ b/modules/UI/invite/InviteDialogView.js
@@ -120,20 +120,20 @@ export default class InviteDialogView {
     getShareLinkBlock() {
         let classes = 'button-control button-control_light copyInviteLink';
         return (
-            `<div class="input-control">
-                <label class="input-control__label" for="inviteLinkRef"
+            `<div class="form-control">
+                <label class="form-control__label" for="inviteLinkRef"
                     data-i18n="${this.dialog.titleKey}"></label>
-                <div class="input-control__container">
-                    <input class="input-control__input inviteLink"
+                <div class="form-control__container">
+                    <input class="form-control__input inviteLink"
                            id="inviteLinkRef" type="text"
                            ${this.inviteAttributes} readonly>
                     <button data-i18n="dialog.copy" class="${classes}"></button>
                 </div>
-                <p class="input-control__hint ${this.lockHint}">
+                <p class="form-control__hint ${this.lockHint}">
                    <span class="icon-security-locked"></span>
                    <span data-i18n="dialog.roomLocked"></span>
                 </p>
-                <p class="input-control__hint ${this.unlockHint}">
+                <p class="form-control__hint ${this.unlockHint}">
                    <span class="icon-security"></span>
                    <span data-i18n="roomUnlocked"></span>
                 </p>
@@ -150,12 +150,12 @@ export default class InviteDialogView {
 
         if (this.model.isModerator) {
             html = (`
-            <div class="input-control">
-                <label class="input-control__label"
+            <div class="form-control">
+                <label class="form-control__label"
                        for="newPasswordInput" data-i18n="dialog.addPassword">
                </label>
-                <div class="input-control__container">
-                    <input class="input-control__input" id="newPasswordInput"
+                <div class="form-control__container">
+                    <input class="form-control__input" id="newPasswordInput"
                            type="text" 
                            data-i18n="[placeholder]dialog.createPassword">
                     <button id="addPasswordBtn" id="inviteDialogAddPassword"
@@ -182,19 +182,19 @@ export default class InviteDialogView {
 
         if (isModerator) {
             return (`
-                <div class="input-control">
-                    <label class="input-control__label"
+                <div class="form-control">
+                    <label class="form-control__label"
                            data-i18n="dialog.passwordLabel"></label>
-                    <div class="input-control__container">
+                    <div class="form-control__container">
                         <p>
-                            <span class="input-control__text"
+                            <span class="form-control__text"
                                   data-i18n="dialog.currentPassword"></span>
                             <span id="inviteDialogPassword"
-                                  class="input-control__em">
+                                  class="form-control__em">
                                 ${password}
                             </span>
                         </p>
-                        <a class="link input-control__right"
+                        <a class="link form-control__right"
                            id="inviteDialogRemovePassword"
                            data-i18n="dialog.removePassword"></a>
                     </div>
@@ -202,7 +202,7 @@ export default class InviteDialogView {
             `);
         } else {
             return (`
-                <div class="input-control">
+                <div class="form-control">
                     <p>A participant protected this call with a password.</p>
                 </div>
             `);
diff --git a/modules/UI/side_pannels/contactlist/ContactListView.js b/modules/UI/side_pannels/contactlist/ContactListView.js
index 94a6dd2b9..aace25747 100644
--- a/modules/UI/side_pannels/contactlist/ContactListView.js
+++ b/modules/UI/side_pannels/contactlist/ContactListView.js
@@ -136,7 +136,7 @@ var ContactListView = {
      * Adds layout for lock description
      */
     getLockDescriptionLayout(key) {
-        let classes = "input-control__hint input-control_full-width";
+        let classes = "form-control__hint form-control_full-width";
         let padlockSuffix = '';
         if (key === this.lockKey) {
             padlockSuffix = '-locked';

From 12c1574f07017ec224bc74cf2274f428a9019450 Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Wed, 9 Nov 2016 17:10:59 +0200
Subject: [PATCH 2/3] renamed files

---
 css/{buttons => components}/_button-control.scss              | 0
 .../_input-control.scss => components/_form-control.scss}     | 0
 css/components/_input-control.scss                            | 3 +++
 css/main.scss                                                 | 4 ++--
 4 files changed, 5 insertions(+), 2 deletions(-)
 rename css/{buttons => components}/_button-control.scss (100%)
 rename css/{input-control/_input-control.scss => components/_form-control.scss} (100%)
 create mode 100644 css/components/_input-control.scss

diff --git a/css/buttons/_button-control.scss b/css/components/_button-control.scss
similarity index 100%
rename from css/buttons/_button-control.scss
rename to css/components/_button-control.scss
diff --git a/css/input-control/_input-control.scss b/css/components/_form-control.scss
similarity index 100%
rename from css/input-control/_input-control.scss
rename to css/components/_form-control.scss
diff --git a/css/components/_input-control.scss b/css/components/_input-control.scss
new file mode 100644
index 000000000..8e86e7b73
--- /dev/null
+++ b/css/components/_input-control.scss
@@ -0,0 +1,3 @@
+.input-control {
+    
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 3d2af62be..dfb80a1eb 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -55,9 +55,9 @@
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
-@import 'input-control/input-control';
+@import 'components/form-control';
 @import 'shortcuts/main';
-@import 'buttons/button-control';
+@import 'components/button-control';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';

From 5b0777d4db80f5fbded9855d02316456fc20e98f Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Wed, 9 Nov 2016 18:46:58 +0200
Subject: [PATCH 3/3] Made inputs identical

---
 css/_base.scss                             | 94 ++++------------------
 css/_side_toolbar_container.scss           | 10 ---
 css/_utils.scss                            | 38 +++++++++
 css/components/_form-control.scss          | 18 -----
 css/components/_input-control.scss         | 31 ++++++-
 css/components/_link.scss                  | 11 +++
 css/main.scss                              |  3 +
 modules/UI/UI.js                           |  7 +-
 modules/UI/authentication/LoginDialog.js   |  4 +-
 modules/UI/feedback/FeedbackWindow.js      |  2 +-
 modules/UI/invite/InviteDialogView.js      |  5 +-
 modules/UI/invite/RequirePasswordDialog.js |  7 +-
 modules/UI/recording/Recording.js          |  4 +-
 modules/UI/shared_video/SharedVideo.js     |  1 +
 modules/UI/side_pannels/chat/Chat.js       |  3 +-
 modules/UI/side_pannels/profile/Profile.js |  4 +-
 modules/UI/toolbars/Toolbar.js             |  3 +-
 17 files changed, 122 insertions(+), 123 deletions(-)
 create mode 100644 css/_utils.scss
 create mode 100644 css/components/_link.scss

diff --git a/css/_base.scss b/css/_base.scss
index 6491bcbb0..64dfcd203 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -29,36 +29,6 @@ html, body, input, textarea, keygen, select, button {
     color: #636363;
 }
 
-input[type='text'], input[type='password'], textarea {
-    display: inline-block;
-    width: 100%;
-    padding: 5px 7px;
-    color: $inputColor;
-    border-radius: $borderRadius;
-    line-height: 32px;
-    height: 32px;
-    text-align: left;
-    border:1px solid $inputBorderColor;
-    background-color: $inputBackground;
-    outline: none; /* removes the default outline */
-    resize: none; /* prevents the user-resizing, adjust to taste */
-}
-
-@include placeholder {
-    color: $placeHolderColor;
-}
-
-textarea {
-    overflow: hidden;
-    word-wrap: break-word;
-    resize: none;
-    line-height: 1.5em;
-}
-
-button.no-icon {
-    padding: 0 1em;
-}
-
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
@@ -75,10 +45,26 @@ input[type="reset"], input[type="submit"] {
     cursor: pointer;
 }
 
+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: none;
+    line-height: 1.5em;
+}
+
+input[type='text'], input[type='password'], textarea {
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
 button {
     color: #FFF;
     background-color: $buttonBackground;
     border-radius: $borderRadius;
+
+    &.no-icon {
+        padding: 0 1em;
+    }
 }
 
 button,
@@ -132,42 +118,6 @@ form {
     font-size: 12px;
 }
 
-/**
- * Hides an element.
- */
-.hide {
-    display: none !important;
-}
-
-/**
- * Shows an element.
- */
-.show {
-    display: block !important;
-}
-
-/**
- * Shows an inline element.
- */
-.show-inline {
-    display: inline-block !important;
-}
-
-.show-list-item {
-    display: list-item !important;
-}
-
-/**
- * Shows a flex element.
- */
-.show-flex {
-    display: -webkit-box !important;
-    display: -moz-box !important;
-    display: -ms-flexbox !important;
-    display: -webkit-flex !important;
-    display: flex !important;
-}
-
 /**
 * Tooltips
 **/
@@ -189,18 +139,6 @@ form {
     visibility: visible;
 }
 
-.link {
-    cursor: pointer;
-    color: $linkFontColor;
-    @include transition(color .1s ease-out);
-
-    &:hover {
-        color: $linkHoverFontColor;
-        text-decoration: underline;
-        @include transition(color .1s ease-in);
-    }
-}
-
 #inviteLinkRef {
     -webkit-user-select: text;
     user-select: text;
diff --git a/css/_side_toolbar_container.scss b/css/_side_toolbar_container.scss
index caa36a476..f6a11afe3 100644
--- a/css/_side_toolbar_container.scss
+++ b/css/_side_toolbar_container.scss
@@ -30,16 +30,6 @@
         width: 80%;
     }
 
-    /**
-     * Specify colors for edit elements.
-     */
-    select, input[type="button"], input[type="text"], input[type="reset"],
-    input[type="submit"] {
-        color: $inputColor;
-        background: $inputBackground;
-        border: none;
-    }
-
     /**
      * Specify styling of elements inside a block.
      */
diff --git a/css/_utils.scss b/css/_utils.scss
new file mode 100644
index 000000000..33524eea4
--- /dev/null
+++ b/css/_utils.scss
@@ -0,0 +1,38 @@
+/**
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
+}
+
+/**
+ * Shows an element.
+ */
+.show {
+    display: block !important;
+}
+
+/**
+ * Shows an inline element.
+ */
+.show-inline {
+    display: inline-block !important;
+}
+
+/**
+* Shows as a list item
+**/
+.show-list-item {
+    display: list-item !important;
+}
+
+/**
+ * Shows a flex element.
+ */
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
+}
\ No newline at end of file
diff --git a/css/components/_form-control.scss b/css/components/_form-control.scss
index 54486687e..227312162 100644
--- a/css/components/_form-control.scss
+++ b/css/components/_form-control.scss
@@ -19,24 +19,6 @@
         font-weight: $labelFontWeight;
     }
 
-    &__input {
-        margin-bottom: 8px;
-        @include transition(all .2s ease-in);
-
-        &:last-child {
-            margin-bottom: inherit;
-        }
-
-        &::selection {
-            background-color: $defaultDarkSelectionColor;
-        }
-
-        &.error {
-            color: $errorColor;
-            border-color: $errorColor;
-        }
-    }
-
     &__em {
         color: $inputControlEmColor;
     }
diff --git a/css/components/_input-control.scss b/css/components/_input-control.scss
index 8e86e7b73..f13566606 100644
--- a/css/components/_input-control.scss
+++ b/css/components/_input-control.scss
@@ -1,3 +1,32 @@
 .input-control {
-    
+    @include transition(all .2s ease-in);
+    display: inline-block;
+    width: 100%;
+    padding: 5px 7px;
+    color: $inputColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    border:1px solid $inputBorderColor;
+    background-color: $inputBackground;
+    margin-bottom: 8px;
+
+    &:last-child {
+        margin-bottom: inherit;
+    }
+
+    &::selection {
+        background-color: $defaultDarkSelectionColor;
+    }
+
+
+    &.error {
+        color: $errorColor;
+        border-color: $errorColor;
+    }
+}
+
+@include placeholder {
+    color: $placeHolderColor;
 }
\ No newline at end of file
diff --git a/css/components/_link.scss b/css/components/_link.scss
new file mode 100644
index 000000000..c8631350f
--- /dev/null
+++ b/css/components/_link.scss
@@ -0,0 +1,11 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        text-decoration: underline;
+        @include transition(color .1s ease-in);
+    }
+}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index dfb80a1eb..ae22301cf 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -33,6 +33,7 @@
 
 @import 'toastr';
 @import 'base';
+@import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
@@ -56,8 +57,10 @@
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
 @import 'components/form-control';
+@import 'components/link';
 @import 'shortcuts/main';
 @import 'components/button-control';
+@import 'components/_input-control.scss';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index b3735aeca..ff2932cfd 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -84,8 +84,7 @@ function promptDisplayName() {
             <label data-i18n="${labelKey}" class="form-control__label"></label>
             <input name="displayName" type="text"
                data-i18n="[placeholder]defaultNickname"
-               class="form-control__input"
-               autofocus>
+               class="input-control" autofocus>
          </div>`
     );
 
@@ -742,9 +741,11 @@ UI.showLoginPopup = function(callback) {
 
     let message = (
         `<input name="username" type="text"
-                placeholder="user@domain.net" autofocus>
+                placeholder="user@domain.net"
+                class="input-control" autofocus>
          <input name="password" type="password"
                 data-i18n="[placeholder]dialog.userPassword"
+                class="input-control"
                 placeholder="user password">`
     );
 
diff --git a/modules/UI/authentication/LoginDialog.js b/modules/UI/authentication/LoginDialog.js
index 8915fde69..535731e73 100644
--- a/modules/UI/authentication/LoginDialog.js
+++ b/modules/UI/authentication/LoginDialog.js
@@ -11,10 +11,10 @@ function getPasswordInputHtml() {
 
     return `
         <input name="username" type="text" 
-               class="form-control__input"
+               class="input-control"
                placeholder=${placeholder} autofocus>
         <input name="password" type="password"
-               class="form-control__input"
+               class="input-control"
                data-i18n="[placeholder]dialog.userPassword">`;
 }
 
diff --git a/modules/UI/feedback/FeedbackWindow.js b/modules/UI/feedback/FeedbackWindow.js
index 1354336b3..35a444028 100644
--- a/modules/UI/feedback/FeedbackWindow.js
+++ b/modules/UI/feedback/FeedbackWindow.js
@@ -66,7 +66,7 @@ function createRateFeedbackHTML() {
                 </div>
             </div>
             <div class="details">
-                <textarea id="feedbackTextArea" class="form-control__input" 
+                <textarea id="feedbackTextArea" class="input-control" 
                     data-i18n="[placeholder]dialog.feedbackHelp"></textarea>
             </div>
         </form>`;
diff --git a/modules/UI/invite/InviteDialogView.js b/modules/UI/invite/InviteDialogView.js
index 40acaccad..ad4cbaed6 100644
--- a/modules/UI/invite/InviteDialogView.js
+++ b/modules/UI/invite/InviteDialogView.js
@@ -124,7 +124,7 @@ export default class InviteDialogView {
                 <label class="form-control__label" for="inviteLinkRef"
                     data-i18n="${this.dialog.titleKey}"></label>
                 <div class="form-control__container">
-                    <input class="form-control__input inviteLink"
+                    <input class="input-control inviteLink"
                            id="inviteLinkRef" type="text"
                            ${this.inviteAttributes} readonly>
                     <button data-i18n="dialog.copy" class="${classes}"></button>
@@ -155,7 +155,8 @@ export default class InviteDialogView {
                        for="newPasswordInput" data-i18n="dialog.addPassword">
                </label>
                 <div class="form-control__container">
-                    <input class="form-control__input" id="newPasswordInput"
+                    <input class="input-control"
+                           id="newPasswordInput"
                            type="text" 
                            data-i18n="[placeholder]dialog.createPassword">
                     <button id="addPasswordBtn" id="inviteDialogAddPassword"
diff --git a/modules/UI/invite/RequirePasswordDialog.js b/modules/UI/invite/RequirePasswordDialog.js
index be612d3e0..5fe12eb88 100644
--- a/modules/UI/invite/RequirePasswordDialog.js
+++ b/modules/UI/invite/RequirePasswordDialog.js
@@ -33,13 +33,14 @@ export default class RequirePasswordDialog {
      */
     _getBodyMessage() {
         return (
-            `<div class="input-control">
+            `<div class="form-control">
                 <label class="input-control__label"
                        data-i18n="${this.labelKey}"></label>
-                <input class="input-control__input" name="lockKey" type="text"
+                <input class="input-control__input input-control"
+                       name="lockKey" type="text"
                    data-i18n="[placeholder]dialog.password"
                    autofocus id="${this.inputId}">
-                <p class="input-control__hint input-control__hint_error hide"
+                <p class="form-control__hint form-control__hint_error hide"
                    id="${this.errorId}"
                    data-i18n="${this.errorKey}"></p>
             </div>`
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index 9f203a336..f8257c92e 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -55,7 +55,8 @@ function _requestLiveStreamId() {
             state0: {
                 titleKey: "dialog.liveStreaming",
                 html:
-                    `<input name="streamId" type="text"
+                    `<input  class="input-control"
+                    name="streamId" type="text"
                     data-i18n="[placeholder]dialog.streamKey"
                     autofocus>`,
                 persistent: false,
@@ -123,6 +124,7 @@ function _requestRecordingToken () {
     let messageString = (
         `<input name="recordingToken" type="text"
                 data-i18n="[placeholder]dialog.token"
+                class="input-control"
                 autofocus>`
     );
     return new Promise(function (resolve, reject) {
diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js
index 501b40ba4..622e9f447 100644
--- a/modules/UI/shared_video/SharedVideo.js
+++ b/modules/UI/shared_video/SharedVideo.js
@@ -765,6 +765,7 @@ function requestVideoLink() {
                 titleKey: "dialog.shareVideoTitle",
                 html:  `
                     <input name="sharedVideoUrl" type="text"
+                           class="input-control"
                            data-i18n="[placeholder]defaultLink"
                            autofocus>`,
                 persistent: false,
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 195b415a5..56ae475be 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -17,7 +17,8 @@ const htmlStr = `
         <div id="nickname">
             <span data-i18n="chat.nickname.title"></span>
             <form>
-                <input type='text' id="nickinput" autofocus 
+                <input type='text'
+                       class="input-control" id="nickinput" autofocus
                     data-i18n="[placeholder]chat.nickname.popover">
             </form>
         </div>
diff --git a/modules/UI/side_pannels/profile/Profile.js b/modules/UI/side_pannels/profile/Profile.js
index 0147aca52..2f9e44bbd 100644
--- a/modules/UI/side_pannels/profile/Profile.js
+++ b/modules/UI/side_pannels/profile/Profile.js
@@ -10,12 +10,12 @@ const htmlStr = `
         <div class="sideToolbarBlock first">
             <label class="first" data-i18n="profile.setDisplayNameLabel">
             </label>
-            <input type="text" id="setDisplayName"
+            <input class="input-control" type="text" id="setDisplayName"
                 data-i18n="[placeholder]settings.name">
         </div>
         <div class="sideToolbarBlock">
             <label data-i18n="profile.setEmailLabel"></label>
-            <input id="setEmail" type="text" 
+            <input id="setEmail" type="text" class="input-control" 
                 data-i18n="[placeholder]profile.setEmailInput">
         </div>
         <div id="authenticationContainer" 
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index f87fceb4e..438e4b84d 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -311,7 +311,8 @@ function showSipNumberInput () {
         : '';
     let titleKey = "dialog.sipMsg";
     let msgString = (`
-            <input name="sipNumber" type="text"
+            <input class="input-control"
+                   name="sipNumber" type="text"
                    value="${defaultNumber}" autofocus>`);
 
     APP.UI.messageHandler.openTwoButtonDialog({