diff --git a/packages/pl-fe/src/assets/images/soapbox-logo-white.svg b/packages/pl-fe/src/assets/images/soapbox-logo-white.svg deleted file mode 100644 index f09e910ea..000000000 --- a/packages/pl-fe/src/assets/images/soapbox-logo-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/pl-fe/src/assets/images/soapbox-logo.svg b/packages/pl-fe/src/assets/images/soapbox-logo.svg deleted file mode 100644 index d10c0602d..000000000 --- a/packages/pl-fe/src/assets/images/soapbox-logo.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/pl-fe/src/components/site-error-boundary.tsx b/packages/pl-fe/src/components/site-error-boundary.tsx index 614670e0a..4ddff6be0 100644 --- a/packages/pl-fe/src/components/site-error-boundary.tsx +++ b/packages/pl-fe/src/components/site-error-boundary.tsx @@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl'; import { NODE_ENV } from 'pl-fe/build-config'; import { HStack, Text, Stack, Textarea } from 'pl-fe/components/ui'; -import { usePlFeConfig } from 'pl-fe/hooks'; +import { useLogo, usePlFeConfig } from 'pl-fe/hooks'; import { captureSentryException } from 'pl-fe/sentry'; import KVStore from 'pl-fe/storage/kv-store'; import sourceCode from 'pl-fe/utils/code'; @@ -20,6 +20,7 @@ interface ISiteErrorBoundary { /** Application-level error boundary. Fills the whole screen. */ const SiteErrorBoundary: React.FC = ({ children }) => { const { links, sentryDsn } = usePlFeConfig(); + const logoSrc = useLogo(); const textarea = useRef(null); const [error, setError] = useState(); @@ -76,11 +77,13 @@ const SiteErrorBoundary: React.FC = ({ children }) => { const fallback = (
-
- - - -
+ {logoSrc && ( +
+ + + +
+ )}
diff --git a/packages/pl-fe/src/components/site-logo.tsx b/packages/pl-fe/src/components/site-logo.tsx index 44a91161c..fc4ce4485 100644 --- a/packages/pl-fe/src/components/site-logo.tsx +++ b/packages/pl-fe/src/components/site-logo.tsx @@ -1,7 +1,7 @@ import clsx from 'clsx'; import React from 'react'; -import { usePlFeConfig, useSettings, useTheme } from 'pl-fe/hooks'; +import { useLogo } from 'pl-fe/hooks'; interface ISiteLogo extends React.ComponentProps<'img'> { /** Extra class names for the element. */ @@ -12,32 +12,15 @@ interface ISiteLogo extends React.ComponentProps<'img'> { /** Display the most appropriate site logo based on the theme and configuration. */ const SiteLogo: React.FC = ({ className, theme, ...rest }) => { - const { logo, logoDarkMode } = usePlFeConfig(); - const { demo } = useSettings(); + const logoSrc = useLogo(); - let darkMode = ['dark', 'black'].includes(useTheme()); - if (theme === 'dark') darkMode = true; - - /** pl-fe logo. */ - const plFeLogo = darkMode - ? require('pl-fe/assets/images/soapbox-logo-white.svg') - : require('pl-fe/assets/images/soapbox-logo.svg'); - - // Use the right logo if provided, then use fallbacks. - const getSrc = () => { - // In demo mode, use the pl-fe logo. - if (demo) return plFeLogo; - - return (darkMode && logoDarkMode) - ? logoDarkMode - : logo || logoDarkMode || plFeLogo; - }; + if (!logoSrc) return null; return ( // eslint-disable-next-line jsx-a11y/alt-text ); diff --git a/packages/pl-fe/src/features/embedded-status/index.tsx b/packages/pl-fe/src/features/embedded-status/index.tsx index 4248111e0..1d08e100d 100644 --- a/packages/pl-fe/src/features/embedded-status/index.tsx +++ b/packages/pl-fe/src/features/embedded-status/index.tsx @@ -7,7 +7,7 @@ import MissingIndicator from 'pl-fe/components/missing-indicator'; import SiteLogo from 'pl-fe/components/site-logo'; import Status from 'pl-fe/components/status'; import { Spinner } from 'pl-fe/components/ui'; -import { useAppDispatch, useAppSelector } from 'pl-fe/hooks'; +import { useAppDispatch, useAppSelector, useLogo } from 'pl-fe/hooks'; import { iframeId } from 'pl-fe/iframe'; import { makeGetStatus } from 'pl-fe/selectors'; @@ -23,6 +23,7 @@ const EmbeddedStatus: React.FC = ({ params }) => { const history = useHistory(); const getStatus = useCallback(makeGetStatus(), []); const intl = useIntl(); + const logoSrc = useLogo(); const status = useAppSelector(state => getStatus(state, { id: params.statusId })); @@ -46,7 +47,7 @@ const EmbeddedStatus: React.FC = ({ params }) => { }, '*'); }, [status, loading]); - const logo = ( + const logo = logoSrc && (
@@ -56,7 +57,7 @@ const EmbeddedStatus: React.FC = ({ params }) => { if (loading) { return ; } else if (status) { - return ; + return ; } else { return ; } diff --git a/packages/pl-fe/src/hooks/index.ts b/packages/pl-fe/src/hooks/index.ts index c94fd3bc1..89c761d09 100644 --- a/packages/pl-fe/src/hooks/index.ts +++ b/packages/pl-fe/src/hooks/index.ts @@ -12,6 +12,7 @@ export { useInstance } from './useInstance'; export { useLoading } from './useLoading'; export { useLocale } from './useLocale'; export { useLoggedIn } from './useLoggedIn'; +export { useLogo } from './useLogo'; export { useOwnAccount } from './useOwnAccount'; export { usePrevious } from './usePrevious'; export { useRegistrationStatus } from './useRegistrationStatus'; diff --git a/packages/pl-fe/src/hooks/useLogo.ts b/packages/pl-fe/src/hooks/useLogo.ts new file mode 100644 index 000000000..7a9375520 --- /dev/null +++ b/packages/pl-fe/src/hooks/useLogo.ts @@ -0,0 +1,21 @@ +import { usePlFeConfig } from './usePlFeConfig'; +import { useSettings } from './useSettings'; +import { useTheme } from './useTheme'; + +const useLogo = () => { + const { logo, logoDarkMode } = usePlFeConfig(); + const { demo } = useSettings(); + + const darkMode = ['dark', 'black'].includes(useTheme()); + + // Use the right logo if provided, otherwise return null; + const src = (darkMode && logoDarkMode) + ? logoDarkMode + : logo || logoDarkMode; + + if (demo) return null; + + return src; +}; + +export { useLogo };