Contrast edit

lanterndata · Sep 23, 2024 · 7b66dbb · 7b66dbb
1 parent d648e92
commit 7b66dbb
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/src/components/MessageView.tsx b/src/components/MessageView.tsx
@@ -58,7 +58,7 @@ const MessageView = ({ message, messages, layer }: MessageViewProps) => {
   const [collapsed, setCollapsed] = useState(layer > 3);
   const replies = messages.filter((m) => m.inReplyTo === message.id);
   return (
-    <div className='text-sm'>
+    <>
       <div className='rounded border border-slate-300 shadow drop-shadow w-full'>
         <div className='flex text-sm bg-slate-300 px-4 py-2'>
           <p className='mr-auto'>{message.fromName}</p>
@@ -111,7 +111,7 @@ const MessageView = ({ message, messages, layer }: MessageViewProps) => {
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

diff --git a/src/components/ThreadPreview.tsx b/src/components/ThreadPreview.tsx
@@ -47,19 +47,23 @@ const ThreadPreview = ({
           {list ? '#' + list : ''}
         </div>
       )}
-      <div
-        className={classNames(
-          'flex text-xs',
-          font === 'ibm-plex-mono' ? 'mb-1.5' : 'mb-1'
-        )}
-      >
+      <div className='flex text-xs mb-1.5'>
         <p>{thread.fromName || thread.fromAddress}</p>
         {thread.count > 1 && (
           <p className='ml-2 text-stone-400'>{thread.count}</p>
         )}
         <p className='ml-auto'>{formatDateAsYYYYMMDD(thread.ts)}</p>
       </div>
-      <p className='font-medium text-sm'>{thread.subject}</p>
+      <p
+        className={classNames(
+          'text-sm',
+          isActive
+            ? 'text-white font-medium'
+            : 'hover:text-stone-200 text-stone-300'
+        )}
+      >
+        {thread.subject}
+      </p>
       {thread.preview && (
         <p
           className={classNames(

diff --git a/src/components/ThreadView.tsx b/src/components/ThreadView.tsx
@@ -51,7 +51,7 @@ const ThreadView = ({
   const href = `https://www.postgresql.org/message-id/${threadId}`;
 
   return (
-    <div className='px-12 pt-8 pb-8'>
+    <div className='px-12 pt-8 pb-8 max-w-5xl w-full mx-auto'>
       <div className='mb-8'>
         {back && (
           <p className='text-slate-600 mb-2' onClick={back}>
@@ -62,7 +62,10 @@ const ThreadView = ({
         <div className='mt-2 w-full h-0.5 bg-slate-300' />
       </div>
 
-      <MessageView message={message} messages={messages} layer={0} />
+      <div className='text-sm'>
+        <MessageView message={message} messages={messages} layer={0} />
+      </div>
+
       <div className='mt-12 text-sm font-medium'>
         Source:{' '}
         <Link href={href} className='text-slate-500'>