[questions][feat] tweak comment and answer pages

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

@@ -36,7 +36,7 @@ export default function SortOptionsSelect({
 
   return (
     <div className="flex items-end justify-end gap-2">
-      <div className="flex items-center gap-2">
+      <div className="flex items-center">
         <Select
           display="inline"
           label="Sort by"
@@ -52,7 +52,7 @@ export default function SortOptionsSelect({
           }}
         />
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex items-center">
         <Select
           display="inline"
           label="Order by"

apps/portal/src/components/questions/card/AnswerCard.tsx

@@ -1,4 +1,5 @@
-import { format } from 'date-fns';
+import clsx from 'clsx';
+import { formatDistanceToNow } from 'date-fns';
 import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
 
 import useAnswerVote from '~/utils/questions/vote/useAnswerVote';
@@ -30,11 +31,13 @@ export default function AnswerCard({
   showHover,
 }: AnswerCardProps) {
   const { handleUpvote, handleDownvote, vote } = useAnswerVote(answerId);
-  const hoverClass = showHover ? 'hover:bg-slate-50' : '';
 
   return (
     <article
-      className={`flex gap-4 rounded-md border bg-white p-2 ${hoverClass}`}>
+      className={clsx(
+        'flex gap-4 rounded-md border border-slate-200 bg-white p-4 sm:rounded-lg',
+        showHover && 'hover:bg-slate-50',
+      )}>
       <VotingButtons
         size={votingButtonsSize}
         upvoteCount={upvoteCount}
@@ -42,26 +45,37 @@ export default function AnswerCard({
         onDownvote={handleDownvote}
         onUpvote={handleUpvote}
       />
-      <div className="flex flex-col gap-2">
+      <div className="flex w-full flex-col gap-2">
         <div className="flex items-center gap-2">
           <img
-            alt={`${authorName} profile picture`}
-            className="h-8 w-8 rounded-full"
-            src={authorImageUrl}></img>
-          <h1 className="font-bold">{authorName}</h1>
-          <p className="text-xs font-extralight">
-            Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')}
+            alt={authorName}
+            className="h-7 w-7 rounded-full"
+            src={authorImageUrl}
+          />
+          <p className="text-sm font-medium text-slate-900">{authorName}</p>
+          <span className="font-medium text-slate-500">·</span>
+          <p className="text-xs text-slate-500">
+            {formatDistanceToNow(createdAt, {
+              addSuffix: true,
+            })}
           </p>
         </div>
-        <p className="whitespace-pre-line">{content}</p>
-        {commentCount !== undefined && (
-          <div className="flex items-center gap-2 text-slate-500">
-            <ChatBubbleLeftRightIcon className="h-6 w-6" />
-            <p className="text-sm font-medium">
+        <p className="whitespace-pre-wrap text-xs sm:text-sm">{content}</p>
+        <div className="-ml-2">
+          {commentCount !== undefined && (
+            <button
+              className="-my-1 flex items-center rounded-md px-2
+                  py-1 text-xs font-medium
+                  text-slate-500 hover:bg-slate-100 hover:text-slate-600"
+              type="button">
+              <ChatBubbleLeftRightIcon
+                aria-hidden={true}
+                className="mr-2 h-5 w-5"
+              />
               {commentCount} {commentCount === 1 ? 'comment' : 'comments'}
-            </p>
-          </div>
-        )}
+            </button>
+          )}
+        </div>
       </div>
     </article>
   );

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

@@ -315,7 +315,7 @@ export default function BaseQuestionCard({
   return (
     <article
       className={clsx(
-        'group flex gap-4 border-slate-300',
+        'group flex gap-4 border-slate-200',
         showHover && 'hover:border-primary-500 transition',
         !hideCard && 'rounded-md border bg-white p-4 sm:rounded-lg sm:p-6',
       )}>

apps/portal/src/components/questions/comments/CommentListItem.tsx

@@ -1,4 +1,4 @@
-import { format } from 'date-fns';
+import { formatDistanceToNow } from 'date-fns';
 
 import type { BackendVote } from '../VotingButtons';
 import VotingButtons from '../VotingButtons';
@@ -25,7 +25,7 @@ export default function CommentListItem({
   onUpvote,
 }: CommentListItemProps) {
   return (
-    <div className="flex gap-4 rounded-md border bg-white p-2">
+    <div className="flex gap-4 rounded-md border border-slate-200 bg-white p-2">
       <VotingButtons
         size="sm"
         upvoteCount={upvoteCount}
@@ -36,15 +36,19 @@ export default function CommentListItem({
       <div className="mt-1 flex flex-col gap-1">
         <div className="flex items-center gap-2">
           <img
-            alt={`${authorName} profile picture`}
-            className="h-8 w-8 rounded-full"
-            src={authorImageUrl}></img>
-          <h1 className="font-bold">{authorName}</h1>
-          <p className="pt-1 text-xs font-extralight">
-            Posted on: {format(createdAt, 'h:mm a, MMMM dd, yyyy')}
+            alt={authorName}
+            className="h-7 w-7 rounded-full"
+            src={authorImageUrl}
+          />
+          <p className="text-sm font-medium text-slate-900">{authorName}</p>
+          <span className="font-medium text-slate-500">·</span>
+          <p className="text-xs text-slate-500">
+            {formatDistanceToNow(createdAt, {
+              addSuffix: true,
+            })}
           </p>
         </div>
-        <p className="whitespace-pre-line">{content}</p>
+        <p className="whitespace-pre-wrap text-xs sm:text-sm">{content}</p>
       </div>
     </div>
   );

apps/portal/src/components/questions/forms/CreateQuestionEncounterForm.tsx

@@ -142,6 +142,7 @@ export default function CreateQuestionEncounterForm({
             (step === 2 && selectedRole === null)
           }
           label="Next"
+          size="sm"
           variant="primary"
           onClick={() => {
             setStep(step + 1);
@@ -152,6 +153,7 @@ export default function CreateQuestionEncounterForm({
         <Button
           isLoading={loading}
           label="Submit"
+          size="sm"
           variant="primary"
           onClick={async () => {
             if (
@@ -181,6 +183,7 @@ export default function CreateQuestionEncounterForm({
       )}
       <Button
         label="Cancel"
+        size="sm"
         variant="tertiary"
         onClick={(event) => {
           event.preventDefault();

apps/portal/src/components/questions/layout/BackButtonLayout.tsx

@@ -2,6 +2,8 @@ import type { PropsWithChildren } from 'react';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button } from '@tih/ui';
 
+import Container from '~/components/shared/Container';
+
 export type BackButtonLayoutProps = PropsWithChildren<{
   href: string;
 }>;
@@ -11,7 +13,7 @@ export default function BackButtonLayout({
   children,
 }: BackButtonLayoutProps) {
   return (
-    <div className="flex w-full flex-1 flex-col items-stretch gap-4 p-4 lg:flex-row">
+    <Container className="flex flex-col gap-4 pt-4 pb-12" variant="sm">
       <div>
         <Button
           addonPosition="start"
@@ -19,12 +21,13 @@ export default function BackButtonLayout({
           href={href}
           icon={ArrowSmallLeftIcon}
           label="Back"
+          size="sm"
           variant="secondary"
         />
       </div>
       <div className="flex w-full justify-center overflow-y-auto">
         {children}
       </div>
-    </div>
+    </Container>
   );
 }

apps/portal/src/components/questions/typeahead/ExpandedTypeahead.tsx

@@ -44,11 +44,12 @@ export default function ExpandedTypeahead({
   );
 
   return (
-    <div className="flex flex-wrap gap-2">
+    <div className="flex flex-wrap items-center gap-2">
       {suggestions.map((suggestion) => (
         <div key={suggestion.id} className="hidden lg:block">
           <Button
             label={suggestion.label}
+            size="sm"
             variant="tertiary"
             onClick={() => {
               onSuggestionClick?.(suggestion);

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

@@ -113,7 +113,7 @@ export default function QuestionPage() {
       </Head>
       <BackButtonLayout
         href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}>
-        <div className="flex max-w-7xl flex-1 flex-col gap-2">
+        <div className="flex max-w-7xl flex-1 flex-col gap-4">
           <FullAnswerCard
             answerId={answer.id}
             authorImageUrl={answer.userImage}
@@ -122,7 +122,7 @@ export default function QuestionPage() {
             createdAt={answer.createdAt}
             upvoteCount={answer.numVotes}
           />
-          <div className="mx-2">
+          <div>
             <form
               className="mb-2"
               onSubmit={handleCommentSubmit(handleSubmitComment)}>
@@ -136,7 +136,7 @@ export default function QuestionPage() {
                 resize="vertical"
                 rows={2}
               />
-              <div className="my-3 flex justify-between">
+              <div className="my-3 flex justify-end">
                 <Button
                   disabled={!isCommentDirty || !isCommentValid}
                   label="Post"
@@ -145,7 +145,7 @@ export default function QuestionPage() {
                 />
               </div>
             </form>
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-4">
               <div className="flex items-center justify-between gap-2">
                 <p className="text-lg">Comments</p>
                 <div className="flex items-end gap-2">

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

@@ -200,8 +200,8 @@ export default function QuestionPage() {
         </title>
       </Head>
       <BackButtonLayout href="/questions/browse">
-        <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">
+        <div className="flex flex-1 flex-col gap-4">
+          <div className="flex flex-col gap-4 rounded-md border bg-white p-4">
             <FullQuestionCard
               {...question}
               companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
@@ -224,24 +224,24 @@ export default function QuestionPage() {
                 });
               }}
             />
-            <div className="ml-16 mr-2">
+            <div className="sm:ml-13 ml-11 mr-2 md:ml-14">
               <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 justify-end gap-2">
-                      <div className="flex items-end gap-2">
-                        <SortOptionsSelect
-                          sortOrderValue={commentSortOrder}
-                          sortTypeValue={commentSortType}
-                          onSortOrderChange={setCommentSortOrder}
-                          onSortTypeChange={setCommentSortType}
-                        />
-                      </div>
+                <div className="flex flex-col gap-4 text-black">
+                  <div className="flex justify-end gap-2">
+                    <div className="flex items-end gap-2">
+                      <SortOptionsSelect
+                        sortOrderValue={commentSortOrder}
+                        sortTypeValue={commentSortType}
+                        onSortOrderChange={setCommentSortOrder}
+                        onSortTypeChange={setCommentSortType}
+                      />
                     </div>
+                  </div>
+                  <div className="flex flex-col gap-4">
                     {(commentData?.pages ?? []).flatMap(({ data: comments }) =>
                       comments.map((comment) => (
                         <QuestionCommentListItem
@@ -255,30 +255,30 @@ 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>
+                  <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-end">
+                      <Button
+                        disabled={!isCommentDirty || !isCommentValid}
+                        label="Post"
+                        type="submit"
+                        variant="primary"
+                      />
+                    </div>
+                  </form>
                 </div>
               </Collapsible>
             </div>
@@ -299,7 +299,7 @@ export default function QuestionPage() {
                 rows={5}
               />
             </div>
-            <div className="mt-3 mb-1 flex justify-between">
+            <div className="mt-3 mb-1 flex justify-end">
               <Button
                 disabled={!isDirty || !isValid}
                 label="Contribute"
@@ -308,11 +308,11 @@ export default function QuestionPage() {
               />
             </div>
           </form>
-          <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center justify-between gap-4">
             <p className="text-xl font-semibold">
               {question.numAnswers} answers
             </p>
-            <div className="flex items-end gap-2">
+            <div className="flex items-end gap-4">
               <SortOptionsSelect
                 sortOrderValue={answerSortOrder}
                 sortTypeValue={answerSortType}
@@ -321,25 +321,27 @@ export default function QuestionPage() {
               />
             </div>
           </div>
-          {/* TODO: Add button to load more */}
-          {(answerData?.pages ?? []).flatMap(({ data: answers }) =>
-            answers.map((answer) => (
-              <QuestionAnswerCard
-                key={answer.id}
-                answerId={answer.id}
-                authorImageUrl={answer.userImage}
-                authorName={answer.user}
-                commentCount={answer.numComments}
-                content={answer.content}
-                createdAt={answer.createdAt}
-                href={`${router.asPath}/answer/${answer.id}/${createSlug(
-                  answer.content,
-                )}`}
-                upvoteCount={answer.numVotes}
-              />
-            )),
-          )}
-          <PaginationLoadMoreButton query={answerInfiniteQuery} />
+          <div className="flex flex-col gap-4">
+            {/* TODO: Add button to load more */}
+            {(answerData?.pages ?? []).flatMap(({ data: answers }) =>
+              answers.map((answer) => (
+                <QuestionAnswerCard
+                  key={answer.id}
+                  answerId={answer.id}
+                  authorImageUrl={answer.userImage}
+                  authorName={answer.user}
+                  commentCount={answer.numComments}
+                  content={answer.content}
+                  createdAt={answer.createdAt}
+                  href={`${router.asPath}/answer/${answer.id}/${createSlug(
+                    answer.content,
+                  )}`}
+                  upvoteCount={answer.numVotes}
+                />
+              )),
+            )}
+            <PaginationLoadMoreButton query={answerInfiniteQuery} />
+          </div>
         </div>
       </BackButtonLayout>
     </>