mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Replace logos throughout the UI with SiteLogo component

Browse Source
site-logo
Alex Gleason 2 years ago
parent 56f339a619
commit 01ec7bc279
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
7 changed files with 50 additions and 59 deletions
Show Stats Download Patch File Download Diff File

14
app/soapbox/components/sidebar_menu.tsx
Unescape View File

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

30
app/soapbox/components/site-logo.tsx
Unescape View File

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

15
app/soapbox/features/auth_layout/index.tsx
Unescape View File

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

9
app/soapbox/features/public_layout/components/header.tsx
Unescape View File

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

4
app/soapbox/features/ui/components/modals/landing-page-modal.tsx
Unescape View File

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

29
app/soapbox/features/ui/components/navbar.tsx
Unescape View File

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

8
app/soapbox/features/verification/waitlist_page.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save