[ux] started on sectioning the content on main page

clientapp/templates.js

@@ -131,7 +131,7 @@ exports.pages.groupchat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><p>Current status:<span contenteditable="true" class="status"></span></p><div id="avatarChanger"><h1>Change Avatar</h1><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><button class="enableAlerts">Enable alerts</button><h1>This space intentionally blank</h1></section>');
+        buf.push('<section class="page main"><div><h3>Current status<span contenteditable="true" class="status"></span></h3></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Alerts</h3><button class="enableAlerts">Enable alerts</button></div></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/main.jade

@@ -1,16 +1,17 @@
 section.page.main
 
-  p Current status:
-    span.status(contenteditable="true")
+  div
+    h3 Current status
+      span.status(contenteditable="true")
 
   div#avatarChanger
-    h1 Change Avatar
+    h3 Change Avatar
     div.uploadRegion
       p Drag and drop a new avatar here
       img
       form
         input#uploader(type="file")
 
-  button.enableAlerts Enable alerts
-
-  h1 This space intentionally blank
+  div
+    h3 Alerts
+    button.enableAlerts Enable alerts

public/css/app/layout.styl

@@ -12,12 +12,13 @@ body
 h1, h2, h3, h4
   color: darken($baseText, 30%)
 
+h3
+  margin-top: 0
+  font-size: $fontMedium
+
 #pages
   position: absolute
   top: 0px
   right: 0px
   left: 181px
   borderbox()
-
-  .page.main
-    padding: 20px

public/css/app/settings.styl

@@ -1,12 +1,22 @@
 @import '../_variables'
 @import '../_mixins'
 
+.main div
+  padding: 20px
+  border-bottom: 1px solid $grayOutline
+
+  &:last-of-type
+    border: none
+
 .uploadRegion
-  font-size: 12px
-  roundall: 10px
-  border: 1px dashed #777
-  margin: 10px
-  text-align: center
+  font-size: $fontSmall
+  roundall(3px)
+  margin: 10px 0
+  color: $textSecondary
+  background: $grayBackground
+
+  p
+    margin: 0
 
   input
     width: 100%

public/css/otalk.css

@@ -260,6 +260,10 @@ h3,
 h4 {
   color: #3c3c3c;
 }
+h3 {
+  margin-top: 0;
+  font-size: 14px;
+}
 #pages {
   position: absolute;
   top: 0px;
@@ -269,9 +273,6 @@ h4 {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
-#pages .page.main {
-  padding: 20px;
-}
 #connectionOverlay {
   position: fixed;
   top: 0px;
@@ -780,17 +781,27 @@ h4 {
   border: 1px solid #efe391;
   color: #d2bd2d;
 }
+.main div {
+  padding: 20px;
+  border-bottom: 1px solid #e4e4e4;
+}
+.main div:last-of-type {
+  border: none;
+}
 .uploadRegion {
   font-size: 12px;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  -khtml-border-radius: 10px;
-  -o-border-radius: 10px;
-  -border-radius: 10px;
-  border-radius: 10px;
-  border: 1px dashed #777;
-  margin: 10px;
-  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;
+  margin: 10px 0;
+  color: #b7b7b7;
+  background: #f7f7f7;
+}
+.uploadRegion p {
+  margin: 0;
 }
 .uploadRegion input {
   width: 100%;