ui improvements

MLSA-Sanins · May 28, 2021 · 3828221 · 3828221
1 parent b98ac17
commit 3828221
Show file tree

Hide file tree

Showing 17 changed files with 147 additions and 293 deletions.
diff --git a/assets/png/contact.png → src/assets/png/contact.png b/assets/png/contact.png → src/assets/png/contact.png
diff --git a/assets/png/map.png → src/assets/png/map.png b/assets/png/map.png → src/assets/png/map.png
diff --git a/assets/png/search.png → src/assets/png/search.png b/assets/png/search.png → src/assets/png/search.png
diff --git a/src/assets/png/user.png b/src/assets/png/user.png
diff --git a/assets/png/welcome.png → src/assets/png/welcome.png b/assets/png/welcome.png → src/assets/png/welcome.png
diff --git a/src/components/AppNavigationHeader.js b/src/components/AppNavigationHeader.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import {scale, verticalScale} from 'react-native-size-matters';
+import {Image} from 'react-native';
 
 const HeaderView = styled.View`
   padding-left: ${scale(10)}px;

diff --git a/src/components/FacebookButton.js b/src/components/FacebookButton.js
@@ -3,17 +3,22 @@ import {StyleSheet} from 'react-native';
 import {width, height} from '../utils/dimensions';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
-import {ScaledSheet,scale,verticalScale,moderateScale} from 'react-native-size-matters';
+import {useSelector} from 'react-redux';
+import {
+  ScaledSheet,
+  scale,
+  verticalScale,
+  moderateScale,
+} from 'react-native-size-matters';
 
 const FbButton = styled.TouchableOpacity`
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: ${props => props.theme.AUTH_BACKGROUND_COLOR};
   border-radius: ${verticalScale(20)}px;
-  border-width: ${moderateScale(1)}px;
-  border-color: #e5e5e5;
+  border-width: ${moderateScale(2)}px;
+  border-color: ${props => props.theme.AUTH_BORDER_COLOR};
 `;
 
 export default function FacebookButton({onPress, ...rest}) {

diff --git a/src/components/GoogleButton.js b/src/components/GoogleButton.js
@@ -3,17 +3,22 @@ import {StyleSheet} from 'react-native';
 import Icon from 'react-native-vector-icons/AntDesign';
 import {width, height} from '../utils/dimensions';
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
-import {ScaledSheet,scale,verticalScale,moderateScale} from 'react-native-size-matters';
+import {useSelector} from 'react-redux';
+import {
+  ScaledSheet,
+  scale,
+  verticalScale,
+  moderateScale,
+} from 'react-native-size-matters';
 
 const Google = styled.TouchableOpacity`
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: ${props => props.theme.AUTH_BACKGROUND_COLOR};
   border-radius: ${verticalScale(20)}px;
-  border-width: ${moderateScale(1)}px;
-  border-color: #e5e5e5;
+  border-width: ${moderateScale(2)}px;
+  border-color: ${props => props.theme.AUTH_BORDER_COLOR};
 `;
 export default function GoogleButton({onPress, ...rest}) {
   const theme = useSelector(state => state.themes.theme);

diff --git a/src/pages/HomeScreen/ProviderSection.js b/src/pages/HomeScreen/ProviderSection.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, PixelRatio, FlatList} from 'react-native';
+import {StyleSheet, PixelRatio, FlatList, ImageBackground} from 'react-native';
 import {
   ProviderView,
   ProfileCard,
@@ -12,9 +12,11 @@ import {
   ProviderAddress,
   ProviderHeader,
   ContactNumber,
+  ImgSubstitute,
 } from './styles';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import {connect} from 'react-redux';
+import {width, height} from '../../utils/dimensions';
 
 const ProviderSection = ({
   theme,
@@ -53,10 +55,8 @@ const ProviderSection = ({
                         source={profile}
                       />
                     ) : (
-                      <AntDesign
-                        name="user"
-                        size={30}
-                        color={theme.PRIMARY_TEXT_COLOR}
+                      <ImgSubstitute
+                        source={require('../../assets/png/user.png')}
                       />
                     )}
                   </CardImgContainer>
@@ -91,10 +91,8 @@ const ProviderSection = ({
                         source={profile}
                       />
                     ) : (
-                      <AntDesign
-                        name="user"
-                        size={30}
-                        color={theme.PRIMARY_TEXT_COLOR}
+                      <ImgSubstitute
+                        source={require('../../assets/png/user.png')}
                       />
                     )}
                   </CardImgContainer>

diff --git a/src/pages/HomeScreen/index.js b/src/pages/HomeScreen/index.js
@@ -1,5 +1,5 @@
 import React, {useContext, useState} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, Image} from 'react-native';
 import {HomeView, MapView, MapImage} from './styles';
 import ProfileSection from './ProfileSection';
 import DistanceSection from './DistanceSection';

diff --git a/src/pages/HomeScreen/styles.js b/src/pages/HomeScreen/styles.js
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import {height, width} from '../../utils/dimensions';
 import {scale, verticalScale, moderateScale} from 'react-native-size-matters';
+import {PixelRatio} from 'react-native';
 
 export const ImgContainer = styled.View`
   width: ${verticalScale(height * 0.08)}px;
