Merge pull request #25 from ReflectionsProjections/myRP

My rp

Components/VerticalProgressBar.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Colors from "../constants/Colors";
+
+const VerticalProgressBar = ({userPoints = 0}) => {
+    const percentageFilled = userPoints / 50.0; // 50 is the total number of points to earn
+    const totalBoxes = 10;
+    const filledBoxes = Math.trunc(totalBoxes * percentageFilled)
+    // Create an array representing the boxes
+    const boxes = Array(totalBoxes).fill(false).map((_, index) => index < filledBoxes).reverse();
+
+    return (
+        <View style={styles.container}>
+        {boxes.map((isFilled, index) => (
+            <View
+            key={index}
+            style={[
+                styles.box,
+                isFilled ? styles.filledBox : styles.unfilledBox,
+            ]}
+            />
+        ))}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    width: 50,
+    padding: 5,
+    backgroundColor: '#000', // Background similar to the image
+    borderRadius: 4,
+    borderColor: '#00ffff', // Border color matching the image
+    borderWidth: 2,
+  },
+  box: {
+    flex: 1,
+    marginBottom: 4, // Space between boxes
+  },
+  filledBox: {
+    backgroundColor: Colors.TEAL, // Filled box color
+  },
+  unfilledBox: {
+    backgroundColor: 'transparent', // Unfilled box color
+    borderColor: Colors.TEAL, // Border color to match the outline
+    borderWidth: 2,
+  },
+});
+
+export default VerticalProgressBar;

app.json

@@ -8,6 +8,7 @@
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "plugins": [
+      "expo-font",
       [
         "expo-camera",
         {

components/CustomModal.tsx

@@ -23,7 +23,7 @@ const CustomModal = ({
       animationOut="fadeOut"
     >
       <Pressable style={styles.overlay} onPress={onClose}>
-        <View style={styles.content}>
+        <View>
           <EventModal
             title={title}
             location={location}

components/EventModal.tsx

@@ -66,6 +66,7 @@ const styles = StyleSheet.create({
     // marginLeft: 20,
     color: "black",
     fontFamily: "Kufam_700Bold",
+    paddingRight: 25
   },
   info: {
     flexDirection: "row",

constants/Colors.js

@@ -2,6 +2,7 @@ const Colors = {
     WHITE: '#fff',
     BLACK: '#000',
     DARK_BLUE: '#111129',
-    YELLOW: '#FFD05D'
+    YELLOW: '#FFD05D',
+    TEAL: '#00ffff'
 };
 export default Colors;

package.json

@@ -13,6 +13,7 @@
     "@expo-google-fonts/inter": "^0.2.3",
     "@expo-google-fonts/kufam": "^0.2.3",
     "@expo-google-fonts/press-start-2p": "^0.2.3",
+    "@expo-google-fonts/press-start-2p": "^0.2.3",
     "@gluestack-style/react": "^1.0.52",
     "@gluestack-ui/config": "^1.1.18",
     "@gluestack-ui/themed": "^1.1.30",
@@ -30,7 +31,7 @@
     "expo": "latest",
     "expo-app-loading": "^2.1.1",
     "expo-camera": "^15.0.11",
-    "expo-dev-client": "^4.0.20",
+    "expo-font": "~12.0.9",
     "expo-linking": "^6.3.1",
     "expo-splash-screen": "~0.27.5",
     "expo-status-bar": "~1.12.1",

redux/state.ts

@@ -4,7 +4,7 @@ import { AuthActionTypes, SET_TOKEN, SET_ROLES, SET_ATTENDEE, SET_QRCODE, LOGOUT
 const initialState: State = {
   user_id: null,
   token: null,
-  roles: null,
+  roles: [],
   attendee: null,
   qrCodeURL: null,
   isAuthenticated: false,

screens/Login.tsx

@@ -35,19 +35,19 @@ const Login: React.FC<LoginProps> = ({ navigation }) => {
 
   const handleLoginPress = () => {
     navigation.navigate("Main");
-    // WebBrowser.openAuthSessionAsync(
-    //   `${authUrl}?redirect_uri=${redirectURL}`,
-    //   redirectURL
-    // )
-    //   .then((result) => {
-    //     if (result.type === "success") {
-    //       Linking.openURL(result.url);
-    //     }
-    //   })
-    //   .catch((err) => {
-    //     console.error("Failed to open URL:", err.message);
-    //     alert("Failed to open URL");
-    //   });
+  //   WebBrowser.openAuthSessionAsync(
+  //     `${authUrl}?redirect_uri=${redirectURL}`,
+  //       redirectURL
+  //   )
+  //   .then((result) => {
+  //     if (result.type === "success") {
+  //     Linking.openURL(result.url);
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     console.error("Failed to open URL:", err.message);
+  //     alert("Failed to open URL");
+  //   });
   };
 
   return (