Replace logos throughout the UI with SiteLogo component

app/soapbox/components/sidebar_menu.tsx

@@ -9,9 +9,10 @@ import { fetchOwnAccounts } from 'soapbox/actions/auth';
 import { getSettings } from 'soapbox/actions/settings';
 import { closeSidebar } from 'soapbox/actions/sidebar';
 import Account from 'soapbox/components/account';
+import SiteLogo from 'soapbox/components/site-logo';
 import { Stack } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile_stats';
-import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount, makeGetOtherAccounts } from 'soapbox/selectors';
 import { getBaseURL } from 'soapbox/utils/accounts';
 
@@ -66,7 +67,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const intl = useIntl();
   const dispatch = useDispatch();
 
-  const { logo } = useSoapboxConfig();
   const features = useFeatures();
   const getAccount = makeGetAccount();
   const instance = useAppSelector((state) => state.instance);
@@ -141,15 +141,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
             <Stack space={4}>
               <HStack alignItems='center' justifyContent='between'>
                 <Link to='/' onClick={onClose}>
-                  {logo ? (
-                    <img alt='Logo' src={logo} className='h-5 w-auto cursor-pointer' />
-                  ) :  (
-                    <Icon
-                      alt='Logo'
-                      src={require('@tabler/icons/icons/home.svg')}
-                      className='h-6 w-6 text-gray-400 hover:text-gray-600 dark:text-gray-200 cursor-pointer'
-                    />
-                  )}
+                  <SiteLogo alt='Logo' className='h-5 w-auto cursor-pointer' />
                 </Link>
 
                 <IconButton

app/soapbox/components/site-logo.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
+
+/** Display the most appropriate site logo based on the theme and configuration. */
+const SiteLogo: React.FC<React.ComponentProps<'img'>> = (props) => {
+  const { logo, logoDarkMode } = useSoapboxConfig();
+  const settings = useSettings();
+
+  const systemTheme = useSystemTheme();
+  const userTheme = settings.get('themeMode');
+  const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
+
+  // Use the right logo if provided, then use fallbacks.
+  const getSrc = () => {
+    // In demo mode, use the Soapbox logo.
+    if (settings.get('demo')) return require('images/soapbox-logo.svg');
+
+    return (darkMode && logoDarkMode)
+      ? logoDarkMode
+      : logo || logoDarkMode || require('@tabler/icons/icons/home.svg');
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img src={getSrc()} {...props} />
+  );
+};
+
+export default SiteLogo;

