Front: Setup Color Theme w/ React Native Paper

front/App.test.tsx

@@ -6,6 +6,6 @@ import { AppContent } from './App';
 describe('<AppContent />', () => {
   it('has 1 child', () => {
     const tree = TestRenderer.create(<AppContent />).toJSON();
-    expect(tree.children.length).toBe(10);
+    expect(tree.children.length).toBe(6);
   });
 });

front/App.tsx

@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View, ColorValue } from 'react-native';
-import ColorTheme from './Theme';
-import { Provider as PaperProvider } from 'react-native-paper';
+import { Text, View, ColorValue } from 'react-native';
+import { Provider as PaperProvider, useTheme } from 'react-native-paper';
+import Theme from './Theme';
 
 const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue }) => (
   <View style={{ backgroundColor: props.backgroundColor }}>
@@ -10,24 +10,15 @@ const ExampleBox = (props: { textColor: ColorValue, backgroundColor: ColorValue
 )
 
 export function AppContent() {
+  const { colors } = useTheme();
   return (
-    <View style={styles.container}>
-      <ExampleBox backgroundColor={ColorTheme.primary} textColor={ColorTheme.onPrimary}/>
-      <ExampleBox backgroundColor={ColorTheme.primaryVariant} textColor={ColorTheme.onPrimary}/>
-      <ExampleBox backgroundColor={ColorTheme.secondary} textColor={ColorTheme.onSecondary}/>
-      <ExampleBox backgroundColor={ColorTheme.secondaryVariant} textColor={ColorTheme.onPrimary}/>
-      <ExampleBox backgroundColor={ColorTheme.error} textColor={ColorTheme.onError}/>
-      <ExampleBox backgroundColor={ColorTheme.surface} textColor={ColorTheme.onSurface}/>
-      <ExampleBox backgroundColor={ColorTheme.surface} textColor={ColorTheme.placeholder}/>
-      <ExampleBox backgroundColor={ColorTheme.backgroundLight} textColor={ColorTheme.onBackgroundLight}/>
-      <ExampleBox backgroundColor={ColorTheme.backgroundDark} textColor={ColorTheme.onBackgroundDark}/>
-      <View
-        style={{
-          paddingVertical: 20,
-          borderBottomColor: ColorTheme.divider,
-          borderBottomWidth: StyleSheet.hairlineWidth,
-        }}
-      />
+    <View style={{flex: 1, justifyContent: 'center' }}>
+      <ExampleBox backgroundColor={colors.primary} textColor={colors.text}/>
+      <ExampleBox backgroundColor={colors.accent} textColor={colors.text}/>
+      <ExampleBox backgroundColor={colors.error} textColor={colors.text}/>
+      <ExampleBox backgroundColor={colors.surface} textColor={colors.onSurface}/>
+      <ExampleBox backgroundColor={colors.surface} textColor={colors.placeholder}/>
+      <ExampleBox backgroundColor={colors.notification} textColor={colors.text}/>
       <StatusBar style="auto" />
     </View>
   );
@@ -35,16 +26,8 @@ export function AppContent() {
 
 export default function App() {
   return (
-    <PaperProvider>
+    <PaperProvider theme={Theme}>
       <AppContent/>
     </PaperProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: ColorTheme.backgroundLight,
-    justifyContent: 'center',
-  },
-});

front/Theme.tsx

@@ -1,31 +1,25 @@
 /**
  * Color theme to use thoughout the application
  * Using the Material Color guidelines
- * TODO: integrate with the to-be-determined design framework
  */
-const ColorTheme = {
-	primary: '#5db075',
-	primaryVariant: '#008000',
-	onPrimary: '#ffffff',
 
-	secondary: '#00bdbd',
-	secondaryVariant: '#008b8c',
-	onSecondary: '#ffffff',
+import { DefaultTheme } from 'react-native-paper';
 
-	backgroundLight: '#F0F0F0',
-	onBackgroundLight: '#000000',
-	backgroundDark: '#292929',
-	onBackgroundDark: '#FFFFFF',
-
-	surface: '#F6F6F6',
-	onSurface: '#000000',
-
-	placeholder: '#C9C9C9',
-
-	error: '#B00020',
-	onError: '#FFFFFF',
-
-	divider: "#DDDDDD",
+const Theme = {
+	...DefaultTheme,
+	roundness: 10,
+	colors: {
+		...DefaultTheme.colors,
+		primary: '#5db075',
+		background: '#F0F0F0',
+		surface: '#F6F6F6',
+		accent: '#00bdbd',
+		error: '#B00020',
+		text: '#ffffff',
+		onSurface: '#000000',
+		placeholder: '#C9C9C9',
+		notification: '#FF0000'
+	}
 };
 
-export default ColorTheme;
+export default Theme;