Merge pull request #43 from AudacityMusic/new-navbar-home

Revamp navbar and Home screen
AudacityMusic · Jul 13, 2024 · 1845624 · 1845624
2 parents 6e48438 + 3340aa4
commit 1845624
Show file tree

Hide file tree

Showing 14 changed files with 250 additions and 231 deletions.
diff --git a/App.js b/App.js
@@ -1,29 +1,58 @@
 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 SignInScreen from "./src/screens/SignInScreen";
+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();
 
 export default function App() {
   return (
-    // <NavigationContainer>
-    //   <Stack.Navigator initialRouteName="Other Info">
-    //     <Stack.Screen name="Home" component={HomeScreen} />
-    //     <Stack.Screen name="Donate" component={DonateScreen} />
-    //     <Stack.Screen name="Websites" component={WebsitesScreen} />
-    //     <Stack.Screen name="Other Info" component={OtherInfoScreen} />
-    //   </Stack.Navigator>
-    // </NavigationContainer>
-    // <SignInScreen></SignInScreen>
-    <OtherInfoScreen></OtherInfoScreen>
+    <NavigationContainer>
+      <StatusBar style="light" />
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{
+          headerStyle: {
+            backgroundColor: colors.primary,
+          },
+          headerTintColor: colors.white,
+        }}
+      >
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{
+            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} />
+        <Stack.Screen
+          name="Volunteer Opportunity"
+          component={VolunteerOpportunityScreen}
+          options={{
+            title: null,
+            headerStyle: {
+              backgroundColor: colors.black,
+            },
+          }}
+        />
+        <Stack.Screen name="Volunteer Form" component={VolunteerFormScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
   );
 }
diff --git a/src/assets/placeholder-profile.png b/src/assets/placeholder-profile.png
diff --git a/src/components/Heading.js b/src/components/Heading.js
@@ -0,0 +1,12 @@
+import { StyleSheet, Text } from "react-native";
+
+export default function Heading({ children }) {
+  return <Text style={styles.heading}>{children}</Text>;
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});
diff --git a/src/components/HomeHeader.js b/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,
+  },
+});
diff --git a/src/components/Logout.js → src/components/LogOutButton.js b/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,

