Merge pull request #6 from omer73364/UI

change UI by Omer73364

ios/QuraanReader.xcodeproj/project.pbxproj

@@ -28,6 +28,8 @@
 		A0722FAEB1554FC5B664D926 /* Octicons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 36F0FBAD1B9A413DB5492014 /* Octicons.ttf */; };
 		60E4F801EC964F0DA7157755 /* SimpleLineIcons.ttf in Resources */ = {isa = PBXBuildFile; fileRef = AF3CDB3968AF4FC69F8C24D0 /* SimpleLineIcons.ttf */; };
 		CAB15685159F4F589EF89999 /* Zocial.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 3542E5E74F2549389B4F3D7E /* Zocial.ttf */; };
+		F10EFAD46FFD4DF9AE693DF2 /* Tajawal-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 5AB1206C9B284E80BF7A22D6 /* Tajawal-Bold.ttf */; };
+		D805EE1B39BD402698DB20BE /* Tajawal-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A4ED31ADD64542A5A765EE98 /* Tajawal-Regular.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -68,6 +70,8 @@
 		36F0FBAD1B9A413DB5492014 /* Octicons.ttf */ = {isa = PBXFileReference; name = "Octicons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		AF3CDB3968AF4FC69F8C24D0 /* SimpleLineIcons.ttf */ = {isa = PBXFileReference; name = "SimpleLineIcons.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/SimpleLineIcons.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 		3542E5E74F2549389B4F3D7E /* Zocial.ttf */ = {isa = PBXFileReference; name = "Zocial.ttf"; path = "../node_modules/react-native-vector-icons/Fonts/Zocial.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		5AB1206C9B284E80BF7A22D6 /* Tajawal-Bold.ttf */ = {isa = PBXFileReference; name = "Tajawal-Bold.ttf"; path = "../src/assets/fonts/Tajawal-Bold.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		A4ED31ADD64542A5A765EE98 /* Tajawal-Regular.ttf */ = {isa = PBXFileReference; name = "Tajawal-Regular.ttf"; path = "../src/assets/fonts/Tajawal-Regular.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -176,6 +180,8 @@
 				36F0FBAD1B9A413DB5492014 /* Octicons.ttf */,
 				AF3CDB3968AF4FC69F8C24D0 /* SimpleLineIcons.ttf */,
 				3542E5E74F2549389B4F3D7E /* Zocial.ttf */,
+				5AB1206C9B284E80BF7A22D6 /* Tajawal-Bold.ttf */,
+				A4ED31ADD64542A5A765EE98 /* Tajawal-Regular.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -287,6 +293,8 @@
 				A0722FAEB1554FC5B664D926 /* Octicons.ttf in Resources */,
 				60E4F801EC964F0DA7157755 /* SimpleLineIcons.ttf in Resources */,
 				CAB15685159F4F589EF89999 /* Zocial.ttf in Resources */,
+				F10EFAD46FFD4DF9AE693DF2 /* Tajawal-Bold.ttf in Resources */,
+				D805EE1B39BD402698DB20BE /* Tajawal-Regular.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

ios/QuraanReader/Info.plist

@@ -69,6 +69,8 @@
 		<string>Octicons.ttf</string>
 		<string>SimpleLineIcons.ttf</string>
 		<string>Zocial.ttf</string>
+		<string>Tajawal-Bold.ttf</string>
+		<string>Tajawal-Regular.ttf</string>
 	</array>
 </dict>
 </plist>

react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./src/assets/fonts'],
+};

src/App.js

@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from 'react';
+import {StatusBar, I18nManager} from 'react-native';
 import {NavigationContainer} from '@react-navigation/native';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
 import HomeScreen from './screens/HomeScreen';
@@ -10,9 +11,18 @@ import OfflineScreen from './components/OfflineScreen';
 import SplashScreen from './components/SplashScreen';
 
 import NetInfo from '@react-native-community/netinfo';
+import fonts from './style/fonts';
+import colors from './style/colors';
 
 const Stack = createNativeStackNavigator();
 
+try {
+  I18nManager.allowRTL(true);
+  I18nManager.forceRTL(true);
+} catch (e) {
+  console.log(e);
+}
+
 export default function App() {
   const [connected, setConnected] = useState(false);
   const [refresh, setRefresh] = useState(false);
@@ -29,54 +39,62 @@ export default function App() {
     };
   }, [refresh]);
 
-  if (loading) return <SplashScreen />;
-  if (!connected) return <OfflineScreen setRefresh={setRefresh} />;
+  if (loading) {
+    return <SplashScreen />;
+  }
+  if (!connected) {
+    return <OfflineScreen setRefresh={setRefresh} />;
+  }
   return (
-    <NavigationContainer>
-      <Stack.Navigator
-        screenOptions={{
-          animation: 'fade',
-          headerTitleAlign: 'center',
-          headerShadowVisible: false,
-          headerStyle: {
-            backgroundColor: '#eee',
-          },
-          headerTitleStyle: {
-            fontWeight: 'bold',
-            fontSize: 23,
-          },
-        }}
-        initialRouteName="Home">
-        <Stack.Screen
-          options={{
-            title: 'قارئ القرآن',
-          }}
-          name="Home"
-          component={HomeScreen}
-        />
-        <Stack.Screen name="Reciter" component={ReciterScreen} />
-        <Stack.Screen
-          name="Player"
-          options={{
-            title: '',
-          }}
-          component={PlayerScreen}
-        />
-        <Stack.Screen
-          options={{
-            title: 'قائمة المفضلة',
-          }}
-          name="Favorite"
-          component={FavoriteScreen}
-        />
-        <Stack.Screen
-          options={{
-            title: 'معلومات عن التطبيق',
+    <>
+      <StatusBar backgroundColor={colors.primary} barStyle="light-content" />
+      <NavigationContainer>
+        <Stack.Navigator
+          screenOptions={{
+            animation: 'slide_from_left',
+            headerTitleAlign: 'center',
+            headerShadowVisible: false,
+            headerStyle: {
+              backgroundColor: colors.primary,
+            },
+            headerTitleStyle: {
+              fontSize: 18,
+              fontFamily: fonts.bold,
+              color: '#fff',
+            },
           }}
-          name="Infos"
-          component={InfosScreen}
-        />
-      </Stack.Navigator>
-    </NavigationContainer>
+          initialRouteName="Home">
+          <Stack.Screen
+            options={{
+              title: 'قارئ القرآن',
+            }}
+            name="Home"
+            component={HomeScreen}
+          />
+          <Stack.Screen name="Reciter" component={ReciterScreen} />
+          <Stack.Screen
+            name="Player"
+            options={{
+              title: '',
+            }}
+            component={PlayerScreen}
+          />
+          <Stack.Screen
+            options={{
+              title: 'قائمة المفضلة',
+            }}
+            name="Favorite"
+            component={FavoriteScreen}
+          />
+          <Stack.Screen
+            options={{
+              title: 'معلومات عن التطبيق',
+            }}
+            name="Infos"
+            component={InfosScreen}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </>
   );
 }

src/components/Item.js

@@ -1,22 +1,24 @@
 import {StyleSheet, Text, View, TouchableNativeFeedback} from 'react-native';
 import React from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import fonts from '../style/fonts';
+import colors from '../style/colors';
 
 function Item({onPress, title, subTitle}) {
   return (
     <View style={styles.reciterOuterBox}>
       <TouchableNativeFeedback
         onPress={onPress}
-        background={TouchableNativeFeedback.Ripple('#96D2CB')}
+        background={TouchableNativeFeedback.Ripple(colors.gary + '4f')}
         style={styles.reciterOuterBox}>
+        {/* navigate to reciter screen */}
         <View style={styles.reciterInnerBox}>
-          {/* navigate to reciter screen */}
-          <Ionicons name="chevron-back-circle" size={25} color="#00796B" />
           {/* reciter name */}
-          <View style={{alignItems: 'flex-end'}}>
+          <View style={{alignItems: 'flex-start'}}>
             <Text style={styles.reciterText}>{title}</Text>
-            <Text>{subTitle}</Text>
+            <Text style={styles.subTitle}>{subTitle}</Text>
           </View>
+          <Ionicons name="chevron-back-outline" size={25} color={colors.gary} />
         </View>
       </TouchableNativeFeedback>
     </View>
@@ -30,21 +32,28 @@ const styles = StyleSheet.create({
     width: '100%',
     paddingHorizontal: 20,
     paddingVertical: 15,
-    borderRadius: 15,
+    borderRadius: 12,
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
   reciterOuterBox: {
-    marginBottom: 15,
-    backgroundColor: '#ddd',
-    borderRadius: 15,
+    paddingVertical: 0,
+    backgroundColor: colors.secondary,
+    borderRadius: 8,
     overflow: 'hidden',
+    borderColor: colors.gary + '4f',
+    borderBottomWidth: 1,
   },
   reciterText: {
-    fontSize: 18,
-    color: '#333',
-    fontWeight: 'bold',
+    color: colors.text,
+    fontFamily: fonts.bold,
+    fontSize: 16,
+  },
+  subTitle: {
+    marginTop: 4,
+    fontFamily: fonts.regular,
+    fontSize: 14,
   },
   center: {flex: 1, justifyContent: 'center', alignItems: 'center'},
 });

src/components/OfflineScreen.js

@@ -1,11 +1,14 @@
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {StatusBar, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import React from 'react';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import fonts from '../style/fonts';
+import colors from '../style/colors';
 
 const OfflineScreen = ({setRefresh}) => {
   return (
     <View style={styles.container}>
-      <MaterialCommunityIcons name="wifi-off" size={150} color="#444" />
+      <StatusBar backgroundColor="#fff" barStyle="dark-content" />
+      <MaterialCommunityIcons name="wifi-off" size={120} color={colors.gary} />
       <Text style={styles.text}>الرجاء التحقق من إتصال الأنترنت...</Text>
       <TouchableOpacity onPress={() => setRefresh(prev => !prev)}>
         <Text style={styles.refresh}>إعادة المحاولة</Text>
@@ -19,16 +22,19 @@ export default OfflineScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#eee',
+    backgroundColor: '#fff',
     justifyContent: 'center',
     alignItems: 'center',
   },
   text: {
-    marginTop: 10,
+    marginTop: 20,
+    fontFamily: fonts.regular,
+    color: colors.secondaryText,
   },
   refresh: {
-    color: '#00796B',
+    color: colors.primary,
     marginTop: 10,
     fontSize: 18,
+    fontFamily: fonts.regular,
   },
 });

src/components/Search.js

@@ -1,19 +1,22 @@
 import {StyleSheet, TextInput, View} from 'react-native';
 import React from 'react';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import fonts from '../style/fonts';
+import colors from '../style/colors';
 
 const Search = ({search}) => {
   return (
-    <View style={styles.container}>
+    <>
+      <View style={styles.container} />
       <View style={styles.inputBox}>
         <TextInput
           onChangeText={search}
           style={styles.input}
           placeholder="البحث ..."
         />
-        <Ionicons name="search" size={20} color="gray" />
+        <Ionicons name="search" size={20} color={colors.gary} />
       </View>
-    </View>
+    </>
   );
 };
 
@@ -24,19 +27,33 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 15,
     paddingVertical: 10,
+    borderBottomStartRadius: 12,
+    borderBottomEndRadius: 12,
+    height: 36,
+    backgroundColor: colors.primary,
   },
   inputBox: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    width: '100%',
-    backgroundColor: '#ddd',
-    borderRadius: 15,
-    paddingHorizontal: 15,
-    fontSize: 16,
+    alignSelf: 'center',
+    width: '92%',
+    backgroundColor: '#fff',
+    borderRadius: 50,
+    paddingHorizontal: 12,
+    height: 44,
+    position: 'absolute',
+    top: 12,
+    zIndex: 99,
+    borderColor: colors.primary,
+    // borderWidth: 0.5,
   },
   input: {
-    width: '100%',
+    // width: '100%',
+    flex: 1,
     fontSize: 16,
+    textAlign: 'right',
+    fontFamily: fonts.regular,
+    color: colors.text,
   },
 });

src/components/SplashScreen.js

@@ -1,6 +1,7 @@
 import {Image, StyleSheet, Text, View} from 'react-native';
 import React from 'react';
-const LOGO = require('../assets/logo.png');
+import colors from '../style/colors';
+const LOGO = require('../assets/logow.png');
 const SplashScreen = () => {
   return (
     <View style={styles.container}>
@@ -14,7 +15,7 @@ export default SplashScreen;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#eee',
+    backgroundColor: colors.primary,
     justifyContent: 'center',
     alignItems: 'center',
   },