update order on settings page

This commit is contained in:
Sean Yesmunt 2020-11-10 15:27:39 -05:00
parent 73e1db7bb4
commit 94f8db4da9

View file

@ -249,6 +249,69 @@ class SettingsPage extends React.PureComponent<Props, State> {
/> />
{/* @endif */} {/* @endif */}
<Card
title={__('Appearance')}
actions={
<React.Fragment>
<fieldset-section>
<FormField
name="theme_select"
type="select"
label={__('Theme')}
onChange={this.onThemeChange}
value={currentTheme}
disabled={automaticDarkModeEnabled}
>
{themes.map(theme => (
<option key={theme} value={theme}>
{theme === 'light' ? __('Light') : __('Dark')}
</option>
))}
</FormField>
</fieldset-section>
<fieldset-section>
<FormField
type="checkbox"
name="automatic_dark_mode"
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
checked={automaticDarkModeEnabled}
label={__('Automatic dark mode')}
/>
{automaticDarkModeEnabled && (
<fieldset-group class="fieldset-group--smushed">
<FormField
type="select"
name="automatic_dark_mode_range"
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
value={darkModeTimes.from.hour}
label={__('From --[initial time]--')}
>
{startHours.map(time => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
))}
</FormField>
<FormField
type="select"
name="automatic_dark_mode_range"
label={__('To --[final time]--')}
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
value={darkModeTimes.to.hour}
>
{endHours.map(time => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
))}
</FormField>
</fieldset-group>
)}
</fieldset-section>
</React.Fragment>
}
/>
<Card <Card
title={__('Content settings')} title={__('Content settings')}
actions={ actions={
@ -319,69 +382,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
} }
/> />
<Card
title={__('Appearance')}
actions={
<React.Fragment>
<fieldset-section>
<FormField
name="theme_select"
type="select"
label={__('Theme')}
onChange={this.onThemeChange}
value={currentTheme}
disabled={automaticDarkModeEnabled}
>
{themes.map(theme => (
<option key={theme} value={theme}>
{theme === 'light' ? __('Light') : __('Dark')}
</option>
))}
</FormField>
</fieldset-section>
<fieldset-section>
<FormField
type="checkbox"
name="automatic_dark_mode"
onChange={() => this.onAutomaticDarkModeChange(!automaticDarkModeEnabled)}
checked={automaticDarkModeEnabled}
label={__('Automatic dark mode')}
/>
{automaticDarkModeEnabled && (
<fieldset-group class="fieldset-group--smushed">
<FormField
type="select"
name="automatic_dark_mode_range"
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
value={darkModeTimes.from.hour}
label={__('From --[initial time]--')}
>
{startHours.map(time => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
))}
</FormField>
<FormField
type="select"
name="automatic_dark_mode_range"
label={__('To --[final time]--')}
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
value={darkModeTimes.to.hour}
>
{endHours.map(time => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
))}
</FormField>
</fieldset-group>
)}
</fieldset-section>
</React.Fragment>
}
/>
{/* @if TARGET='app' */} {/* @if TARGET='app' */}
<Card <Card
title={__('Share usage and diagnostic data')} title={__('Share usage and diagnostic data')}