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 { settingsRepo } from "./db";
|
||||||
import { ThemeContext } from "./use-theme";
|
import { ThemeContext } from "./use-theme";
|
||||||
import TimerProgress from "./TimerProgress";
|
import TimerProgress from "./TimerProgress";
|
||||||
import { MigrationExecutor } from "typeorm";
|
|
||||||
|
|
||||||
export const CombinedDefaultTheme = {
|
export const CombinedDefaultTheme = {
|
||||||
...NavigationDefaultTheme,
|
...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",
|
name: "Date format",
|
||||||
renderItem: (name: string) => (
|
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",
|
name: "Rest timers",
|
||||||
renderItem: (name: string) => (
|
renderItem: (name: string) => (
|
||||||
|
|
Loading…
Reference in New Issue
Block a user