Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

styling improvements

This commit is contained in:
nilesh 2024-09-01 10:51:03 +05:30
parent e7094baa26
commit be31e35da1
3 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
renderer/components/timelines/Timeline.tsx
View File

@ -271,7 +271,7 @@ export default function Timeline(props: Props) {
color="blue-gray"
placeholder={formatMessage({ id: 'timeline.search' })}
containerProps={{ className: 'h-7' }}
className="!py-1 !px-2 !text-xs placeholder:opacity-100"
className="!py-1 !px-2 !text-xs placeholder:opacity-100 text-white"
/>
</form>
</div>

4
renderer/components/timelines/status/Body.tsx
View File

@ -19,7 +19,7 @@ export default function Body(props: Props) {
return (
<div className="raw-html">
<div
className="spoiler-text"
className="spoiler-text font-thin"
style={Object.assign({ wordWrap: 'break-word' }, props.style)}
dangerouslySetInnerHTML={{ __html: emojify(props.status.spoiler_text, props.status.emojis) }}
onClick={props.onClick}
@ -39,7 +39,7 @@ export default function Body(props: Props) {
{spoiler()}
{!spoilered && (
<div
className={`${props.className} raw-html`}
className={`${props.className} raw-html font-thin`}
style={Object.assign({ wordWrap: 'break-word' }, props.style)}
dangerouslySetInnerHTML={{ __html: emojify(props.status.content, props.status.emojis) }}
onClick={props.onClick}

16
renderer/components/timelines/status/Status.tsx
View File

@ -116,7 +116,7 @@ export default function Status(props: Props) {
}
return (
<div className="border-b border-gray-200 dark:border-gray-800 mr-2 py-1">
<div className="border-b border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 mr-2 py-1">
{rebloggedHeader(
props.status,
formatMessage(
@ -148,19 +148,19 @@ export default function Status(props: Props) {
onClick={onClick}
>
<div className="flex justify-between">
<div className="flex cursor-pointer" onClick={() => openUser(status.account.id)}>
<div className="flex cursor-pointer hover:underline" onClick={() => openUser(status.account.id)}>
<span
className="text-gray-950 dark:text-gray-300 text-ellipsis break-all overflow-hidden"
className="text-gray-950 font-bold dark:text-gray-300 text-ellipsis break-all overflow-hidden"
dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
></span>
<span className="text-gray-600 dark:text-gray-500 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
<span className="text-gray-600 ml-2 dark:text-gray-500 text-ellipsis break-all overflow-hidden">@{status.account.acct}</span>
</div>
<div className="text-gray-600 dark:text-gray-500 text-right cursor-pointer" onClick={openStatus}>
<div className="text-gray-600 dark:text-gray-500 text-right cursor-pointer hover:underline" onClick={openStatus}>
<time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
</div>
</div>
<div className="status-body">
<Body status={status} spoilered={spoilered} setSpoilered={setSpoilered} onClick={statusClicked} />
<Body className="my-2" status={status} spoilered={spoilered} setSpoilered={setSpoilered} onClick={statusClicked} />
</div>
{!spoilered && (
<>
@ -209,10 +209,10 @@ const rebloggedHeader = (status: Entity.Status, alt: string) => {
if (status.reblog && !status.quote) {
return (
<div className="flex text-gray-600 dark:text-gray-500">
<div className="grid justify-items-end pr-2" style={{ width: '56px' }}>
<div className="grid justify-items-end pr-2" style={{ width: '40px' }}>
<Avatar src={status.account.avatar} size="xs" variant="rounded" alt={alt} />
</div>
<div style={{ width: 'calc(100% - 56px)' }}>
<div style={{ width: 'calc(100% - 40px)' }}>
<FormattedMessage id="timeline.status.boosted" values={{ user: status.account.username }} />
</div>
</div>