Fix #1651 Add a share icon.

mozilla-services · Oct 18, 2016 · 2cd37a5 · 2cd37a5
1 parent ea304ed
commit 2cd37a5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/server/src/views/frame.js b/server/src/views/frame.js
@@ -575,7 +575,8 @@ class Frame extends React.Component {
           </div>
           <div className="more-shot-actions right">
             <button className="button primary" id="toggle-share" onClick={ this.onClickShareButton.bind(this) }>
-              Share
+              <img className="share-icon" src={ this.props.staticLink("img/share.svg")} />
+              <span>Share</span>
             </button>
             <a className="button secondary" href={ clipUrl } onClick={ this.onClickDownload.bind(this) }
               title="Download the shot image" download={ `${clipFilename}.png` }>

diff --git a/static/css/frame.scss b/static/css/frame.scss
@@ -140,6 +140,24 @@
   }
 }
 
+#toggle-share {
+  img {
+    height: 24px;
+    width: 24px;
+    background-color: white;
+    border-radius: 4px;
+    margin: 0;
+    margin-right: 10px;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  span {
+    vertical-align: middle;
+    display: inline-block;
+  }
+}
+
 .link-button {
   cursor: pointer;
   color: $black;

diff --git a/static/img/share.svg b/static/img/share.svg