diff --git a/src/components/OtherOpportunities.js b/src/components/OtherOpportunities.js
@@ -1,42 +1,33 @@
-import React from "react";
 import { View, Text, StyleSheet, Image, Pressable } from "react-native";
 
 export default function OtherOpportunities() {
   return (
-    <View>
-      <Text style={styles.header}>Other Opportunities</Text>
-      <View style={styles.cardContainer}>
-        <Pressable style={[styles.card, styles.first]}>
-          <Image
-            style={styles.icon}
-            source={require("./../assets/music-note.png")}
-          />
-          <Text style={styles.text}>Request a Concert</Text>
-          <Image
-            style={styles.arrow}
-            source={require("./../assets/caret-left.png")}
-          />
-        </Pressable>
-        <View style={styles.divider} />
-        <Pressable style={[styles.card, styles.last]}>
-          <Image style={styles.icon} source={require("./../assets/gift.png")} />
-          <Text style={styles.text}>Make a Donation</Text>
-          <Image
-            style={styles.arrow}
-            source={require("./../assets/caret-left.png")}
-          />
-        </Pressable>
-      </View>
+    <View style={styles.cardContainer}>
+      <Pressable style={[styles.card, styles.first]}>
+        <Image
+          style={styles.icon}
+          source={require("./../assets/music-note.png")}
+        />
+        <Text style={styles.text}>Request a Concert</Text>
+        <Image
+          style={styles.arrow}
+          source={require("./../assets/caret-left.png")}
+        />
+      </Pressable>
+      <View style={styles.divider} />
+      <Pressable style={[styles.card, styles.last]}>
+        <Image style={styles.icon} source={require("./../assets/gift.png")} />
+        <Text style={styles.text}>Make a Donation</Text>
+        <Image
+          style={styles.arrow}
+          source={require("./../assets/caret-left.png")}
+        />
+      </Pressable>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  header: {
-    fontSize: 16,
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
   cardContainer: {
     backgroundColor: "#f5f5f5",
     borderRadius: 10,

diff --git a/src/components/Profile.js b/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: {

diff --git a/src/components/SignUpButton.js b/src/components/SignUpButton.js
@@ -1,4 +1,5 @@
 import { StyleSheet, Text, View, Image } from "react-native";
+import colors from "../constants/colors";
 
 export default function SignUpButton() {
   return (
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
     borderRadius: 15,
     height: 59,
     width: 145,
-    backgroundColor: "#007913",
+    backgroundColor: colors.primary,
   },
 
   backText: {

diff --git a/src/components/VolunteerOpportunity.js b/src/components/VolunteerOpportunity.js
@@ -1,62 +1,61 @@
-import React from "react";
 import { View, Text, StyleSheet, Image, Pressable } from "react-native";
 
-export default function VolunteerOpportunity(props) {
+export default function VolunteerOpportunity({ navigation }) {
   return (
-    <View style={styles.background}>
+    <Pressable
+      style={styles.container}
+      onPress={() => navigation.navigate("Volunteer Opportunity")}
+    >
       <Image
         style={styles.image}
         source={require("./../assets/warm-springs-bart.png")}
       />
       <View>
-        <Pressable>
-          <Text style={styles.title}>Library Music Hour</Text>
-          <Text style={styles.info}>
-            <Image
-              style={styles.icon}
-              source={require("./../assets/clock.png")}
-            />
-            Saturday, August 10, 2024 2:30 PM
-          </Text>
-          <Text style={styles.info}>
-            <Image
-              style={styles.icon}
-              source={require("./../assets/location.png")}
-            />
-            Fremont Main Library
-          </Text>
-        </Pressable>
+        <Text style={styles.title}>Library Music Hour</Text>
+        <Text style={styles.info}>
+          <Image
+            style={styles.icon}
+            source={require("./../assets/clock.png")}
+          />
+          Saturday, August 10, 2024 2:30 PM
+        </Text>
+        <Text style={styles.info}>
+          <Image
+            style={styles.icon}
+            source={require("./../assets/location.png")}
+          />
+          Fremont Main Library
+        </Text>
       </View>
       <Image
         style={styles.caret}
         source={require("./../assets/caret-left.png")}
       />
-    </View>
+    </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
-  background: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
     backgroundColor: "#f5f5f5",
-    borderTopRightRadius: 10,
-    borderBottomRightRadius: 10,
-    borderBottomLeftRadius: 1005,
+    borderTopRightRadius: 50,
+    borderBottomRightRadius: 50,
+    borderBottomLeftRadius: 1000,
     borderTopLeftRadius: 1000,
-
     borderColor: "#e0e0e0",
     borderWidth: 1,
-    margin: 10,
+    marginBottom: 10,
   },
   image: {
     width: 80,
     height: 80,
     marginRight: 10,
-    borderTopRightRadius: 1,
-    borderBottomRightRadius: 1,
-    borderBottomLeftRadius: 10,
-    borderTopLeftRadius: 10,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 15,
+    borderTopLeftRadius: 15,
   },
   title: {
     fontSize: 20,

diff --git a/src/components/Websites.js b/src/components/Websites.js
@@ -0,0 +1,9 @@
+import { StyleSheet, Text } from "react-native";
+
+export default function Websites() {
+  return <Text>TODO</Text>;
+}
+
+const styles = StyleSheet.create({
+  // TODO
+});
diff --git a/src/constants/colors.js b/src/constants/colors.js
@@ -0,0 +1,9 @@
+export default {
+  primary: "#006000",
+  primaryLight: "#008000",
+  primaryDark: "#004000",
+  secondary: "#353535",
+  danger: "#E12504",
+  black: "#000",
+  white: "#fff",
+};
diff --git a/src/screens/AccountScreen.js b/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>
   );
 }