Style comments and use avatars

Author: dthyresson

app/lib/comment-item.tsx

@@ -18,6 +18,7 @@ const CommentItem_CommentFragment = gql(/* GraphQL */ `
     profile {
       id
       username
+      avatarUrl
     }
   }
 `);
@@ -49,26 +50,43 @@ export function CommentItem(props: {
     }
   }, [deleteCommentMutation.data]);
   return (
-    <div className="pb-4">
-      <div className="text-sm">
-        <Link href={`/profile/${props.comment.profile?.id}`}>
-          <a className="font-bold">{props.comment.profile?.username} </a>
-        </Link>
-        <span>{createdAt}</span>
-        {user?.id && user.id === props.comment.profile?.id ? (
-          <button
-            className="ml-2 text-xs text-gray-400 hover:text-gray-900"
-            onClick={() => {
-              deleteComment({
-                commentId: props.comment.id,
-              });
-            }}
-          >
-            delete
-          </button>
-        ) : null}
+    <div className="flex space-x-3 py-4">
+      <img
+        className="h-6 w-6 rounded-full"
+        src={props.comment.profile?.avatarUrl}
+        alt=""
+      />
+      <div className="flex-1 space-y-1">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-medium">
+            {props.comment.profile?.username}
+          </h3>
+          <p className="text-sm text-gray-500">{createdAt}</p>
+        </div>
+        <p className="text-sm text-gray-500">{props.comment.message}</p>
       </div>
-      <div className="flex-1 md:flex-grow">{props.comment.message}</div>
     </div>
+
+    // <div className="pb-4">
+    //   <div className="text-sm">
+    //     <Link href={`/profile/${props.comment.profile?.id}`}>
+    //       <a className="font-bold">{props.comment.profile?.username} </a>
+    //     </Link>
+    //     <span>{createdAt}</span>
+    //     {user?.id && user.id === props.comment.profile?.id ? (
+    //       <button
+    //         className="ml-2 text-xs text-gray-400 hover:text-gray-900"
+    //         onClick={() => {
+    //           deleteComment({
+    //             commentId: props.comment.id,
+    //           });
+    //         }}
+    //       >
+    //         delete
+    //       </button>
+    //     ) : null}
+    //   </div>
+    //   <div className="flex-1 md:flex-grow">{props.comment.message}</div>
+    // </div>
   );
 }

app/lib/feed-item.tsx

@@ -141,6 +141,7 @@ const FeedItem_PostFragment = gql(/* GraphQL */ `
     profile {
       id
       username
+      avatarUrl
     }
     ...VoteButtons_PostFragment
     ...DeleteButton_PostFragment
@@ -161,7 +162,7 @@ export function FeedItem(props: {
       <div className="flex-1 md:flex-grow">
         <Link href={props.post.url}>
           <a>
-            <h2 className="text-2xl font-medium text-gray-900 title-font mb-2">
+            <h2 className="text-2xl font-medium text-gray-900 hover:text-green-500 title-font mb-2">
               {props.post.title}
             </h2>
           </a>
@@ -174,7 +175,7 @@ export function FeedItem(props: {
             {props.post.voteTotal === 1 ? "point" : "points"}
           </span>
           <Link href={`/item/${props.post.id}`}>
-            <a className="text-gray-400 mr-3 inline-flex items-center text-sm pr-3 py-1 border-r-2 border-gray-200">
+            <a className="text-gray-400 hover:text-green-400 mr-3 inline-flex items-center text-sm pr-3 py-1 border-r-2 border-gray-200">
               <CommentIcon className="w-4 h-4 mr-1" />
               {props.post.commentCollection?.totalCount}{" "}
               {props.post.commentCollection?.totalCount === 1
@@ -183,13 +184,16 @@ export function FeedItem(props: {
             </a>
           </Link>
           <Link href={`/profile/${props.post.profile?.id}`}>
-            <a className="text-gray-400 mr-3 inline-flex items-center text-sm pr-3 py-1 border-r-2 border-gray-200">
-              <UserIcon className="w-4 h-4 mr-1" />
+            <a className="text-gray-400 hover:text-green-400 mr-3 inline-flex items-center text-sm pr-3 py-1 border-r-2 border-gray-200">
+              <img
+                className="inline-block h-4 w-4 rounded-full w-4 h-4 mr-1"
+                src={props.post.profile?.avatarUrl}
+              />
               {props.post.profile?.username}
             </a>
           </Link>
           <Link href={`/item/${props.post.id}`}>
-            <a className="text-gray-400 inline-flex items-center text-sm">
+            <a className="text-gray-400 hover:text-green-400 inline-flex items-center text-sm">
               <CalendarIcon className="w-4 h-4 mr-1" />
               {createdAt}
             </a>
@@ -235,7 +239,7 @@ const DeleteButton = (props: {
   return (
     <>
       <button
-        className="text-gray-400 inline-flex items-center text-sm pl-3 ml-3 border-l-2 border-gray-200"
+        className="text-gray-400 hover:text-green-400 inline-flex items-center text-sm pl-3 ml-3 border-l-2 border-gray-200"
         onClick={() => setShow(true)}
       >
         <TrashIcon className="w-4 h-4 mr-1" />

app/lib/icons.tsx

@@ -51,18 +51,13 @@ export function CommentIcon(props: { className?: string }) {
 
 export function PointIcon(props: { className?: string }) {
   return (
-    <svg
-      viewBox="0 0 24 24"
-      className="w-4 h-4 mr-1"
-      stroke="currentColor"
-      strokeWidth="2"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-      <circle cx="12" cy="12" r="3"></circle>
+    <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" {...props}>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M13 10V3L4 14h7v7l9-11h-7z"
+      ></path>
     </svg>
   );
 }

app/pages/profile/[profileId].tsx

@@ -16,6 +16,7 @@ const ProfileRouteQuery = gql(/* GraphQL */ `
           id
           username
           bio
+          avatarUrl
           website
           latestPosts: postCollection(
             orderBy: [{ createdAt: DescNullsFirst }]
@@ -81,12 +82,20 @@ const Profile: NextPage = () => {
                 <span className="inline-block font-bold pr-2 w-20">User</span>{" "}
                 {profile.username}
               </div>
+              <div>
+                <span className="inline-block font-bold pr-2 w-20">Avatar</span>{" "}
+                <img
+                  className="inline-block h-6 w-6 rounded-full"
+                  src={profile.avatarUrl}
+                />
+              </div>
               <div>
                 <span className="inline-block font-bold pr-2 w-20">
                   Website
                 </span>{" "}
                 {profile.website}
               </div>
+
               <div className="mb-10">
                 <span className="inline-block font-bold pr-2 w-20">Bio</span>{" "}
                 {profile.bio}