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

Refactor Logo

Browse source
This commit is contained in:
Rafael 2021-12-20 11:00:22 -03:00 committed by Thomas Zarebczan
parent 5c6fb9de66
commit 89d84e0776
3 changed files with 26 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.env.defaults
View file

@ -52,8 +52,8 @@ YRBL_HAPPY_IMG_URL=https://spee.ch/spaceman-happy:a.png?quality=85&height=457&wi
YRBL_SAD_IMG_URL=https://spee.ch/spaceman-sad:d.png?quality=85&height=457&width=457 YRBL_SAD_IMG_URL=https://spee.ch/spaceman-sad:d.png?quality=85&height=457&width=457
LOGIN_IMG_URL=https://cdn.lbryplayer.xyz/speech/odysee-sign-up:d.png LOGIN_IMG_URL=https://cdn.lbryplayer.xyz/speech/odysee-sign-up:d.png
LOGO=https://spee.ch/odysee-logo-png:3.png?quality=85&height=200&width=200 LOGO=https://spee.ch/odysee-logo-png:3.png?quality=85&height=200&width=200
LOGO_TEXT_LIGHT=https://spee.ch/odysee-white-png:f.png?quality=85&height=300&width=1000 LOGO_WHITE_TEXT=https://spee.ch/odysee-white-png:f.png?quality=85&height=300&width=1000
LOGO_TEXT_DARK=https://spee.ch/odysee-png:2.png?quality=85&height=300&width=1000 LOGO_DARK_TEXT=https://spee.ch/odysee-png:2.png?quality=85&height=300&width=1000
AVATAR_DEFAULT=https://spee.ch/spaceman-png:2.png?quality=85&height=180&width=180 AVATAR_DEFAULT=https://spee.ch/spaceman-png:2.png?quality=85&height=180&width=180
MISSING_THUMB_DEFAULT=https://spee.ch/missing-thumb-png?quality=85&height=390&width=220 MISSING_THUMB_DEFAULT=https://spee.ch/missing-thumb-png?quality=85&height=390&width=220
FAVICON=https://spee.ch/favicon-png:c.png FAVICON=https://spee.ch/favicon-png:c.png

4
config.js
View file

@ -35,8 +35,8 @@ const config = {
// LOGO // LOGO
LOGO_TITLE: process.env.LOGO_TITLE, LOGO_TITLE: process.env.LOGO_TITLE,
LOGO: process.env.LOGO, LOGO: process.env.LOGO,
LOGO_TEXT_LIGHT: process.env.LOGO_TEXT_LIGHT, LOGO_WHITE_TEXT: process.env.LOGO_WHITE_TEXT,
LOGO_TEXT_DARK: process.env.LOGO_TEXT_DARK, LOGO_DARK_TEXT: process.env.LOGO_DARK_TEXT,
AVATAR_DEFAULT: process.env.AVATAR_DEFAULT, AVATAR_DEFAULT: process.env.AVATAR_DEFAULT,
MISSING_THUMB_DEFAULT: process.env.MISSING_THUMB_DEFAULT, MISSING_THUMB_DEFAULT: process.env.MISSING_THUMB_DEFAULT,
// OG // OG

69
ui/component/logo/view.jsx
View file

@ -1,64 +1,39 @@
// @flow // @flow
import React from 'react'; import { LOGO_TITLE, LOGO, LOGO_WHITE_TEXT, LOGO_DARK_TEXT } from 'config';
import * as ICONS from 'constants/icons';
import { LOGO_TITLE, LOGO, LOGO_TEXT_LIGHT, LOGO_TEXT_DARK } from 'config';
import Icon from 'component/common/icon';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile } from 'effects/use-screensize';
import * as ICONS from 'constants/icons';
import Icon from 'component/common/icon';
import React from 'react';
type Props = { type Props = {
type: string,
currentTheme: string, currentTheme: string,
type: string,
}; };
export default function Logo(props: Props) { export default function Logo(props: Props) {
const { type, currentTheme } = props; const { currentTheme, type } = props;
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const isLightTheme = currentTheme === 'light';
const defaultWithLabel = ( const defaultWithLabel = (
<> <>
<Icon icon={ICONS.LBRY} /> <Icon icon={ICONS.LBRY} />
{/* @if TARGET='app' */} <div className="button__label">{LOGO_TITLE}</div>
<div className={'button__label'}>{'LBRY'}</div>
{/* @endif */}
{/* @if TARGET='web' */}
<div className={'button__label'}>{LOGO_TITLE}</div>
{/* @endif */}
</> </>
); );
if (type === 'small' || (isMobile && type !== 'embed')) { if (LOGO_WHITE_TEXT && (type === 'embed' || type === 'embed-ended')) {
return LOGO ? <img className={'header__navigation-logo'} src={LOGO} /> : <Icon icon={ICONS.LBRY} />; return <img className="embed__overlay-logo" src={LOGO_WHITE_TEXT} />;
} else if (type === 'embed') { }
if (LOGO_TEXT_LIGHT) {
return ( if (type === 'small' || isMobile) {
<> return <img className="header__navigation-logo" src={LOGO} />;
<img className={'embed__overlay-logo'} src={LOGO_TEXT_LIGHT} /> }
</>
); if (LOGO_WHITE_TEXT && LOGO_DARK_TEXT) {
} else { return <img className="header__navigation-logo" src={isLightTheme ? LOGO_DARK_TEXT : LOGO_WHITE_TEXT} />;
}
return defaultWithLabel; return defaultWithLabel;
} }
} else if (type === 'embed-ended') {
if (LOGO_TEXT_LIGHT) {
return (
<>
<img className={'embed__overlay-logo'} src={LOGO_TEXT_LIGHT} />
</>
);
} else {
return defaultWithLabel;
}
} else {
if (LOGO_TEXT_LIGHT && LOGO_TEXT_DARK) {
return (
<>
<img
className={'header__navigation-logo'}
src={currentTheme === 'light' ? LOGO_TEXT_DARK : LOGO_TEXT_LIGHT}
/>
</>
);
} else {
return defaultWithLabel;
}
}
}