Merge pull request #6071 from luixxiul/fix-download-bar-close-button

bradleyrichter · web-flow · commit 24e5605957d8 · 2016-12-08T12:04:07.000-08:00
Replaced fa-times for close button on download bar with SVG button
diff --git a/img/toolbar/close_download_btn.svg b/img/toolbar/close_download_btn.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.1 12.1"><defs><style>.cls-1{fill:none;stroke:rgb(90,90,90);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;}</style></defs><title>stoploading_btn</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="11.25" y1="0.85" x2="0.85" y2="11.25"/><line class="cls-1" x1="11.25" y1="11.25" x2="0.85" y2="0.85"/></g></g></svg>
diff --git a/img/toolbar/close_download_btn_hover.svg b/img/toolbar/close_download_btn_hover.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12.1 12.1"><defs><style>.cls-1{fill:none;stroke:black;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;}</style></defs><title>stoploading_btn</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><line class="cls-1" x1="11.25" y1="0.85" x2="0.85" y2="11.25"/><line class="cls-1" x1="11.25" y1="11.25" x2="0.85" y2="0.85"/></g></g></svg>
diff --git a/js/components/downloadsBar.js b/js/components/downloadsBar.js
@@ -134,8 +134,7 @@ class DownloadsBar extends ImmutableComponent {
         }
       </div>
       <div className='downloadBarButtons'>
-        <Button iconClass='fa-times'
-          className='downloadButton smallButton hideButton'
+        <Button className='downloadButton'
           onClick={downloadActions.hideDownloadsToolbar} />
       </div>
     </div>
diff --git a/less/downloadBar.less b/less/downloadBar.less
@@ -132,7 +132,17 @@
     margin: auto 0;
 
     .downloadButton {
-      margin: 0 2px;
+      background: url('../img/toolbar/close_download_btn.svg') center no-repeat;
+      background-size: 14px 14px;
+      height: 18px;
+      width: 18px;
+
+      &:hover {
+        background: url('../img/toolbar/close_download_btn_hover.svg') center no-repeat;
+        background-size: 14px 14px;
+        height: 18px;
+        width: 18px;
+      }
 
       &.hideButton:not([disabled]):hover {
         background: @chromeControlsWarningBackground;
