nicolium: style updates

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/statuses/tombstone.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import Text from '@/components/ui/text';
 import { Hotkeys } from '@/features/ui/components/hotkeys';
 
 interface ITombstone {
@@ -19,24 +18,16 @@ const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown, deleted })
   };
 
   return (
-    <Hotkeys handlers={handlers} className='h-16'>
-      <div
-        className='focusable flex h-[42px] items-center justify-center rounded-lg border-2 border-gray-200 text-center dark:border-gray-800'
-        tabIndex={0}
-      >
-        <Text theme='muted'>
-          {deleted ? (
-            <FormattedMessage
-              id='statuses.tombstone.deleted'
-              defaultMessage='The post is deleted.'
-            />
-          ) : (
-            <FormattedMessage
-              id='statuses.tombstone'
-              defaultMessage='One or more posts are unavailable.'
-            />
-          )}
-        </Text>
+    <Hotkeys handlers={handlers} className='⁂-status-tombstone__container'>
+      <div className='focusable ⁂-status-tombstone' tabIndex={0}>
+        {deleted ? (
+          <FormattedMessage id='statuses.tombstone.deleted' defaultMessage='The post is deleted.' />
+        ) : (
+          <FormattedMessage
+            id='statuses.tombstone'
+            defaultMessage='One or more posts are unavailable.'
+          />
+        )}
       </div>
     </Hotkeys>
   );

packages/nicolium/src/components/statuses/translate-button.tsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import Icon from '@/components/ui/icon';
-import Text from '@/components/ui/text';
 import { useAppSelector } from '@/hooks/use-app-selector';
 import { useFeatures } from '@/hooks/use-features';
 import { useInstance } from '@/hooks/use-instance';
@@ -180,16 +179,16 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
   };
 
   const button = (
-    <button
-      className='flex w-fit items-center gap-1 text-primary-600 hover:underline dark:text-gray-600'
-      onClick={handleTranslate}
-    >
-      <Icon src={require('@phosphor-icons/core/regular/translate.svg')} className='size-4' />
+    <button className='⁂-translate-button' onClick={handleTranslate}>
+      <Icon
+        src={require('@phosphor-icons/core/regular/translate.svg')}
+        className='⁂-translate-button__icon'
+      />
       <span>{translationLabel()}</span>
       {translationQuery.isLoading && (
         <Icon
           src={require('@phosphor-icons/core/regular/circle-notch.svg')}
-          className='size-4 animate-spin'
+          className='⁂-translate-button__icon ⁂-translate-button__icon--loading'
         />
       )}
     </button>
@@ -201,9 +200,9 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
     const provider = translationQuery.data.provider;
 
     return (
-      <div className='flex flex-col items-start gap-3'>
+      <div className='⁂-translate-button__container'>
         {button}
-        <Text theme='muted'>
+        <p className='⁂-translate-button__info'>
           <FormattedMessage
             id='status.translated_from_with'
             defaultMessage='Translated from {lang} {provider}'
@@ -223,7 +222,7 @@ const TranslateButton: React.FC<ITranslateButton> = ({ status }) => {
               ) : undefined,
             }}
           />
-        </Text>
+        </p>
       </div>
     );
   }