Revised login dialog style

Tweaked layout/whitespace. Resized logo. Updated some outdated code in the HTML. Made placeholder styles universal so as to appy to the password field. Removed horizontal line above the button. Change-Id: I202b451233a3e4c654ab4b747a45779b08e026de Reviewed-on: http://review.couchbase.org/75588 Tested-by: Rob Ashcom <rob.ashcom@gmail.com> Reviewed-by: Michael Wiederhold <mike@couchbase.com>
membase · Mar 23, 2017 · ad9a879 · ad9a879
1 parent e47953d
commit ad9a879
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 40 deletions.
diff --git a/priv/public/ui/app/css/cbui-base.css b/priv/public/ui/app/css/cbui-base.css
@@ -1113,25 +1113,25 @@ input:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0px 1000px #fff inset;
 }
 
-input[type="text"]::-webkit-input-placeholder {
-  font-size: .75rem;
+input::-webkit-input-placeholder {
+  font-size: .875rem;
   padding: .3rem 0 0 0;
   line-height:normal;
 }
 
-input[type="text"]::-moz-placeholder {
-  font-size: .75rem;
+input::-moz-placeholder {
+  font-size: .875rem;
   padding: 0;
   line-height:1.9rem;
 }
 
-input[type="text"]:-ms-input-placeholder {
-  font-size: .75rem;
+input:-ms-input-placeholder {
+  font-size: .875rem;
   padding: .25rem 0 0 0;
   line-height:normal;
 }
 
-input[type="text"]::placeholder {
+input::placeholder {
   font-size: .75rem;
   padding: .25rem 0 .25rem 0;
   line-height:normal;

diff --git a/priv/public/ui/app/css/cbui-components.css b/priv/public/ui/app/css/cbui-components.css
@@ -860,26 +860,28 @@ section.error {
 }
 
 /* Small Dialog (uses Panel) -------- */
+.dialog-small .panel-header {
+  padding: 0 1rem;
+}
 .dialog-small .logobug {
   margin: 0 .5rem 0 0;
+  min-width: 40px;
+  max-width: 40px;
 }
-
 .dialog-small h2 {
   -webkit-flex:1 1 auto;
-      -ms-flex:1 1 auto;
-          flex:1 1 auto;
+  -ms-flex:1 1 auto;
+  flex:1 1 auto;
 }
-
 .dialog-small {
   width: 380px;
 }
-
 .dialog-small .panel-content {
-  padding: 1.5rem 1rem 1rem 1.5rem;
+  padding: 1.5rem 1.25rem 1rem 1.25rem;
 }
-
 .dialog-small .panel-footer {
-
+  border: 0;
+  padding: 0 1rem 1rem 1rem;
 }
 
 /* Wizard Dialog (uses Panel) --------- */

diff --git a/priv/public/ui/app/mn_auth/mn_auth.html b/priv/public/ui/app/mn_auth/mn_auth.html
@@ -1,21 +1,22 @@
 <div class="sign-in-background"></div>
-<div class="row items-center items-top dialog_main_wrapper">
+<div class="row flex-center items-top dialog_main_wrapper">
   <div class="panel dialog-small dialog">
     <div class="panel-header">
       <img
          src="/images/cb_logo_bug_white.svg"
-         width="35"
-         height="35"
-         alt="Couchbase Server"
-         class="logobug">
+         width="40"
+         height="40"
+         class="logobug"
+         alt="Couchbase Server">
       <h2>Couchbase Server</h2>
     </div>
     <form
        name="loginForm"
+       class="forms"
        novalidate=""
        ng-submit="!loginForm.$invalid && authCtl.submit()">
 
-      <div class="panel-content forms">
+      <div class="panel-content">
         <div
            ng-messages="authCtl.error"
            class="error error-form"
@@ -24,7 +25,7 @@ <h2>Couchbase Server</h2>
             Login failed. Please try again.
           </span>
           <span ng-message="_410">
-            The client's version does not match the server's. Please the reload tab.
+            The client's version does not match the server's. Please reload the tab.
           </span>
         </div>
 
@@ -49,24 +50,22 @@ <h2>Couchbase Server</h2>
           </div>
         </div>
 
-        <div class="formrow">
-          <input
-             type="password"
-             autocorrect="off"
-             spellcheck="false"
-             id="auth-password-input"
-             ng-model="authCtl.user.password"
-             ng-model-options="{updateOn: 'default'}"
-             name="password"
-             placeholder="Password"
-             required
-             mn-autocomplete-off>
-          <div
-             ng-messages="loginForm.password.$error"
-             ng-show="loginForm.password.$dirty"
-             class="error error-field">
-            <div ng-message="required">Password is required.</div>
-          </div>
+        <input
+           type="password"
+           autocorrect="off"
+           spellcheck="false"
+           id="auth-password-input"
+           ng-model="authCtl.user.password"
+           ng-model-options="{updateOn: 'default'}"
+           name="password"
+           placeholder="Password"
+           required
+           mn-autocomplete-off>
+        <div
+           ng-messages="loginForm.password.$error"
+           ng-show="loginForm.password.$dirty"
+           class="error error-field">
+          <div ng-message="required">Password is required.</div>
         </div>
       </div>
       <div class="panel-footer">