Icon upgrade

Also remove unused images.

// FREEBIE

images/audio.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M6 18v12h8l10 10V8L14 18H6zm27 6c0-3.53-2.04-6.58-5-8.05v16.11c2.96-1.48 5-4.53 5-8.06zM28 6.46v4.13c5.78 1.72 10 7.07 10 13.41s-4.22 11.69-10 13.41v4.13c8.01-1.82 14-8.97 14-17.54S36.01 8.28 28 6.46z"/></svg>

images/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M30.83 14.83L28 12 16 24l12 12 2.83-2.83L21.66 24z"/></svg>

images/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M18 32.34L9.66 24l-2.83 2.83L18 38l24-24-2.83-2.83z"/></svg>

images/double-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M36 14l-2.83-2.83-12.68 12.69 2.83 2.83L36 14zm8.49-2.83L23.31 32.34 14.97 24l-2.83 2.83L23.31 38l24-24-2.82-2.83zM.83 26.83L12 38l2.83-2.83L3.66 24 .83 26.83z"/></svg>

images/menu.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none"/>
+    <path d="M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/>
+</svg>

images/video.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M36 8l4 8h-6l-4-8h-4l4 8h-6l-4-8h-4l4 8h-6l-4-8H8c-2.21 0-3.98 1.79-3.98 4L4 36c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V8h-8z"/></svg>

images/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M38 12.83L35.17 10 24 21.17 12.83 10 10 12.83 21.17 24 10 35.17 12.83 38 24 26.83 35.17 38 38 35.17 26.83 24z"/></svg>

js/notifications.js

@@ -78,7 +78,7 @@
                     }.bind(this)),
                     buttons : [{
                         title   : 'Mark all as read',
-                        iconUrl : 'images/check.png'
+                        iconUrl : 'images/check.svg'
                     }]
                 });
             } else {

js/views/file_input_view.js

@@ -119,8 +119,8 @@
 
             var type = file.type.split('/')[0];
             switch (type) {
-                case 'audio': this.addThumb('/images/audio.png'); break;
+                case 'audio': this.addThumb('/images/audio.svg'); break;
-                case 'video': this.addThumb('/images/video.png'); break;
+                case 'video': this.addThumb('/images/video.svg'); break;
                 case 'image':
                     this.oUrl = URL.createObjectURL(file);
                     this.addThumb(this.oUrl);

stylesheets/_conversation.scss

@@ -146,16 +146,6 @@
       span {
         vertical-align: middle;
       }
-
-      &:before {
-        content: '';
-        display: inline-block;
-        vertical-align: middle;
-        width: 18px;
-        height: 18px;
-        background: url('/images/refresh.png') no-repeat center center;
-        background-size: 100%;
-      }
     }
   }
 
