tweak animation timing and fix typography and layout bugs

src/js/controller/navigation.js

@@ -19,14 +19,14 @@ define(function() {
             if (window.chrome && chrome.app.window) {
                 chrome.app.window.create(url, {
                     'bounds': {
-                        'width': 800,
+                        'width': 720,
-                        'height': 700
+                        'height': 680
                     }
                 });
                 return;
             }
 
-            window.open(url, 'Compose Message', 'toolbar=no,width=800,height=700,left=500,top=200,status=no,scrollbars=no,resize=no');
+            window.open(url, 'Compose Message', 'toolbar=no,width=720,height=680,left=500,top=200,status=no,scrollbars=no,resize=no');
         };
     };
 

src/sass/_variables.scss

@@ -31,6 +31,12 @@ $respond-size-desktop:              768px;
 
 $content-nav-width:                 344px;
 
+// Animations
+// -------------------------------------------
+
+$time-nav-animation:                0.2s;
+$time-li-fade:                      0.15s;
+
 // Components
 // -------------------------------------------
 

src/sass/components/_mail-list.scss

@@ -16,7 +16,7 @@
         padding: $padding-vertical $padding-horizontal;
         background: $color-white;
         cursor: pointer;
-        transition: background-color 0.3s, color 0.3s;
+        transition: background-color $time-li-fade, color $time-li-fade;
 
         h3 {
             @include text-overflow;
@@ -63,7 +63,7 @@
                 left: 0;
                 margin-top: 0.2em;
                 margin-left: -1.3em;
-                transition: background-color 0.3s, box-shadow 0.3s;
+                transition: background-color $time-li-fade, box-shadow $time-li-fade;
             }
         }
         .body {

src/sass/components/_nav.scss

@@ -1,5 +1,6 @@
 // Navigation
 // -------------------------
+
 .nav-container {
     position: relative;
     overflow: hidden;
@@ -11,14 +12,14 @@
     left: 0;
     z-index: 99;
     height: 100%;
-    transition: transform 0.5s;
+    transition: transform $time-nav-animation;
 }
 
 .nav-menu-open .nav-pusher::after {
     width: 100%;
     height: 100%;
     opacity: 1;
-    transition: opacity 0.5s;
+    transition: opacity $time-nav-animation;
 }
 
 .nav-pusher::after {
@@ -30,7 +31,7 @@
     background: rgba(0,0,0,0.2);
     content: '';
     opacity: 0;
-    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
+    transition: opacity $time-nav-animation, width 0.1s $time-nav-animation, height 0.1s $time-nav-animation;
 }
 
 .nav-menu {
@@ -44,7 +45,7 @@
     height: 100%;
     background: $color-blue;
     background-image: linear-gradient(to right ,$color-blue 98%, darken($color-blue, 1%) 100%);
-    transition: all 0.5s;
+    transition: all $time-nav-animation;
     border-right: 1px solid $color-grey-light;
 }
 
@@ -52,7 +53,7 @@
     width: 100%;
     height: 100%;
     opacity: 1;
-    transition: opacity 0.5s;
+    transition: opacity $time-nav-animation;
 }
 
 .nav-effect.nav-menu-open .nav-pusher {
@@ -72,7 +73,7 @@ z-index: 1;
 
 .nav-effect.nav-menu-open .nav-effect.nav-menu {
     visibility: visible;
-    transition: transform 0.5s;
+    transition: transform $time-nav-animation;
     transform: translate3d(0, 0, 0);
 }
 

src/sass/views/_read.scss

@@ -22,6 +22,7 @@
         }
 
         .address {
+            color: $color-grey;
             padding: 0.2em 0;
 
             .label {

src/sass/views/_write.scss

@@ -6,6 +6,7 @@
     .title {
         text-align: center;
         font-size: $font-size-bigger;
+        margin-top: 0px;
         margin-bottom: 20px;
     }
 
@@ -18,8 +19,14 @@
         border: 0!important;
     }
 
-    .address-input {
+    .headers {
-        width: 90%;
+        span {
+            color: $color-grey;
+        }
+
+        .address-input {
+            width: 90%;
+        }
     }
 
     .subject-box {

src/tpl/write.html

@@ -1,7 +1,7 @@
 <div class="view-write">
   <p class="title">New Mail</p>
 
-  <div class="address-headers">
+  <div class="headers">
     <p>
       <span>To:</span>
       <input ng-model="to" class="address-input" tabindex="1" focus-me >