started writer

src/css/global.scss

@@ -5,6 +5,14 @@ body {
     color: $default-text-color;
 }
 
+.address-headers {
+    color: $header-text-color;
+
+    p {
+        line-height: 2.2em;
+    }
+}
+
 .address {
     margin-left: 0.3em;
     color: $lightgrey-color;
@@ -12,4 +20,22 @@ body {
     padding: 0.25em 1em;
     border-radius: 1em;
     box-shadow: 1px 1px 0px $blue-box-shadow-color;
+}
+
+.btn-shadow {
+    &:hover {
+        box-shadow: 2px 2px 4px $blue-box-shadow-color;
+    }
+    &:active {
+        box-shadow: none;
+        margin-top: 0.2em;
+    }
+}
+
+.mail-text-body {
+    line-height: 1.5em;
+
+    p {
+        margin-bottom: 1em;
+    }
 }

src/css/read.scss

@@ -14,14 +14,6 @@
         margin-bottom: 1.5em;
     }
 
-    .address-headers {
-        color: $header-text-color;
-
-        p {
-            line-height: 2.2em;
-        }
-    }
-
     .seperator-line {
         height: 1px;
         color: $grey-border-color;
@@ -29,14 +21,6 @@
         margin-top: 1em;
         margin-bottom: 1.5em;
     }
-
-    .body {
-        line-height: 1.5em;
-
-        p {
-            margin-bottom: 1em;
-        }
-    }
 }
 
 .buttons {
@@ -55,14 +39,6 @@
     border-radius: 50%;
     margin-left: 0.5em;
 
-    &:hover {
-        box-shadow: 2px 2px 4px $blue-box-shadow-color;
-    }
-    &:active {
-        box-shadow: none;
-        margin-top: 0.2em;
-    }
-
     div {
         margin: 0.5em;
     }

src/css/write.scss

@@ -1,2 +1,47 @@
 /* write view */
 
+.write-message {
+    padding: 10px 10px;
+
+    .title {
+        text-align: center;
+        font-size: 1.5em;
+        margin-bottom: 20px;
+    }
+
+    .subject-box {
+        margin: 20px 0;
+        width: inherit;
+        border: 1px;
+        border-style: solid;
+        border-color: $grey-border-color;
+        height: 2.625em;
+
+        .subject-line {
+            float: left;
+            padding: 0.813em;
+            color: $header-text-color;
+        }
+
+        .subject {
+            font-weight: bold;
+            color: $default-text-color;
+        }
+
+        .attachment-btn {
+            float: right;
+            padding: 0.5em;
+            margin: 0.3125em;
+            color: $lightgrey-color;
+            background-color: $blue-color;
+        }
+    }
+
+    .body {
+        line-height: 1.5em;
+
+        p {
+            margin-bottom: 1em;
+        }
+    }
+}

src/js/controller/message-list.js

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

src/tpl/read.html

@@ -1,13 +1,13 @@
 <div class="buttons">
-  <div ng-click="write()" class="circle">
+  <div ng-click="write()" class="circle btn-shadow">
     <div class="icon-new-mail"></div>
   </div>
 
-  <div class="circle">
+  <div class="circle btn-shadow">
     <div class="icon-reply"></div>
   </div>
 
-  <div class="circle">
+  <div class="circle btn-shadow">
     <div class="icon-delete"></div>
   </div>
 </div><!--/.buttons-->
@@ -28,7 +28,7 @@
 
   <div class="seperator-line"></div>
 
-  <div class="body">
+  <div class="mail-text-body">
     <p ng-repeat="part in selected.bodyDisplayParts">{{part}}</p>
   </div>
 </div><!--/.read-message-->

src/tpl/write.html

@@ -1 +1,24 @@
-<div>test</div>
+<div class="write-message">
+  <p class="title">New Mail</p>
+
+  <div class="address-headers">
+    <p>To: <span class="address">Max Musterman</span> <span class="address">Alice Example</span></p>
+    <p>CC: <span class="address">Hans Wurst</span></p>
+  </div><!--/.address-headers-->
+
+  <div class="subject-box">
+    <div class="subject-line">Subject: <span class="subject">Important Stuff!</span></div>
+    <div class="attachment-btn btn-shadow">
+      <div class="icon-attachment"></div>
+    </div>
+  </div>
+
+  <div class="mail-text-body">
+    <p>Hi Max,</p>
+    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+    <p>Frank</p>
+    <p>--</p>
+    <p>Sent securely from whiteout mail</p>
+  </div>
+
+</div>