added icons (#139)

Co-authored-by: Ashm Walia <40498934+ashmgarv@users.noreply.github.com>

2 files changed, 60 insertions, 43 deletions

diff --git a/src/components/onboarding/TaggInput.tsx b/src/components/onboarding/TaggInput.tsx
index fe11d4f0..12d99325 100644
--- a/src/components/onboarding/TaggInput.tsx
+++ b/src/components/onboarding/TaggInput.tsx
@@ -6,7 +6,6 @@ interface TaggInputProps extends TextInputProps {
   valid?: boolean;
   invalidWarning?: string;
   attemptedSubmit?: boolean;
-  width?: number | string;
 }
 /**
  * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
@@ -15,7 +14,7 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
   return (
     <View style={styles.container}>
       <TextInput
-        style={[{width: props.width}, styles.input]}
+        style={styles.input}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
@@ -35,11 +34,11 @@ const TaggInput = React.forwardRef((props: TaggInputProps, ref: any) => {
 
 const styles = StyleSheet.create({
   container: {
-    width: '100%',
     alignItems: 'center',
     marginVertical: 11,
   },
   input: {
+    width: '100%',
     minWidth: '60%',
     height: 40,
     fontSize: 16,
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 97c58177..22c83985 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -23,6 +23,7 @@ import {
   TaggDropDown,
   BirthDatePicker,
   TabsGradient,
+  SocialIcon,
 } from '../../components';
 import ImagePicker from 'react-native-image-crop-picker';
 import {
@@ -70,7 +71,6 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
     if (needsUpdate) {
       dispatch(loadUserData({userId, username}));
     }
-
   }, [dispatch, needsUpdate, userId, username]);
 
   const [isCustomGender, setIsCustomGender] = React.useState<boolean>(
@@ -428,7 +428,6 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
                     invalidWarning={
                       'Website must be a valid link to your website'
                     }
-                    width={280}
                     value={form.website}
                   />
                   <TaggBigInput
@@ -492,46 +491,54 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
                     />
                   )}
                   {snapchat !== '' && (
-                    <TaggInput
-                      accessibilityHint="Snapchat Username"
-                      accessibilityLabel="Snapchat Username Input Field."
-                      attemptedSubmit={form.attemptedSubmit}
-                      autoCapitalize="none"
-                      autoCompleteType="off"
-                      autoCorrect={false}
-                      blurOnSubmit={false}
-                      enablesReturnKeyAutomatically={true}
-                      invalidWarning={'Please enter something!'}
-                      onChangeText={handleSnapchatUpdate}
-                      onSubmitEditing={Keyboard.dismiss}
-                      placeholder="Snapchat Username"
-                      returnKeyType="done"
-                      textContentType="none"
-                      valid={form.isValidSnapchat}
-                      value={form.snapchat && form.snapchat}
-                      width={280}
-                    />
+                    <View style={styles.row}>
+                      <SocialIcon social={'Snapchat'} style={styles.icon} />
+                      <View style={styles.taggInput}>
+                        <TaggInput
+                          accessibilityHint="Snapchat Username"
+                          accessibilityLabel="Snapchat Username Input Field."
+                          attemptedSubmit={form.attemptedSubmit}
+                          autoCapitalize="none"
+                          autoCompleteType="off"
+                          autoCorrect={false}
+                          blurOnSubmit={false}
+                          enablesReturnKeyAutomatically={true}
+                          invalidWarning={'Please enter something!'}
+                          onChangeText={handleSnapchatUpdate}
+                          onSubmitEditing={Keyboard.dismiss}
+                          placeholder="Username"
+                          returnKeyType="done"
+                          textContentType="none"
+                          valid={form.isValidSnapchat}
+                          value={form.snapchat && form.snapchat}
+                        />
+                      </View>
+                    </View>
                   )}
                   {tiktok !== '' && (
-                    <TaggInput
-                      accessibilityHint="TikTok Username"
-                      accessibilityLabel="TikTok Username Input Field."
-                      attemptedSubmit={form.attemptedSubmit}
-                      autoCapitalize="none"
-                      autoCompleteType="off"
-                      autoCorrect={false}
-                      blurOnSubmit={false}
-                      enablesReturnKeyAutomatically={true}
-                      invalidWarning={'Please enter something!'}
-                      onChangeText={handleTikTokUpdate}
-                      onSubmitEditing={Keyboard.dismiss}
-                      placeholder="TikTok Username"
-                      returnKeyType="done"
-                      textContentType="none"
-                      valid={form.isValidTiktok}
-                      value={form.tiktok}
-                      width={280}
-                    />
+                    <View style={styles.row}>
+                      <SocialIcon social={'TikTok'} style={styles.icon} />
+                      <View style={styles.taggInput}>
+                        <TaggInput
+                          accessibilityHint="TikTok Username"
+                          accessibilityLabel="TikTok Username Input Field."
+                          attemptedSubmit={form.attemptedSubmit}
+                          autoCapitalize="none"
+                          autoCompleteType="off"
+                          autoCorrect={false}
+                          blurOnSubmit={false}
+                          enablesReturnKeyAutomatically={true}
+                          invalidWarning={'Please enter something!'}
+                          onChangeText={handleTikTokUpdate}
+                          onSubmitEditing={Keyboard.dismiss}
+                          placeholder="Username"
+                          returnKeyType="done"
+                          textContentType="none"
+                          valid={form.isValidTiktok}
+                          value={form.tiktok}
+                        />
+                      </View>
+                    </View>
                   )}
                 </View>
               </View>
@@ -625,6 +632,17 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     paddingLeft: 13,
   },
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  icon: {
+    aspectRatio: 1,
+    flex: 1,
+  },
+  taggInput: {flex: 6.5, marginLeft: '3%'},
 });
 
 export default EditProfile;