@@ -332,11 +322,11 @@
   }
   .sent .status {
     display: inline-block;
-    background: url('/images/check-black.png') center;
+    @include color-svg('/images/check.svg', black);
   }
   .delivered .status {
     display: inline-block;
-    background: url('/images/double-check-black.png') center;
+    @include color-svg('/images/double-check.svg', black);
   }
   .pending .status {
     display: inline-block;

stylesheets/_global.scss

@@ -61,10 +61,11 @@ button { cursor: pointer; }
 a { color: $blue; }
 
 .inactive button.back {
-  background: url('/images/back.png') no-repeat center center;
+  @include header-icon-black('/images/back.svg');
+
 }
 button.back {
-  background: url('/images/back_white.png') no-repeat center center;
+  @include header-icon-white('/images/back.svg');
 }
 
 ::-webkit-scrollbar {
@@ -96,7 +97,7 @@ button.back {
 }
 
 .inactive .menu .hamburger {
-  background: url('/images/menu_black.png') no-repeat center;
+  @include header-icon-black('/images/menu.svg');
 }
 
 .menu {
@@ -106,12 +107,8 @@ button.back {
   .hamburger {
     width: $button-height;
     height: $button-height;
-    background: url('/images/menu.png') no-repeat center;
     vertical-align: middle;
-
+    @include header-icon-white('/images/menu.svg');
-    &:hover {
-      background-color: rgba(0,0,0, 0.2);
-    }
   }
   .menu-list {
     display: none;
@@ -260,10 +257,6 @@ $avatar-size: 44px;
   }
 }
 
-.conversation-header .check {
-  float: right;
-  background: url('/images/check.png') no-repeat center center;
-}
 .conversation-list-item {
   cursor: pointer;
   &:hover {

stylesheets/_index.scss

@@ -100,7 +100,7 @@ input.search {
     display: block;
     width: 16px;
     height: 16px;
-    background: url('/images/x.png') no-repeat center;
+    background: url('/images/x.svg') no-repeat center;
     background-size: cover;
   }
 
@@ -109,24 +109,6 @@ input.search {
   }
 }
 
-.tool-bar {
-  button.show-new-conversation {
-    float: right;
-    height: $button-height;
-    width: $button-height;
-    border: 0;
-    outline: 0;
-    font: 300 36px $roboto;
-    color: white;
-    background: url('/images/pencil.png') no-repeat center center;
-
-    &:hover {
-      background-color: darken($grey_l, 3%);
-    }
-  }
-
-}
-
 .last-timestamp {
   font-size: smaller;
   float: right;

stylesheets/_variables.scss

@@ -38,3 +38,21 @@ $unread-badge-size: 21px;
 $loading-height: 16px;
 
 $big-avatar-min-width: 900px;
+
+@mixin color-svg($svg, $color) {
+    -webkit-mask: url($svg) no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: $color;
+}
+@mixin header-icon-white($svg) {
+  @include color-svg($svg, rgba(255,255,255, 0.8));
+  &:hover {
+    @include color-svg($svg, white);
+  }
+}
+@mixin header-icon-black($svg) {
+  @include color-svg($svg, rgba(0,0,0, 0.5));
+  &:hover {
+    @include color-svg($svg, black);
+  }
+}

stylesheets/manifest.css

@@ -67,10 +67,22 @@ a {
   color: #2090ea; }
 
 .inactive button.back {
-  background: url("/images/back.png") no-repeat center center; }
+  -webkit-mask: url("/images/back.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .inactive button.back:hover {
+    -webkit-mask: url("/images/back.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
 
 button.back {
-  background: url("/images/back_white.png") no-repeat center center; }
+  -webkit-mask: url("/images/back.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: rgba(255, 255, 255, 0.8); }
+  button.back:hover {
+    -webkit-mask: url("/images/back.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: white; }
 
 ::-webkit-scrollbar {
   width: 10px; }
@@ -91,7 +103,13 @@ button.back {
     display: table-cell; }
 
 .inactive .menu .hamburger {
-  background: url("/images/menu_black.png") no-repeat center; }
+  -webkit-mask: url("/images/menu.svg") no-repeat center;
+  -webkit-mask-size: 100%;
+  background-color: rgba(0, 0, 0, 0.5); }
+  .inactive .menu .hamburger:hover {
+    -webkit-mask: url("/images/menu.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
 
 .menu {
   position: relative;
@@ -99,10 +117,14 @@ button.back {
   .menu .hamburger {
     width: 36px;
     height: 36px;
-    background: url("/images/menu.png") no-repeat center;
+    vertical-align: middle;
-    vertical-align: middle; }
+    -webkit-mask: url("/images/menu.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: rgba(255, 255, 255, 0.8); }
     .menu .hamburger:hover {
-      background-color: rgba(0, 0, 0, 0.2); }
+      -webkit-mask: url("/images/menu.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: white; }
   .menu .menu-list {
     display: none;
     position: absolute;
@@ -217,10 +239,6 @@ img.emoji {
   .new-group-update .members .contact .number {
     display: none; }
 
-.conversation-header .check {
-  float: right;
-  background: url("/images/check.png") no-repeat center center; }
-
 .conversation-list-item {
   cursor: pointer; }
   .conversation-list-item:hover {
@@ -511,23 +529,11 @@ input.search {
     display: block;
     width: 16px;
     height: 16px;
-    background: url("/images/x.png") no-repeat center;
+    background: url("/images/x.svg") no-repeat center;
     background-size: cover; }
   input.search::-webkit-search-cancel-button:hover {
     cursor: pointer; }
 
-.tool-bar button.show-new-conversation {
-  float: right;
-  height: 36px;
-  width: 36px;
-  border: 0;
-  outline: 0;
-  font: 300 36px Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  color: white;
-  background: url("/images/pencil.png") no-repeat center center; }
-  .tool-bar button.show-new-conversation:hover {
-    background-color: #ebebeb; }
-
 .last-timestamp {
   font-size: smaller;
   float: right;
@@ -732,14 +738,6 @@ input.search {
     font-weight: bold; }
     .message-detail .info button span {
       vertical-align: middle; }
-    .message-detail .info button:before {
-      content: '';
-      display: inline-block;
-      vertical-align: middle;
-      width: 18px;
-      height: 18px;
-      background: url("/images/refresh.png") no-repeat center center;
-      background-size: 100%; }
 .message-detail .contacts .contact-detail {
   padding: 0 36px;
   margin-bottom: 5px; }
@@ -886,11 +884,15 @@ input.search {
   .message-container .sent .status,
   .message-list .sent .status {
     display: inline-block;
-    background: url("/images/check-black.png") center; }
+    -webkit-mask: url("/images/check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
   .message-container .delivered .status,
   .message-list .delivered .status {
     display: inline-block;
-    background: url("/images/double-check-black.png") center; }
+    -webkit-mask: url("/images/double-check.svg") no-repeat center;
+    -webkit-mask-size: 100%;
+    background-color: black; }
   .message-container .pending .status,
   .message-list .pending .status {
     display: inline-block;