From 3b4df9978831b084b457a3dbd621d8883de35433 Mon Sep 17 00:00:00 2001
From: Tassoman <tassoman@gmail.com>
Date: Mon, 30 Jan 2023 22:53:44 +0000
Subject: [PATCH] translate button component using soapobox's iconbutton

---
 app/soapbox/components/translate-button.tsx   | 34 +++++++++++--------
 .../components/ui/button/useButtonStyles.ts   |  1 +
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/components/translate-button.tsx b/app/soapbox/components/translate-button.tsx
index e46855eb8..bd6df6d9d 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 { Icon, Stack } from './ui';
+import { Stack, Button, Text } from './ui';
 
 import type { Account, Status } from 'soapbox/types/entities';
 
@@ -44,32 +44,36 @@ 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 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' space={1} alignItems='start'>
-        <span>
+      <Stack space={3} alignItems='start'>
+        <Button
+          theme='muted'
+          text={<FormattedMessage id='status.show_original' defaultMessage='Show original' />}
+          icon={require('@tabler/icons/language.svg')}
+          onClick={handleTranslate}
+        />
+        <Text theme='muted'>
           <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
-        </span>
-
-        <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>
+        </Text>
       </Stack>
     );
   }
 
   return (
-    <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>
+    <div>
+      <Button
+        theme='muted'
+        text={<FormattedMessage id='status.translate' defaultMessage='Translate' />}
+        icon={require('@tabler/icons/language.svg')}
+        onClick={handleTranslate}
+      />
+    </div>
+
   );
 };
 
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 4dc38997d..176334939 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -11,6 +11,7 @@ const themes = {
   danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 dark:focus:bg-danger-600',
   transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
   outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
+  muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
 };
 
 const sizes = {