larger right margin on icons, instead of using spans as widget containers, panels are used now instead

public/css/app.less

@@ -20,10 +20,6 @@ body {
   padding-bottom: 0;
 }
 
-.btn {
-  margin-bottom: 10px;
-}
-
 .main {
   max-width: 320px;
   margin: 0 auto;
@@ -53,7 +49,3 @@ body {
   margin-top: 0px !important;
   margin-bottom: 0px !important;
 }
-h3 {
-  text-align: center;
-  line-height: 300%;
-}

public/css/ios7.less

@@ -16,6 +16,11 @@ body {
   min-height: 100%;
 }
 
+[class^="fa-"],
+[class*="fa-"] {
+  margin-right: 10px;
+}
+
 
 // Navbar =====================================================================
 .navbar-default {
@@ -49,16 +54,59 @@ body {
   }
 }
 // Buttons ====================================================================
+.btn {
+  font-weight: 300;
+  margin: 0 10px 10px 0;
+  transition: all 0.15s;
 
+  &:active,
+  .active {
+    box-shadow: none;
+  }
+}
 
-// Grid =======================================================================
+.btn-default {
-[class*="col-xs"],
+  background: #bbbbbb;
-[class*="col-sm"],
+  border-color: #bbbbbb;
-[class*="col-md"],
+  color: white; }
-[class*="col-lg"] {
+.btn-default .caret {
+  border-top-color: white; }
+.btn-default:hover, .btn-default.active {
+  background: transparent;
+  color: #aaaaaa;
+  border-color: #bbbbbb; }
+.btn-default:hover .caret, .btn-default.active .caret {
+  border-top-color: #bbbbbb; }
+
+.btn-primary {
+  background: #007aff;
+  border-color: #007aff; }
+.btn-primary:hover, .btn-primary.active {
+  background: transparent;
+  color: #007aff;
+  border-color: #007aff; }
+.btn-primary:hover .caret, .btn-primary.active .caret {
+  border-top-color: #007aff; }
+
+// Panel ======================================================================
+.panel {
   background-color: #fff;
+  border-radius: 0;
+  border: 0;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  margin-bottom: 20px;
+}
+
+.panel-default {
+  > .panel-heading {
+    background-color: #fff;
+    border: 0;
+    height: 50px;
+    color: #007aff;
+    font-size: 15px;
+    font-weight: 400;
+    margin: 0;
+    padding: 15px 15px;
+  }
 }
 
 
@@ -77,6 +125,7 @@ body {
 // Forms =================================================================
 .form-control {
   transition: all 0.4s;
+  box-shadow: none;
 
   &:focus {
     border-color: #007aff;

views/contact.jade

@@ -2,23 +2,26 @@ extends layout
 
 block content
   .col-sm-8.col-sm-offset-2
-    .page-header
+    .panel.panel-default
-      h1 Contact Form
+      .panel-heading
-    form(role='form', method='POST')
+        i.fa.fa-envelope
-      .form-group
+        | Contact Form
-        label(class='control-label', for='email') Email
+      .panel-body
-        input.form-control(type='email', name='email', id='email')
+        form(role='form', method='POST')
-      .form-group
+          .form-group
-        label(class='control-label', for='contactBody') Body
+            label(class='control-label', for='email') Email
-        textarea.form-control(type='text', name='contactBody', id='contactBody', rows='7')
+            input.form-control(type='email', name='email', id='email')
-      .form-group
+          .form-group
-        button.btn.btn-primary(type='submit')
+            label(class='control-label', for='contactBody') Body
-          i.fa.fa-location-arrow
+            textarea.form-control(type='text', name='contactBody', id='contactBody', rows='7')
-          |  Send
+          .form-group
-        button.btn.btn-link(disabled='') Powered by SendGrid
+            button.btn.btn-primary(type='submit')
-    if error.length
+              i.fa.fa-location-arrow
-      .alert.alert-danger
+              | Send
-        p= error
+            button.btn.btn-link(disabled='') Powered by SendGrid
-    if success.length
+        if error.length
-      .alert.alert-success
+          .alert.alert-danger
-        p= success
+            p= error
+        if success.length
+          .alert.alert-success
+            p= success