minor design changes

This commit is contained in:
Jeremy Kauffman 2017-09-22 17:46:11 -04:00
parent bbfb0fea67
commit 0a4e17af54
3 changed files with 15 additions and 26 deletions

View file

@ -11,36 +11,29 @@ export default class Icon extends React.PureComponent {
fixed: false, fixed: false,
}; };
getIconInfo() { getIconClass() {
if (this.props.icon.startsWith("icon-")) { const { icon } = this.props;
// Old style where FA icon class is passed in directly
return { className: this.props.icon, title: "" };
}
return icon.startsWith("icon-") ? icon : "icon-" + icon;
}
getIconTitle() {
switch (this.props.icon) { switch (this.props.icon) {
case icons.FEATURED: case icons.FEATURED:
return { return __("Watch this and earn rewards.");
className: "icon-rocket",
title: "Watch content with this icon to earn weekly rewards.",
};
case icons.LOCAL: case icons.LOCAL:
return { return __("You have a copy of this file.");
className: "icon-folder",
title: "You have a copy of this file.",
};
default: default:
throw new Error(`Unknown icon type "${this.props.icon}"`); return "";
} }
} }
render() { render() {
const { className, title } = this.getIconInfo(); const className = this.getIconClass(),
title = this.getIconTitle();
const spanClassName = const spanClassName =
"icon " + "icon " + className + (this.props.fixed ? " icon-fixed-width " : "");
("lbry-icon-" + this.props.icon + " ") +
className +
(this.props.fixed ? " icon-fixed-width " : "");
return <span className={spanClassName} title={title} />; return <span className={spanClassName} title={title} />;
} }

View file

@ -1,2 +1,2 @@
export const FEATURED = "featured"; export const FEATURED = "rocket";
export const LOCAL = "local"; export const LOCAL = "folder";

View file

@ -23,14 +23,10 @@
transform: translate(0, 0); transform: translate(0, 0);
} }
/* Custom styles for LBRY icons */
.lbry-icon-featured {
color: orangered;
}
/* Adjustments for icon size and alignment */ /* Adjustments for icon size and alignment */
.icon-rocket { .icon-rocket {
color: orangered;
font-size: 0.95em; font-size: 0.95em;
position: relative; position: relative;
top: -0.04em; top: -0.04em;