minor design changes
This commit is contained in:
parent
bbfb0fea67
commit
0a4e17af54
3 changed files with 15 additions and 26 deletions
|
@ -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} />;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,2 +1,2 @@
|
||||||
export const FEATURED = "featured";
|
export const FEATURED = "rocket";
|
||||||
export const LOCAL = "local";
|
export const LOCAL = "folder";
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Reference in a new issue