@@ -27,7 +28,7 @@ export const ProfileName = styled.Text`
   left: ${scale(width * 0.22)}px;
   position: absolute;
   top: -${verticalScale(20)}px;
-  font-size: ${verticalScale(18)}px;
+  font-size: ${verticalScale(15)}px;
   line-height: ${verticalScale(20)}px;
   font-family: Montserrat-Regular;
 `;
@@ -93,10 +94,12 @@ export const ProfileCard = styled.View`
   margin-bottom: ${verticalScale(20)}px;
   width: ${width * 0.9}px;
   height: auto;
-  /* background-color: ${props => props.theme.SECONDARY_COLOR}; */
-  background-color: gray;
+  align-items: stretch;
+  background-color: ${props => props.theme.CARD_BACKGROUND_COLOR};
   border-radius: ${verticalScale(20)}px;
   flex-direction: row;
+  border-width: ${verticalScale(2)}px;
+  border-color: ${props => props.theme.CARD_BORDER_COLOR};
 `;
 
 export const ImgView = styled.View`
@@ -108,14 +111,14 @@ export const CardImgContainer = styled.View`
   width: ${scale(80)}px;
   height: ${scale(80)}px;
   border-radius: ${verticalScale(40)}px;
-  background-color: ${props => props.theme.PRIMARY_BACKGROUND_COLOR};
+  /* background-color: ${props => props.theme.PRIMARY_BACKGROUND_COLOR}; */
   /* position: absolute; */
   margin-left: ${scale(10)}px;
   margin-top: ${verticalScale(10)}px;
   margin-bottom: ${verticalScale(10)}px;
   justify-content: center;
-  border-color: ${props => props.theme.PRIMARY_TEXT_COLOR};
-  border-width: ${verticalScale(1)}px;
+  /* border-color: ${props => props.theme.PRIMARY_TEXT_COLOR}; */
+  /* border-width: ${verticalScale(1)}px; */
   align-items: center;
 `;
 
@@ -125,6 +128,12 @@ export const ImgThumbnail = styled.Image`
   border-radius: ${verticalScale(40)}px;
 `;
 
+export const ImgSubstitute = styled.Image`
+  width: ${PixelRatio.getPixelSizeForLayoutSize(40)}px;
+  height: ${PixelRatio.getPixelSizeForLayoutSize(40)}px;
+  /* border-radius: ${verticalScale(40)}px; */
+`;
+
 export const CardDescription = styled.View`
   flex: 1;
   border-radius: ${verticalScale(10)}px;

