From be31e35da1ff428d08add40084c13a6469b1bde3 Mon Sep 17 00:00:00 2001
From: nilesh <eshnil22@gmail.com>
Date: Sun, 1 Sep 2024 10:51:03 +0530
Subject: [PATCH] styling improvements

---
 renderer/components/timelines/Timeline.tsx      |  2 +-
 renderer/components/timelines/status/Body.tsx   |  4 ++--
 renderer/components/timelines/status/Status.tsx | 16 ++++++++--------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/renderer/components/timelines/Timeline.tsx b/renderer/components/timelines/Timeline.tsx
index b4e5bb0401..8376f18416 100644
--- a/renderer/components/timelines/Timeline.tsx
+++ b/renderer/components/timelines/Timeline.tsx
@@ -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>
diff --git a/renderer/components/timelines/status/Body.tsx b/renderer/components/timelines/status/Body.tsx
index fcce1434a1..728ac97679 100644
--- a/renderer/components/timelines/status/Body.tsx
+++ b/renderer/components/timelines/status/Body.tsx
@@ -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}
diff --git a/renderer/components/timelines/status/Status.tsx b/renderer/components/timelines/status/Status.tsx
index d553af813e..dde79f82c6 100644
--- a/renderer/components/timelines/status/Status.tsx
+++ b/renderer/components/timelines/status/Status.tsx
@@ -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>