AuthLayout: use logo from soapboxConfig

app/soapbox/features/auth_layout/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Link, Redirect, Route, Switch } from 'react-router-dom';
 
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
+import { useAppSelector, useSoapboxConfig } from 'soapbox/hooks';
 
 import { Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth_login/components/login_page';
@@ -12,43 +14,56 @@ import PasswordResetConfirm from '../auth_login/components/password_reset_confir
 import Verification from '../verification';
 import EmailPassthru from '../verification/email_passthru';
 
-const AuthLayout = () => (
-  <div>
-    <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
+const AuthLayout = () => {
+  const { logo } = useSoapboxConfig();
+  const siteTitle = useAppSelector(state => state.instance.title);
 
-    <main className='relative flex flex-col h-screen'>
-      <header className='pt-10 flex justify-center relative'>
-        <Link to='/' className='cursor-pointer'>
-          <img src='/instance/images/truth-logo.svg' alt='Logo' className='h-7' />
-        </Link>
-      </header>
+  return (
+    <div>
+      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
 
-      <div className='-mt-10 flex flex-col justify-center items-center h-full'>
-        <div className='sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
-          <Card variant='rounded' size='xl'>
-            <CardBody>
-              <Switch>
-                <Route exact path='/auth/verify' component={Verification} />
-                <Route exact path='/auth/verify/email/:token' component={EmailPassthru} />
-                <Route exact path='/login' component={LoginPage} />
-                <Route exact path='/reset-password' component={PasswordReset} />
-                <Route exact path='/edit-password' component={PasswordResetConfirm} />
-                {/* <Route exact path='/auth/confirmation' component={EmailConfirmation} /> */}
+      <main className='relative flex flex-col h-screen'>
+        <header className='pt-10 flex justify-center relative'>
+          <Link to='/' className='cursor-pointer'>
+            {logo ? (
+              <img src={logo} alt={siteTitle} className='h-7' />
+            ) : (
+              <SvgIcon
+                className='w-7 h-7'
+                alt={siteTitle}
+                src={require('@tabler/icons/icons/home.svg')}
+              />
+            )}
+          </Link>
+        </header>
 
-                <Redirect from='/auth/password/new' to='/reset-password' />
-                <Redirect from='/auth/password/edit' to='/edit-password' />
-              </Switch>
-            </CardBody>
-          </Card>
+        <div className='-mt-10 flex flex-col justify-center items-center h-full'>
+          <div className='sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
+            <Card variant='rounded' size='xl'>
+              <CardBody>
+                <Switch>
+                  <Route exact path='/auth/verify' component={Verification} />
+                  <Route exact path='/auth/verify/email/:token' component={EmailPassthru} />
+                  <Route exact path='/login' component={LoginPage} />
+                  <Route exact path='/reset-password' component={PasswordReset} />
+                  <Route exact path='/edit-password' component={PasswordResetConfirm} />
+                  {/* <Route exact path='/auth/confirmation' component={EmailConfirmation} /> */}
+
+                  <Redirect from='/auth/password/new' to='/reset-password' />
+                  <Redirect from='/auth/password/edit' to='/edit-password' />
+                </Switch>
+              </CardBody>
+            </Card>
+          </div>
         </div>
-      </div>
 
-    </main>
+      </main>
 
-    <BundleContainer fetchComponent={NotificationsContainer}>
-      {(Component) => <Component />}
-    </BundleContainer>
-  </div>
-);
+      <BundleContainer fetchComponent={NotificationsContainer}>
+        {(Component) => <Component />}
+      </BundleContainer>
+    </div>
+  );
+};
 
 export default AuthLayout;

app/soapbox/features/ui/components/navbar.tsx

@@ -24,7 +24,7 @@ const Navbar = () => {
   const singleUserMode = soapboxConfig.get('singleUserMode');
 
   // In demo mode, use the Soapbox logo
-  const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : soapboxConfig.get('logo');
+  const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : soapboxConfig.logo;
 
   const onOpenSidebar = () => dispatch(openSidebar());