console: Add white logos to login page

Author: ryaplots

pkg/webui/account/containers/logo/index.js

@@ -17,6 +17,7 @@ import React from 'react'
 import LogoComponent from '@ttn-lw/components/logo'
 
 import { selectAssetsRootPath, selectApplicationSiteName } from '@ttn-lw/lib/selectors/env'
+import PropTypes from '@ttn-lw/lib/prop-types'
 
 const logo = {
   src: `${selectAssetsRootPath()}/tts-logo.svg`,
@@ -26,7 +27,33 @@ const miniLogo = {
   src: `${selectAssetsRootPath()}/tts-logo-icon.svg`,
   alt: `${selectApplicationSiteName()} Logo`,
 }
+const whiteLogo = {
+  src: `${selectAssetsRootPath()}/logo-tts-horizontal-white.svg`,
+  alt: `${selectApplicationSiteName()} Logo white`,
+}
+const whiteMiniLogo = {
+  src: `${selectAssetsRootPath()}/tts-logo-icon-white.svg`,
+  alt: `${selectApplicationSiteName()} Logo white`,
+}
+
+const Logo = props => {
+  const { dark } = props
+
+  return (
+    <LogoComponent
+      logo={dark ? whiteLogo : logo}
+      miniLogo={dark ? whiteMiniLogo : miniLogo}
+      {...props}
+    />
+  )
+}
+
+Logo.propTypes = {
+  dark: PropTypes.bool,
+}
 
-const Logo = props => <LogoComponent logo={logo} miniLogo={miniLogo} {...props} />
+Logo.defaultProps = {
+  dark: false,
+}
 
 export default Logo

pkg/webui/account/views/app/index.js

@@ -96,7 +96,7 @@ const Layout = () => {
           <div className={style.container}>
             <section className={style.content}>
               <div className={style.main}>
-                <Logo className={style.loginLogo} unlockSize />
+                <Logo className={style.loginLogo} dark={darkTheme} unlockSize />
                 <Outlet />
               </div>
             </section>