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,
};
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 <span className={spanClassName} title={title} />;
}

View file

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

View file

@ -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;