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