dark mode nppronoun picker

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",

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);
 }

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 } : {},
                 }}
             >
+                <span className={classNames([{ "text-on-gender-color": option.color && (props.value === option.value) }])}>
                     {option.label}
+                </span>
             </button>
         ))}
     </div>

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",

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 });
                         }}>