1
Fork 0

Factor out the select element styling and apply it.

This commit is contained in:
Bauke 2023-09-11 12:43:46 +02:00
parent 8ab9df1d85
commit d317f5e2c6
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 31 additions and 10 deletions

View File

@ -55,7 +55,8 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
return (
<Setting {...this.props}>
<p class="info">
Anonymizes usernames by replacing them with "Anonymous #".
Anonymizes usernames by replacing them with an incrementing "Anonymous
#" or a SHA-256 hash of the username.
<br />
Note that User Labels and Username Colors will still be applied to any
usernames as normal.
@ -63,7 +64,15 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
<ul class="checkbox-list">
<li>
<select onChange={this.replacementTypeChanged}>
<label for="anonymize-usernames-replacement-type">
Replacement type:
</label>{" "}
<select
class="styled-select"
name="anonymize-usernames-replacement-type"
id="anonymize-usernames-replacement-type"
onChange={this.replacementTypeChanged}
>
{replacementTypeOptions}
</select>
</li>

View File

@ -145,8 +145,10 @@ export class HideTopicsSetting extends Component<SettingProps, State> {
: "";
return (
<div class={`hide-topics-editor ${hasUnsavedChanges}`}>
<select onChange={matcherHandler}>{matcherOptions}</select>
<div class={`has-save-status hide-topics-editor ${hasUnsavedChanges}`}>
<select class="styled-select" onChange={matcherHandler}>
{matcherOptions}
</select>
<input
type="text"
placeholder="Value to match"

View File

@ -130,4 +130,19 @@
min-width: 10rem;
}
}
.has-save-status {
--save-status-color: var(--blue);
&.unsaved-changes {
--save-status-color: var(--unsaved-changes-color);
}
}
.styled-select {
background-color: var(--background-primary);
border: 1px solid var(--save-status-color, var(--blue));
color: var(--foreground);
padding: 8px;
}
}

View File

@ -51,8 +51,7 @@
min-width: 10rem;
}
input,
select {
input {
background-color: var(--background-primary);
border: 1px solid var(--save-status-color);
color: var(--foreground);
@ -62,9 +61,5 @@
select {
padding-right: 16px;
}
&.unsaved-changes {
--save-status-color: var(--unsaved-changes-color);
}
}
}