app/soapbox/features/auth_layout/index.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Link, Redirect, Route, Switch } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import SiteLogo from 'soapbox/components/site-logo';
 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 { useAppSelector } from 'soapbox/hooks';
 
 import { Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth_login/components/login_page';
@@ -18,7 +18,6 @@ import Verification from '../verification';
 import EmailPassthru from '../verification/email_passthru';
 
 const AuthLayout = () => {
-  const { logo } = useSoapboxConfig();
   const siteTitle = useAppSelector(state => state.instance.title);
 
   return (
@@ -29,15 +28,7 @@ const AuthLayout = () => {
         <div className='w-full sm:max-w-lg md:max-w-2xl space-y-8'>
           <header className='flex justify-center relative'>
             <Link to='/' className='cursor-pointer'>
-              {logo ? (
-                <img src={logo} alt={siteTitle} className='h-7' />
-              ) : (
-                <SvgIcon
-                  className='w-7 h-7 dark:text-white'
-                  alt={siteTitle}
-                  src={require('@tabler/icons/icons/home.svg')}
-                />
-              )}
+              <SiteLogo alt={siteTitle} className='h-7' />
             </Link>
           </header>
 

app/soapbox/features/public_layout/components/header.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
@@ -6,6 +5,7 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
+import SiteLogo from 'soapbox/components/site-logo';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 import { openModal } from '../../../actions/modals';
@@ -31,7 +31,6 @@ const Header = () => {
   const soapboxConfig = useSoapboxConfig();
   const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
 
-  const { logo, logoDarkMode } = soapboxConfig;
   const features = useFeatures();
   const instance = useAppSelector((state) => state.instance);
   const isOpen   = features.accountCreation && instance.registrations;
@@ -80,11 +79,7 @@ const Header = () => {
               <Sonar />
             </div>
             <Link to='/' className='z-10'>
-              <img alt='Logo' src={logo} className={classNames('h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
-              {logoDarkMode && (
-                <img alt='Logo' src={logoDarkMode} className='h-6 w-auto cursor-pointer hidden dark:block' />
-              )}
-
+              <SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />
               <span className='hidden'>{intl.formatMessage(messages.home)}</span>
             </Link>
           </div>

app/soapbox/features/ui/components/modals/landing-page-modal.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
+import SiteLogo from 'soapbox/components/site-logo';
 import { Button } from 'soapbox/components/ui';
 import { Modal } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
@@ -23,7 +24,6 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
   const soapboxConfig = useSoapboxConfig();
   const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
 
-  const { logo } = soapboxConfig;
   const instance = useAppSelector((state) => state.instance);
   const features = useFeatures();
 
@@ -32,7 +32,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
 
   return (
     <Modal
-      title={<img alt='Logo' src={logo} className='h-4 w-auto' />}
+      title={<SiteLogo alt='Logo' className='h-4 w-auto' />}
       onClose={() => onClose('LANDING_PAGE')}
     >
       <div className='mt-4 divide-y divide-solid divide-gray-200 dark:divide-slate-700'>

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

@@ -4,9 +4,10 @@ import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { Avatar, Button, Icon } from 'soapbox/components/ui';
+import SiteLogo from 'soapbox/components/site-logo';
+import { Avatar, Button } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
-import { useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks';
+import { useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 
 import { openSidebar } from '../../../actions/sidebar';
 
@@ -17,14 +18,9 @@ const Navbar = () => {
   const node = React.useRef(null);
 
   const account = useOwnAccount();
-  const settings = useSettings();
   const soapboxConfig = useSoapboxConfig();
   const singleUserMode = soapboxConfig.get('singleUserMode');
 
-  // In demo mode, use the Soapbox logo
-  const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : soapboxConfig.logo;
-  const logoDarkMode = soapboxConfig.logoDarkMode;
-
   const onOpenSidebar = () => dispatch(openSidebar());
 
   return (
@@ -46,21 +42,10 @@ const Navbar = () => {
               'justify-start': !account,
             })}
           >
-            {logo ? (
-              <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
-                <img alt='Logo' src={logo} className={classNames('h-5 lg:h-6 w-auto cursor-pointer', { 'dark:hidden': logoDarkMode })} />
-                {logoDarkMode && (
-                  <img alt='Logo' src={logoDarkMode} className='h-5 lg:h-6 w-auto cursor-pointer hidden dark:block' />
-                )}
-
-                <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
-              </Link>
-            ) : (
-              <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
-                <Icon alt='Logo' src={require('@tabler/icons/icons/home.svg')} className='h-5 lg:h-6 w-auto text-primary-700' />
-                <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
-              </Link>
-            )}
+            <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
+              <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto cursor-pointer' />
+              <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
+            </Link>
 
             {account && (
               <div className='flex-1 hidden lg:flex justify-center px-2 lg:ml-6 lg:justify-start items-center'>

app/soapbox/features/verification/waitlist_page.js

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import LandingGradient from 'soapbox/components/landing-gradient';
+import SiteLogo from 'soapbox/components/site-logo';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 
@@ -16,8 +16,6 @@ const WaitlistPage = ({ account }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
 
-  const logo = useSelector((state) => getSoapboxConfig(state).get('logo'));
-
   const onClickLogOut = (event) => {
     event.preventDefault();
     dispatch(logOut(intl));
@@ -31,7 +29,7 @@ const WaitlistPage = ({ account }) => {
         <header className='relative flex justify-between h-16'>
           <div className='flex-1 flex items-stretch justify-center relative'>
             <Link to='/' className='cursor-pointer flex-shrink-0 flex items-center'>
-              <img alt='Logo' src={logo} className='h-7' />
+              <SiteLogo alt='Logo' className='h-7' />
             </Link>
 
             <div className='absolute inset-y-0 right-0 flex items-center pr-2 space-x-3'>