nicolium: style migration

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

packages/nicolium/src/components/statuses/quoted-status-indicator.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import Icon from '@/components/ui/icon';
-import Text from '@/components/ui/text';
 import { useMinimalStatus } from '@/queries/statuses/use-status';
 
 interface IQuotedStatusIndicator {
@@ -17,13 +16,9 @@ const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId, sta
   if (!statusUrl) return null;
 
   return (
-    <div className='flex items-center gap-1'>
-      <Icon
-        className='size-5'
-        src={require('@phosphor-icons/core/regular/quotes.svg')}
-        aria-hidden
-      />
-      <Text truncate>{statusUrl}</Text>
+    <div className='⁂-quoted-status-indicator'>
+      <Icon src={require('@phosphor-icons/core/regular/quotes.svg')} aria-hidden />
+      <p>{statusUrl}</p>
     </div>
   );
 };

packages/nicolium/src/components/statuses/quoted-status.tsx

@@ -77,33 +77,32 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   return (
     <OutlineBox
       data-testid='quoted-status'
-      className={clsx('cursor-pointer', {
-        'group hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
+      className={clsx('⁂-quoted-status', {
+        '⁂-quoted-status--compose': compose,
       })}
+      onClick={handleExpandClick}
     >
-      <div className='flex flex-col gap-2' onClick={handleExpandClick}>
-        {account.id && (
-          <AccountContainer
-            {...actions}
-            id={account.id}
-            timestamp={status.created_at}
-            withRelationship={false}
-            showAccountHoverCard={!compose}
-            withLinkToProfile={!compose}
-            withLocked={false}
-          />
-        )}
+      {account.id && (
+        <AccountContainer
+          {...actions}
+          id={account.id}
+          timestamp={status.created_at}
+          withRelationship={false}
+          showAccountHoverCard={!compose}
+          withLinkToProfile={!compose}
+          withLocked={false}
+        />
+      )}
 
-        <StatusReplyMentions status={status} hoverable={false} />
+      <StatusReplyMentions status={status} hoverable={false} />
 
-        {status.event ? (
-          <EventPreview status={status} hideAction />
-        ) : (
-          <div className='relative z-0 flex flex-col gap-4'>
-            <StatusContent status={status} collapsable isQuote withMedia compose={compose} />
-          </div>
-        )}
-      </div>
+      {status.event ? (
+        <EventPreview status={status} hideAction />
+      ) : (
+        <div className='⁂-quoted-status__content'>
+          <StatusContent status={status} collapsable isQuote withMedia compose={compose} />
+        </div>
+      )}
     </OutlineBox>
   );
 };

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

@@ -606,15 +606,15 @@
   }
 
   &--quote + .⁂-read-more-button__container .⁂-read-more-button__gradient {
-    .group:hover & {
+    .⁂-quoted-status:hover & {
       background-image: linear-gradient(to bottom, transparent, rgb(var(--color-gray-100)));
     }
 
-    .dark.black .group:hover & {
+    .dark.black .⁂-quoted-status:hover & {
       background-image: linear-gradient(to bottom, transparent, rgb(var(--color-gray-800)));
     }
 
-    .dark .group:hover & {
+    .dark .⁂-quoted-status:hover & {
       background-image: linear-gradient(to bottom, transparent, rgb(var(--color-gray-800)));
     }
   }
@@ -819,3 +819,43 @@ div:has(> .⁂-timeline-status:not(.⁂-timeline-status--connected-bottom))
     }
   }
 }
+
+.⁂-quoted-status {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  &:not(&--compose) {
+    &:hover {
+      background: rgb(var(--color-gray-100));
+
+      .dark & {
+        background: rgb(var(--color-primary-800));
+      }
+    }
+  }
+
+  &__content {
+    position: relative;
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+.⁂-quoted-status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  svg {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  p {
+    @include mixins.text($truncate: true);
+  }
+}