From 168cee063607ca2da9a4dedd5bcb04698b0bb9e7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 9 Aug 2022 18:46:16 -0500
Subject: [PATCH] StatusActionBar: fix styles in Thread

---
 app/soapbox/components/status-action-bar.tsx    | 12 ++++++++++--
 app/soapbox/components/status-action-button.tsx |  4 +++-
 app/soapbox/components/status.tsx               |  4 +++-
 app/soapbox/features/status/index.tsx           |  7 ++++++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 76e4c5e83..a324fe344 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -82,7 +83,8 @@ interface IStatusActionBar {
   status: Status,
   withDismiss?: boolean,
   withLabels?: boolean,
-  expandable?: boolean
+  expandable?: boolean,
+  space?: 'expand' | 'compact',
 }
 
 const StatusActionBar: React.FC<IStatusActionBar> = ({
@@ -90,6 +92,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   withDismiss = false,
   withLabels = false,
   expandable = true,
+  space = 'compact',
 }) => {
   const intl = useIntl();
   const history = useHistory();
@@ -584,7 +587,12 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
   const canShare = ('share' in navigator) && status.visibility === 'public';
 
   return (
-    <div className='pt-4 flex flex-row space-x-2'>
+    <div
+      className={classNames('flex flex-row', {
+        'justify-between': space === 'expand',
+        'space-x-2': space === 'compact',
+      })}
+    >
       <StatusActionButton
         title={replyTitle}
         icon={require('@tabler/icons/message-circle-2.svg')}
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 157271baf..2d41fe5b7 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -79,7 +79,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       ref={ref}
       type='button'
       className={classNames(
-        'flex items-center p-1 space-x-0.5 rounded-full',
+        'flex items-center p-1 rounded-full',
         'text-gray-600 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
@@ -87,6 +87,8 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
           'text-black dark:text-white': active && emoji,
           'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
           'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
+          'space-x-0.5': !text,
+          'space-x-2': text,
         },
         className,
       )}
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 447de735f..2abdc8f5a 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -373,7 +373,9 @@ const Status: React.FC<IStatus> = (props) => {
             {quote}
 
             {!hideActionBar && (
-              <StatusActionBar status={actualStatus} />
+              <div className='pt-4'>
+                <StatusActionBar status={actualStatus} />
+              </div>
             )}
           </div>
         </div>
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index cd38e56b8..baf6b61ae 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -484,7 +484,12 @@ const Thread: React.FC<IThread> = (props) => {
 
           <hr className='mb-2 border-t-2 dark:border-primary-800' />
 
-          <StatusActionBar status={status} withLabels expandable={false} />
+          <StatusActionBar
+            status={status}
+            expandable={false}
+            space='expand'
+            withLabels
+          />
         </div>
       </HotKeys>