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:
Brandon Presley 2024-02-07 15:49:05 +13:00
parent 9dd4e70d33
commit 5ce3b9e69c
2 changed files with 32 additions and 33 deletions

View File

@ -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,

View File

@ -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) => (