Clean up header. Add theme.

app/(tabs)/index.tsx

@@ -1,18 +1,22 @@
 import { Image, StyleSheet, Platform } from 'react-native';
 import ParallaxScrollView from '@/components/default/ParallaxScrollView';
 import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
 
 const HomeScreen = () => {
+  const scheme = useColorScheme() ?? 'dark';
   return (
     <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerHeight={200}
       headerImage={
         <Image
-          source={require('@/assets/images/partial-react-logo.png')}
+          source={require('@/assets/images/tech_tracker_logo.png')}
           style={styles.reactLogo}
         />
       }
+      headerTitle={
+        <ThemedText type='title' style={styles.headerTitle}>Tech Tracker</ThemedText>
+      }
     >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type='title'>Welcome!</ThemedText>
@@ -64,10 +68,20 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   reactLogo: {
-    height: 178,
+    height: 80,
-    width: 290,
+    width: 82,
-    bottom: 0,
+    bottom: 10,
-    left: 0,
+    left: 10,
     position: 'absolute',
   },
+  headerTitle: {
+    position: 'absolute',
+    bottom: 20,
+    left: 40,
+    right: 0,
+    textAlign: 'center',
+    fontSize: 48,
+    lineHeight: 64,
+    fontWeight: 'bold',
+  },
 });

app/(tabs)/settings.tsx

@@ -44,7 +44,7 @@ const TabTwoScreen = () => {
           <ThemedText type='defaultSemiBold'>@3x</ThemedText> suffixes to provide files for
           different screen densities
         </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
+        <Image source={require('@/assets/images/tech_tracker_logo.png')} style={{ alignSelf: 'center' }} />
         <ExternalLink href='https://reactnative.dev/docs/images'>
           <ThemedText type='link'>Learn more</ThemedText>
         </ExternalLink>

components/default/ParallaxScrollView.tsx

@@ -1,28 +1,31 @@
 import type { PropsWithChildren, ReactElement } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle, StyleProp } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedRef,
   useAnimatedStyle,
   useScrollViewOffset,
 } from 'react-native-reanimated';
-import { ThemedView } from '@/components/theme/Theme';
+import { ThemedText, ThemedView } from '@/components/theme/Theme';
 import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
+import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
-const HEADER_HEIGHT = 250;
+const HEADER_HEIGHT = 150;
 
 type Props = PropsWithChildren<{
-  headerImage: ReactElement;
+  headerImage?: ReactElement;
-  headerBackgroundColor: { dark: string; light: string };
+  headerBackgroundColor?: { dark: string; light: string };
   headerHeight?: number;
+  headerTitle?: ReactElement;
 }>;
 
 const ParallaxScrollView = ({
   children,
-  headerImage,
+  headerImage = <ThemedView />,
-  headerBackgroundColor,
+  headerBackgroundColor = { light: Colors.light.accent, dark: Colors.dark.accent },
   headerHeight = HEADER_HEIGHT,
+  headerTitle = <ThemedText />,
 }: Props) => {
   const scheme = useColorScheme() ?? 'dark';
   const scrollRef = useAnimatedRef<Animated.ScrollView>();
@@ -64,6 +67,7 @@ const ParallaxScrollView = ({
           ]}
         >
           {headerImage}
+          {headerTitle}
         </Animated.View>
         <ThemedView style={styles.content}>{children}</ThemedView>
       </Animated.ScrollView>
@@ -73,6 +77,9 @@ const ParallaxScrollView = ({
 export default ParallaxScrollView;
 
 const styles = StyleSheet.create({
+  blank: {
+
+  },
   container: {
     flex: 1,
   },

constants/Colors.ts

@@ -1,26 +1,32 @@
-/**
+const black = '#1f1e2c';
- * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+const white = '#ECEDEE'
- * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+const darkTint = '#fff';
- */
+const lightTint = '#0a7ea4';
-
+const darkIcon = '#9BA1A6';
-const tintColorLight = '#0a7ea4';
+const lightIcon = '#687076';
-const tintColorDark = '#fff';
+const ttBlue = '#4d5eae';
+const ttDarkBlue = '#2e2f3d';
+const ttLightBlue = '#c8d0d7';
 
 export const Colors = {
   light: {
-    text: '#11181C',
+    text: black,
-    background: '#fff',
+    background: white,
-    tint: tintColorLight,
+    tint: lightTint,
-    icon: '#687076',
+    icon: lightIcon,
-    tabIconDefault: '#687076',
+    tabIconDefault: lightIcon,
-    tabIconSelected: tintColorLight,
+    tabIconSelected: lightTint,
+    ttBlue,
+    accent: ttLightBlue,
   },
   dark: {
-    text: '#ECEDEE',
+    text: white,
-    background: '#151718',
+    background: black,
-    tint: tintColorDark,
+    tint: darkTint,
-    icon: '#9BA1A6',
+    icon: darkIcon,
-    tabIconDefault: '#9BA1A6',
+    tabIconDefault: darkIcon,
-    tabIconSelected: tintColorDark,
+    tabIconSelected: darkTint,
+    ttBlue,
+    accent: ttDarkBlue,
   },
 };