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

Merge pull request #5029 from nileshtrivedi/styling_improvements 

Some styling improvements
This commit is contained in:
AkiraFukushima 2024-09-01 20:49:20 +09:00 committed by GitHub
parent 98a9ddf7ad be31e35da1
commit a1669c7d81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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

@ -290,7 +290,7 @@ export default function Timeline(props: Props) {
color="blue-gray" color="blue-gray"
placeholder={formatMessage({ id: 'timeline.search' })} placeholder={formatMessage({ id: 'timeline.search' })}
containerProps={{ className: 'h-7' }} 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> </form>
</div> </div>

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

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

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

@ -116,7 +116,7 @@ export default function Status(props: Props) {
} }
return ( 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( {rebloggedHeader(
props.status, props.status,
formatMessage( formatMessage(
@ -148,19 +148,19 @@ export default function Status(props: Props) {
onClick={onClick} onClick={onClick}
> >
<div className="flex justify-between"> <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 <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) }} dangerouslySetInnerHTML={{ __html: emojify(status.account.display_name, status.account.emojis) }}
></span> ></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>
<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> <time dateTime={status.created_at}>{dayjs(status.created_at).format('YYYY-MM-DD HH:mm:ss')}</time>
</div> </div>
</div> </div>
<div className="status-body"> <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> </div>
{!spoilered && ( {!spoilered && (
<> <>
@ -209,10 +209,10 @@ const rebloggedHeader = (status: Entity.Status, alt: string) => {
if (status.reblog && !status.quote) { if (status.reblog && !status.quote) {
return ( return (
<div className="flex text-gray-600 dark:text-gray-500"> <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} /> <Avatar src={status.account.avatar} size="xs" variant="rounded" alt={alt} />
</div> </div>
<div style={{ width: 'calc(100% - 56px)' }}> <div style={{ width: 'calc(100% - 40px)' }}>
<FormattedMessage id="timeline.status.boosted" values={{ user: status.account.username }} /> <FormattedMessage id="timeline.status.boosted" values={{ user: status.account.username }} />
</div> </div>
</div> </div>