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", "name": "@lingdocs/pashto-inflector",
"version": "2.0.3", "version": "2.0.4",
"author": "lingdocs.com", "author": "lingdocs.com",
"description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations", "description": "A Pashto inflection and verb conjugation engine, inculding React components for displaying Pashto text, inflections, and conjugations",
"homepage": "https://verbs.lingdocs.com", "homepage": "https://verbs.lingdocs.com",

View File

@ -18,6 +18,7 @@
/* change with theme */ /* change with theme */
--theme-shade: #fefefe; --theme-shade: #fefefe;
--close: #f5f5f5; --close: #f5f5f5;
--text-on-gender-color: #333;
--closer: #eee; --closer: #eee;
--farther: #555; --farther: #555;
--farthest: #333; --farthest: #333;
@ -29,6 +30,7 @@
[data-theme="dark"] { [data-theme="dark"] {
--theme-shade: #121418; --theme-shade: #121418;
--close: #1d1f25; --close: #1d1f25;
--text-on-gender-color: #1d1f25;
--closer: #2c3039; --closer: #2c3039;
--farther: #bbb; --farther: #bbb;
--farthest: #999; --farthest: #999;
@ -54,6 +56,10 @@ body {
font-size: var(--p-text-size); font-size: var(--p-text-size);
} }
.text-on-gender-color {
color: var(--text-on-gender-color)
}
pre { pre {
color: var(--high-contrast); color: var(--high-contrast);
} }

View File

@ -26,7 +26,7 @@ function ButtonSelect<L extends string>(props: PickerProps<L>) {
"btn", "btn",
"btn-outline-secondary", "btn-outline-secondary",
{ active: props.value === option.value }, { active: props.value === option.value },
{ "btn-sm": props.small || props.xSmall } { "btn-sm": props.small || props.xSmall },
)} )}
onClick={() => props.handleChange(option.value)} onClick={() => props.handleChange(option.value)}
style={{ style={{
@ -36,7 +36,9 @@ function ButtonSelect<L extends string>(props: PickerProps<L>) {
{ backgroundColor: option.color } : {}, { backgroundColor: option.color } : {},
}} }}
> >
{option.label} <span className={classNames([{ "text-on-gender-color": option.color && (props.value === option.value) }])}>
{option.label}
</span>
</button> </button>
))} ))}
</div> </div>

View File

@ -117,7 +117,7 @@ function NPPronounPicker({ onChange, pronoun, asObject, clearButton, opts }: {
const active = (p.row === i && p.col === j) const active = (p.row === i && p.col === j)
return <td return <td
onClick={() => handleClick(i, j)} onClick={() => handleClick(i, j)}
className={classNames({ "table-active": active })} className={classNames({ "table-active": active, "text-on-gender-color": active })}
style={{ style={{
backgroundColor: active ? gColors[p.gender] : "inherit", backgroundColor: active ? gColors[p.gender] : "inherit",
padding: "0.25rem 0", padding: "0.25rem 0",

View File

@ -153,6 +153,9 @@ function VPExplorerQuiz(props: {
</> : <div> </> : <div>
<div className="text-muted my-3">Type the <strong>verb in Pashto script</strong> to finish the phrase:</div> <div className="text-muted my-3">Type the <strong>verb in Pashto script</strong> to finish the phrase:</div>
<form onSubmit={e => { <form onSubmit={e => {
if (!answerBlank) {
alert("Enter the verb in Pashto script");
};
e.preventDefault(); e.preventDefault();
checkAnswer({ text: answerBlank, withBa }); checkAnswer({ text: answerBlank, withBa });
}}> }}>