From b389a4e1394b3d5f6562fe7c1f84c9b80a590cb3 Mon Sep 17 00:00:00 2001
From: Oleg Silkin <o.silkin98@gmail.com>
Date: Tue, 3 Dec 2019 22:40:30 -0500
Subject: [PATCH] Adds icons for claim-list alt control buttons & styles them

---
 ui/component/common/icon-custom.jsx | 16 ++++++++++++++++
 ui/component/sideBar/view.jsx       |  2 +-
 ui/constants/icons.js               |  3 +++
 ui/page/channelCreate/view.jsx      |  2 +-
 ui/page/channels/view.jsx           |  4 ++--
 ui/page/discover/view.jsx           | 11 ++++++++++-
 ui/page/fileListPublished/view.jsx  |  5 ++++-
 ui/scss/component/_claim-list.scss  |  5 +++++
 ui/scss/init/_vars.scss             |  4 ++++
 9 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx
index 8b04ec24f..9f18c6106 100644
--- a/ui/component/common/icon-custom.jsx
+++ b/ui/component/common/icon-custom.jsx
@@ -322,4 +322,20 @@ export const icons = {
       <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
     </g>
   ),
+  [ICONS.NEW_CHANNEL]: buildIcon(
+    <g>
+      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="8.5" cy="7" r="4" />
+      <line x1="20" y1="8" x2="20" y2="14" />
+      <line x1="23" y1="11" x2="17" y2="11" />
+    </g>
+  ),
+  [ICONS.NEW_PUBLISH]: buildIcon(
+    <g>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="12" y1="18" x2="12" y2="12" />
+      <line x1="9" y1="15" x2="15" y2="15" />
+    </g>
+  ),
 };
diff --git a/ui/component/sideBar/view.jsx b/ui/component/sideBar/view.jsx
index 7fd0077ee..4e56367a1 100644
--- a/ui/component/sideBar/view.jsx
+++ b/ui/component/sideBar/view.jsx
@@ -75,7 +75,7 @@ function SideBar(props: Props) {
         <Button
           navigate={`/$/${PAGES.FOLLOWING}`}
           label={__('Customize')}
-          icon={ICONS.EDIT}
+          icon={ICONS.CUSTOMIZE}
           className="navigation-link"
           activeClass="navigation-link--active"
         />
diff --git a/ui/constants/icons.js b/ui/constants/icons.js
index 6c3df1806..4e323e23c 100644
--- a/ui/constants/icons.js
+++ b/ui/constants/icons.js
@@ -14,6 +14,7 @@ export const PUBLISH = 'UploadCloud';
 export const REMOVE = 'X';
 export const ADD = 'Plus';
 export const EDIT = 'Edit';
+export const CUSTOMIZE = 'Edit'; // Used as icon for 'Customize'
 export const DELETE = 'Trash';
 export const REPORT = 'Flag';
 export const HELP = 'HelpCircle';
@@ -78,3 +79,5 @@ export const EYE = 'Eye';
 export const EYE_OFF = 'EyeOff';
 export const SIGN_OUT = 'SignOut';
 export const SIGN_IN = 'SignIn';
+export const NEW_CHANNEL = 'UserPlus';
+export const NEW_PUBLISH = 'FilePlus';
diff --git a/ui/page/channelCreate/view.jsx b/ui/page/channelCreate/view.jsx
index 383b3fda3..62b6446b2 100644
--- a/ui/page/channelCreate/view.jsx
+++ b/ui/page/channelCreate/view.jsx
@@ -21,7 +21,7 @@ function ChannelCreatePage(props: Props) {
     }
   }
   let history = useHistory();
