Merge remote-tracking branch 'origin/develop' into threads-rtl

app/soapbox/components/sidebar-navigation.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { Stack } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown-menu-container';
 import { useStatContext } from 'soapbox/contexts/stat-context';
 import ComposeButton from 'soapbox/features/ui/components/compose-button';
@@ -109,8 +110,8 @@ const SidebarNavigation = () => {
   };
 
   return (
-    <div>
-      <div className='flex flex-col space-y-2'>
+    <Stack space={4}>
+      <Stack space={2}>
         <SidebarNavigationLink
           to='/'
           icon={require('@tabler/icons/home.svg')}
@@ -183,12 +184,12 @@ const SidebarNavigation = () => {
             />
           </DropdownMenu>
         )}
-      </div>
+      </Stack>
 
       {account && (
         <ComposeButton />
       )}
-    </div>
+    </Stack>
   );
 };
 

app/soapbox/components/ui/button/button.tsx

@@ -49,6 +49,8 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
     className,
   } = props;
 
+  const body = text || children;
+
   const themeClass = useButtonStyles({
     theme,
     block,
@@ -61,7 +63,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       return null;
     }
 
-    return <Icon src={icon} className='mr-2 w-4 h-4' />;
+    return <Icon src={icon} className='w-4 h-4' />;
   };
 
   const handleClick = React.useCallback((event) => {
@@ -72,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
 
   const renderButton = () => (
     <button
-      className={classNames(themeClass, className)}
+      className={classNames('space-x-2 rtl:space-x-reverse', themeClass, className)}
       disabled={disabled}
       onClick={handleClick}
       ref={ref}
@@ -80,7 +82,10 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
       data-testid='button'
     >
       {renderIcon()}
-      {text || children}
+
+      {body && (
+        <span>{body}</span>
+      )}
     </button>
   );
 

app/soapbox/features/ui/components/compose-button.tsx

@@ -10,11 +10,15 @@ const ComposeButton = () => {
   const onOpenCompose = () => dispatch(openModal('COMPOSE'));
 
   return (
-    <div className='mt-4'>
-      <Button theme='accent' icon={require('@tabler/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
-        <span><FormattedMessage id='navigation.compose' defaultMessage='Compose' /></span>
-      </Button>
-    </div>
+    <Button
+      theme='accent'
+      icon={require('@tabler/icons/pencil-plus.svg')}
+      size='lg'
+      onClick={onOpenCompose}
+      block
+    >
+      <FormattedMessage id='navigation.compose' defaultMessage='Compose' />
+    </Button>
   );
 };
 

app/soapbox/features/ui/components/floating-action-button.tsx

@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import { Icon } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
+});
+
+interface IFloatingActionButton {
+}
+
+/** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */
+const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const handleOpenComposeModal = () => {
+    dispatch(openModal('COMPOSE'));
+  };
+
+  return (
+    <button
+      onClick={handleOpenComposeModal}
+      className={clsx(
+        'p-4 inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all',
+        'bg-primary-500 hover:bg-primary-400 dark:hover:bg-primary-600 border-transparent focus:bg-primary-500 text-gray-100 focus:ring-primary-300',
+      )}
+      aria-label={intl.formatMessage(messages.publish)}
+    >
+      <Icon
+        src={require('@tabler/icons/pencil-plus.svg')}
+        className='w-6 h-6'
+      />
+    </button>
+  );
+};
+
+export default FloatingActionButton;

app/soapbox/features/ui/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useRef } from 'react';
 import { HotKeys } from 'react-hotkeys';
-import { defineMessages, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { Switch, useHistory, useLocation, Redirect } from 'react-router-dom';
 
 import { fetchFollowRequests } from 'soapbox/actions/accounts';
@@ -20,7 +20,6 @@ import { fetchScheduledStatuses } from 'soapbox/actions/scheduled-statuses';
 import { connectUserStream } from 'soapbox/actions/streaming';
 import { fetchSuggestionsForTimeline } from 'soapbox/actions/suggestions';
 import { expandHomeTimeline } from 'soapbox/actions/timelines';
-import Icon from 'soapbox/components/icon';
 import SidebarNavigation from 'soapbox/components/sidebar-navigation';
 import ThumbNavigation from 'soapbox/components/thumb-navigation';
 import { Layout } from 'soapbox/components/ui';
@@ -39,6 +38,7 @@ import { getAccessToken, getVapidKey } from 'soapbox/utils/auth';
 import { isStandalone } from 'soapbox/utils/state';
 
 import BackgroundShapes from './components/background-shapes';
+import FloatingActionButton from './components/floating-action-button';
 import { supportedPolicyIds } from './components/modals/policy-modal';
 import Navbar from './components/navbar';
 import BundleContainer from './containers/bundle-container';
@@ -121,11 +121,6 @@ import 'soapbox/components/status';
 
 const EmptyPage = HomePage;
 
-const messages = defineMessages({
-  beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave.' },
-  publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
-});
-
 const keyMap = {
   help: '?',
   new: 'n',
@@ -597,10 +592,6 @@ const UI: React.FC = ({ children }) => {
     history.push('/follow_requests');
   };
 
-  const handleOpenComposeModal = () => {
-    dispatch(openModal('COMPOSE'));
-  };
-
   const shouldHideFAB = (): boolean => {
     const path = location.pathname;
     return Boolean(path.match(/^\/posts\/|^\/search|^\/getting-started|^\/chats/));
@@ -627,19 +618,6 @@ const UI: React.FC = ({ children }) => {
     goToRequests: handleHotkeyGoToRequests,
   };
 
-  const fabElem = (
-    <button
-      key='floating-action-button'
-      onClick={handleOpenComposeModal}
-      className='floating-action-button'
-      aria-label={intl.formatMessage(messages.publish)}
-    >
-      <Icon src={require('@tabler/icons/pencil-plus.svg')} />
-    </button>
-  );
-
-  const floatingActionButton = shouldHideFAB() ? null : fabElem;
-
   const style: React.CSSProperties = {
     pointerEvents: dropdownMenuIsOpen ? 'none' : undefined,
   };
@@ -662,7 +640,11 @@ const UI: React.FC = ({ children }) => {
             </SwitchingColumnsArea>
           </Layout>
 
-          {me && floatingActionButton}
+          {(me && !shouldHideFAB()) && (
+            <div className='z-40 lg:hidden transition-all fixed bottom-24 right-4 rtl:left-4 rtl:right-auto'>
+              <FloatingActionButton />
+            </div>
+          )}
 
           <BundleContainer fetchComponent={UploadArea}>
             {Component => <Component active={draggingOver} onClose={closeUploadModal} />}

app/styles/ui.scss

@@ -241,19 +241,6 @@
   }
 }
 
-.floating-action-button {
-  @apply z-40 lg:hidden transition-all fixed bottom-24 right-4 p-4 text-white bg-accent-300 hover:bg-accent-500 rounded-full;
-
-  .svg-icon {
-    @apply w-6 h-6;
-
-    svg {
-      @apply w-6; // iOS fix
-      stroke-width: 1.5px;
-    }
-  }
-}
-
 .slist {
   &--flex {
     display: flex;