Update labels

Author: James-Kua

src/components/Comments.tsx

@@ -79,8 +79,10 @@ const SingleComment: React.FC<CommentProps> = ({ comment, postAuthor }) => {
       <BodyHtml body_html={comment.body_html} />
       <div className="text-gray-500 text-xs mt-2 dark:text-slate-200 flex space-x-1">
         <UpvoteIcon />
-        <span>{comment.score.toLocaleString("en-US")}</span>
-        <span>upvotes</span>
+        <span className="font-medium">{comment.score.toLocaleString("en-US")}</span>
+        <span className="font-base">
+          {comment.score === 1 ? "upvote" : "upvotes"}
+        </span>
       </div>
       {comment.replies?.data?.children?.length > 0 && (
         <button className="dark:text-gray-300 text-xs mt-2" onClick={() => setShowReplies(!showReplies)}>

src/components/PostStats.tsx

@@ -7,23 +7,25 @@ export interface PostStatsProps {
   num_comments?: number;
 }
 
-const PostStats: React.FC<PostStatsProps> = ({ score, num_comments }) => {
-  return (
-    <div className="text-gray-500 text-xs mt-2 dark:text-slate-100 flex items-center space-x-4 font-medium">
-      <div className="flex items-center space-x-1">
-        <UpvoteIcon />
-        <span>{score.toLocaleString("en-US")}</span>
-        <span>Upvotes</span>
-      </div>
-      {typeof num_comments !== 'undefined' && (
-        <div className="flex items-center space-x-1">
-          <CommentIcon />
-          <span>{num_comments.toLocaleString("en-US")}</span>
-          <span>Comments</span>
-        </div>
-      )}
+const PostStats: React.FC<PostStatsProps> = ({score, num_comments}) => (
+  <div className="text-gray-600 text-xs mt-2 dark:text-slate-200 flex items-center space-x-4 font-medium">
+    <div className="flex items-center space-x-1 cursor-pointer">
+      <UpvoteIcon />
+      <span className="font-bold text-xs">{score.toLocaleString("en-US")}</span>
+      <span className="text-xs">
+        {score === 1 ? "upvote" : "upvotes"}
+      </span>
     </div>
-  );
-};
+    {num_comments !== undefined && (
+      <div className="flex items-center space-x-1 cursor-pointer">
+        <CommentIcon />
+        <span className="font-bold text-xs">{num_comments.toLocaleString("en-US")}</span>
+        <span className="text-xs">
+          {num_comments === 1 ? "comment" : "comments"}
+        </span>
+      </div>
+    )}
+  </div>
+);
 
 export default PostStats;