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 = {
),
+ [ICONS.NEW_CHANNEL]: buildIcon(
+
+
+
+
+
+
+ ),
+ [ICONS.NEW_PUBLISH]: buildIcon(
+
+
+
+
+
+
+ ),
};
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) {
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 (
{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}`}
/>
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,
@@ -21,7 +22,15 @@ function DiscoverPage(props: Props) {
hideCustomization={IS_WEB && !email}
personalView
tags={followedTags.map(tag => tag.name)}
- meta={}
+ meta={
+
+ }
/>
);
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={}
+ headerAltControls={
+
+ }
/>
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;
}