diff --git a/src/pages/OnboardingScreen/index.js b/src/pages/OnboardingScreen/index.js
@@ -152,7 +152,7 @@ const OnboardingScreen = ({navigation}) => {
       <View style={styles.slide}>
         <View style={styles.imgView}>
           <Image
-            source={require('../../../assets/png/search.png')}
+            source={require('../../assets/png/search.png')}
             style={styles.img}
           />
         </View>
@@ -173,7 +173,7 @@ const OnboardingScreen = ({navigation}) => {
       <View style={styles.slide}>
         <View style={styles.imgView}>
           <Image
-            source={require('../../../assets/png/contact.png')}
+            source={require('../../assets/png/contact.png')}
             style={styles.img}
           />
         </View>
@@ -195,7 +195,7 @@ const OnboardingScreen = ({navigation}) => {
       <View style={styles.slide}>
         <View style={styles.imgView}>
           <Image
-            source={require('../../../assets/png/map.png')}
+            source={require('../../assets/png/map.png')}
             style={styles.img}
           />
         </View>
@@ -217,7 +217,7 @@ const OnboardingScreen = ({navigation}) => {
       <View style={styles.slide}>
         <View style={styles.imgView}>
           <Image
-            source={require('../../../assets/png/welcome.png')}
+            source={require('../../assets/png/welcome.png')}
             style={styles.img}
           />
         </View>

diff --git a/src/pages/ProfileScreen/index.js b/src/pages/ProfileScreen/index.js
@@ -1,12 +1,16 @@
-import React, {useContext} from 'react';
+import React, {useContext, useState} from 'react';
 import {
   StyleSheet,
   Text,
   Button,
   View,
   PixelRatio,
   Touchable,
+  ImageBackground,
   TouchableOpacity,
+  Modal,
+  Alert,
+  Pressable,
 } from 'react-native';
 import {Screen} from '../../components/Screen';
 import AppNavigationHeader from '../../components/AppNavigationHeader';
@@ -16,7 +20,8 @@ import {connect} from 'react-redux';
 import {AuthContext} from '../../context/AuthProvider';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import {useSelector} from 'react-redux';
-import { height, width } from '../../utils/dimensions';
+import {height, width} from '../../utils/dimensions';
+import {BlurView} from '@react-native-community/blur';
 import {
   ProfileView,
   ImgContainer,
@@ -31,6 +36,7 @@ import {
 
 const ProfileScreen = ({navigation, switchTheme, userData}) => {
   const theme = useSelector(state => state.themes.theme);
+  const [modalVisible, setModalVisible] = useState(false);
   const {logout} = useContext(AuthContext);
   const size = height * 0.2;
   //calculating right dimension to be fetched
@@ -59,6 +65,25 @@ const ProfileScreen = ({navigation, switchTheme, userData}) => {
         <></>
       </AppNavigationHeader>
       <ProfileView>
+        {/* <Modal
+          animationType="slide"
+          transparent={true}
+          visible={modalVisible}
+          onRequestClose={() => {
+            Alert.alert('Modal has been closed.');
+            setModalVisible(!modalVisible);
+          }}>
+          <View style={styles.centeredView}>
+            <View style={styles.modalView}>
+              <Text style={styles.modalText}>Hello World!</Text>
+              <Pressable
+                style={[styles.button, styles.buttonClose]}
+                onPress={() => setModalVisible(!modalVisible)}>
+                <Text style={styles.textStyle}>Hide Modal</Text>
+              </Pressable>
+            </View>
+          </View>
+        </Modal> */}
         <ImgContainer style={styles.ImgContainer}>
           {userData.photoURL ? (
             <ProfileThumbnail progressiveRenderingEnabled source={profile} />
@@ -68,18 +93,15 @@ const ProfileScreen = ({navigation, switchTheme, userData}) => {
         </ImgContainer>
         <PaddingView />
         <UserName>{userData.displayName}</UserName>
-
         <StatsView>
-          {/* <StatsSection>
-            <TouchableOpacity onPress={() => navigation.navigate('Maps')}>
-              <AntDesign
-                name="setting"
-                size={25}
-                backgroundColor={theme.STATS_VIEW_COLOR}
-                color={theme.FORM_INPUT_TEXT_COLOR}
-              />
-            </TouchableOpacity>
-          </StatsSection> */}
+          <StatsSection onPress={() => setModalVisible(true)}>
+            <AntDesign
+              name="setting"
+              size={25}
+              backgroundColor={theme.STATS_VIEW_COLOR}
+              color={theme.FORM_INPUT_TEXT_COLOR}
+            />
+          </StatsSection>
           <StatsSection onPress={() => switchThemes()}>
             <AntDesign
               name="bulb1"
@@ -125,4 +147,53 @@ const styles = StyleSheet.create({
   ImgContainer: {
     elevation: 5,
   },
+  absolutes: {
+    width: 200,
+    height: 100,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // centeredView: {
+  //   flex: 1,
+  //   justifyContent: 'center',
+  //   alignItems: 'center',
+  //   marginTop: 22,
+  // },
+  // modalView: {
+  //   margin: 20,
+  //   width:200,
+  //   backgroundColor: 'white',
+  //   borderRadius: 20,
+  //   padding: 35,
+  //   alignItems: 'center',
+  //   shadowColor: '#000',
+  //   shadowOffset: {
+  //     width: 0,
+  //     height: 2,
+  //   },
+  //   shadowOpacity: 0.25,
+  //   shadowRadius: 4,
+  //   elevation: 5,
+  // },
+  // button: {
+  //   borderRadius: 20,
+  //   padding: 10,
+  //   elevation: 2,
+  // },
+  // buttonOpen: {
+  //   backgroundColor: '#F194FF',
+  // },
+  // buttonClose: {
+  //   backgroundColor: '#2196F3',
+  // },
+  // textStyle: {
+  //   color: 'white',
+  //   fontWeight: 'bold',
+  //   textAlign: 'center',
+  // },
+  // modalText: {
+  //   marginBottom: 15,
+  //   textAlign: 'center',
+  // },
 });
diff --git a/src/pages/ProfileScreen/styles.js b/src/pages/ProfileScreen/styles.js
@@ -36,7 +36,7 @@ export const PaddingView = styled.View`
 export const UserName = styled.Text`
   font-size: ${moderateScale(20)}px;
   line-height: ${verticalScale(20)}px;
-  font-weight: bold;
+  font-weight: 800;
   font-family: Montserrat-Regular;
   color: ${props => props.theme.PRIMARY_TEXT_COLOR};
 `;

diff --git a/src/redux/actions/locationActions.js b/src/redux/actions/locationActions.js
@@ -92,7 +92,15 @@ export const fecthLocationAndAddress = () => async (dispatch, getState) => {
       },
     });
   } catch (e) {
-    console.log(e);
+    // console.log(e);
+    dispatch({
+      type: ADDRESS_LOADED,
+      payload: {
+        latitude: 28.63409,
+        longitude: 77.21693,
+        address: 'Delhi, DL, India',
+      },
+    });
     dispatch({type: LOCATION_ERROR, payload: e});
     dispatch(getErrors(e));
   }