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 (
|
||||
<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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue