Made inputs identical

css/_base.scss

     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;
     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,
     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
 **/
     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

         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

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

         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

 .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

+.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

 
 @import 'toastr';
 @import 'base';
+@import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
 @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

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

 
     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

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

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

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

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

                 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

         <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

         <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

         : '';
     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({