Merge pull request #38 from Etlas-SCU/dev

Dev

Author: 7oSkaaa

.github/workflows/Expo.yaml

@@ -0,0 +1,35 @@
+name: update
+on: push
+
+jobs:
+  update:
+    name: EAS Update
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check for EXPO_TOKEN
+        run: |
+          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
+            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+          cache: yarn
+
+      - name: Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Publish update
+        run: eas update --auto

App.js

@@ -16,6 +16,7 @@ import ForgotPasswordSecond from './Components/ForgetPassword/ForgetPasswordSeco
 import ForgotPasswordThird from './Components/ForgetPassword/ForgetPasswordThird';
 import BestScore from './Components/BestScore/BestScore';
 import EditProfile from './Components/EditProfile/EditProfile';
+import { StatusBar } from 'expo-status-bar';
 
 
 // import the screen
@@ -87,6 +88,11 @@ export default function App() {
     // if the font loaded, return the components
     return (
         <UserProvider>
+            <StatusBar 
+                backgroundColor={'transparent'}
+                barStyle='light-content'
+                translucent={true}
+            />
             <NavigationContainer>
                 <Stack.Navigator screenOptions={{
                     header: () => null,
@@ -95,6 +101,7 @@ export default function App() {
                         open: timingConfig,
                         close: timingConfig,
                     },
+                    headerStatusBarHeight: 0
                 }}
                 >
                     <Stack.Screen name="onBoarding" component={OnBoarding} />

AppStyles.js

@@ -11,7 +11,8 @@ export const styles = StyleSheet.create({
 // dimesnions of the mobile
 export const dimensions = {
     fullHeight: Dimensions.get('window').height,
-    fullWidth: Dimensions.get('window').width
+    fullWidth: Dimensions.get('window').width,
+    fontScale: Dimensions.get("window").fontScale
 }
 
 
@@ -24,10 +25,7 @@ export const UI_dimensions = {
 
 // get the responsive font size
 export const responsiveFontSize = size => {
-    const fontScale = PixelRatio.getFontScale();
-    const getFontSize = size => size / fontScale;
-    const fontSize = getFontSize(size);
-    return Math.round(PixelRatio.roundToNearestPixel(fontSize));
+    return Math.floor(PixelRatio.roundToNearestPixel(size / dimensions.fontScale));
 };
 
 
@@ -94,6 +92,7 @@ export const colors = {
     LightGrey: '#B5B5B5',
     DarkGrey: '#606060',
     Red: '#e24c4b',
+    DarkRed: '#A41350',
     Green: '#0aa06e',
     Blue: '#0000FF',
     Yellow: '#fe9800',

Components/MonumentsCard/MonumentsCard.js Components/ArticleCard/ArticleCard.jsComponents/MonumentsCard/MonumentsCard.js renamed to Components/ArticleCard/ArticleCard.js

@@ -3,9 +3,10 @@ import { View, Text, Image, TouchableOpacity } from "react-native";
 import { translate } from "../../Localization";
 
 
-export default function MonumentsCard({ monument, isPage }) {
+export default function ArticleCard({ navigation, article, screen }) {
 
-    const { Title, Description, Date, Img } = monument;
+    const { Title, Description, Date, Img } = article;
+    const isPage = (screen != 'Home');
 
     return (
         <View style={isPage ? Page.MonumentsCard : Swipper.MonumentsCard}>
@@ -16,7 +17,13 @@ export default function MonumentsCard({ monument, isPage }) {
                 <Text style={isPage ? Page.MonumentsCardDate : Swipper.MonumentsCardDate}>{Date}</Text>
             </View>
             <View style={isPage ? Page.line : Swipper.line} />
-            <TouchableOpacity>
+            <TouchableOpacity
+                onPress={
+                    () => {
+                        navigation.navigate('ArticleDetails', { Article: article, screen: screen })
+                    }
+                }
+            >
                 <Text style={isPage ? Page.learn : Swipper.learn}>{translate('Home.learnmore')}</Text>
             </TouchableOpacity>
         </View>

Components/MonumentsCard/Styles.js Components/ArticleCard/Styles.jsComponents/MonumentsCard/Styles.js renamed to Components/ArticleCard/Styles.js

@@ -0,0 +1,56 @@
+import { View, Text, ScrollView, Image, TouchableOpacity } from "react-native";
+import { styles } from "./Styles";
+import { useState } from "react";
+
+
+export default function ArticleDetails({ navigation, route }) {
+
+    let images_src = Array(5).fill(require('../../assets/TourPage/Tour1.png'));
+    const images = images_src.map((src, idx) => (<Image source={src} style={styles.image} key={idx}/>));
+    
+    // get the parameters needed
+    const { Article, screen } = route.params;
+    const { Title, Date, Img, fullDescription } = Article;
+    
+
+    // get the icons of heart
+    const fav = require('../../assets/ArticleDetails/filled.png');
+    const notFav = require('../../assets/ArticleDetails/notfilled.png');
+
+    // get the icons of heart
+    const [favIcon, setFavIcon] = useState(notFav);
+
+    // change the icon of heart
+    const toggleFav = () => {
+        setFavIcon(fav == favIcon ? notFav : fav);
+    }
+
+    return (
+        <View style={styles.container}>
+            <TouchableOpacity 
+                onPress={() => { navigation.navigate(screen) }}
+            >
+                <Image source={require('../../assets/Scan/Arr.png')} style={styles.back}/>
+            </TouchableOpacity>
+            <Image source={Img} style={styles.upperBox} resizeMode='cover'/>
+            <View style={styles.lowerBox}>
+                <View style={styles.upperFields}>
+                    <View style={styles.txts}>
+                        <Text style={styles.title}>{Title}</Text>
+                        <Text style={styles.date}>{Date}</Text>
+                    </View>
+                    <View style={styles.favouriteConainer}>
+                        <View style={styles.fav}>
+                            <TouchableOpacity onPress={toggleFav}>
+                                <Image source={favIcon} style={styles.favIcon} resizeMode="contain"/>
+                            </TouchableOpacity>
+                        </View>
+                    </View>
+                </View>
+                <ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}>
+                    <Text style={styles.description}>{fullDescription}</Text>
+                </ScrollView>
+            </View>          
+        </View>
+    )
+}

Components/ArticleDetails/ArticleDetails.js

@@ -0,0 +1,74 @@
+import { StyleSheet } from "react-native";
+import { colors, fontFamily, responsiveFontSize, responsiveHeight, responsiveWidth, dimensions } from "../../AppStyles";
+
+export const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: colors.White,
+    },
+    back: {
+        width: responsiveWidth(32),
+        height: responsiveHeight(32),
+        right: responsiveWidth(24),
+        top: responsiveHeight(60),
+        position: 'absolute',
+        tintColor: colors.SolidGrey,
+        zIndex: 999
+    },
+    upperBox: {
+        width: dimensions.fullWidth,
+        height: responsiveHeight(431),
+        zIndex: -1
+    },
+    lowerBox: { 
+        flex: 1,
+        backgroundColor: colors.DarkCyan,
+        borderTopLeftRadius: responsiveWidth(30),
+        borderTopRightRadius: responsiveWidth(30),
+        marginTop: responsiveHeight(-30),
+    },
+    title: {
+        fontFamily: fontFamily.MontserratBold,
+        fontSize: responsiveFontSize(22),
+        color: colors.Gold,
+    },
+    date: {
+        fontFamily: fontFamily.MontserratRegular,
+        fontSize: responsiveFontSize(12),
+        color: colors.White,
+    },
+    scrollView: {
+        marginTop: responsiveHeight(32),
+        marginHorizontal: responsiveWidth(24),
+        paddingBottom: responsiveHeight(150)
+    },
+    description: {
+        fontFamily: fontFamily.MontserratRegular,
+        fontSize: responsiveFontSize(18),
+        color: colors.White,
+    },
+    upperFields: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginHorizontal: responsiveWidth(24),
+        marginTop: responsiveHeight(22),
+    },
+    txts: {
+        gap: responsiveHeight(5)
+    },
+    favouriteConainer: {
+        justifyContent: 'center'
+    },
+    fav: {
+        width: responsiveWidth(64),
+        height: responsiveHeight(64),
+        borderRadius: 20,
+        backgroundColor: colors.DarkRed,
+        justifyContent: 'center',
+    },
+    favIcon: {
+        width: responsiveWidth(39.75),
+        height: responsiveHeight(35.26),
+        alignSelf: 'center',
+    }
+})

Components/ArticleDetails/Styles.js

@@ -3,7 +3,7 @@ import { styles } from "./Styles";
 import { View, ScrollView, Text, TouchableOpacity, Image, TextInput } from "react-native";
 import { translate } from "../../Localization";
 import { colors } from "../../AppStyles";
-import MonumentsCard from "../MonumentsCard/MonumentsCard";
+import ArticleCard from "../ArticleCard/ArticleCard";
 import { UserContext } from "../Context/Context";
 import MainMenu from "../MainMenu/MainMenu";
 import { isIOS } from "../../AppStyles";
@@ -14,18 +14,23 @@ export default function ArticlesPage({ navigation }) {
     const [searchTerm, setSearchTerm] = useState('');
     const { showModal, setScreen } = useContext(UserContext);
 
-    const Monument = {
-        Title: "Anibus",
+    const Article = {
+        Title: "Anubis",
         Description: "Know more about Anubis and his powers.",
         Date: "15 Jan 2023",
-        Img: require('../../assets/HomePage/monument.png')
+        Img: require('../../assets/HomePage/monument.png'),
+        fullDescription: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+        has been the industry's standard dummy text ever since the 1500s, when an unknown
+        printer took a galley of type and scrambled it to make a type specimen book. It has survived
+        not only five centuries, but also the leap into electronic typesetting, remaining essentially
+        unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
     };
 
-    let monumentList = [];
+    let ArticleList = [];
     for (let i = 0; i < 20; i++)
-        monumentList.push(Monument);
+        ArticleList.push(Article);
 
-    const monuments = monumentList.map((monument, idx) => <MonumentsCard monument={monument} key={idx} isPage={true} />);
+    const Articles = ArticleList.map((article, idx) => <ArticleCard article={article} key={idx} navigation={navigation} screen={'ArticlesPage'}/>);
 
     return (
         <View style={styles.container}>
@@ -53,7 +58,7 @@ export default function ArticlesPage({ navigation }) {
                     </TouchableOpacity>
                 </View>
                 <View style={styles.Box}>
-                    {monuments}
+                    {Articles}
                 </View>
             </ScrollView>
         </View>

Components/ArticlesPage/ArticlesPage.js

@@ -37,7 +37,7 @@ export default function ForgotPasswordSecond({ navigation }) {
                 { popupMessageVisible ? <PopupMessage  state={'Error'} message={'Invalid OTP'} /> : null }
                 <OTPTextInput
                     ref={otpInput}
-                    inputCount={6}
+                    inputCount={4}
                     containerStyle={styles.otpInputContainer}
                     textInputStyle={styles.underlineStyleBase}
                     tintColor={colors.LightSeaGreen}

Components/ForgetPassword/ForgetPasswordSecond.js

@@ -86,20 +86,20 @@ export const styles = StyleSheet.create({
     },
     otpInputContainer: {
         marginTop: responsiveHeight(94),
-        marginHorizontal: responsiveWidth(24),
-        width: responsiveWidth(380),    
-        height: responsiveHeight(85)
+        marginHorizontal: responsiveWidth(25),
+        height: responsiveHeight(81)
     },
     underlineStyleBase: {
-        width: responsiveWidth(50),
-        height: responsiveHeight(55),
-        borderRadius: 15,
+        width: responsiveWidth(81),
+        height: responsiveHeight(81),
+        borderRadius: 20,
         backgroundColor: colors.White,
         color: colors.Black,
-        fontSize: responsiveFontSize(20),
+        fontSize: responsiveFontSize(32),
     },
     resend: {
         marginHorizontal: responsiveWidth(24),
+        marginTop: responsiveHeight(19),
     },
     ResendText: {
         fontFamily: fontFamily.MontserratMedium,