implement reader buttons

src/css/icon-font.scss

@@ -0,0 +1,36 @@
+@font-face {
+    font-family: 'icomoon';
+    font-weight: normal;
+    font-style: normal;
+    src: url('icons.ttf') format('truetype');
+}
+
+.icon-reply, .icon-new-mail, .icon-delete, .icon-add-user, .icon-attachment {
+    font-family: 'icomoon';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+}
+.icon-reply:before {
+    content: "\e000";
+    margin-left: -0.15em;
+}
+.icon-new-mail:before {
+    content: "\e001";
+    margin-left: -0.05em;
+}
+.icon-delete:before {
+    content: "\e002";
+    font-size: 1.15em;
+    margin-left: 0.03em;
+}
+.icon-add-user:before {
+    content: "\e003";
+}
+.icon-attachment:before {
+    content: "\e004";
+}

src/css/message-list-desktop.scss

@@ -4,7 +4,7 @@
     float: left;
     width: 344px;
     border: 1px;
-    border-right-style:solid;
+    border-right-style: solid;
     border-color: $grey-text-color;
 }
 

src/css/read.scss

@@ -30,7 +30,6 @@
         height: 1px;
         color: $grey-border-color;
         background-color: $grey-border-color;
-        border-color: $grey-border-color;
         margin-top: 1em;
         margin-bottom: 1.5em;
     }
@@ -42,4 +41,33 @@
             margin-bottom: 1em;
         }
     }
+}
+
+.buttons {
+    float: right;
+    margin: 10px 15px;
+    color: $blue-color;
+}
+
+.circle {
+    float: right;
+    width: 2em;
+    height: 2em;
+    border: 2px;
+    border-style: solid;
+    border-color: $blue-color;
+    border-radius: 50%;
+    margin-left: 0.5em;
+
+    &:hover {
+        box-shadow: 3px 3px 4px $blue-box-shadow-color;
+    }
+    &:active {
+        box-shadow: none;
+        margin-top: 0.2em;
+    }
+
+    div {
+        margin: 0.5em;
+    }
 }

src/css/style.scss

@@ -10,15 +10,19 @@ $lightgrey-color: #f9f9f9;
 $blue-box-shadow-color: #A4A4A4;
 $lightgrey-box-shadow-color: #D8D8D8;
 
-/* global */
+/* fonts */
 
 @font-face {
     font-family: 'PT Sans';
     font-style: normal;
     font-weight: 400;
-    src: local('PT Sans'), local('PTSans-Regular'), url(pt-sans.ttf) format('truetype');
+    src: local('PT Sans'), local('PTSans-Regular'), url('pt-sans.ttf') format('truetype');
 }
 
+@import "icon-font";
+
+/* global */
+
 body {
     font-family: 'PT Sans', sans-serif;
     color: $default-text-color;

src/tpl/read.html

@@ -1,5 +1,18 @@
-<div class="read-message">
+<div class="buttons">
+  <div class="circle">
+    <div class="icon-new-mail"></div>
+  </div>
 
+  <div class="circle">
+    <div class="icon-reply"></div>
+  </div>
+
+  <div class="circle">
+    <div class="icon-delete"></div>
+  </div>
+</div>
+
+<div class="read-message">
   <p class="subject">{{selected.subject}}</p>
   <p class="date">{{selected.longDisplayDate}}</p>
 
@@ -18,5 +31,4 @@
   <div class="body">
     <p ng-repeat="part in selected.bodyDisplayParts">{{part}}</p>
   </div>
-
 </div>