Reduce number of colors in theme
This commit is contained in:
parent
a78a22207a
commit
bdd712833c
30
App.tsx
30
App.tsx
|
@ -1,15 +1,15 @@
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
import {createDrawerNavigator} from '@react-navigation/drawer';
|
import {createDrawerNavigator} from '@react-navigation/drawer';
|
||||||
import {
|
import {
|
||||||
DarkTheme,
|
DarkTheme as NavigationDarkTheme,
|
||||||
DefaultTheme,
|
DefaultTheme as NavigationDefaultTheme,
|
||||||
NavigationContainer,
|
NavigationContainer,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useEffect, useState} from 'react';
|
import React, {useEffect, useState} from 'react';
|
||||||
import {StatusBar, useColorScheme} from 'react-native';
|
import {StatusBar, useColorScheme} from 'react-native';
|
||||||
import {
|
import {
|
||||||
DarkTheme as DarkThemePaper,
|
DarkTheme as PaperDarkTheme,
|
||||||
DefaultTheme as DefaultThemePaper,
|
DefaultTheme as PaperDefaultTheme,
|
||||||
Provider,
|
Provider,
|
||||||
} from 'react-native-paper';
|
} from 'react-native-paper';
|
||||||
import {SQLiteDatabase} from 'react-native-sqlite-storage';
|
import {SQLiteDatabase} from 'react-native-sqlite-storage';
|
||||||
|
@ -29,6 +29,23 @@ export const DatabaseContext = React.createContext<SQLiteDatabase>({} as any);
|
||||||
|
|
||||||
const {getItem, setItem} = AsyncStorage;
|
const {getItem, setItem} = AsyncStorage;
|
||||||
|
|
||||||
|
const CombinedDefaultTheme = {
|
||||||
|
...PaperDefaultTheme,
|
||||||
|
...NavigationDefaultTheme,
|
||||||
|
colors: {
|
||||||
|
...PaperDefaultTheme.colors,
|
||||||
|
...NavigationDefaultTheme.colors,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
const CombinedDarkTheme = {
|
||||||
|
...PaperDarkTheme,
|
||||||
|
...NavigationDarkTheme,
|
||||||
|
colors: {
|
||||||
|
...PaperDarkTheme.colors,
|
||||||
|
...NavigationDarkTheme.colors,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [db, setDb] = useState<SQLiteDatabase | null>(null);
|
const [db, setDb] = useState<SQLiteDatabase | null>(null);
|
||||||
const dark = useColorScheme() === 'dark';
|
const dark = useColorScheme() === 'dark';
|
||||||
|
@ -54,9 +71,10 @@ const App = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Provider
|
<Provider
|
||||||
theme={dark ? DarkThemePaper : DefaultThemePaper}
|
theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}
|
||||||
settings={{icon: props => <Ionicon {...props} />}}>
|
settings={{icon: props => <Ionicon {...props} />}}>
|
||||||
<NavigationContainer theme={dark ? DarkTheme : DefaultTheme}>
|
<NavigationContainer
|
||||||
|
theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}>
|
||||||
<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
|
<StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
|
||||||
<Routes db={db} />
|
<Routes db={db} />
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
|
|
11
EditPlan.tsx
11
EditPlan.tsx
|
@ -1,11 +1,13 @@
|
||||||
import {
|
import {
|
||||||
|
DarkTheme,
|
||||||
|
DefaultTheme,
|
||||||
RouteProp,
|
RouteProp,
|
||||||
useFocusEffect,
|
useFocusEffect,
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native';
|
} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
import React, {useCallback, useContext, useEffect, useState} from 'react';
|
||||||
import {ScrollView, StyleSheet, Text, View} from 'react-native';
|
import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
|
||||||
import {Button, IconButton, Switch} from 'react-native-paper';
|
import {Button, IconButton, Switch} from 'react-native-paper';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
import {PlanPageParams} from './PlanPage';
|
import {PlanPageParams} from './PlanPage';
|
||||||
|
@ -20,6 +22,7 @@ export default function EditPlan() {
|
||||||
const [names, setNames] = useState<string[]>([]);
|
const [names, setNames] = useState<string[]>([]);
|
||||||
const db = useContext(DatabaseContext);
|
const db = useContext(DatabaseContext);
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
|
const dark = useColorScheme() === 'dark';
|
||||||
|
|
||||||
useFocusEffect(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
@ -90,6 +93,9 @@ export default function EditPlan() {
|
||||||
{DAYS.map(day => (
|
{DAYS.map(day => (
|
||||||
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
<View key={day} style={[styles.row, {alignItems: 'center'}]}>
|
||||||
<Switch
|
<Switch
|
||||||
|
color={
|
||||||
|
dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
|
||||||
|
}
|
||||||
value={days.includes(day)}
|
value={days.includes(day)}
|
||||||
style={{marginRight: 5}}
|
style={{marginRight: 5}}
|
||||||
onValueChange={value => toggleDay(value, day)}
|
onValueChange={value => toggleDay(value, day)}
|
||||||
|
@ -109,6 +115,9 @@ export default function EditPlan() {
|
||||||
{names.map(name => (
|
{names.map(name => (
|
||||||
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
<View key={name} style={[styles.row, {alignItems: 'center'}]}>
|
||||||
<Switch
|
<Switch
|
||||||
|
color={
|
||||||
|
dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
|
||||||
|
}
|
||||||
value={workouts.includes(name)}
|
value={workouts.includes(name)}
|
||||||
style={{marginRight: 5}}
|
style={{marginRight: 5}}
|
||||||
onValueChange={value => toggleWorkout(value, name)}
|
onValueChange={value => toggleWorkout(value, name)}
|
||||||
|
|
|
@ -1,16 +1,25 @@
|
||||||
import {AnimatedFAB} from 'react-native-paper';
|
import {DarkTheme, DefaultTheme} from '@react-navigation/native';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import {useColorScheme} from 'react-native';
|
||||||
|
import {FAB} from 'react-native-paper';
|
||||||
|
|
||||||
export default function MassiveFab(
|
export default function MassiveFab(
|
||||||
props: Partial<React.ComponentProps<typeof AnimatedFAB>>,
|
props: Partial<React.ComponentProps<typeof FAB>>,
|
||||||
) {
|
) {
|
||||||
|
const dark = useColorScheme() === 'dark';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatedFAB
|
<FAB
|
||||||
{...props}
|
{...props}
|
||||||
extended={false}
|
|
||||||
label="Add"
|
|
||||||
icon="add"
|
icon="add"
|
||||||
style={{position: 'absolute', right: 10, bottom: 60}}
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 10,
|
||||||
|
bottom: 60,
|
||||||
|
backgroundColor: dark
|
||||||
|
? DarkTheme.colors.primary
|
||||||
|
: DefaultTheme.colors.primary,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
14
SetItem.tsx
14
SetItem.tsx
|
@ -1,10 +1,11 @@
|
||||||
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
import {NavigationProp, useNavigation} from '@react-navigation/native';
|
||||||
import React, {useCallback, useContext, useState} from 'react';
|
import React, {useCallback, useContext, useState} from 'react';
|
||||||
import {GestureResponderEvent} from 'react-native';
|
import {GestureResponderEvent, Text} from 'react-native';
|
||||||
import {Divider, List, Menu} from 'react-native-paper';
|
import {Divider, List, Menu} from 'react-native-paper';
|
||||||
import {DatabaseContext} from './App';
|
import {DatabaseContext} from './App';
|
||||||
import {HomePageParams} from './HomePage';
|
import {HomePageParams} from './HomePage';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
import {format} from './time';
|
||||||
|
|
||||||
export default function SetItem({
|
export default function SetItem({
|
||||||
item,
|
item,
|
||||||
|
@ -48,6 +49,16 @@ export default function SetItem({
|
||||||
description={`${item.reps} x ${item.weight}${item.unit}`}
|
description={`${item.reps} x ${item.weight}${item.unit}`}
|
||||||
onLongPress={longPress}
|
onLongPress={longPress}
|
||||||
right={() => (
|
right={() => (
|
||||||
|
<>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignContent: 'center',
|
||||||
|
alignSelf: 'center',
|
||||||
|
}}>
|
||||||
|
{format(new Date(item.created))}
|
||||||
|
</Text>
|
||||||
<Menu
|
<Menu
|
||||||
anchor={anchor}
|
anchor={anchor}
|
||||||
visible={showMenu}
|
visible={showMenu}
|
||||||
|
@ -56,6 +67,7 @@ export default function SetItem({
|
||||||
<Divider />
|
<Divider />
|
||||||
<Menu.Item icon="trash" onPress={remove} title="Delete" />
|
<Menu.Item icon="trash" onPress={remove} title="Delete" />
|
||||||
</Menu>
|
</Menu>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user