th: quotes: Show left bar in indicator

Makes the quote/reply distinction clearer
main
VT Social 2024-07-10 09:47:33 +00:00
parent 818da397a6
commit f7d787f798
4 changed files with 12 additions and 2 deletions

View File

@ -23,7 +23,7 @@ export const ReplyIndicator = () => {
const content = { __html: status.get('contentHtml') }; const content = { __html: status.get('contentHtml') };
return ( return (
<div className='reply-indicator'> <div className={'reply-indicator' + (quoteId ? ' reply-indicator__quote' : '')}>
{inReplyToId && (<div className='reply-indicator__line' />)} {inReplyToId && (<div className='reply-indicator__line' />)}
<Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'> <Permalink href={account.get('url')} to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>

View File

@ -1194,6 +1194,11 @@ body > [data-popper-placement] {
} }
} }
.reply-indicator__quote {
padding-inline-start: 10px;
border-inline-start: 3px solid $darker-text-color;
}
.edit-indicator { .edit-indicator {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);

View File

@ -24,7 +24,7 @@ export const ReplyIndicator = () => {
const content = { __html: status.get('contentHtml') }; const content = { __html: status.get('contentHtml') };
return ( return (
<div className='reply-indicator'> <div className={'reply-indicator' + (quoteId ? ' reply-indicator__quote' : '')}>
{inReplyToId && (<div className='reply-indicator__line' />)} {inReplyToId && (<div className='reply-indicator__line' />)}
<Link to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'> <Link to={`/@${account.get('acct')}`} className='detailed-status__display-avatar'>

View File

@ -1141,6 +1141,11 @@ body > [data-popper-placement] {
} }
} }
.reply-indicator__quote {
padding-inline-start: 10px;
border-inline-start: 3px solid $darker-text-color;
}
.edit-indicator { .edit-indicator {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
background: lighten($ui-base-color, 4%); background: lighten($ui-base-color, 4%);