Move dark/light color selects next to buttons
Now we can easily preview what changing the primary colors will cause.
This commit is contained in:
parent
9dd4e70d33
commit
5ce3b9e69c
1
App.tsx
1
App.tsx
|
@ -18,7 +18,6 @@ import { AppDataSource } from "./data-source";
|
|||
import { settingsRepo } from "./db";
|
||||
import { ThemeContext } from "./use-theme";
|
||||
import TimerProgress from "./TimerProgress";
|
||||
import { MigrationExecutor } from "typeorm";
|
||||
|
||||
export const CombinedDefaultTheme = {
|
||||
...NavigationDefaultTheme,
|
||||
|
|
|
@ -172,38 +172,6 @@ export default function SettingsPage() {
|
|||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Dark color",
|
||||
renderItem: (name: string) => (
|
||||
<Select
|
||||
label={name}
|
||||
items={lightOptions}
|
||||
value={darkColor}
|
||||
onChange={async (value) => {
|
||||
setValue("darkColor", value);
|
||||
setDarkColor(value);
|
||||
await settingsRepo.update({}, { darkColor: value });
|
||||
toast("Set primary color for dark mode.");
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Light color",
|
||||
renderItem: (name: string) => (
|
||||
<Select
|
||||
label={name}
|
||||
items={darkOptions}
|
||||
value={lightColor}
|
||||
onChange={async (value) => {
|
||||
setValue("lightColor", value);
|
||||
setLightColor(value);
|
||||
await settingsRepo.update({}, { lightColor: value });
|
||||
toast("Set primary color for light mode.");
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Date format",
|
||||
renderItem: (name: string) => (
|
||||
|
@ -315,6 +283,38 @@ export default function SettingsPage() {
|
|||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Dark color",
|
||||
renderItem: (name: string) => (
|
||||
<Select
|
||||
label={name}
|
||||
items={lightOptions}
|
||||
value={darkColor}
|
||||
onChange={async (value) => {
|
||||
setValue("darkColor", value);
|
||||
setDarkColor(value);
|
||||
await settingsRepo.update({}, { darkColor: value });
|
||||
toast("Set primary color for dark mode.");
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Light color",
|
||||
renderItem: (name: string) => (
|
||||
<Select
|
||||
label={name}
|
||||
items={darkOptions}
|
||||
value={lightColor}
|
||||
onChange={async (value) => {
|
||||
setValue("lightColor", value);
|
||||
setLightColor(value);
|
||||
await settingsRepo.update({}, { lightColor: value });
|
||||
toast("Set primary color for light mode.");
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "Rest timers",
|
||||
renderItem: (name: string) => (
|
||||
|
|
Loading…
Reference in New Issue
Block a user