From a1dabbdee2ebc6eb526e265aae8ba8114d57dd0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 26 Jan 2023 14:44:20 +0100
Subject: [PATCH 1/3] Add icon to 'Translate' button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/translate-button.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index d6059411c..1fa7747a1 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -6,7 +6,7 @@ import { translateStatus, undoStatusTranslation } from 'soapbox/actions/statuses
 import { useAppDispatch, useAppSelector, useFeatures, useInstance } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
 
-import { Stack } from './ui';
+import { Icon, Stack } from './ui';
 
 import type { Account, Status } from 'soapbox/types/entities';
 
@@ -53,7 +53,8 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
       <Stack className='text-gray-700 dark:text-gray-600 text-sm' alignItems='start'>
         <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
 
-        <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
+        <button className='flex items-center gap-0.5 text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
+          <Icon className='h-5 w-5 stroke-[1.25]' src={require('@tabler/icons/language.svg')} strokeWidth={1.25} />
           <FormattedMessage id='status.show_original' defaultMessage='Show original' />
         </button>
       </Stack>
@@ -61,7 +62,8 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   }
 
   return (
-    <button className='text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-start text-sm hover:underline' onClick={handleTranslate}>
+    <button className='flex items-center gap-0.5 text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-start text-sm hover:underline' onClick={handleTranslate}>
+      <Icon className='h-5 w-5' src={require('@tabler/icons/language.svg')} strokeWidth={1.25} />
       <FormattedMessage id='status.translate' defaultMessage='Translate' />
     </button>
   );

From 83a500ee92b987acde35ff3b7960111ea2e386b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 27 Jan 2023 00:23:55 +0100
Subject: [PATCH 2/3] Add outline to translate button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/translate-button.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index 1fa7747a1..eae29a82c 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -44,16 +44,20 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
 
   if (!features.translations || !renderTranslate || !supportsLanguages) return null;
 
+  const buttonClassName = 'flex items-center gap-0.5 w-fit px-2 py-1 border-gray-600 hover:border-gray-700 dark:hover:border-gray-500 border-solid border text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 text-start text-sm hover:underline rounded-full';
+
   if (status.translation) {
     const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });
     const languageName = languageNames.of(status.language!);
     const provider     = status.translation.get('provider');
 
     return (
-      <Stack className='text-gray-700 dark:text-gray-600 text-sm' alignItems='start'>
-        <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
+      <Stack className='text-gray-700 dark:text-gray-600 text-sm' space={1} alignItems='start'>
+        <span>
+          <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
+        </span>
 
-        <button className='flex items-center gap-0.5 text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue hover:underline' onClick={handleTranslate}>
+        <button className={buttonClassName} onClick={handleTranslate}>
           <Icon className='h-5 w-5 stroke-[1.25]' src={require('@tabler/icons/language.svg')} strokeWidth={1.25} />
           <FormattedMessage id='status.show_original' defaultMessage='Show original' />
         </button>
@@ -62,7 +66,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   }
 
   return (
-    <button className='flex items-center gap-0.5 text-primary-600 dark:text-accent-blue hover:text-primary-700 dark:hover:text-accent-blue text-start text-sm hover:underline' onClick={handleTranslate}>
+    <button className={buttonClassName} onClick={handleTranslate}>
       <Icon className='h-5 w-5' src={require('@tabler/icons/language.svg')} strokeWidth={1.25} />
       <FormattedMessage id='status.translate' defaultMessage='Translate' />
     </button>

From cb4c6d7ccb66bd4b64f1b1359879b26dbb49cf20 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 27 Jan 2023 00:25:29 +0000
Subject: [PATCH 3/3] Apply 1 suggestion(s) to 1 file(s)

---
 app/soapbox/components/translate-button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index eae29a82c..e46855eb8 100644
--- a/app/soapbox/components/translate-button.tsx
+++ b/app/soapbox/components/translate-button.tsx
@@ -44,7 +44,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
 
   if (!features.translations || !renderTranslate || !supportsLanguages) return null;
 
-  const buttonClassName = 'flex items-center gap-0.5 w-fit px-2 py-1 border-gray-600 hover:border-gray-700 dark:hover:border-gray-500 border-solid border text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 text-start text-sm hover:underline rounded-full';
+  const buttonClassName = 'flex items-center gap-0.5 w-fit px-2 py-1 border-gray-600 hover:border-gray-700 dark:hover:border-gray-500 border-solid border text-gray-600 hover:text-gray-700 dark:hover:text-gray-500 text-start text-sm rounded-full';
 
   if (status.translation) {
     const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });