[questions][ui] restyle landing, question pages (#517)

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/LandingComponent.tsx

@@ -20,15 +20,13 @@ export type LandingQueryData = {
   companySlug: string;
   location: string;
   questionType: QuestionsQuestionType;
-};
+} | null;
 
 export type LandingComponentProps = {
   onLanded: (data: LandingQueryData) => void;
 };
 
-export default function LandingComponent({
+export default function LandingComponent({ onLanded }: LandingComponentProps) {
-  onLanded: handleLandingQuery,
-}: LandingComponentProps) {
   const defaultCompany = useDefaultCompany();
   const defaultLocation = useDefaultLocation();
 
@@ -70,17 +68,17 @@ export default function LandingComponent({
     <main className="flex flex-1 flex-col items-center overflow-y-auto bg-white">
       <div className="flex flex-1 flex-col items-start justify-center gap-12 px-4">
         <header className="flex flex-col items-start gap-16">
-          <div className="flex flex-col items-center self-stretch">
+          <div className="flex flex-col items-center">
             <img
               alt="Questions Bank"
               className="h-40 w-40"
               src="/bank-logo.png"
             />
-            <h1 className="text-center text-4xl font-bold text-slate-900">
+            <h1 className="text-primary-700 text-center text-5xl font-bold">
               Tech Interview Question Bank
             </h1>
           </div>
-          <p className="mb-2 max-w-lg text-5xl font-semibold text-slate-900 sm:max-w-3xl">
+          <p className="mb-2 max-w-lg text-4xl font-semibold text-slate-900 sm:max-w-3xl">
             Know the{' '}
             <span className="text-primary-700">
               latest SWE interview questions
@@ -118,6 +116,7 @@ export default function LandingComponent({
               }}
             />
           </div>
+          <div className="flex items-center gap-2">
             <Button
               addonPosition="end"
               icon={ArrowSmallRightIcon}
@@ -126,7 +125,7 @@ export default function LandingComponent({
               variant="primary"
               onClick={() => {
                 if (company !== undefined && location !== undefined) {
-                return handleLandingQuery({
+                  onLanded({
                     companySlug: companyOptionToSlug(company),
                     location: locationOptionToSlug(location),
                     questionType,
@@ -134,6 +133,17 @@ export default function LandingComponent({
                 }
               }}
             />
+            <Button
+              addonPosition="end"
+              icon={ArrowSmallRightIcon}
+              label="View all questions"
+              size="md"
+              variant="secondary"
+              onClick={() => {
+                onLanded(null);
+              }}
+            />
+          </div>
         </div>
         <div className="flex justify-center">
           <iframe

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

@@ -60,7 +60,7 @@ export default function QuestionAggregateBadge({
         <Badge label={label} {...badgeProps} />
       </button>
       {visible && (
-        <div ref={setTooltipRef} {...getTooltipProps()}>
+        <div ref={setTooltipRef} {...getTooltipProps()} className="z-10">
           <div className="flex flex-col gap-2 rounded-md bg-white p-2 shadow-md">
             <ul>
               {sortedStatistics.map(({ key, value }) => (

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) {
@@ -185,7 +186,7 @@ export default function BaseQuestionCard({
       )}
       <div className="flex flex-1 flex-col items-start gap-2">
         <div className="flex items-baseline justify-between self-stretch">
-          <div className="z-10 flex items-center gap-2 text-slate-500">
+          <div className="flex items-center gap-2 text-slate-500">
             {showAggregateStatistics && (
               <>
                 <QuestionTypeBadge type={type} />
@@ -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/components/questions/layout/BackButtonLayout.tsx

@@ -0,0 +1,30 @@
+import type { PropsWithChildren } from 'react';
+import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
+import { Button } from '@tih/ui';
+
+export type BackButtonLayoutProps = PropsWithChildren<{
+  href: string;
+}>;
+
+export default function BackButtonLayout({
+  href,
+  children,
+}: BackButtonLayoutProps) {
+  return (
+    <div className="flex w-full flex-1 flex-col items-stretch gap-4 p-4 lg:flex-row">
+      <div>
+        <Button
+          addonPosition="start"
+          display="inline"
+          href={href}
+          icon={ArrowSmallLeftIcon}
+          label="Back"
+          variant="secondary"
+        />
+      </div>
+      <div className="flex w-full justify-center overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -2,12 +2,12 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, TextArea } from '@tih/ui';
 
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
+import BackButtonLayout from '~/components/questions/layout/BackButtonLayout';
 import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import SortOptionsSelect from '~/components/questions/SortOptionsSelect';
 
@@ -104,18 +104,8 @@ export default function QuestionPage() {
           {answer.content} - {APP_TITLE}
         </title>
       </Head>
-      <div className="flex w-full flex-1 items-stretch pb-4">
+      <BackButtonLayout
-        <div className="flex items-baseline gap-2 py-4 pl-4">
+        href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}>
-          <Button
-            addonPosition="start"
-            display="inline"
-            href={`/questions/${router.query.questionId}/${router.query.questionSlug}`}
-            icon={ArrowSmallLeftIcon}
-            label="Back"
-            variant="secondary"
-          />
-        </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">
           <FullAnswerCard
             answerId={answer.id}
@@ -179,8 +169,7 @@ export default function QuestionPage() {
             </div>
           </div>
         </div>
-        </div>
+      </BackButtonLayout>
-      </div>
     </>
   );
 }

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

@@ -2,13 +2,13 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
-import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
 import { Button, Collapsible, HorizontalDivider, TextArea } from '@tih/ui';
 
 import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem';
 import FullQuestionCard from '~/components/questions/card/question/FullQuestionCard';
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';
+import BackButtonLayout from '~/components/questions/layout/BackButtonLayout';
 import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
 import SortOptionsSelect from '~/components/questions/SortOptionsSelect';
 
@@ -182,19 +182,9 @@ export default function QuestionPage() {
           {question.content} - {APP_TITLE}
         </title>
       </Head>
-      <div className="flex w-full flex-1 items-stretch pb-4">
+      <BackButtonLayout href="/questions/browse">
-        <div className="flex items-baseline gap-2 py-4 pl-4">
-          <Button
-            addonPosition="start"
-            display="inline"
-            href="/questions/browse"
-            icon={ArrowSmallLeftIcon}
-            label="Back"
-            variant="secondary"
-          />
-        </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 +210,15 @@ export default function QuestionPage() {
                 });
               }}
             />
-            <div className="mx-2">
+            <div className="ml-16 mr-2">
-              <Collapsible label={`View ${question.numComments} comment(s)`}>
+              <Collapsible
-                <div className="mt-4 px-4">
+                defaultOpen={true}
-                  <form
+                label={
-                    className="mb-2"
+                  <div className="text-primary-700">{`${question.numComments} comment(s)`}</div>
-                    onSubmit={handleCommentSubmitClick(handleSubmitComment)}>
+                }>
-                    <TextArea
+                <div className="">
-                      {...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="flex flex-col gap-2 text-black">
-                    <div className="flex items-center justify-between gap-2">
+                    <div className="flex justify-end gap-2">
-                      <p className="text-lg">Comments</p>
                       <div className="flex items-end gap-2">
                         <SortOptionsSelect
                           sortOrderValue={commentSortOrder}
@@ -273,22 +243,49 @@ 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 +296,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}
@@ -330,8 +329,7 @@ export default function QuestionPage() {
           )}
           <PaginationLoadMoreButton query={answerInfiniteQuery} />
         </div>
-        </div>
+      </BackButtonLayout>
-      </div>
     </>
   );
 }

apps/portal/src/pages/questions/index.tsx

@@ -10,6 +10,14 @@ export default function QuestionsHomePage() {
   const router = useRouter();
 
   const handleLandingQuery = async (data: LandingQueryData) => {
+    if (data === null) {
+      // Go to browse page
+      router.push({
+        pathname: '/questions/browse',
+      });
+      return;
+    }
+
     const { companySlug, location, questionType } = data;
 
     // Go to browse page