diff --git a/.env.defaults b/.env.defaults index a9511e88a..8bd920c78 100644 --- a/.env.defaults +++ b/.env.defaults @@ -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 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_TEXT_LIGHT=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_WHITE_TEXT=https://spee.ch/odysee-white-png:f.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 MISSING_THUMB_DEFAULT=https://spee.ch/missing-thumb-png?quality=85&height=390&width=220 FAVICON=https://spee.ch/favicon-png:c.png diff --git a/config.js b/config.js index f3d02fef3..7831979e2 100644 --- a/config.js +++ b/config.js @@ -35,8 +35,8 @@ const config = { // LOGO LOGO_TITLE: process.env.LOGO_TITLE, LOGO: process.env.LOGO, - LOGO_TEXT_LIGHT: process.env.LOGO_TEXT_LIGHT, - LOGO_TEXT_DARK: process.env.LOGO_TEXT_DARK, + LOGO_WHITE_TEXT: process.env.LOGO_WHITE_TEXT, + LOGO_DARK_TEXT: process.env.LOGO_DARK_TEXT, AVATAR_DEFAULT: process.env.AVATAR_DEFAULT, MISSING_THUMB_DEFAULT: process.env.MISSING_THUMB_DEFAULT, // OG diff --git a/ui/component/logo/view.jsx b/ui/component/logo/view.jsx index de8c4c75e..c7609827d 100644 --- a/ui/component/logo/view.jsx +++ b/ui/component/logo/view.jsx @@ -1,64 +1,39 @@ // @flow -import React from 'react'; -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 { LOGO_TITLE, LOGO, LOGO_WHITE_TEXT, LOGO_DARK_TEXT } from 'config'; 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: string, currentTheme: string, + type: string, }; export default function Logo(props: Props) { - const { type, currentTheme } = props; + const { currentTheme, type } = props; + const isMobile = useIsMobile(); + const isLightTheme = currentTheme === 'light'; + const defaultWithLabel = ( <> - {/* @if TARGET='app' */} -
{'LBRY'}
- {/* @endif */} - {/* @if TARGET='web' */} -
{LOGO_TITLE}
- {/* @endif */} +
{LOGO_TITLE}
); - if (type === 'small' || (isMobile && type !== 'embed')) { - return LOGO ? : ; - } else if (type === 'embed') { - if (LOGO_TEXT_LIGHT) { - return ( - <> - - - ); - } else { - return defaultWithLabel; - } - } else if (type === 'embed-ended') { - if (LOGO_TEXT_LIGHT) { - return ( - <> - - - ); - } else { - return defaultWithLabel; - } - } else { - if (LOGO_TEXT_LIGHT && LOGO_TEXT_DARK) { - return ( - <> - - - ); - } else { - return defaultWithLabel; - } + if (LOGO_WHITE_TEXT && (type === 'embed' || type === 'embed-ended')) { + return ; } + + if (type === 'small' || isMobile) { + return ; + } + + if (LOGO_WHITE_TEXT && LOGO_DARK_TEXT) { + return ; + } + + return defaultWithLabel; }