From 34d79449886d76216b61b50c565c80a69b81a3b8 Mon Sep 17 00:00:00 2001
From: Joshua T Flowers <joshuatf@gmail.com>
Date: Wed, 17 Oct 2018 19:01:57 -0400
Subject: [PATCH] Modify table download button styling
 (https://github.com/woocommerce/woocommerce-admin/pull/560)

---
 .../client/components/table/download-icon.js       | 13 +++++++++++++
 .../client/components/table/index.js               |  6 +++---
 .../client/components/table/style.scss             | 14 ++++++++++++--
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/components/table/download-icon.js

diff --git a/plugins/woocommerce-admin/client/components/table/download-icon.js b/plugins/woocommerce-admin/client/components/table/download-icon.js
new file mode 100644
index 00000000000..56af517b6b8
--- /dev/null
+++ b/plugins/woocommerce-admin/client/components/table/download-icon.js
@@ -0,0 +1,13 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+export default () => (
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24">
+		<path d="M18,9c-0.009,0-0.017,0.002-0.025,0.003C17.72,5.646,14.922,3,11.5,3C7.91,3,5,5.91,5,9.5c0,0.524,0.069,1.031,0.186,1.519
+			C5.123,11.016,5.064,11,5,11c-2.209,0-4,1.791-4,4c0,1.202,0.541,2.267,1.38,3h18.593C22.196,17.089,23,15.643,23,14
+			C23,11.239,20.761,9,18,9z M12,16l-4-5h3V8h2v3h3L12,16z" />
+	</svg>
+);
diff --git a/plugins/woocommerce-admin/client/components/table/index.js b/plugins/woocommerce-admin/client/components/table/index.js
index 80cebc913b3..6f8167fa175 100644
--- a/plugins/woocommerce-admin/client/components/table/index.js
+++ b/plugins/woocommerce-admin/client/components/table/index.js
@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 import './style.scss';
 import Card from 'components/card';
 import CompareButton from 'components/filters/compare/button';
+import DowloadIcon from './download-icon';
 import EllipsisMenu from 'components/ellipsis-menu';
 import { getIdsFromQuery } from 'lib/nav-utils';
 import MenuItem from 'components/ellipsis-menu/menu-item';
@@ -222,10 +223,9 @@ class TableCard extends Component {
 							key="download"
 							className="woocommerce-table__download-button"
 							onClick={ onClickDownload }
-							icon="arrow-down"
-							size={ 18 }
-							isDefault
+							isLink
 						>
+							<DowloadIcon />
 							{ labels.downloadButton || __( 'Download', 'wc-admin' ) }
 						</IconButton>
 					),
diff --git a/plugins/woocommerce-admin/client/components/table/style.scss b/plugins/woocommerce-admin/client/components/table/style.scss
index ad37901b596..4fbb12f8834 100644
--- a/plugins/woocommerce-admin/client/components/table/style.scss
+++ b/plugins/woocommerce-admin/client/components/table/style.scss
@@ -22,13 +22,23 @@
 		.woocommerce-search {
 			margin: 0 $gap;
 		}
-		.woocommerce-compare-button,
-		.woocommerce-table__download-button {
+		.woocommerce-compare-button {
 			padding: 3px $gap-small;
 			height: auto;
 		}
 	}
 
+	button.woocommerce-table__download-button.is-link {
+		padding: 6px $gap-small;
+		color: #000000;
+		text-decoration: none;
+		svg {
+			margin-right: $gap-smaller;
+			max-width: 18px;
+			width: 24px;
+			max-width: 24px;
+		}
+    
 	.woocommerce-pagination {
 		padding-top: $gap;
 		padding-bottom: $gap;