From 01ec7bc279ee93ed6b5c6c78fbcf295264a01bb1 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 11 May 2022 19:54:23 -0500 Subject: [PATCH] Replace logos throughout the UI with SiteLogo component --- app/soapbox/components/sidebar_menu.tsx | 14 ++------ app/soapbox/components/site-logo.tsx | 30 ++++++++++++++++++ app/soapbox/features/auth_layout/index.tsx | 15 ++------- .../public_layout/components/header.tsx | 9 ++---- .../components/modals/landing-page-modal.tsx | 4 +-- app/soapbox/features/ui/components/navbar.tsx | 29 ++++------------- .../features/verification/waitlist_page.js | Bin 2687 -> 2584 bytes 7 files changed, 47 insertions(+), 54 deletions(-) create mode 100644 app/soapbox/components/site-logo.tsx diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx index 2a0946e6ea..5339247f5b 100644 --- a/app/soapbox/components/sidebar_menu.tsx +++ b/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 => { - {logo ? ( - Logo - ) : ( - - )} + > = (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 + + ); +}; + +export default SiteLogo; diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx index c694f173bf..f969045809 100644 --- a/app/soapbox/features/auth_layout/index.tsx +++ b/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 = () => {
- {logo ? ( - {siteTitle} - ) : ( - - )} +
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx index 63e03c472c..985fca4762 100644 --- a/app/soapbox/features/public_layout/components/header.tsx +++ b/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 = () => {
- Logo - {logoDarkMode && ( - Logo - )} - + {intl.formatMessage(messages.home)} diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx index 583a1a144e..c2f7d54d36 100644 --- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx +++ b/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 = ({ 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 = ({ onClose }) => { return ( } + title={} onClose={() => onClose('LANDING_PAGE')} >
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx index 25085f6d75..7e76e9844a 100644 --- a/app/soapbox/features/ui/components/navbar.tsx +++ b/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 ? ( - - Logo - {logoDarkMode && ( - Logo - )} - - - - ) : ( - - - - - )} + + + + {account && (
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js index ef2d573aeae6cffe3cd37e73ea0e533fe7f8da27..606038c56e91cb3fbca44f74aa85005e17071976 100644 GIT binary patch delta 92 zcmew_GDBoS<-|6R$y|)i+QFG6sXqDX`3h-8`MC<}#rcT^N%n?BYEEi$Nq*79N)MB2h4j>t;QYjbr2Go!{JgZxbcI@lw4(f6 z1@&TxsD5H{NoIatu|AZqZas0Q_hw7RVn)ZD{PcVUTVx|OG>S_SOHwrzZ0#@%hDzxH sE!0p4X;s(UynyK?qhw}ox