Factor out the select element styling and apply it.
This commit is contained in:
parent
8ab9df1d85
commit
d317f5e2c6
|
@ -55,7 +55,8 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
|
||||||
return (
|
return (
|
||||||
<Setting {...this.props}>
|
<Setting {...this.props}>
|
||||||
<p class="info">
|
<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 />
|
<br />
|
||||||
Note that User Labels and Username Colors will still be applied to any
|
Note that User Labels and Username Colors will still be applied to any
|
||||||
usernames as normal.
|
usernames as normal.
|
||||||
|
@ -63,7 +64,15 @@ export class AnonymizeUsernamesSetting extends Component<SettingProps, State> {
|
||||||
|
|
||||||
<ul class="checkbox-list">
|
<ul class="checkbox-list">
|
||||||
<li>
|
<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}
|
{replacementTypeOptions}
|
||||||
</select>
|
</select>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -145,8 +145,10 @@ export class HideTopicsSetting extends Component<SettingProps, State> {
|
||||||
: "";
|
: "";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class={`hide-topics-editor ${hasUnsavedChanges}`}>
|
<div class={`has-save-status hide-topics-editor ${hasUnsavedChanges}`}>
|
||||||
<select onChange={matcherHandler}>{matcherOptions}</select>
|
<select class="styled-select" onChange={matcherHandler}>
|
||||||
|
{matcherOptions}
|
||||||
|
</select>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Value to match"
|
placeholder="Value to match"
|
||||||
|
|
|
@ -130,4 +130,19 @@
|
||||||
min-width: 10rem;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -51,8 +51,7 @@
|
||||||
min-width: 10rem;
|
min-width: 10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
input {
|
||||||
select {
|
|
||||||
background-color: var(--background-primary);
|
background-color: var(--background-primary);
|
||||||
border: 1px solid var(--save-status-color);
|
border: 1px solid var(--save-status-color);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
|
@ -62,9 +61,5 @@
|
||||||
select {
|
select {
|
||||||
padding-right: 16px;
|
padding-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.unsaved-changes {
|
|
||||||
--save-status-color: var(--unsaved-changes-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue