Split out colors
This commit is contained in:
parent
71d223f0a1
commit
b5b4aa8666
|
@ -1,17 +1,21 @@
|
||||||
import React, {useContext} from 'react';
|
import React, {useContext} from 'react';
|
||||||
import {FAB} from 'react-native-paper';
|
import {FAB} from 'react-native-paper';
|
||||||
import {CustomTheme} from './App';
|
import {CustomTheme} from './App';
|
||||||
|
import {lightColors} from './colors';
|
||||||
|
|
||||||
export default function MassiveFab(
|
export default function MassiveFab(
|
||||||
props: Partial<React.ComponentProps<typeof FAB>>,
|
props: Partial<React.ComponentProps<typeof FAB>>,
|
||||||
) {
|
) {
|
||||||
const {color} = useContext(CustomTheme);
|
const {color} = useContext(CustomTheme);
|
||||||
|
const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color)
|
||||||
|
? 'black'
|
||||||
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<FAB
|
<FAB
|
||||||
{...props}
|
{...props}
|
||||||
icon="add"
|
icon="add"
|
||||||
color={color === '#B3E5fC' ? 'black' : undefined}
|
color={fabColor}
|
||||||
style={{
|
style={{
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: 10,
|
right: 10,
|
||||||
|
|
|
@ -5,19 +5,15 @@ import {NativeModules, ScrollView, StyleSheet} from 'react-native';
|
||||||
import DocumentPicker from 'react-native-document-picker';
|
import DocumentPicker from 'react-native-document-picker';
|
||||||
import {Button, Text} from 'react-native-paper';
|
import {Button, Text} from 'react-native-paper';
|
||||||
import {CustomTheme} from './App';
|
import {CustomTheme} from './App';
|
||||||
|
import {darkColors, lightColors} from './colors';
|
||||||
import ConfirmDialog from './ConfirmDialog';
|
import ConfirmDialog from './ConfirmDialog';
|
||||||
import {MARGIN} from './constants';
|
import {MARGIN} from './constants';
|
||||||
|
import Input from './input';
|
||||||
import {SnackbarContext} from './MassiveSnack';
|
import {SnackbarContext} from './MassiveSnack';
|
||||||
import MassiveSwitch from './MassiveSwitch';
|
import MassiveSwitch from './MassiveSwitch';
|
||||||
import Page from './Page';
|
import Page from './Page';
|
||||||
import {getSettings, settings, updateSettings} from './settings.service';
|
import {getSettings, settings, updateSettings} from './settings.service';
|
||||||
|
|
||||||
interface Input<T> {
|
|
||||||
name: string;
|
|
||||||
value?: T;
|
|
||||||
onChange: (value: T) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const [battery, setBattery] = useState(false);
|
const [battery, setBattery] = useState(false);
|
||||||
const [ignoring, setIgnoring] = useState(false);
|
const [ignoring, setIgnoring] = useState(false);
|
||||||
|
@ -192,10 +188,13 @@ export default function SettingsPage() {
|
||||||
dropdownIconColor={color}
|
dropdownIconColor={color}
|
||||||
selectedValue={color}
|
selectedValue={color}
|
||||||
onValueChange={value => setColor(value)}>
|
onValueChange={value => setColor(value)}>
|
||||||
<Picker.Item value="#B3E5fC" label="Cyan theme" color="#B3E5fC" />
|
{darkColors.concat(lightColors).map(darkColor => (
|
||||||
<Picker.Item value="#8156a7" label="Purple theme" color="#8156a7" />
|
<Picker.Item
|
||||||
<Picker.Item value="#007AFF" label="Blue theme" color="#007AFF" />
|
value={darkColor.hex}
|
||||||
<Picker.Item value="#ffc0cb" label="Pink theme" color="#ffc0cb" />
|
label={`${darkColor.name} theme`}
|
||||||
|
color={darkColor.hex}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
</Picker>
|
</Picker>
|
||||||
)}
|
)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|
9
colors.ts
Normal file
9
colors.ts
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
export const lightColors = [
|
||||||
|
{hex: '#B3E5FC', name: 'Cyan'},
|
||||||
|
{hex: '#FFC0CB', name: 'Pink'},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const darkColors = [
|
||||||
|
{hex: '#8156A7', name: 'Purple'},
|
||||||
|
{hex: '#007AFF', name: 'Blue'},
|
||||||
|
];
|
Loading…
Reference in New Issue
Block a user