From 1e8fb361f43750179f6fe132281fde9d94191549 Mon Sep 17 00:00:00 2001
From: karolinaszczur <me@karolinaszczur.com>
Date: Wed, 18 Sep 2013 19:45:40 +0200
Subject: [PATCH] [ux] final touch on log in page

---
 public/css/app/aux.styl    | 17 +++++++++++------
 public/css/app/forms.styl  |  2 ++
 public/css/app/layout.styl |  8 ++++----
 public/css/otalk.css       | 32 +++++++++++++++++++-------------
 views/login.jade           | 33 ++++++++++++++++++---------------
 5 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/public/css/app/aux.styl b/public/css/app/aux.styl
index a4d6253..200c408 100644
--- a/public/css/app/aux.styl
+++ b/public/css/app/aux.styl
@@ -6,15 +6,22 @@
 #logo
   margin: auto
 
-#loginbox
+.box
   position: relative
   margin: auto
   margin-top: 5%
-  padding: 20px
+  padding: 20px 0
   background: white
   width: 75%
   roundall(3px)
 
+  .head, .content
+    padding: 0 20px
+
+  .head
+    margin-bottom: 20px
+    border-bottom: 1px solid lighten($grayOutline, 50%)
+
   input
     width: 100%
     margin-bottom: 15px
@@ -23,9 +30,7 @@
     float: right
 
   h2
-    margin-top: 0
-    color: #222
-    padding-bottom: 10px
-    border-bottom: 1px solid lighten($grayOutline, 50%)
+    margin: 0
+    padding-bottom: 20px
 
 
diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl
index 0cc03ab..10303e9 100644
--- a/public/css/app/forms.styl
+++ b/public/css/app/forms.styl
@@ -1,3 +1,5 @@
+// Forms and Buttons
+
 input[type=text], input[type=email], input[type=search], input[type=password], textarea
   -webkit-appearance: none
   roundall(3px)
diff --git a/public/css/app/layout.styl b/public/css/app/layout.styl
index 5077da8..58c9da1 100644
--- a/public/css/app/layout.styl
+++ b/public/css/app/layout.styl
@@ -3,10 +3,10 @@
 
 body
   background: #ecf0f2
-  color: #222
-  font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
-  font-size: 17px
-  font-weight: 500
+  color: $baseText
+  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
+  font-size: 16px
+  font-weight: 400
   -webkit-font-smoothing: antialiased
 
   #pages
diff --git a/public/css/otalk.css b/public/css/otalk.css
index 973e841..2eecd6f 100644
--- a/public/css/otalk.css
+++ b/public/css/otalk.css
@@ -658,10 +658,10 @@ td {
 }
 body {
   background: #ecf0f2;
-  color: #222;
-  font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 17px;
-  font-weight: 500;
+  color: #565656;
+  font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
   -webkit-font-smoothing: antialiased;
 }
 body #pages {
@@ -683,11 +683,11 @@ body #menu {
 #logo {
   margin: auto;
 }
-#loginbox {
+.box {
   position: relative;
   margin: auto;
   margin-top: 5%;
-  padding: 20px;
+  padding: 20px 0;
   background: #fff;
   width: 75%;
   -moz-border-radius: 3px;
@@ -697,18 +697,24 @@ body #menu {
   -border-radius: 3px;
   border-radius: 3px;
 }
-#loginbox input {
+.box .head,
+.box .content {
+  padding: 0 20px;
+}
+.box .head {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #f2f2f2;
+}
+.box input {
   width: 100%;
   margin-bottom: 15px;
 }
-#loginbox a.button {
+.box a.button {
   float: right;
 }
-#loginbox h2 {
-  margin-top: 0;
-  color: #222;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f2f2f2;
+.box h2 {
+  margin: 0;
+  padding-bottom: 20px;
 }
 input[type=text],
 input[type=email],
diff --git a/views/login.jade b/views/login.jade
index a4fb247..48d7b52 100644
--- a/views/login.jade
+++ b/views/login.jade
@@ -1,23 +1,26 @@
 extends layout
 
 block content
-  section#loginbox.content
-    h2 
-      | Log in
-      a.button(href="/oauth/login") Have an &amp;yet account?
+  section#loginbox.content.box
+    .head
+        h2 
+          | Log in
+          a.button(href="/oauth/login") Have an &amp;yet account?
 
-    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')
+    .content
 
-        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")