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