From fd0bcfa342356775005495350586be838c643717 Mon Sep 17 00:00:00 2001
From: wlren <weilinwork99@gmail.com>
Date: Sun, 9 Oct 2022 00:33:22 +0800
Subject: [PATCH] [questions][ui] contribute card clickable

---
 .../questions/ContributeQuestionCard.tsx      | 17 ++++-----
 .../questions/ContributeQuestionForm.tsx      | 36 ++++++++++---------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
index ff492fb7..54df1080 100644
--- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx
@@ -15,19 +15,20 @@ export default function ContributeQuestionCard() {
     setShowDraftDialog(false);
   };
 
-  const handleOnFocus = () => {
-    (document.activeElement as HTMLElement).blur();
+  const handleOpenContribute = () => {
     setShowDraftDialog(true);
   };
 
   return (
     <>
-      <div className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4">
+      <div
+        className="flex flex-col items-stretch justify-center gap-2 rounded-md border border-slate-300 bg-white p-4 hover:bg-gray-100"
+        onClick={handleOpenContribute}>
         <TextInput
           isLabelHidden={true}
           label="Question"
           placeholder="Contribute a question"
-          onFocus={handleOnFocus}
+          onChange={handleOpenContribute}
         />
         <div className="flex items-end justify-center gap-x-2">
           <div className="min-w-[150px] flex-1">
@@ -35,7 +36,7 @@ export default function ContributeQuestionCard() {
               label="Company"
               startAddOn={BuildingOffice2Icon}
               startAddOnType="icon"
-              onFocus={handleOnFocus}
+              onChange={handleOpenContribute}
             />
           </div>
           <div className="min-w-[150px] flex-1">
@@ -43,7 +44,7 @@ export default function ContributeQuestionCard() {
               label="Question type"
               startAddOn={QuestionMarkCircleIcon}
               startAddOnType="icon"
-              onFocus={handleOnFocus}
+              onChange={handleOpenContribute}
             />
           </div>
           <div className="min-w-[150px] flex-1">
@@ -51,14 +52,14 @@ export default function ContributeQuestionCard() {
               label="Date"
               startAddOn={CalendarDaysIcon}
               startAddOnType="icon"
-              onFocus={handleOnFocus}
+              onChange={handleOpenContribute}
             />
           </div>
           <Button
             label="Contribute"
             type="submit"
             variant="primary"
-            onClick={handleOnFocus}
+            onClick={handleOpenContribute}
           />
         </div>
       </div>
diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
index 64daf342..b5a56edf 100644
--- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx
+++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx
@@ -47,7 +47,7 @@ export default function ContributeQuestionForm({
   };
   return (
     <form
-      className="flex flex-col items-stretch justify-center gap-2 pb-[100px]"
+      className="mt-3 flex flex-col items-stretch justify-center pb-[100px]"
       onSubmit={handleSubmit(onSubmit)}>
       <TextArea
         isLabelHidden={true}
@@ -56,7 +56,7 @@ export default function ContributeQuestionForm({
         rows={5}
         {...register('questionContent')}
       />
-      <div className="flex flex-wrap items-end justify-center gap-2">
+      <div className="mt-3 mb-2 flex flex-wrap items-end justify-center gap-2">
         <div className="min-w-[150px] flex-1">
           <TextInput
             label="Company"
@@ -94,7 +94,7 @@ export default function ContributeQuestionForm({
           </div>
           <div className="min-w-[150px] flex-1">
             <TextInput
-              label="Position"
+              label="Position <TODO>"
               startAddOn={UserIcon}
               startAddOnType="icon"
               {...register('position')}
@@ -105,6 +105,22 @@ export default function ContributeQuestionForm({
       <div className="w-full">
         <HorizontalDivider />
       </div>
+      <h1 className="mb-3">
+        Are these questions the same as yours? TODO:Change to list
+      </h1>
+      <div>
+        <SimilarQuestionCard
+          content="Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices"
+          location="Menlo Park, CA"
+          receivedCount={0}
+          role="Senior Engineering Manager"
+          timestamp="Today"
+          onSimilarQuestionClick={() => {
+            // eslint-disable-next-line no-console
+            console.log('hi!');
+          }}
+        />
+      </div>
       <div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
         <div className="mb-1 flex">
           <Checkbox
@@ -127,20 +143,6 @@ export default function ContributeQuestionForm({
             variant="primary"></Button>
         </div>
       </div>
-      <h1>Are these questions the same as yours?</h1>
-      <div>
-        <SimilarQuestionCard
-          content="Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices"
-          location="Menlo Park, CA"
-          role="Senior Engineering Manager"
-          similarCount={0}
-          timestamp="Today"
-          onSimilarQuestionClick={() => {
-            // eslint-disable-next-line no-console
-            console.log('hi!');
-          }}
-        />
-      </div>
     </form>
   );
 }