From c4e201142704c048d0f4258ab25f4bc39afa175a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 12 Mar 2026 19:49:31 +0100
Subject: [PATCH] nicolium: update rss feed info styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/statuses/rss-feed-info.tsx | 48 +++++++------------
 .../nicolium/src/styles/new/statuses.scss     | 43 +++++++++++++++++
 2 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/packages/nicolium/src/components/statuses/rss-feed-info.tsx b/packages/nicolium/src/components/statuses/rss-feed-info.tsx
index cb952b798..08955fc4a 100644
--- a/packages/nicolium/src/components/statuses/rss-feed-info.tsx
+++ b/packages/nicolium/src/components/statuses/rss-feed-info.tsx
@@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
 import RelativeTimestamp from '../relative-timestamp';
 import Avatar from '../ui/avatar';
 import Icon from '../ui/icon';
-import Text from '../ui/text';
 
 import type { RssFeed } from 'pl-api';
 
@@ -14,40 +13,29 @@ interface IRssFeedInfo {
 }
 
 const RssFeedInfo: React.FC<IRssFeedInfo> = ({ feed, timestamp }) => (
-  <div className='group block w-full shrink-0'>
-    <div className='flex items-center gap-3 overflow-hidden'>
-      <div className='rounded-lg'>
-        <Avatar src={feed.image_url || ''} size={42} alt={feed.title || ''} />
-      </div>
+  <div className='⁂-rss-feed-info'>
+    <div className='⁂-rss-feed-info__avatar'>
+      <Avatar src={feed.image_url || ''} size={42} alt={feed.title || ''} />
+    </div>
 
-      <div className='grow overflow-hidden'>
-        <div className='flex flex-grow items-center gap-1'>
-          <Text size='sm' weight='semibold' truncate>
-            {feed.title}
-          </Text>
-        </div>
+    <div className='⁂-rss-feed-info__content'>
+      <p className='⁂-rss-feed-info__title'>{feed.title}</p>
 
-        <div className='flex items-center gap-1'>
-          <Text theme='muted' size='sm'>
-            <FormattedMessage id='rss_feed.label' defaultMessage='RSS Feed' />
-          </Text>
+      <div className='flex items-center gap-1'>
+        <p>
+          <FormattedMessage id='rss_feed.label' defaultMessage='RSS Feed' />
+        </p>
 
-          <Icon
-            className='size-4 text-gray-700 dark:text-gray-600'
-            src={require('@phosphor-icons/core/regular/rss.svg')}
-          />
+        <Icon src={require('@phosphor-icons/core/regular/rss.svg')} />
 
-          <Text tag='span' theme='muted' size='sm'>
-            &middot;
-          </Text>
+        <span aria-hidden>&middot;</span>
 
-          <RelativeTimestamp
-            timestamp={timestamp}
-            theme='muted'
-            size='sm'
-            className='whitespace-nowrap'
-          />
-        </div>
+        <RelativeTimestamp
+          timestamp={timestamp}
+          theme='muted'
+          size='sm'
+          className='whitespace-nowrap'
+        />
       </div>
     </div>
   </div>
diff --git a/packages/nicolium/src/styles/new/statuses.scss b/packages/nicolium/src/styles/new/statuses.scss
index 751ec288b..dd0e0ebcf 100644
--- a/packages/nicolium/src/styles/new/statuses.scss
+++ b/packages/nicolium/src/styles/new/statuses.scss
@@ -859,3 +859,46 @@ div:has(> .⁂-timeline-status:not(.⁂-timeline-status--connected-bottom))
     @include mixins.text($truncate: true);
   }
 }
+
+.⁂-rss-feed-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  &__avatar {
+    border-radius: 0.5rem;
+  }
+
+  &__content {
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  &__title {
+    @include mixins.text($size: sm, $weight: semibold, $truncate: true);
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__details {
+    @include mixins.text($theme: muted, $size: xs);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      color: rgb(var(--color-gray-700));
+
+      .dark & {
+        color: rgb(var(--color-gray-600));
+      }
+    }
+  }
+}