[questions][ui] redesign question page

apps/portal/src/components/questions/AnswerCommentListItem.tsx

@@ -25,7 +25,7 @@ export default function AnswerCommentListItem({
     useAnswerCommentVote(answerCommentId);
 
   return (
-    <div className="flex gap-4 border bg-white p-2 ">
+    <div className="flex gap-4 rounded-md border bg-white p-2">
       <VotingButtons
         size="sm"
         upvoteCount={upvoteCount}

apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx

@@ -116,6 +116,7 @@ export type BaseQuestionCardProps = ActionButtonProps &
   ReceivedStatisticsProps &
   UpvoteProps & {
     content: string;
+    hideCard?: boolean;
     questionId: string;
     showHover?: boolean;
     timestamp: string | null;
@@ -140,6 +141,7 @@ export default function BaseQuestionCard({
   actionButtonLabel,
   onActionButtonClick,
   upvoteCount,
+  hideCard,
   timestamp,
   roles,
   countries,
@@ -152,7 +154,6 @@ export default function BaseQuestionCard({
 }: BaseQuestionCardProps) {
   const [showReceivedForm, setShowReceivedForm] = useState(false);
   const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
-  const hoverClass = showHover ? 'hover:bg-slate-50' : '';
 
   const locations = useMemo(() => {
     if (countries === undefined) {
@@ -274,7 +275,11 @@ export default function BaseQuestionCard({
 
   return (
     <article
-      className={`group flex gap-4 rounded-md border border-slate-300 bg-white p-4 ${hoverClass}`}>
+      className={clsx(
+        'group flex gap-4 border-slate-300',
+        showHover && 'hover:bg-slate-50',
+        !hideCard && 'rounded-md border bg-white p-4',
+      )}>
       {cardContent}
       {showDeleteButton && (
         <div className="fill-danger-700 invisible	self-center group-hover:visible">

apps/portal/src/components/questions/card/question/FullQuestionCard.tsx

@@ -28,6 +28,7 @@ export default function FullQuestionCard(props: QuestionOverviewCardProps) {
   return (
     <BaseQuestionCard
       {...props}
+      hideCard={true}
       showActionButton={false}
       showAddToList={true}
       showAggregateStatistics={true}

apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx

@@ -195,6 +195,7 @@ export default function QuestionPage() {
         </div>
         <div className="flex w-full justify-center overflow-y-auto py-4 px-5">
           <div className="flex max-w-7xl flex-1 flex-col gap-2">
+            <div className="flex flex-col gap-2 rounded-md border bg-white p-4">
               <FullQuestionCard
                 {...question}
                 companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
@@ -220,35 +221,15 @@ export default function QuestionPage() {
                   });
                 }}
               />
-            <div className="mx-2">
-              <Collapsible label={`View ${question.numComments} comment(s)`}>
-                <div className="mt-4 px-4">
-                  <form
-                    className="mb-2"
-                    onSubmit={handleCommentSubmitClick(handleSubmitComment)}>
-                    <TextArea
-                      {...commentRegister('commentContent', {
-                        minLength: 1,
-                        required: true,
-                      })}
-                      label="Post a comment"
-                      required={true}
-                      resize="vertical"
-                      rows={2}
-                    />
-                    <div className="my-3 flex justify-between">
-                      <Button
-                        disabled={!isCommentDirty || !isCommentValid}
-                        label="Post"
-                        type="submit"
-                        variant="primary"
-                      />
-                    </div>
-                  </form>
-                  {/* TODO: Add button to load more */}
+              <div className="ml-16 mr-2">
+                <Collapsible
+                  defaultOpen={true}
+                  label={
+                    <div className="text-primary-700">{`${question.numComments} comment(s)`}</div>
+                  }>
+                  <div className="">
                     <div className="flex flex-col gap-2 text-black">
-                    <div className="flex items-center justify-between gap-2">
-                      <p className="text-lg">Comments</p>
+                      <div className="flex justify-end gap-2">
                         <div className="flex items-end gap-2">
                           <SortOptionsSelect
                             sortOrderValue={commentSortOrder}
@@ -273,22 +254,51 @@ export default function QuestionPage() {
                           )),
                       )}
                       <PaginationLoadMoreButton query={commentInfiniteQuery} />
+                      <form
+                        className="mt-4"
+                        onSubmit={handleCommentSubmitClick(
+                          handleSubmitComment,
+                        )}>
+                        <TextArea
+                          {...commentRegister('commentContent', {
+                            minLength: 1,
+                            required: true,
+                          })}
+                          label="Post a comment"
+                          required={true}
+                          resize="vertical"
+                          rows={2}
+                        />
+                        <div className="my-3 flex justify-between">
+                          <Button
+                            disabled={!isCommentDirty || !isCommentValid}
+                            label="Post"
+                            type="submit"
+                            variant="primary"
+                          />
+                        </div>
+                      </form>
                     </div>
                   </div>
                 </Collapsible>
               </div>
+            </div>
             <HorizontalDivider />
             <form onSubmit={handleSubmit(handleSubmitAnswer)}>
+              <div className="flex flex-col gap-2">
+                <p className="text-md font-semibold">Contribute your answer</p>
                 <TextArea
                   {...answerRegister('answerContent', {
                     minLength: 1,
                     required: true,
                   })}
+                  isLabelHidden={true}
                   label="Contribute your answer"
                   required={true}
                   resize="vertical"
                   rows={5}
                 />
+              </div>
               <div className="mt-3 mb-1 flex justify-between">
                 <Button
                   disabled={!isDirty || !isValid}
@@ -299,7 +309,9 @@ export default function QuestionPage() {
               </div>
             </form>
             <div className="flex items-center justify-between gap-2">
-              <p className="text-xl">{question.numAnswers} answers</p>
+              <p className="text-xl font-semibold">
+                {question.numAnswers} answers
+              </p>
               <div className="flex items-end gap-2">
                 <SortOptionsSelect
                   sortOrderValue={answerSortOrder}