From 21c5c63fec19b87ac35776e2bb580065ff3632ec Mon Sep 17 00:00:00 2001
From: lingdocs <71590811+lingdocs@users.noreply.github.com>
Date: Wed, 13 Apr 2022 19:10:54 +0500
Subject: [PATCH] dark mode nppronoun picker

---
 package.json                                  | 2 +-
 src/App.css                                   | 6 ++++++
 src/components/ButtonSelect.tsx               | 6 ++++--
 src/components/np-picker/NPPronounPicker.tsx  | 2 +-
 src/components/vp-explorer/VPExplorerQuiz.tsx | 3 +++
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 2b0c895..45ca058 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lingdocs/pashto-inflector",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "author": "lingdocs.com",
   "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
   "homepage": "https://verbs.lingdocs.com",
diff --git a/src/App.css b/src/App.css
index ec1c23a..8517cd3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,6 +18,7 @@
     /* change with theme */
     --theme-shade: #fefefe;
     --close: #f5f5f5;
+    --text-on-gender-color: #333;
     --closer: #eee;
     --farther: #555;
     --farthest: #333;
@@ -29,6 +30,7 @@
 [data-theme="dark"] {
     --theme-shade: #121418;
     --close: #1d1f25;
+    --text-on-gender-color: #1d1f25;
     --closer: #2c3039;
     --farther: #bbb;
     --farthest: #999;
@@ -54,6 +56,10 @@ body {
     font-size: var(--p-text-size);
 }
 
+.text-on-gender-color {
+    color: var(--text-on-gender-color)
+}
+
 pre {
     color: var(--high-contrast);
 }
diff --git a/src/components/ButtonSelect.tsx b/src/components/ButtonSelect.tsx
index 16132bc..f2c956a 100644
--- a/src/components/ButtonSelect.tsx
+++ b/src/components/ButtonSelect.tsx
@@ -26,7 +26,7 @@ function ButtonSelect<L extends string>(props: PickerProps<L>) {
                     "btn",
                     "btn-outline-secondary",
                     { active: props.value === option.value },
-                    { "btn-sm": props.small || props.xSmall }
+                    { "btn-sm": props.small || props.xSmall },
                 )}
                 onClick={() => props.handleChange(option.value)}
                 style={{
@@ -36,7 +36,9 @@ function ButtonSelect<L extends string>(props: PickerProps<L>) {
                         { backgroundColor: option.color } : {},
                 }}
             >
-                {option.label}
+                <span className={classNames([{ "text-on-gender-color": option.color && (props.value === option.value) }])}>
+                    {option.label}
+                </span>
             </button>
         ))}
     </div>
diff --git a/src/components/np-picker/NPPronounPicker.tsx b/src/components/np-picker/NPPronounPicker.tsx
index 694bb3a..23ee7db 100644
--- a/src/components/np-picker/NPPronounPicker.tsx
+++ b/src/components/np-picker/NPPronounPicker.tsx
@@ -117,7 +117,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts }: {
                             const active = (p.row === i && p.col === j)
                             return <td
                                 onClick={() => handleClick(i, j)}
-                                className={classNames({ "table-active": active })}
+                                className={classNames({ "table-active": active, "text-on-gender-color": active })}
                                 style={{
                                     backgroundColor: active ? gColors[p.gender] : "inherit",
                                     padding: "0.25rem 0",
diff --git a/src/components/vp-explorer/VPExplorerQuiz.tsx b/src/components/vp-explorer/VPExplorerQuiz.tsx
index 40fbf97..b2955f6 100644
--- a/src/components/vp-explorer/VPExplorerQuiz.tsx
+++ b/src/components/vp-explorer/VPExplorerQuiz.tsx
@@ -153,6 +153,9 @@ function VPExplorerQuiz(props: {
                     </> : <div>
                         <div className="text-muted my-3">Type the <strong>verb in Pashto script</strong> to finish the phrase:</div>
                         <form onSubmit={e => {
+                            if (!answerBlank) {
+                                alert("Enter the verb in Pashto script");
+                            };
                             e.preventDefault();
                             checkAnswer({ text: answerBlank, withBa });
                         }}>