Revamp home header

App.js

@@ -1,16 +1,19 @@
 import "@expo/metro-runtime";
+import { StyleSheet } from "react-native";
 import { StatusBar } from "expo-status-bar";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 
 import colors from "./src/constants/colors";
 import HomeScreen from "./src/screens/HomeScreen";
+import AccountScreen from "./src/screens/AccountScreen";
 // import SignInScreen from "./src/screens/SignInScreen";
 import DonateScreen from "./src/screens/DonateScreen";
 import WebsitesScreen from "./src/screens/WebsitesScreen";
 import VolunteerFormScreen from "./src/screens/VolunteerFormScreen";
 import VolunteerOpportunityScreen from "./src/screens/VolunteerOpportunityScreen";
 import OtherInfoScreen from "./src/screens/OtherInfoScreen";
+import HomeHeader from "./src/components/HomeHeader";
 
 const Stack = createNativeStackNavigator();
 
@@ -31,9 +34,10 @@ export default function App() {
           name="Home"
           component={HomeScreen}
           options={{
-            title: "Audacity Music Club",
+            header: (props) => <HomeHeader {...props} />,
           }}
         />
+        <Stack.Screen name="Account" component={AccountScreen} />
         <Stack.Screen name="Donate" component={DonateScreen} />
         <Stack.Screen name="Websites" component={WebsitesScreen} />
         <Stack.Screen name="Other Info" component={OtherInfoScreen} />
@@ -45,7 +49,6 @@ export default function App() {
             headerStyle: {
               backgroundColor: colors.black,
             },
-            headerBackTitle: "Home",
           }}
         />
         <Stack.Screen name="Volunteer Form" component={VolunteerFormScreen} />

src/components/HomeHeader.js

@@ -0,0 +1,45 @@
+import { Image, Text, StyleSheet, Pressable, View } from "react-native";
+import { LinearGradient } from "expo-linear-gradient";
+import colors from "../constants/colors";
+
+export default function HomeHeader({ navigation }) {
+  return (
+    <LinearGradient
+      colors={[colors.primaryLight, colors.primaryDark]}
+      style={styles.container}
+    >
+      <View style={styles.subcontainer}>
+        <Text style={styles.headerText}>Audacity Music Club</Text>
+        <Pressable onPress={() => navigation.navigate("Account")}>
+          <Image
+            style={styles.profile}
+            source={require("../assets/placeholder-profile.png")}
+          />
+        </Pressable>
+      </View>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 120,
+    paddingHorizontal: 20,
+    paddingBottom: 10,
+    justifyContent: "flex-end",
+  },
+  subcontainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  headerText: {
+    color: colors.white,
+    fontSize: 20,
+  },
+  profile: {
+    width: 40,
+    height: 40,
+    borderRadius: 100,
+  },
+});

src/components/Logout.js → src/components/LogOutButton.js

@@ -1,16 +1,17 @@
-import { StyleSheet, Text, Pressable } from "react-native";
+import { StyleSheet, Text, Pressable, Alert } from "react-native";
+import colors from "../constants/colors";
 
-export default function Logout() {
+export default function LogOutButton() {
   return (
-    <Pressable style={styles.button}>
+    <Pressable style={styles.button} onPress={() => Alert.alert("Log out")}>
       <Text style={styles.text}> Log Out</Text>
     </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
   button: {
-    backgroundColor: "#d9534f",
+    backgroundColor: colors.danger,
     borderRadius: 10,
     paddingVertical: 10,
     paddingHorizontal: 110,

src/components/Profile.js

@@ -5,11 +5,11 @@ export default function Profile() {
     <View style={styles.background}>
       <Image
         style={styles.image}
-        source={require("./../assets/audacity-music-club.png")}
+        source={require("./../assets/placeholder-profile.png")}
       ></Image>
       <View>
-        <Text style={styles.name}>Rick</Text>
-        <Text style={styles.email}>cat</Text>
+        <Text style={styles.name}>Rick Astley</Text>
+        <Text style={styles.email}>nevergonnagiveyouup@gmail.com</Text>
       </View>
     </View>
   );
@@ -20,16 +20,16 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: "#f5f5f5", // Light grey background color
-    padding: 20,
+    padding: 15,
     borderRadius: 10,
     borderColor: "#e0e0e0",
     borderWidth: 1,
     margin: 10,
   },
   image: {
-    width: 50,
-    height: 50,
-    borderRadius: 25,
+    width: 60,
+    height: 60,
+    borderRadius: 100,
     marginRight: 10,
   },
   name: {

src/constants/colors.js

@@ -1,6 +1,9 @@
 export default {
-  primary: "#007913",
+  primary: "#006000",
+  primaryLight: "#008000",
+  primaryDark: "#004000",
   secondary: "#353535",
+  danger: "#E12504",
   black: "#000",
   white: "#fff",
 };

src/screens/AccountScreen.js

@@ -1,12 +1,13 @@
-import { StyleSheet, Text, View } from "react-native";
-import LogOutButton from "../components/Logout.js";
+import { View } from "react-native";
+
+import LogOutButton from "../components/LogOutButton.js";
 import Profile from "../components/Profile.js";
+
 export default function AccountScreen() {
   return (
     <View>
-      <Text>{"\n\n\n\n\n\n\n"}</Text>
-      <Profile></Profile>
-      <LogOutButton></LogOutButton>
+      <Profile />
+      <LogOutButton />
     </View>
   );
 }