[offers][refactor] tweak comments list

apps/portal/src/components/offers/profile/ProfileComments.tsx

@@ -110,10 +110,10 @@ export default function ProfileComments({
     );
   }
   return (
-    <div className="bh-white h-fit px-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
+    <div className="bh-white h-fit p-4 lg:h-[calc(100vh-4.5rem)] lg:overflow-y-auto">
-      <div className="bg-white pt-4 lg:sticky lg:top-0">
+      <div className="bg-white lg:sticky lg:top-0">
         <div className="flex justify-end">
-          <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
+          <div className="grid w-fit grid-cols-1 space-y-2 md:grid-cols-2 md:space-y-0 md:space-x-4">
             <div className="col-span-1 flex justify-end">
               {isEditable && (
                 <Tooltip tooltipContent="Copy this link to edit your profile later">
@@ -169,7 +169,8 @@ export default function ProfileComments({
           </div>
         </div>
 
-        <h2 className="mt-2 mb-6 text-2xl font-bold">Discussions</h2>
+        <div className="mt-2 mb-6 bg-white">
+          <h2 className="text-2xl font-bold">Discussions</h2>
           {isEditable || session?.user?.name ? (
             <div>
               <TextArea
@@ -210,16 +211,20 @@ export default function ProfileComments({
             />
           )}
         </div>
-      <div className="w-full">
+      </div>
+      <section className="w-full">
+        <ul className="space-y-8" role="list">
           {replies?.map((reply: Reply) => (
+            <li key={reply.id}>
               <ExpandableCommentCard
-            key={reply.id}
                 comment={reply}
                 profileId={profileId}
                 token={isEditable ? token : undefined}
               />
+            </li>
           ))}
-      </div>
+        </ul>
+      </section>
     </div>
   );
 }

apps/portal/src/components/offers/profile/comments/CommentCard.tsx

@@ -1,14 +1,9 @@
 import { signIn, useSession } from 'next-auth/react';
 import { useState } from 'react';
-import {
+import { Button, Dialog, TextArea, useToast } from '@tih/ui';
-  ChatBubbleBottomCenterIcon,
-  TrashIcon,
-} from '@heroicons/react/24/outline';
-import { Button, Dialog, HorizontalDivider, TextArea, useToast } from '@tih/ui';
 
 import { timeSinceNow } from '~/utils/offers/time';
-
+import { trpc } from '~/utils/trpc';
-import { trpc } from '../../../../utils/trpc';
 
 import type { Reply } from '~/types/offers';
 
@@ -125,48 +120,59 @@ export default function CommentCard({
   }
 
   return (
-    <>
+    <div className="flex space-x-3">
-      <div className="flex pl-2">
+      {/* <div className="flex-shrink-0">
-        <div className="flex w-full flex-col">
+        <img
-          <div className="flex flex-row font-bold">
+          alt=""
+          className="h-10 w-10 rounded-full"
+          src={`https://images.unsplash.com/photo-${comment.imageId}?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80`}
+        />
+      </div> */}
+      <div>
+        <div className="text-sm">
+          <p className="font-medium text-slate-900">
             {user?.name ?? 'unknown user'}
+          </p>
         </div>
-          <div className="mt-2 mb-2 flex flex-row ">{message}</div>
+        <div className="mt-1 text-sm text-slate-700">
-          <div className="flex flex-row items-center justify-start space-x-4 ">
+          <p className="break-all">{message}</p>
-            <div className="flex flex-col text-sm font-light text-slate-400">{`${timeSinceNow(
+        </div>
-              createdAt,
+        <div className="mt-2 space-x-2 text-sm">
-            )} ago`}</div>
+          <span className="font-medium text-slate-500">
+            {timeSinceNow(createdAt)} ago
+          </span>{' '}
+          <span className="font-medium text-slate-500">&middot;</span>{' '}
           {replyLength > 0 && (
-              <div
+            <>
-                className="text-primary-600 flex cursor-pointer flex-col text-sm hover:underline"
+              <button
+                className="font-medium text-slate-900"
+                type="button"
                 onClick={handleExpanded}>
                 {isExpanded ? `Hide replies` : `View replies (${replyLength})`}
-              </div>
+              </button>
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
+            </>
           )}
           {!disableReply && (
-              <div className="flex flex-col">
+            <>
-                <Button
+              <button
-                  icon={ChatBubbleBottomCenterIcon}
+                className="font-medium text-slate-900"
-                  isLabelHidden={true}
+                type="button"
-                  label="Reply"
+                onClick={() => setIsReplying(!isReplying)}>
-                  size="sm"
+                Reply
-                  variant="tertiary"
+              </button>
-                  onClick={() => setIsReplying(!isReplying)}
+              <span className="font-medium text-slate-500">&middot;</span>{' '}
-                />
+            </>
-              </div>
           )}
           {deletable && (
             <>
-                <Button
+              <button
+                className="font-medium text-slate-900"
                 disabled={deleteCommentMutation.isLoading}
-                  icon={TrashIcon}
+                type="button"
-                  isLabelHidden={true}
+                onClick={() => setIsDialogOpen(true)}>
-                  isLoading={deleteCommentMutation.isLoading}
+                {deleteCommentMutation.isLoading ? 'Deleting...' : 'Delete'}
-                  label="Delete"
+              </button>
-                  size="sm"
-                  variant="tertiary"
-                  onClick={() => setIsDialogOpen(true)}
-                />
               {isDialogOpen && (
                 <Dialog
                   isShown={isDialogOpen}
@@ -199,6 +205,12 @@ export default function CommentCard({
         </div>
         {!disableReply && isReplying && (
           <div className="mt-2 mr-2">
+            <form
+              onSubmit={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleReply();
+              }}>
               <TextArea
                 isLabelHidden={true}
                 label="Comment"
@@ -225,11 +237,10 @@ export default function CommentCard({
                   />
                 </div>
               </div>
+            </form>
           </div>
         )}
       </div>
     </div>
-      <HorizontalDivider />
-    </>
   );
 }

apps/portal/src/components/offers/profile/comments/ExpandableCommentCard.tsx

@@ -26,18 +26,22 @@ export default function ExpandableCommentCard({
         replyLength={comment.replies?.length ?? 0}
         token={token}
       />
-      {comment.replies && (
+      {comment.replies && comment.replies.length > 0 && isExpanded && (
-        <div className="pl-8">
+        <div className="pt-4">
-          {isExpanded &&
+          <div className="border-l-4 border-slate-200 pl-4">
-            comment.replies.map((reply) => (
+            <ul className="space-y-4" role="list">
+              {comment.replies.map((reply) => (
+                <li key={reply.id}>
                   <CommentCard
-                key={reply.id}
                     comment={reply}
                     disableReply={true}
                     profileId={profileId}
                     token={token}
                   />
+                </li>
               ))}
+            </ul>
+          </div>
         </div>
       )}
     </div>