From 7fd3d9f6c4297747512f2bea69a11268ffa35f08 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Mon, 8 Feb 2021 19:01:32 -0800
Subject: Created barebones view of suggested people page

---
 .../suggestedPeople/SuggestedPeopleScreen.tsx      | 146 +++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 src/screens/suggestedPeople/SuggestedPeopleScreen.tsx

(limited to 'src/screens/suggestedPeople/SuggestedPeopleScreen.tsx')

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
new file mode 100644
index 00000000..01698ac5
--- /dev/null
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import {
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Image} from 'react-native-animatable';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TabsGradient} from '../../components';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {normalize} from '../../utils';
+
+/**
+ * Bare bones for suggested people consisting of:
+ * * Image, title, name, username, add friend button [w/o functionality]
+ */
+
+const SuggestedPeopleScreen: React.FC = () => {
+  // Can be removed once firstname, username props are received
+  const firstName = 'Sarah';
+
+  // Adviced to maintain username as a variable here to append @ symbol for maintainability
+  const username = '@' + 'sarahmiller';
+
+  return (
+    <>
+      <SafeAreaView>
+        <StatusBar barStyle={'light-content'} />
+        <Image
+          // !!! Displaying Sarah Miller's image
+          source={require('../../assets/images/sarah_miller_full.jpeg')}
+          style={styles.image}
+        />
+        <View style={styles.mainContainer}>
+          <Text style={styles.title}>Suggested People</Text>
+          <View style={styles.body}>
+            {/* Added first row contaning name, username, add button (w/o functionality) */}
+            <View style={styles.addUserContainer}>
+              <View style={styles.nameInfoContainer}>
+                <Text style={styles.firstName}>{firstName}</Text>
+                <Text style={styles.username}>{username}</Text>
+              </View>
+              <TouchableOpacity
+                activeOpacity={0.5}
+                onPress={() => console.log('Call add friend function')}>
+                <View style={styles.addButton}>
+                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            {/* TODO: Add TaggsBar here */}
+            {/* TODO: Add MutualFriends here */}
+          </View>
+        </View>
+        <TabsGradient />
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flexDirection: 'column',
+    width: SCREEN_WIDTH * 0.9,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    marginHorizontal: '5%',
+  },
+  image: {
+    position: 'absolute',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    zIndex: 0,
+  },
+  title: {
+    zIndex: 1,
+    paddingTop: '3%',
+    alignSelf: 'center',
+    fontSize: normalize(22),
+    lineHeight: normalize(26),
+    fontWeight: '800',
+    letterSpacing: normalize(3),
+    color: '#FFFEFE',
+    textShadowColor: 'rgba(0, 0, 0, 0.4)',
+    textShadowOffset: {width: normalize(2), height: normalize(2)},
+    textShadowRadius: normalize(2),
+  },
+  firstName: {
+    color: '#fff',
+    fontWeight: '800',
+    fontSize: normalize(24),
+    lineHeight: normalize(29),
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: {width: normalize(2), height: normalize(2)},
+    textShadowRadius: normalize(2),
+    letterSpacing: normalize(2.5),
+    alignSelf: 'baseline',
+  },
+  username: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    textShadowColor: 'rgba(0, 0, 0, 0.3)',
+    textShadowOffset: {width: normalize(2), height: normalize(2)},
+    textShadowRadius: normalize(2),
+    letterSpacing: normalize(2),
+  },
+  nameInfoContainer: {},
+  addButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.3,
+    height: SCREEN_WIDTH * 0.085,
+    padding: 0,
+    borderWidth: 2,
+    borderColor: '#fff',
+    borderRadius: 1,
+    marginLeft: '1%',
+    marginTop: '4%',
+    shadowColor: 'rgb(0, 0, 0)',
+    shadowRadius: 2,
+    shadowOffset: {width: 2, height: 2},
+    shadowOpacity: 0.5,
+  },
+  addButtonTitle: {
+    color: 'white',
+    padding: 0,
+    fontSize: normalize(15),
+    lineHeight: normalize(18),
+    fontWeight: 'bold',
+    textAlign: 'center',
+    letterSpacing: normalize(1),
+  },
+  addUserContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+  },
+  body: {},
+});
+
+export default SuggestedPeopleScreen;
-- 
cgit v1.2.3-70-g09d2

