Add dynamic help links to landing page

app/soapbox/components/ui/modal/modal.tsx

@@ -73,7 +73,7 @@ const Modal: React.FC<IModal> = ({
                 src={require('@tabler/icons/icons/x.svg')}
                 title={intl.formatMessage(messages.close)}
                 onClick={onClose}
-                className='text-gray-500 hover:text-gray-700'
+                className='text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200'
               />
             )}
           </div>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link, Redirect } from 'react-router-dom';
 
@@ -30,10 +30,11 @@ const Header = () => {
 
   const soapboxConfig = useSoapboxConfig();
   const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+  const { links } = soapboxConfig;
 
   const features = useFeatures();
   const instance = useAppSelector((state) => state.instance);
-  const isOpen   = features.accountCreation && instance.registrations;
+  const isOpen = features.accountCreation && instance.registrations;
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
 
   const [isLoading, setLoading] = React.useState(false);
@@ -92,6 +93,18 @@ const Header = () => {
             />
 
             <div className='hidden md:flex items-center space-x-6'>
+              <HStack space={6} alignItems='center'>
+                {links.get('help') && (
+                  <a
+                    href={links.get('help')}
+                    target='_blank'
+                    className='text-sm font-medium text-gray-500 hover:text-gray-900'
+                  >
+                    <FormattedMessage id='landing_page_modal.helpCenter' defaultMessage='Help Center' />
+                  </a>
+                )}
+              </HStack>
+
               <HStack space={2} className='xl:hidden'>
                 <Button to='/login' theme='secondary'>
                   {intl.formatMessage(messages.login)}

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

@@ -3,8 +3,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import SiteLogo from 'soapbox/components/site-logo';
-import { Button } from 'soapbox/components/ui';
+import { Button, Icon, Modal } from 'soapbox/components/ui';
-import { Modal } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -23,19 +22,36 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
 
   const soapboxConfig = useSoapboxConfig();
   const pepeEnabled = soapboxConfig.getIn(['extensions', 'pepe', 'enabled']) === true;
+  const { links } = soapboxConfig;
 
   const instance = useAppSelector((state) => state.instance);
   const features = useFeatures();
 
-  const isOpen   = features.accountCreation && instance.registrations;
+  const isOpen = features.accountCreation && instance.registrations;
   const pepeOpen = useAppSelector(state => state.verification.getIn(['instance', 'registrations'], false) === true);
 
   return (
     <Modal
-      title={<SiteLogo alt='Logo' className='h-4 w-auto' />}
+      title={<SiteLogo alt='Logo' className='h-6 w-auto cursor-pointer' />}
       onClose={() => onClose('LANDING_PAGE')}
     >
       <div className='mt-4 divide-y divide-solid divide-gray-200 dark:divide-slate-700'>
+        {links.get('help') && (
+          <nav className='grid gap-y-8 mb-6'>
+            <a
+              href={links.get('help')}
+              target='_blank'
+              className='p-3 flex items-center rounded-md dark:hover:bg-slate-900/50 hover:bg-gray-50'
+            >
+              <Icon src={require('@tabler/icons/icons/lifebuoy.svg')} className='flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200' />
+
+              <span className='ml-3 text-base font-medium text-gray-900 dark:text-gray-200'>
+                {intl.formatMessage(messages.helpCenter)}
+              </span>
+            </a>
+          </nav>
+        )}
+
         <div
           className={classNames('pt-6 grid gap-4', {
             'grid-cols-2': isOpen,