From 68f3c729452e57bf3af7ef3faf151c12f8420e29 Mon Sep 17 00:00:00 2001
From: Ren Weilin <66356390+wlren@users.noreply.github.com>
Date: Mon, 31 Oct 2022 11:30:28 +0800
Subject: [PATCH] [questions][ui] Minor UI cleanup (#470)

* [questions][ui] fix no more questions overlap

* [questions][ui] remove redundent horizontal div

* [questions][ui] reduce gap
---
 .../questions/ContributeQuestionDialog.tsx    |   8 +-
 .../forms/ContributeQuestionForm.tsx          |   1 -
 apps/portal/src/pages/questions/browse.tsx    | 112 +++++++++---------
 3 files changed, 59 insertions(+), 62 deletions(-)

diff --git a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
index ed31837d..ae08724b 100644
--- a/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionDialog.tsx
@@ -35,13 +35,7 @@ export default function ContributeQuestionDialog({
   return (
     <div>
       <Transition.Root as={Fragment} show={show}>
-        <Dialog
-          as="div"
-          className="relative z-10"
-          onClose={() => {
-            // Todo: save state
-            onCancel();
-          }}>
+        <Dialog as="div" className="relative z-10" onClose={onCancel}>
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
diff --git a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
index e1cd4b5f..bdebd2d9 100644
--- a/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/forms/ContributeQuestionForm.tsx
@@ -115,7 +115,6 @@ export default function ContributeQuestionForm({
           rows={5}
           {...register('questionContent')}
         />
-        <HorizontalDivider />
         <h2 className="text-md text-primary-800 font-semibold">
           Additional information
         </h2>
diff --git a/apps/portal/src/pages/questions/browse.tsx b/apps/portal/src/pages/questions/browse.tsx
index a66b1104..9a974f5d 100644
--- a/apps/portal/src/pages/questions/browse.tsx
+++ b/apps/portal/src/pages/questions/browse.tsx
@@ -486,7 +486,7 @@ export default function QuestionsBrowsePage() {
       <main className="flex flex-1 flex-col items-stretch">
         <div className="flex h-full flex-1">
           <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
-            <div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-8">
+            <div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-6">
               <ContributeQuestionCard
                 onSubmit={(data) => {
                   const { cityId, countryId, stateId } = data.location;
@@ -502,60 +502,64 @@ export default function QuestionsBrowsePage() {
                   });
                 }}
               />
-              <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
-                <QuestionSearchBar
-                  sortOrderValue={sortOrder}
-                  sortTypeValue={sortType}
-                  onFilterOptionsToggle={() => {
-                    setFilterDrawerOpen(!filterDrawerOpen);
-                  }}
-                  onSortOrderChange={setSortOrder}
-                  onSortTypeChange={setSortType}
-                />
-              </div>
-              <div className="flex flex-col gap-2 pb-4">
-                {(questionsQueryData?.pages ?? []).flatMap(
-                  ({ data: questions }) =>
-                    questions.map((question) => {
-                      const { companyCounts, countryCounts, roleCounts } =
-                        relabelQuestionAggregates(
-                          question.aggregatedQuestionEncounters,
-                        );
+              <div className="flex flex-col items-stretch gap-4">
+                <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
+                  <QuestionSearchBar
+                    sortOrderValue={sortOrder}
+                    sortTypeValue={sortType}
+                    onFilterOptionsToggle={() => {
+                      setFilterDrawerOpen(!filterDrawerOpen);
+                    }}
+                    onSortOrderChange={setSortOrder}
+                    onSortTypeChange={setSortType}
+                  />
+                </div>
+                <div className="flex flex-col gap-2 pb-4">
+                  {(questionsQueryData?.pages ?? []).flatMap(
+                    ({ data: questions }) =>
+                      questions.map((question) => {
+                        const { companyCounts, countryCounts, roleCounts } =
+                          relabelQuestionAggregates(
+                            question.aggregatedQuestionEncounters,
+                          );
 
-                      return (
-                        <QuestionOverviewCard
-                          key={question.id}
-                          answerCount={question.numAnswers}
-                          companies={companyCounts}
-                          content={question.content}
-                          countries={countryCounts}
-                          href={`/questions/${question.id}/${createSlug(
-                            question.content,
-                          )}`}
-                          questionId={question.id}
-                          receivedCount={question.receivedCount}
-                          roles={roleCounts}
-                          timestamp={question.seenAt.toLocaleDateString(
-                            undefined,
-                            {
-                              month: 'short',
-                              year: 'numeric',
-                            },
-                          )}
-                          type={question.type}
-                          upvoteCount={question.numVotes}
-                        />
-                      );
-                    }),
-                )}
-                <PaginationLoadMoreButton query={questionsInfiniteQuery} />
-                {questionCount === 0 && (
-                  <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
-                    <NoSymbolIcon className="h-6 w-6" />
-                    <p>Nothing found.</p>
-                    {hasFilters && <p>Try changing your search criteria.</p>}
-                  </div>
-                )}
+                        return (
+                          <QuestionOverviewCard
+                            key={question.id}
+                            answerCount={question.numAnswers}
+                            companies={companyCounts}
+                            content={question.content}
+                            countries={countryCounts}
+                            href={`/questions/${question.id}/${createSlug(
+                              question.content,
+                            )}`}
+                            questionId={question.id}
+                            receivedCount={question.receivedCount}
+                            roles={roleCounts}
+                            timestamp={question.seenAt.toLocaleDateString(
+                              undefined,
+                              {
+                                month: 'short',
+                                year: 'numeric',
+                              },
+                            )}
+                            type={question.type}
+                            upvoteCount={question.numVotes}
+                          />
+                        );
+                      }),
+                  )}
+                  {questionCount !== 0 && (
+                    <PaginationLoadMoreButton query={questionsInfiniteQuery} />
+                  )}
+                  {questionCount === 0 && (
+                    <div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
+                      <NoSymbolIcon className="h-6 w-6" />
+                      <p>Nothing found.</p>
+                      {hasFilters && <p>Try changing your search criteria.</p>}
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
           </section>