From 69cf37be70a2351386b49fbc04ecfe6844c6887c Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Tue, 5 Apr 2022 00:46:06 +0500
Subject: [PATCH] better

---
 src/components/VerbPickerBelow.tsx    | 38 ++++++++++++++-------------
 src/components/np-picker/NPPicker.tsx |  4 +--
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/VerbPickerBelow.tsx b/src/components/VerbPickerBelow.tsx
index 82b2acb..c84be52 100644
--- a/src/components/VerbPickerBelow.tsx
+++ b/src/components/VerbPickerBelow.tsx
@@ -122,25 +122,27 @@ function VerbPickerBelow({ onChange, verb }: {
     }
     const tOptions = (verb?.tenseCategory === "perfect") ? perfectTenseOptions : tenseOptions;
     return <div className="mb-4 mt-3">
-        {verb && <div className="col text-center mb-2">
-            <ButtonSelect
-                small
-                value={verb.tenseCategory}
-                options={[{
-                    label: "Basic",
-                    value: "basic",
-                }, {
-                    label: "Perfect",
-                    value: "perfect",
-                }, {
-                    label: "Modal",
-                    value: "modal",
-                }]}
-                handleChange={onTenseCategorySelect}
-            />
-        </div>}
         <div style={{ maxWidth: "300px", margin: "0 auto" }}>
-            <div>Tense:</div>
+            <div className="d-flex flex-row justify-content-between align-items-center">
+                <div className="h5">Tense:</div>
+                {verb && <div className="mb-2">
+                    <ButtonSelect
+                        small
+                        value={verb.tenseCategory}
+                        options={[{
+                            label: "Basic",
+                            value: "basic",
+                        }, {
+                            label: "Perfect",
+                            value: "perfect",
+                        }, {
+                            label: "Modal",
+                            value: "modal",
+                        }]}
+                        handleChange={onTenseCategorySelect}
+                    />
+                </div>}
+            </div>
             <Select
                 isSearchable={false}
                 // for some reason can't use tOptions with find here;
diff --git a/src/components/np-picker/NPPicker.tsx b/src/components/np-picker/NPPicker.tsx
index f60b8e0..fe2cc12 100644
--- a/src/components/np-picker/NPPicker.tsx
+++ b/src/components/np-picker/NPPicker.tsx
@@ -44,8 +44,8 @@ function NPPicker({ np, onChange, counterPart, asObject }: {
     const clearButton = <button className="btn btn-sm btn-light mb-2" onClick={handleClear}>X</button>;
     return <div>
         {!npType && <div className="d-flex flex-row align-items-center text-center mt-3">
-            <div className="h4 mr-3">
-                NP
+            <div className="h6 mr-3">
+                Choose NP
             </div>
             <div className="ml-3">
                 {npTypes.map((npt) => <div className="mb-2">