diff --git a/ui/js/component/icon/view.jsx b/ui/js/component/icon/view.jsx index a27db9acc..5c23af877 100644 --- a/ui/js/component/icon/view.jsx +++ b/ui/js/component/icon/view.jsx @@ -11,36 +11,29 @@ export default class Icon extends React.PureComponent { fixed: false, }; - getIconInfo() { - if (this.props.icon.startsWith("icon-")) { - // Old style where FA icon class is passed in directly - return { className: this.props.icon, title: "" }; - } + getIconClass() { + const { icon } = this.props; + return icon.startsWith("icon-") ? icon : "icon-" + icon; + } + + getIconTitle() { switch (this.props.icon) { case icons.FEATURED: - return { - className: "icon-rocket", - title: "Watch content with this icon to earn weekly rewards.", - }; + return __("Watch this and earn rewards."); case icons.LOCAL: - return { - className: "icon-folder", - title: "You have a copy of this file.", - }; + return __("You have a copy of this file."); default: - throw new Error(`Unknown icon type "${this.props.icon}"`); + return ""; } } render() { - const { className, title } = this.getIconInfo(); + const className = this.getIconClass(), + title = this.getIconTitle(); const spanClassName = - "icon " + - ("lbry-icon-" + this.props.icon + " ") + - className + - (this.props.fixed ? " icon-fixed-width " : ""); + "icon " + className + (this.props.fixed ? " icon-fixed-width " : ""); return ; } diff --git a/ui/js/constants/icons.js b/ui/js/constants/icons.js index 0b8b70348..6de5babcb 100644 --- a/ui/js/constants/icons.js +++ b/ui/js/constants/icons.js @@ -1,2 +1,2 @@ -export const FEATURED = "featured"; -export const LOCAL = "local"; +export const FEATURED = "rocket"; +export const LOCAL = "folder"; diff --git a/ui/scss/_icons.scss b/ui/scss/_icons.scss index 43321a287..8fbf846b3 100644 --- a/ui/scss/_icons.scss +++ b/ui/scss/_icons.scss @@ -23,14 +23,10 @@ transform: translate(0, 0); } -/* Custom styles for LBRY icons */ - -.lbry-icon-featured { - color: orangered; -} /* Adjustments for icon size and alignment */ .icon-rocket { + color: orangered; font-size: 0.95em; position: relative; top: -0.04em;