[ux] small visual tweaks: sizes, placement and cancel button

clientapp/templates/main.html

@@ -11,7 +11,7 @@
     </header>
     <section class="box connect">
       <h2>Connecting...</h2> 
-      <a href="/logout">Cancel</a>
+      <a class="button" href="/logout">Cancel</a>
     </section>
   </body>
 </html>

public/css/app/aux.styl

@@ -24,6 +24,10 @@
     h2
       padding: 0
 
+    .button
+      float: none
+      margin-top: 20px
+
   .head, .content
     padding: 0 20px
 

public/css/app/forms.styl

@@ -59,4 +59,7 @@ button, a.button
   cursor: pointer
 
   &:hover
-    background: darken($activeBlue, 30%)
+    background: darken($activeBlue, 30%)
+
+.enableAlerts
+  margin-right: 5px

public/css/app/settings.styl

@@ -12,6 +12,7 @@
     padding: 5px
     background: $grayBackground
     roundall(3px)
+    font-size: $fontSmall
 
 .uploadRegion
   padding: 15px
@@ -26,3 +27,6 @@
 
   input
     width: 100%
+
+  img
+    margin: 10px 0

public/css/otalk.css

@@ -859,6 +859,7 @@ h3 {
   -o-border-radius: 3px;
   -border-radius: 3px;
   border-radius: 3px;
+  font-size: 12px;
 }
 .uploadRegion {
   padding: 15px;
@@ -879,6 +880,9 @@ h3 {
 .uploadRegion input {
   width: 100%;
 }
+.uploadRegion img {
+  margin: 10px 0;
+}
 .aux {
   background: #f7f7f7;
 }
@@ -910,6 +914,10 @@ h3 {
 .box.connect h2 {
   padding: 0;
 }
+.box.connect .button {
+  float: none;
+  margin-top: 20px;
+}
 .box .head,
 .box .content {
   padding: 0 20px;
@@ -1020,3 +1028,6 @@ button:hover,
 a.button:hover {
   background: #007aa7;
 }
+.enableAlerts {
+  margin-right: 5px;
+}

public/x-manifest.cache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# 0.0.1 1381863218449
+# 0.0.1 1381864437928
 
 CACHE:
 /app.js