LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

simplify default channel color creation

Browse source
This commit is contained in:
Sean Yesmunt 2019-05-13 22:53:04 -04:00
parent b7f5ebf994
commit 03ebcd953d
4 changed files with 9 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/ui/component/channelThumbnail/view.jsx
View file

@ -12,29 +12,15 @@ type Props = {
function ChannelThumbnail(props: Props) {
const { thumbnail, uri } = props;
function getColorClass() {
// Generate a random color class based on the first letter of the channel name
const { channelName } = parseURI(uri);
const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
let thumbnailColorClass = `channel-thumbnail__default--`;
switch (true) {
case initializer < 15:
return (thumbnailColorClass += '1');
case initializer < 30:
return (thumbnailColorClass += '2');
case initializer < 45:
return (thumbnailColorClass += '3');
default:
return (thumbnailColorClass += '4');
}
}
// Generate a random color class based on the first letter of the channel name
const { channelName } = parseURI(uri);
const initializer = channelName.charCodeAt(0) - 65; // will be between 0 and 57
const className = `channel-thumbnail__default--${initializer % 4}`;
return (
<div
className={classnames('channel-thumbnail', {
[getColorClass()]: !thumbnail,
[className]: !thumbnail,
})}
>
{!thumbnail && <img className="channel-thumbnail__default" src={Gerbil} />}

73
src/ui/page/backup/view.jsx
View file

@ -1,73 +0,0 @@
// @flow
import * as React from 'react';
import Button from 'component/button';
import Page from 'component/page';
type Props = {
daemonSettings: {
wallet_dir: ?string,
},
};
class BackupPage extends React.PureComponent<Props> {
render() {
const { daemonSettings } = this.props;
const { wallet_dir: lbryumWalletDir } = daemonSettings;
const noDaemonSettings = Object.keys(daemonSettings).length === 0;
return (
<Page>
<section className="card card--section">
{noDaemonSettings ? (
<header className="card__header">
<h2 className="card__title">{__('Failed to load settings.')}</h2>
</header>
) : (
<React.Fragment>
<header className="card__header">
<h2 className="card__title">{__('Backup Your LBRY Credits')}</h2>
<p className="card__subtitle">
{__(
'Your LBRY credits are controllable by you and only you, via wallet file(s) stored locally on your computer.'
)}
</p>
</header>
<div className="card__content">
<p>
{__(
'Currently, there is no automatic wallet backup. If you lose access to these files, you will lose your credits permanently.'
)}
</p>
<p>
{__(
'However, it is fairly easy to back up manually. To backup your wallet, make a copy of the folder listed below:'
)}
</p>
<p className="card__message">{lbryumWalletDir}</p>
<p>
{__(
'Access to these files are equivalent to having access to your credits. Keep any copies you make of your wallet in a secure place.'
)}
</p>
<p>
For more details on backing up and best practices,{' '}
<Button
button="link"
href="https://lbry.com/faq/how-to-backup-wallet"
label={__('see this article')}
/>
.
</p>
</div>
</React.Fragment>
)}
</section>
</Page>
);
}
}
export default BackupPage;

2
src/ui/scss/component/_card.scss
View file

@ -1,6 +1,5 @@
.card {
background-color: $lbry-white;
border: 1px solid $lbry-gray-1;
margin-bottom: var(--spacing-vertical-xlarge);
position: relative;
border-radius: var(--card-radius);
@ -8,7 +7,6 @@
html[data-mode='dark'] & {
background-color: rgba($lbry-white, 0.1);
border-color: rgba($lbry-white, 0.1);
box-shadow: var(--card-box-shadow) darken($lbry-gray-1, 80%);
}
}

8
src/ui/scss/component/_channel.scss
View file

@ -52,16 +52,16 @@ $metadata-z-index: 1;
border-radius: var(--card-radius);
}
.channel-thumbnail__default--1 {
.channel-thumbnail__default--0 {
background-color: $lbry-indigo-3;
}
.channel-thumbnail__default--2 {
.channel-thumbnail__default--1 {
background-color: $lbry-orange-2;
}
.channel-thumbnail__default--3 {
.channel-thumbnail__default--2 {
background-color: $lbry-blue-3;
}
.channel-thumbnail__default--4 {
.channel-thumbnail__default--3 {
background-color: $lbry-red-1;
}