From 9c2625105a10de7448563825b3ecfa7f328cf1e7 Mon Sep 17 00:00:00 2001
From: wlren <weilinwork99@gmail.com>
Date: Mon, 10 Oct 2022 01:30:56 +0800
Subject: [PATCH] [questions][ui] add hover

---
 apps/portal/src/components/questions/card/AnswerCard.tsx   | 7 ++++++-
 apps/portal/src/components/questions/card/QuestionCard.tsx | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/components/questions/card/AnswerCard.tsx b/apps/portal/src/components/questions/card/AnswerCard.tsx
index 1745522e..16088f3c 100644
--- a/apps/portal/src/components/questions/card/AnswerCard.tsx
+++ b/apps/portal/src/components/questions/card/AnswerCard.tsx
@@ -7,6 +7,7 @@ import VotingButtons from '../VotingButtons';
 export type AnswerCardProps = {
   authorImageUrl: string;
   authorName: string;
+  commentCount: number;
   content: string;
   createdAt: Date;
   upvoteCount: number;
@@ -18,9 +19,10 @@ function AnswerCardWithoutHref({
   upvoteCount,
   content,
   createdAt,
+  commentCount,
 }: AnswerCardProps) {
   return (
-    <div className="flex gap-4 rounded-md border p-2">
+    <div className="flex gap-4 rounded-md border bg-white p-2 hover:bg-slate-50">
       <VotingButtons size="sm" upvoteCount={upvoteCount} />
       <div className="mt-1 flex flex-col gap-1">
         <div className="flex items-center gap-2">
@@ -34,6 +36,9 @@ function AnswerCardWithoutHref({
           </p>
         </div>
         <p className="pl-1 pt-1">{content}</p>
+        <p className="py-1 pl-3 text-sm font-light underline	underline-offset-4">
+          {commentCount} comment(s)
+        </p>
       </div>
     </div>
   );
diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx
index 3b4ed8c5..2c034b9f 100644
--- a/apps/portal/src/components/questions/card/QuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/QuestionCard.tsx
@@ -64,7 +64,7 @@ export default function QuestionCard({
   location,
 }: QuestionCardProps) {
   return (
-    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4">
+    <article className="flex gap-4 rounded-md border border-slate-300 bg-white p-4 hover:bg-slate-50">
       {showVoteButtons && <VotingButtons upvoteCount={upvoteCount} />}
       <div className="flex flex-col gap-2">
         <div className="flex items-baseline justify-between">