-  const returnToChannelList = _ => history.push(`/$/${PAGES.CHANNELS}`);
+  const returnToChannelList = () => history.push(`/$/${PAGES.CHANNELS}`);
   return (
     <Page>
       {balance === 0 && (
diff --git a/ui/page/channels/view.jsx b/ui/page/channels/view.jsx
index dccbfc80d..4f16df235 100644
--- a/ui/page/channels/view.jsx
+++ b/ui/page/channels/view.jsx
@@ -50,7 +50,7 @@ export default function ChannelsPage(props: Props) {
                 iconSize={20}
                 label={__('New Channel')}
                 button="link"
-                icon={ICONS.EDIT}
+                icon={ICONS.NEW_CHANNEL}
                 navigate={`/$/${PAGES.CHANNEL_CREATE}`}
               />
             }
@@ -69,7 +69,7 @@ export default function ChannelsPage(props: Props) {
                     iconSize={20}
                     label={__('New Channel')}
                     button="link"
-                    icon={ICONS.EDIT}
+                    icon={ICONS.NEW_CHANNEL}
                     navigate={`/$/${PAGES.CHANNEL_CREATE}`}
                   />
                 </div>
diff --git a/ui/page/discover/view.jsx b/ui/page/discover/view.jsx
index fccc821da..0b97fb63a 100644
--- a/ui/page/discover/view.jsx
+++ b/ui/page/discover/view.jsx
@@ -5,6 +5,7 @@ import ClaimListDiscover from 'component/claimListDiscover';
 import TagsSelect from 'component/tagsSelect';
 import Page from 'component/page';
 import Button from 'component/button';
+import * as ICONS from 'constants/icons';
 
 type Props = {
   followedTags: Array<Tag>,
@@ -21,7 +22,15 @@ function DiscoverPage(props: Props) {
         hideCustomization={IS_WEB && !email}
         personalView
         tags={followedTags.map(tag => tag.name)}
-        meta={<Button button="link" label={__('Customize')} requiresAuth={IS_WEB} navigate={`/$/${PAGES.FOLLOWING}`} />}
+        meta={
+          <Button
+            button="link"
+            label={__('Customize')}
+            requiresAuth={IS_WEB}
+            navigate={`/$/${PAGES.FOLLOWING}`}
+            icon={ICONS.EDIT}
+          />
+        }
       />
     </Page>
   );
diff --git a/ui/page/fileListPublished/view.jsx b/ui/page/fileListPublished/view.jsx
index beb1718dc..56e44246b 100644
--- a/ui/page/fileListPublished/view.jsx
+++ b/ui/page/fileListPublished/view.jsx
@@ -7,6 +7,7 @@ import Paginate from 'component/common/paginate';
 import { PAGE_SIZE } from 'constants/claim';
 import WebUploadList from 'component/webUploadList';
 import Spinner from 'component/spinner';
+import * as ICONS from 'constants/icons';
 
 type Props = {
   checkPendingPublishes: () => void,
@@ -35,7 +36,9 @@ function FileListPublished(props: Props) {
             loading={fetching}
             persistedStorageKey="claim-list-published"
             uris={urls}
-            headerAltControls={<Button button="link" label={__('New Publish')} navigate="/$/publish" />}
+            headerAltControls={
+              <Button button="link" label={__('New Publish')} navigate="/$/publish" icon={ICONS.NEW_PUBLISH} />
+            }
           />
           <Paginate totalPages={Math.ceil(Number(urlTotal) / Number(PAGE_SIZE))} loading={fetching} />
         </div>
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 98a2d275a..07a902b0c 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -49,6 +49,11 @@
   & > * {
     margin-left: var(--spacing-small);
   }
+
+  .button__content svg {
+    width: var(--claim-list-alt-control-icon-width);
+    height: var(--claim-list-alt-control-icon-height);
+  }
 }
 
 .claim-preview {
diff --git a/ui/scss/init/_vars.scss b/ui/scss/init/_vars.scss
index e1bd461ef..3f68aebd6 100644
--- a/ui/scss/init/_vars.scss
+++ b/ui/scss/init/_vars.scss
@@ -61,4 +61,8 @@ $large-breakpoint: 1921px;
   --file-list-thumbnail-width: 10rem;
 
   --tag-height: 1.5rem;
+
+  // SVG Icons
+  --claim-list-alt-control-icon-width: 20px;
+  --claim-list-alt-control-icon-height: 20px;
 }