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