Change color scheme
This commit is contained in:
parent
4511dcd460
commit
fd38439756
6
App.tsx
6
App.tsx
|
@ -30,7 +30,7 @@ export const SnackbarContext = React.createContext<{
|
||||||
toast: (value: string, timeout: number) => void;
|
toast: (value: string, timeout: number) => void;
|
||||||
}>({toast: () => null});
|
}>({toast: () => null});
|
||||||
|
|
||||||
const CombinedDefaultTheme = {
|
export const CombinedDefaultTheme = {
|
||||||
...PaperDefaultTheme,
|
...PaperDefaultTheme,
|
||||||
...NavigationDefaultTheme,
|
...NavigationDefaultTheme,
|
||||||
colors: {
|
colors: {
|
||||||
|
@ -38,12 +38,14 @@ const CombinedDefaultTheme = {
|
||||||
...NavigationDefaultTheme.colors,
|
...NavigationDefaultTheme.colors,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const CombinedDarkTheme = {
|
export const CombinedDarkTheme = {
|
||||||
...PaperDarkTheme,
|
...PaperDarkTheme,
|
||||||
...NavigationDarkTheme,
|
...NavigationDarkTheme,
|
||||||
colors: {
|
colors: {
|
||||||
...PaperDarkTheme.colors,
|
...PaperDarkTheme.colors,
|
||||||
...NavigationDarkTheme.colors,
|
...NavigationDarkTheme.colors,
|
||||||
|
primary: '#B3E5fC',
|
||||||
|
background: '#121212',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {DarkTheme, DefaultTheme} from '@react-navigation/native';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {useColorScheme} from 'react-native';
|
import {useColorScheme} from 'react-native';
|
||||||
import {FAB} from 'react-native-paper';
|
import {FAB} from 'react-native-paper';
|
||||||
|
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||||
|
|
||||||
export default function MassiveFab(
|
export default function MassiveFab(
|
||||||
props: Partial<React.ComponentProps<typeof FAB>>,
|
props: Partial<React.ComponentProps<typeof FAB>>,
|
||||||
|
@ -12,13 +12,14 @@ export default function MassiveFab(
|
||||||
<FAB
|
<FAB
|
||||||
{...props}
|
{...props}
|
||||||
icon="add"
|
icon="add"
|
||||||
|
color="black"
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: 10,
|
right: 10,
|
||||||
bottom: 60,
|
bottom: 60,
|
||||||
backgroundColor: dark
|
backgroundColor: dark
|
||||||
? DarkTheme.colors.primary
|
? CombinedDarkTheme.colors.primary
|
||||||
: DefaultTheme.colors.primary,
|
: CombinedDefaultTheme.colors.primary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
22
MassiveInput.tsx
Normal file
22
MassiveInput.tsx
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react';
|
||||||
|
import {useColorScheme} from 'react-native';
|
||||||
|
import {TextInput} from 'react-native-paper';
|
||||||
|
|
||||||
|
export default function MassiveInput(
|
||||||
|
props: Partial<React.ComponentProps<typeof TextInput>> & {
|
||||||
|
innerRef?: React.Ref<any>;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
const dark = useColorScheme() === 'dark';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TextInput
|
||||||
|
selectionColor={dark ? '#2A2A2A' : ''}
|
||||||
|
mode="outlined"
|
||||||
|
style={{marginBottom: 10}}
|
||||||
|
selectTextOnFocus
|
||||||
|
ref={props.innerRef}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {DarkTheme, DefaultTheme} from '@react-navigation/native';
|
|
||||||
import {useColorScheme} from 'react-native';
|
import {useColorScheme} from 'react-native';
|
||||||
import {Switch} from 'react-native-paper';
|
import {Switch} from 'react-native-paper';
|
||||||
|
import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
|
||||||
|
|
||||||
export default function MassiveSwitch(
|
export default function MassiveSwitch(
|
||||||
props: Partial<React.ComponentProps<typeof Switch>>,
|
props: Partial<React.ComponentProps<typeof Switch>>,
|
||||||
|
@ -10,7 +10,11 @@ export default function MassiveSwitch(
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Switch
|
<Switch
|
||||||
color={dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary}
|
color={
|
||||||
|
dark
|
||||||
|
? CombinedDarkTheme.colors.primary
|
||||||
|
: CombinedDefaultTheme.colors.primary
|
||||||
|
}
|
||||||
style={{marginRight: 5}}
|
style={{marginRight: 5}}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
|
|
35
SetForm.tsx
35
SetForm.tsx
|
@ -1,6 +1,7 @@
|
||||||
import React, {useRef, useState} from 'react';
|
import React, {useRef, useState} from 'react';
|
||||||
import {ScrollView, StyleSheet, Text} from 'react-native';
|
import {ScrollView, Text} from 'react-native';
|
||||||
import {Button, TextInput} from 'react-native-paper';
|
import {Button} from 'react-native-paper';
|
||||||
|
import MassiveInput from './MassiveInput';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
|
|
||||||
export default function SetForm({
|
export default function SetForm({
|
||||||
|
@ -37,19 +38,15 @@ export default function SetForm({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ScrollView style={{height: '90%'}}>
|
<ScrollView style={{height: '90%'}}>
|
||||||
<TextInput
|
<MassiveInput
|
||||||
style={styles.marginBottom}
|
|
||||||
label="Name"
|
label="Name"
|
||||||
value={name}
|
value={name}
|
||||||
onChangeText={setName}
|
onChangeText={setName}
|
||||||
autoCorrect={false}
|
autoCorrect={false}
|
||||||
selectTextOnFocus
|
|
||||||
autoFocus={!name}
|
autoFocus={!name}
|
||||||
onSubmitEditing={() => repsRef.current?.focus()}
|
onSubmitEditing={() => repsRef.current?.focus()}
|
||||||
mode="outlined"
|
|
||||||
/>
|
/>
|
||||||
<TextInput
|
<MassiveInput
|
||||||
style={styles.marginBottom}
|
|
||||||
label="Reps"
|
label="Reps"
|
||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
value={reps}
|
value={reps}
|
||||||
|
@ -58,30 +55,22 @@ export default function SetForm({
|
||||||
selection={selection}
|
selection={selection}
|
||||||
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
||||||
autoFocus={!!name}
|
autoFocus={!!name}
|
||||||
selectTextOnFocus
|
|
||||||
blurOnSubmit={false}
|
blurOnSubmit={false}
|
||||||
ref={repsRef}
|
innerRef={repsRef}
|
||||||
mode="outlined"
|
|
||||||
/>
|
/>
|
||||||
<TextInput
|
<MassiveInput
|
||||||
style={styles.marginBottom}
|
|
||||||
label="Weight"
|
label="Weight"
|
||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
value={weight}
|
value={weight}
|
||||||
onChangeText={setWeight}
|
onChangeText={setWeight}
|
||||||
onSubmitEditing={handleSubmit}
|
onSubmitEditing={handleSubmit}
|
||||||
ref={weightRef}
|
innerRef={weightRef}
|
||||||
selectTextOnFocus
|
|
||||||
mode="outlined"
|
|
||||||
/>
|
/>
|
||||||
<TextInput
|
<MassiveInput
|
||||||
style={styles.marginBottom}
|
|
||||||
label="Unit (kg)"
|
label="Unit (kg)"
|
||||||
value={unit}
|
value={unit}
|
||||||
onChangeText={setUnit}
|
onChangeText={setUnit}
|
||||||
onSubmitEditing={handleSubmit}
|
onSubmitEditing={handleSubmit}
|
||||||
selectTextOnFocus
|
|
||||||
mode="outlined"
|
|
||||||
/>
|
/>
|
||||||
{set.created && (
|
{set.created && (
|
||||||
<Text style={{marginBottom: 10}}>
|
<Text style={{marginBottom: 10}}>
|
||||||
|
@ -113,9 +102,3 @@ export default function SetForm({
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
marginBottom: {
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
|
@ -6,12 +6,13 @@ import React, {
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import {NativeModules, StyleSheet, Text, View} from 'react-native';
|
import {NativeModules, StyleSheet, Text, View} from 'react-native';
|
||||||
import {Button, Searchbar, TextInput} from 'react-native-paper';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
|
import {Button, Searchbar} from 'react-native-paper';
|
||||||
import {DatabaseContext, SnackbarContext} from './App';
|
import {DatabaseContext, SnackbarContext} from './App';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
|
import MassiveInput from './MassiveInput';
|
||||||
import MassiveSwitch from './MassiveSwitch';
|
import MassiveSwitch from './MassiveSwitch';
|
||||||
import Settings from './settings';
|
import Settings from './settings';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const [vibrate, setVibrate] = useState(true);
|
const [vibrate, setVibrate] = useState(true);
|
||||||
|
@ -87,24 +88,20 @@ export default function SettingsPage() {
|
||||||
{
|
{
|
||||||
name: 'Sets per workout',
|
name: 'Sets per workout',
|
||||||
element: (
|
element: (
|
||||||
<TextInput
|
<MassiveInput
|
||||||
mode="outlined"
|
|
||||||
label="Sets per workout"
|
label="Sets per workout"
|
||||||
value={maxSets}
|
value={maxSets}
|
||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
onChangeText={value => {
|
onChangeText={value => {
|
||||||
setMaxSets(value);
|
setMaxSets(value);
|
||||||
}}
|
}}
|
||||||
style={styles.text}
|
|
||||||
selectTextOnFocus
|
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Rest minutes',
|
name: 'Rest minutes',
|
||||||
element: (
|
element: (
|
||||||
<TextInput
|
<MassiveInput
|
||||||
mode="outlined"
|
|
||||||
label="Rest minutes"
|
label="Rest minutes"
|
||||||
value={minutes}
|
value={minutes}
|
||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
|
@ -112,16 +109,13 @@ export default function SettingsPage() {
|
||||||
onChangeText={text => {
|
onChangeText={text => {
|
||||||
setMinutes(text);
|
setMinutes(text);
|
||||||
}}
|
}}
|
||||||
style={styles.text}
|
|
||||||
selectTextOnFocus
|
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Rest seconds',
|
name: 'Rest seconds',
|
||||||
element: (
|
element: (
|
||||||
<TextInput
|
<MassiveInput
|
||||||
mode="outlined"
|
|
||||||
label="Rest seconds"
|
label="Rest seconds"
|
||||||
value={seconds}
|
value={seconds}
|
||||||
keyboardType="numeric"
|
keyboardType="numeric"
|
||||||
|
@ -129,8 +123,6 @@ export default function SettingsPage() {
|
||||||
onChangeText={s => {
|
onChangeText={s => {
|
||||||
setSeconds(s);
|
setSeconds(s);
|
||||||
}}
|
}}
|
||||||
style={styles.text}
|
|
||||||
selectTextOnFocus
|
|
||||||
/>
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
|
14
ViewBest.tsx
14
ViewBest.tsx
|
@ -1,6 +1,4 @@
|
||||||
import {
|
import {
|
||||||
DarkTheme,
|
|
||||||
DefaultTheme,
|
|
||||||
RouteProp,
|
RouteProp,
|
||||||
useFocusEffect,
|
useFocusEffect,
|
||||||
useNavigation,
|
useNavigation,
|
||||||
|
@ -15,15 +13,15 @@ import React, {
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import {Text, useColorScheme, View} from 'react-native';
|
import {Text, useColorScheme, View} from 'react-native';
|
||||||
|
import {FileSystem} from 'react-native-file-access';
|
||||||
import {IconButton} from 'react-native-paper';
|
import {IconButton} from 'react-native-paper';
|
||||||
import Share from 'react-native-share';
|
import Share from 'react-native-share';
|
||||||
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
|
||||||
import ViewShot from 'react-native-view-shot';
|
import ViewShot from 'react-native-view-shot';
|
||||||
import {DatabaseContext} from './App';
|
import {CombinedDarkTheme, CombinedDefaultTheme, DatabaseContext} from './App';
|
||||||
import {BestPageParams} from './BestPage';
|
import {BestPageParams} from './BestPage';
|
||||||
import Set from './set';
|
import Set from './set';
|
||||||
import {formatMonth} from './time';
|
import {formatMonth} from './time';
|
||||||
import {FileSystem} from 'react-native-file-access';
|
|
||||||
|
|
||||||
interface Volume {
|
interface Volume {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -125,8 +123,8 @@ export default function ViewBest() {
|
||||||
curve={shape.curveBasis}
|
curve={shape.curveBasis}
|
||||||
svg={{
|
svg={{
|
||||||
stroke: dark
|
stroke: dark
|
||||||
? DarkTheme.colors.primary
|
? CombinedDarkTheme.colors.primary
|
||||||
: DefaultTheme.colors.primary,
|
: CombinedDefaultTheme.colors.primary,
|
||||||
}}>
|
}}>
|
||||||
<Grid />
|
<Grid />
|
||||||
</LineChart>
|
</LineChart>
|
||||||
|
@ -162,8 +160,8 @@ export default function ViewBest() {
|
||||||
curve={shape.curveBasis}
|
curve={shape.curveBasis}
|
||||||
svg={{
|
svg={{
|
||||||
stroke: dark
|
stroke: dark
|
||||||
? DarkTheme.colors.primary
|
? CombinedDarkTheme.colors.primary
|
||||||
: DefaultTheme.colors.primary,
|
: CombinedDefaultTheme.colors.primary,
|
||||||
}}>
|
}}>
|
||||||
<Grid />
|
<Grid />
|
||||||
</LineChart>
|
</LineChart>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user