dark mode nppronoun picker

This commit is contained in:
lingdocs 2022-04-13 19:10:54 +05:00
parent 5c712e8c7b
commit 21c5c63fec
5 changed files with 15 additions and 4 deletions

View File

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

View File

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

View File

@ -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>

View File

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

View File

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