From 89d84e0776236d98787e51c44b4b66e78e1cbdc9 Mon Sep 17 00:00:00 2001
From: Rafael <rafael.saes@odysee.com>
Date: Mon, 20 Dec 2021 11:00:22 -0300
Subject: [PATCH] Refactor Logo

---
 .env.defaults              |  4 +--
 config.js                  |  4 +--
 ui/component/logo/view.jsx | 69 ++++++++++++--------------------------
 3 files changed, 26 insertions(+), 51 deletions(-)

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 = (
     <>
       <Icon icon={ICONS.LBRY} />
-      {/* @if TARGET='app' */}
-      <div className={'button__label'}>{'LBRY'}</div>
-      {/* @endif */}
-      {/* @if TARGET='web' */}
-      <div className={'button__label'}>{LOGO_TITLE}</div>
-      {/* @endif */}
+      <div className="button__label">{LOGO_TITLE}</div>
     </>
   );
 
-  if (type === 'small' || (isMobile && type !== 'embed')) {
-    return LOGO ? <img className={'header__navigation-logo'} src={LOGO} /> : <Icon icon={ICONS.LBRY} />;
-  } else if (type === 'embed') {
-    if (LOGO_TEXT_LIGHT) {
-      return (
-        <>
-          <img className={'embed__overlay-logo'} src={LOGO_TEXT_LIGHT} />
-        </>
-      );
-    } else {
-      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;
-    }
+  if (LOGO_WHITE_TEXT && (type === 'embed' || type === 'embed-ended')) {
+    return <img className="embed__overlay-logo" src={LOGO_WHITE_TEXT} />;
   }
+
+  if (type === 'small' || isMobile) {
+    return <img className="header__navigation-logo" src={LOGO} />;
+  }
+
+  if (LOGO_WHITE_TEXT && LOGO_DARK_TEXT) {
+    return <img className="header__navigation-logo" src={isLightTheme ? LOGO_DARK_TEXT : LOGO_WHITE_TEXT} />;
+  }
+
+  return defaultWithLabel;
 }