[TMA-65] Onboarding Link Social Media UI (#29)

* Basic setup for SocialMediaLinker component

* Added social media icons

* Displayed 3 main social components

* Layout components in a row

* Added base Show More/Less button

* Display all 9 socials with Show More button

* Added different font colors for each linker

* Realized that the check doesn't replace the text

* Added type-checking to some constants

* Updated state name

* Fixed Checkpoint.tsx merge issue

* Removed unnecessary path element

* Fixed type issues on Verification.tsx

2 files changed, 111 insertions, 0 deletions

diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
new file mode 100644
index 00000000..f1da8186
--- /dev/null
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableOpacityProps,
+  Text,
+  TouchableOpacity,
+  Image,
+} from 'react-native';
+import {LinkerType} from 'src/types';
+import {SOCIAL_FONT_COLORS} from '../../constants/constants';
+
+interface SocialMediaLinkerProps extends TouchableOpacityProps {
+  social: LinkerType;
+}
+
+const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
+  social: {label},
+}) => {
+  const [state, setState] = React.useState({
+    authenticated: false,
+  });
+
+  const handlePress = () => {
+    setState({
+      ...state,
+      authenticated: !state.authenticated,
+    });
+  };
+
+  switch (label) {
+    case 'Instagram':
+      var icon = require('../../assets/images/instagram-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.INSTAGRAM;
+      break;
+    case 'Facebook':
+      var icon = require('../../assets/images/facebook-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.FACEBOOK;
+      break;
+    case 'Twitter':
+      var icon = require('../../assets/images/twitter-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.TWITTER;
+      break;
+    case 'Twitch':
+      var icon = require('../../assets/images/twitch-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.TWITCH;
+      break;
+    case 'Pinterest':
+      var icon = require('../../assets/images/pinterest-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.PINTEREST;
+      break;
+    case 'Whatsapp':
+      var icon = require('../../assets/images/whatsapp-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.WHATSAPP;
+      break;
+    case 'Linkedin':
+      var icon = require('../../assets/images/linkedin-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.LINKEDIN;
+      break;
+    case 'Snapchat':
+      var icon = require('../../assets/images/snapchat-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.SNAPCHAT;
+      break;
+    case 'Youtube':
+      var icon = require('../../assets/images/youtube-icon.png');
+      var font_color = SOCIAL_FONT_COLORS.YOUTUBE;
+      break;
+    default:
+      var icon = require('../../assets/images/logo.png');
+      var font_color = '#fff';
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={0.7}
+      onPress={handlePress}
+      style={styles.container}>
+      <Image source={icon} style={styles.icon} />
+      <Text style={[styles.label, {color: font_color}]}>{label}</Text>
+      {state.authenticated && (
+        <Image
+          source={require('../../assets/images/link-tick.png')}
+          style={styles.tick}
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '28%',
+    height: '100%',
+    backgroundColor: '#4c409a',
+    borderRadius: 8,
+    marginHorizontal: '2%',
+    marginVertical: '2%',
+    alignItems: 'center',
+  },
+  icon: {
+    top: '15%',
+  },
+  label: {
+    fontWeight: '500',
+    top: '25%',
+  },
+  tick: {
+    top: '30%',
+  },
+});
+export default SocialMediaLinker;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index 31f356d3..627412df 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -7,3 +7,4 @@ export {default as TaggInput} from './TaggInput';
 export {default as TaggBigInput} from './TaggBigInput';
 export {default as TaggDatePicker} from './TaggDatePicker';
 export {default as TaggDropDown} from './TaggDropDown';
+export {default as SocialMediaLinker} from './SocialMediaLinker';