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

packages/nicolium/src/styles/new/statuses.scss

@@ -902,3 +902,63 @@ div:has(> .⁂-timeline-status:not(.⁂-timeline-status--connected-bottom))
     }
   }
 }
+
+.⁂-status-tombstone {
+  @include mixins.text($theme: muted, $align: center);
+  display: flex;
+  height: 42px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  border: 2px solid rgb(var(--color-gray-200));
+  text-align: center;
+
+  .dark & {
+    border-color: rgb(var(--color-gray-800));
+  }
+
+  &__container {
+    height: 4rem;
+  }
+}
+
+.⁂-translate-button {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.25rem;
+  color: rgb(var(--color-primary-600));
+
+  .dark & {
+    color: rgb(var(--color-gray-600));
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  &__icon {
+    width: 1rem;
+    height: 1rem;
+
+    &--loading {
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  &__info {
+    @include mixins.text($theme: muted);
+  }
+}