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(props: PickerProps) { "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(props: PickerProps) { { backgroundColor: option.color } : {}, }} > - {option.label} + + {option.label} + ))} 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 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: { :
Type the verb in Pashto script to finish the phrase:
{ + if (!answerBlank) { + alert("Enter the verb in Pashto script"); + }; e.preventDefault(); checkAnswer({ text: answerBlank, withBa }); }}>