matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: only use logo if provided

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-09-12 11:16:53 +02:00
parent 6c208a5b91
commit d62e11a1dc
7 changed files with 39 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/pl-fe/src/assets/images/soapbox-logo-white.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="100" height="100"><path d="M94.909 19.374C94.909 8.674 86.235 0 75.534 0c-10.647 0-19.28 8.591-19.365 19.217l-15.631 2.09c-1.961-6.007-7.598-10.35-14.258-10.35-8.284 0-15.002 6.716-15.002 15.002 0 6.642 4.321 12.267 10.303 14.24l-2.205 16.056c-10.66.049-19.285 8.7-19.285 19.37C.091 86.325 8.765 95 19.466 95c10.677 0 19.332-8.638 19.37-19.304l18.093-2.501c1.979 5.972 7.598 10.285 14.234 10.285 8.284 0 15.002-6.716 15.002-15.002 0-6.891-4.652-12.682-10.983-14.441l1.365-15.339c10.229-.53 18.363-8.966 18.363-19.324zM56.194 67.8l-18.116 2.505a19.39 19.39 0 0 0-13.312-13.3l2.205-16.077a14.98 14.98 0 0 0 14.27-14.222l15.655-2.094c1.894 6.757 7.351 12.009 14.225 13.612l-1.365 15.322c-7.4.688-13.224 6.753-13.562 14.254z" fill="#ffffff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 812 B

1
packages/pl-fe/src/assets/images/soapbox-logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 95" width="100" height="100"><path d="M94.909 19.374C94.909 8.674 86.235 0 75.534 0c-10.647 0-19.28 8.591-19.365 19.217l-15.631 2.09c-1.961-6.007-7.598-10.35-14.258-10.35-8.284 0-15.002 6.716-15.002 15.002 0 6.642 4.321 12.267 10.303 14.24l-2.205 16.056c-10.66.049-19.285 8.7-19.285 19.37C.091 86.325 8.765 95 19.466 95c10.677 0 19.332-8.638 19.37-19.304l18.093-2.501c1.979 5.972 7.598 10.285 14.234 10.285 8.284 0 15.002-6.716 15.002-15.002 0-6.891-4.652-12.682-10.983-14.441l1.365-15.339c10.229-.53 18.363-8.966 18.363-19.324zM56.194 67.8l-18.116 2.505a19.39 19.39 0 0 0-13.312-13.3l2.205-16.077a14.98 14.98 0 0 0 14.27-14.222l15.655-2.094c1.894 6.757 7.351 12.009 14.225 13.612l-1.365 15.322c-7.4.688-13.224 6.753-13.562 14.254z" fill="#d80482"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 812 B

15
packages/pl-fe/src/components/site-error-boundary.tsx
View File

@ -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<ISiteErrorBoundary> = ({ children }) => {
const { links, sentryDsn } = usePlFeConfig();
const logoSrc = useLogo();
const textarea = useRef<HTMLTextAreaElement>(null);
const [error, setError] = useState<unknown>();
@ -76,11 +77,13 @@ const SiteErrorBoundary: React.FC<ISiteErrorBoundary> = ({ children }) => {
const fallback = (
<div className='flex h-screen flex-col bg-white pb-12 pt-16 black:bg-black dark:bg-primary-900'>
<main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
<div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'>
<SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
</a>
</div>
{logoSrc && (
<div className='flex shrink-0 justify-center'>
<a href='/' className='inline-flex'>
<SiteLogo alt='Logo' className='h-12 w-auto cursor-pointer' />
</a>
</div>
)}
<div className='py-8'>
<div className='mx-auto max-w-xl space-y-2 text-center'>

25
packages/pl-fe/src/components/site-logo.tsx
View File

@ -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 <img> 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<ISiteLogo> = ({ 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
<img
className={clsx('object-contain', className)}
src={getSrc()}
src={logoSrc}
{...rest}
/>
);

7
packages/pl-fe/src/features/embedded-status/index.tsx
View File

@ -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<IEmbeddedStatus> = ({ 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<IEmbeddedStatus> = ({ params }) => {
}, '*');
}, [status, loading]);
const logo = (
const logo = logoSrc && (
<div className='ml-4 flex justify-center align-middle'>
<SiteLogo className='max-h-[20px] max-w-[112px]' />
</div>
@ -56,7 +57,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
if (loading) {
return <Spinner />;
} else if (status) {
return <Status status={status} accountAction={logo} variant='default' />;
return <Status status={status} accountAction={logo || undefined} variant='default' />;
} else {
return <MissingIndicator nested />;
}

1
packages/pl-fe/src/hooks/index.ts
View File

@ -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';

21
packages/pl-fe/src/hooks/useLogo.ts Normal file
View File

@ -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 };