Made inputs identical

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;

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.
      */

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;
+}

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;
     }

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;
 }

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);
+    }
+}

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';

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">`
     );
 

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">`;
 }
 

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>`;

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"

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>`

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) {

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,

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>

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" 

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({