Replace the copy to clipboard iconwinh-tree-view-gpg

7 files changed, 20 insertions, 15 deletions

diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index dc5760bce28..d272bf3f55f 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -13,12 +13,19 @@
  * />
  */
 import tooltip from '../directives/tooltip';
+import Icon from '../components/icon.vue';
 
 export default {
   name: 'ClipboardButton',
+
   directives: {
     tooltip,
   },
+
+  components: {
+    Icon,
+  },
+
   props: {
     text: {
       type: String,
@@ -58,10 +65,6 @@ export default {
     type="button"
     class="btn"
   >
-    <i
-      aria-hidden="true"
-      class="fa fa-clipboard"
-    >
-    </i>
+    <icon name="duplicate" />
   </button>
 </template>
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 523fcb05a87..646cedd79ed 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -294,6 +294,10 @@
 .btn-clipboard {
   border: 0;
   padding: 0 5px;
+
+  svg {
+    top: auto;
+  }
 }
 
 .input-group-prepend,
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 5428624ac47..63585e26022 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -235,10 +235,6 @@
     fill: $gl-text-color-secondary;
   }
 
-  .fa-clipboard {
-    color: $gl-text-color-secondary;
-  }
-
   :first-child {
     border-bottom-left-radius: $border-radius-default;
     border-top-left-radius: $border-radius-default;
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index 3605d6a3c95..0171a880164 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -51,7 +51,7 @@ module ButtonHelper
     }
 
     content_tag :button, button_attributes do
-      concat(icon('clipboard', 'aria-hidden': 'true')) unless hide_button_icon
+      concat(sprite_icon('duplicate')) unless hide_button_icon
       concat(button_text)
     end
   end
diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml
index 37747faed62..ddc089b0bd7 100644
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -27,7 +27,7 @@
     .card-header
       .float-right
         %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
-          %i.fa.fa-clipboard
+          = sprite_icon('duplicate')
         %pre.hidden
           = @query.formatted_query
       %strong
@@ -42,7 +42,7 @@
     .card-header
       .float-right
         %button.js-clipboard-trigger.btn.btn-sm{ title: t('sherlock.copy_to_clipboard'), type: :button }
-          %i.fa.fa-clipboard
+          = sprite_icon('duplicate')
         %pre.hidden
           = @query.explain
       %strong
diff --git a/spec/helpers/button_helper_spec.rb b/spec/helpers/button_helper_spec.rb
index fee8df10129..630f3eff258 100644
--- a/spec/helpers/button_helper_spec.rb
+++ b/spec/helpers/button_helper_spec.rb
@@ -121,6 +121,8 @@ describe ButtonHelper do
   end
 
   describe 'clipboard_button' do
+    include IconsHelper
+
     let(:user) { create(:user) }
     let(:project) { build_stubbed(:project) }
 
@@ -145,7 +147,7 @@ describe ButtonHelper do
           expect(element.attr('data-clipboard-text')).to eq(nil)
           expect(element.inner_text).to eq("")
 
-          expect(element).to have_selector('.fa.fa-clipboard')
+          expect(element.to_html).to include sprite_icon('duplicate')
         end
       end
 
@@ -178,7 +180,7 @@ describe ButtonHelper do
 
     context 'with `hide_button_icon` attribute provided' do
       it 'shows copy to clipboard button without tooltip support' do
-        expect(element(hide_button_icon: true)).not_to have_selector('.fa.fa-clipboard')
+        expect(element(hide_button_icon: true).to_html).not_to include sprite_icon('duplicate')
       end
     end
   end
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
index 97f0fbb04db..e135690349e 100644
--- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -21,7 +21,7 @@ describe('clipboard button', () => {
   it('renders a button for clipboard', () => {
     expect(vm.$el.tagName).toEqual('BUTTON');
     expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
-    expect(vm.$el.querySelector('i').className).toEqual('fa fa-clipboard');
+    expect(vm.$el).toHaveSpriteIcon('duplicate');
   });
 
   it('should have a tooltip with default values', () => {