[ux] make log in form consistent with apps.andyet.com, further centralization of form styles

public/css/app/aux.styl

@@ -11,42 +11,21 @@
   margin: auto
   margin-top: 5%
   padding: 20px
-  background-color: white
+  background: white
   width: 75%
-
-  label
-    display: block
-    margin-bottom: 5px
-    font-size: 13px
-    font-weight: bold
-    color: #777
+  roundall(3px)
 
   input
     width: 100%
     margin-bottom: 15px
-    borderbox()
 
-  button, .andyetLogin
-    text-decoration: none
-    text-align: center
-    roundall: 3px
-    border: none
-    height: 35px
-    padding: 0 1em
-    color: white
-    background-color: #7ec6e2
-    line-height: 35px
-    font-size: 16px
-    cursor: pointer
-
-  .andyetLogin
-    display: block
+  a.button
     float: right
-    font-size: 14px
 
   h2
+    margin-top: 0
     color: #222
     padding-bottom: 10px
-    border-bottom: 1px solid #f8f8f8
+    border-bottom: 1px solid lighten($grayOutline, 50%)
 
 

public/css/app/forms.styl

@@ -5,6 +5,7 @@ input[type=text], input[type=email], input[type=search], input[type=password], t
   background: white
   border: 1px solid $grayOutline
   font-size: 0.8em
+  color: $baseText
   borderbox()
 
   transition: border .2s ease-in 0
@@ -23,4 +24,29 @@ input[type=search]:focus,
 input[type=password]:focus,
 textarea:focus
   outline: none
-  border: 1px solid lighten($activeBlue, 50%)
+  border: 1px solid lighten($activeBlue, 50%)
+
+label
+  display: block
+  margin-bottom: 5px
+  font-size: 13px
+  font-weight: bold
+  color: $baseText
+
+button, a.button
+  display: inline-block
+  text-decoration: none
+  text-align: center
+  roundall(3px)
+  border: none
+  height: 35px
+  padding: 0 1em
+  color: white
+  background: $activeBlue
+  line-height: 35px
+  font-size: 14px
+  font-weight: bold
+  cursor: pointer
+
+  &:hover
+    background: darken($activeBlue, 30%)

public/css/otalk.css

@@ -688,51 +688,27 @@ body #menu {
   margin: auto;
   margin-top: 5%;
   padding: 20px;
-  background-color: #fff;
+  background: #fff;
   width: 75%;
-}
-#loginbox label {
-  display: block;
-  margin-bottom: 5px;
-  font-size: 13px;
-  font-weight: bold;
-  color: #777;
-}
-#loginbox input {
-  width: 100%;
-  margin-bottom: 15px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-#loginbox button,
-#loginbox .andyetLogin {
-  text-decoration: none;
-  text-align: center;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   -khtml-border-radius: 3px;
   -o-border-radius: 3px;
   -border-radius: 3px;
   border-radius: 3px;
-  border: none;
-  height: 35px;
-  padding: 0 1em;
-  color: #fff;
-  background-color: #7ec6e2;
-  line-height: 35px;
-  font-size: 16px;
-  cursor: pointer;
 }
-#loginbox .andyetLogin {
-  display: block;
+#loginbox input {
+  width: 100%;
+  margin-bottom: 15px;
+}
+#loginbox a.button {
   float: right;
-  font-size: 14px;
 }
 #loginbox h2 {
+  margin-top: 0;
   color: #222;
   padding-bottom: 10px;
-  border-bottom: 1px solid #f8f8f8;
+  border-bottom: 1px solid #f2f2f2;
 }
 input[type=text],
 input[type=email],
@@ -750,6 +726,7 @@ textarea {
   background: #fff;
   border: 1px solid #e4e4e4;
   font-size: 0.8em;
+  color: #565656;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -777,3 +754,35 @@ textarea:focus {
   outline: none;
   border: 1px solid #78daff;
 }
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 13px;
+  font-weight: bold;
+  color: #565656;
+}
+button,
+a.button {
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  -khtml-border-radius: 3px;
+  -o-border-radius: 3px;
+  -border-radius: 3px;
+  border-radius: 3px;
+  border: none;
+  height: 35px;
+  padding: 0 1em;
+  color: #fff;
+  background: #00aeef;
+  line-height: 35px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+}
+button:hover,
+a.button:hover {
+  background: #007aa7;
+}

views/login.jade

@@ -1,21 +1,23 @@
 extends layout
 
 block content
-    section#loginbox.content
-        a.andyetLogin(href="/oauth/login") have an &yet account?
-        h2 Log in
-        form
-            .fieldContainer
-                label(for='username') JID
-                input(type='text', id='jid', name='jid', placeholder='you@aweso.me', tabindex='1', autofocus)
-            .fieldContainer
-                label(for='password') Password
-                input(type='password', id='password', name='password', placeholder='•••••••••••••', tabindex='2')
-            .fieldContainer
-                label(for='wsURL') WebSocket URL 
-                input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
+  section#loginbox.content
+    h2 
+      | Log in
+      a.button(href="/oauth/login") Have an &yet account?
 
-            button(type='submit', tabindex='3') Go!
+    form
+        .fieldContainer
+            label(for='username') JID
+            input(type='text', id='jid', name='jid', placeholder='you@aweso.me', tabindex='1', autofocus)
+        .fieldContainer
+            label(for='password') Password
+            input(type='password', id='password', name='password', placeholder='•••••••••••••', tabindex='2')
+        .fieldContainer
+            label(for='wsURL') WebSocket URL 
+            input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
+
+        button(type='submit', tabindex='3') Go!
 
 block scripts
     script(src="/js/login.js")