Refactor ComposeButton, FAB, and sidebar nav spacing

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>
+    <Stack space={4}>
-      <div className='flex flex-col space-y-2'>
+      <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
-      <Button theme='accent' icon={require('@tabler/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
+      theme='accent'
-        <span><FormattedMessage id='navigation.compose' defaultMessage='Compose' /></span>
+      icon={require('@tabler/icons/pencil-plus.svg')}
-      </Button>
+      size='lg'
-    </div>
+      onClick={onOpenCompose}
+      block
+    >
+      <FormattedMessage id='navigation.compose' defaultMessage='Compose' />
+    </Button>
   );
 };
 

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -24,12 +25,15 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
   return (
     <button
       onClick={handleOpenComposeModal}
-      className='z-40 lg:hidden transition-all fixed bottom-24 right-4 p-4 text-white bg-accent-300 hover:bg-accent-500 rounded-full'
+      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 stroke-[1.5px]'
+        className='w-6 h-6'
       />
     </button>
   );

app/soapbox/features/ui/index.tsx

@@ -641,7 +641,9 @@ const UI: React.FC = ({ children }) => {
           </Layout>
 
           {(me && !shouldHideFAB()) && (
-            <FloatingActionButton />
+            <div className='z-40 lg:hidden transition-all fixed bottom-24 right-4'>
+              <FloatingActionButton />
+            </div>
           )}
 
           <BundleContainer fetchComponent={UploadArea}>