From 32e9c3f01d6b7bfc1b1c22c5349693891aec9b50 Mon Sep 17 00:00:00 2001
From: Mike de Boer <mdeboer@mozilla.com>
Date: Wed, 11 Feb 2015 14:58:55 +0100
Subject: [PATCH] Bug 1126286: update screenshare icon in conversation view
 toolbar. r=Standard8

---
 .../loop/content/shared/css/conversation.css  |  4 ++-
 .../loop/content/shared/img/icons-16x16.svg   | 27 ++++++++++++++++---
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/browser/components/loop/content/shared/css/conversation.css b/browser/components/loop/content/shared/css/conversation.css
index 29da16aaee2a..21941e012f32 100644
--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -209,10 +209,12 @@
 /* Screen share button */
 .btn-screen-share {
   /* XXX Replace this with the real button: bug 1126286 */
-  background-image: url(../img/video-inverse-14x14.png);
+  background-image: url(../img/icons-16x16.svg#screen-white);
+  background-size: 16px 16px;
 }
 
 .btn-screen-share.active {
+  background-image: url(../img/icons-16x16.svg#screenmute-white);
   background-color: #6CB23E;
   opacity: 1;
 }
diff --git a/browser/components/loop/content/shared/img/icons-16x16.svg b/browser/components/loop/content/shared/img/icons-16x16.svg
index c7d19e3e1877..40e1ac8ef167 100644
--- a/browser/components/loop/content/shared/img/icons-16x16.svg
+++ b/browser/components/loop/content/shared/img/icons-16x16.svg
@@ -28,6 +28,10 @@ use[id$="-active"] {
 use[id$="-red"] {
   fill: #d74345
 }
+
+use[id$="-white"] {
+  fill: #fff;
+}
 </style>
 <defs style="display:none">
   <path id="audio-shape" fill-rule="evenodd" clip-rule="evenodd" d="M11.429,6.857v2.286c0,1.894-1.535,3.429-3.429,3.429
@@ -122,10 +126,23 @@ use[id$="-red"] {
     <polygon fill="#FFFFFF" points="2.08,11.52 2.08,4 8,4 8,2.24 0.32,2.24 0.32,13.28 8,13.28 8,11.52"/>
     <polygon fill="#FFFFFF" points="15.66816,7.77344 9.6,2.27456 9.6,5.6 3.68,5.6 3.68,9.92 9.6,9.92 9.6,13.27232"/>
   </g>
-  <path id="tour-shape" fill="#5A5A5A" d="M8,0C4.831,0,2.262,2.674,2.262,5.972c0,1.393,1.023,3.398,2.206,5.249l0.571,0.866C6.504,14.245,8,16,8,16
-	s1.496-1.755,2.961-3.912l0.571-0.866c1.182-1.852,2.206-3.856,2.206-5.249C13.738,2.674,11.169,0,8,0z M8,7.645
-	c-0.603,0-1.146-0.262-1.534-0.681C6.098,6.566,5.87,6.025,5.87,5.428c0-1.224,0.954-2.217,2.13-2.217s2.13,0.992,2.13,2.217
-	C10.13,6.653,9.177,7.645,8,7.645z"/>
+  <path id="tour-shape" fill="#5A5A5A" d="M8,0C4.831,0,2.262,2.674,2.262,5.972c0,1.393,1.023,3.398,2.206,5.249l0.571,
+    0.866C6.504,14.245,8,16,8,16 s1.496-1.755,2.961-3.912l0.571-0.866c1.182-1.852,2.206-3.856,2.206-5.249C13.738,2.674,
+    11.169,0,8,0z M8,7.645 c-0.603,0-1.146-0.262-1.534-0.681C6.098,6.566,5.87,6.025,5.87,5.428c0-1.224,0.954-2.217,
+    2.13-2.217s2.13,0.992,2.13,2.217 C10.13,6.653,9.177,7.645,8,7.645z"/>
+  <g id="screen-shape">
+    <path d="M12.199,3.915v-0.4c0-0.837-0.65-1.515-1.452-1.515H2.452C1.65,2,1,2.678,1,3.515v6.242
+      c0,0.837,0.65,1.515,1.452,1.515h0.514V5.431c0-0.837,0.65-1.515,1.452-1.515H12.199z"/>
+    <path d="M13.548,4.727H5.253c-0.802,0-1.452,0.678-1.452,1.515v6.242c0,0.837,0.65,1.515,1.452,
+      1.515h8.294 C14.35,14,15,13.322,15,12.485V6.242C15,5.406,14.35,4.727,13.548,4.727z"/>
+  </g>
+  <g id="screenmute-shape">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.55,4.73h-0.54l-8.13,8.13L4.2,13.53
+      C4.46,13.82,4.84,14,5.25,14h8.3c0.8,0,1.45-0.68,1.45-1.52V6.24C15,5.41,14.35,4.73,13.55,4.73z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.21,2.72l-0.99-0.99l-1.15,1.15C11.83,2.36,11.33,2,10.75,2
+      h-8.3C1.65,2,1,2.68,1,3.52v6.24c0,0.83,0.65,1.51,1.45,1.51h0.52V5.43c0-0.84,0.65-1.51,1.45-1.51h6.61l-0.81,
+      0.81H5.25 c-0.8,0-1.45,0.68-1.45,1.51v4.91l-1.89,1.89l0.99,0.99l1-1l8.3-8.3L14.21,2.72z"/>
+  </g>
 </defs>
 <use id="audio"               xlink:href="#audio-shape"/>
 <use id="audio-hover"         xlink:href="#audio-shape"/>
@@ -163,4 +180,6 @@ use[id$="-red"] {
 <use id="video-hover"         xlink:href="#video-shape"/>
 <use id="video-active"        xlink:href="#video-shape"/>
 <use id="tour"                xlink:href="#tour-shape"/>
+<use id="screen-white"        xlink:href="#screen-shape"/>
+<use id="screenmute-white"    xlink:href="#screenmute-shape"/>
 </svg>