matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

nicolium: update rss feed info styles

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-12 19:49:31 +01:00
parent 5ed6c572b3
commit c4e2011427
2 changed files with 61 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/nicolium/src/components/statuses/rss-feed-info.tsx
View File

@ -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>

43
packages/nicolium/src/styles/new/statuses.scss
View File

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