From dbbbcfd6c73979632d42429479f0ce2e5c9987a4 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 9 Feb 2021 13:47:35 -0500
Subject: using centered view, updated TaggSquareButton styles

---
 src/components/common/SocialLinkModal.tsx  | 80 ++++++++++++++----------------
 src/components/common/TaggSquareButton.tsx | 41 ++++++++++-----
 2 files changed, 65 insertions(+), 56 deletions(-)

(limited to 'src/components')

diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index d3bc3945..67a3f074 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -4,6 +4,7 @@ import {TextInput} from 'react-native-gesture-handler';
 import {SocialIcon} from '.';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {normalize, SCREEN_WIDTH} from '../../utils';
+import CenteredView from './CenteredView';
 import TaggSquareButton from './TaggSquareButton';
 
 interface SocialLinkModalProps {
@@ -34,55 +35,46 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
   };
 
   return (
-    <>
-      <View style={styles.centeredView}>
-        <Modal
-          animationType="slide"
-          transparent={true}
-          visible={modalVisible}
-          onRequestClose={() => {}}>
-          <View style={styles.centeredView}>
-            <View style={styles.modalView}>
-              <TouchableOpacity
-                style={styles.closeButton}
-                onPress={onClosePress}>
-                <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
-              </TouchableOpacity>
-              <SocialIcon style={styles.icon} social={social} />
-              <Text style={styles.titleLabel}>{social}</Text>
-              <Text style={styles.descriptionLabel}>
-                Insert your {social.toLowerCase()} username to link your{' '}
-                {social.toLowerCase()} account to your profile!
-              </Text>
-              <TextInput
-                autoCapitalize={'none'}
-                autoCorrect={false}
-                placeholder={'Username'}
-                style={styles.textInput}
-                onChangeText={setUsername}
-                selectionColor={'grey'}
-                value={username}
-              />
-              <TaggSquareButton
-                title={'Submit'}
-                onPress={onSubmit}
-                mode={'gradient'}
-                color={'white'}
-              />
-            </View>
+    <CenteredView>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => {}}>
+        <CenteredView>
+          <View style={styles.modalView}>
+            <TouchableOpacity style={styles.closeButton} onPress={onClosePress}>
+              <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
+            </TouchableOpacity>
+            <SocialIcon style={styles.icon} social={social} />
+            <Text style={styles.titleLabel}>{social}</Text>
+            <Text style={styles.descriptionLabel}>
+              Insert your {social.toLowerCase()} username to link your{' '}
+              {social.toLowerCase()} account to your profile!
+            </Text>
+            <TextInput
+              autoCapitalize={'none'}
+              autoCorrect={false}
+              placeholder={'Username'}
+              style={styles.textInput}
+              onChangeText={setUsername}
+              selectionColor={'grey'}
+              value={username}
+            />
+            <TaggSquareButton
+              title={'Submit'}
+              onPress={onSubmit}
+              mode={'gradient'}
+              color={'white'}
+            />
           </View>
-        </Modal>
-      </View>
-    </>
+        </CenteredView>
+      </Modal>
+    </CenteredView>
   );
 };
 
 const styles = StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   modalView: {
     width: SCREEN_WIDTH * 0.8,
     backgroundColor: 'white',
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 78a90554..817a2690 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -3,6 +3,7 @@ import {
   GestureResponderEvent,
   StyleSheet,
   Text,
+  TextStyle,
   TouchableOpacity,
   ViewProps,
   ViewStyle,
@@ -14,14 +15,16 @@ import {normalize, SCREEN_WIDTH} from '../../utils';
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
-  mode: 'normal' | 'large' | 'gradient';
-  color: 'purple' | 'white';
+  buttonStyle: 'normal' | 'large' | 'gradient';
+  buttonColor: 'purple' | 'white';
+  labelColor: 'white' | 'blue';
   style?: ViewStyle;
+  labelStyle?: TextStyle;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
-  const buttonStyles = (() => {
-    switch (props.color) {
+  const buttonColor = (() => {
+    switch (props.buttonColor) {
       case 'purple':
         return {backgroundColor: TAGG_PURPLE};
       case 'white':
@@ -29,24 +32,37 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
         return {backgroundColor: 'white'};
     }
   })();
-  switch (props.mode) {
+  const labelColor = (() => {
+    switch (props.labelColor) {
+      case 'white':
+        return {color: 'white'};
+      case 'blue':
+      default:
+        return {color: '#78A0EF'};
+    }
+  })();
+  switch (props.buttonStyle) {
     case 'large':
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.largeButton, buttonStyles, props.style]}>
-          <Text style={styles.largeLabel}>{props.title}</Text>
+          style={[styles.largeButton, buttonColor, props.style]}>
+          <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
+            {props.title}
+          </Text>
         </TouchableOpacity>
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress}>
+        <TouchableOpacity onPress={props.onPress} style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
-            <Text style={styles.gradientLabel}>{props.title}</Text>
+            <Text style={[styles.gradientLabel, props.labelStyle]}>
+              {props.title}
+            </Text>
           </LinearGradient>
         </TouchableOpacity>
       );
@@ -55,8 +71,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, buttonStyles, props.style]}>
-          <Text style={styles.normalLabel}>{props.title}</Text>
+          style={[styles.normalButton, buttonColor, props.style]}>
+          <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
+            {props.title}
+          </Text>
         </TouchableOpacity>
       );
   }
@@ -86,7 +104,6 @@ const styles = StyleSheet.create({
   normalLabel: {
     fontSize: normalize(20),
     fontWeight: '500',
-    color: '#78A0EF',
   },
   gradientButton: {
     marginTop: '8%',
-- 
cgit v1.2.3-70-g09d2


From 952eb1b9b58362cc4ead737554872197ae8a89b1 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 9 Feb 2021 14:06:06 -0500
Subject: added actual url to redirect, fixed bug for twitter handle redirect

---
 src/components/taggs/TwitterTaggPost.tsx  | 11 +++++------
 src/screens/onboarding/UpdateRequired.tsx |  8 ++++++--
 2 files changed, 11 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index 0cfde857..834e32ef 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -3,11 +3,7 @@ import {Image, Linking, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import Hyperlink from 'react-native-hyperlink';
 import LinearGradient from 'react-native-linear-gradient';
-import {
-  AVATAR_DIM,
-  TAGGS_GRADIENT,
-  TAGG_LIGHT_BLUE,
-} from '../../constants';
+import {AVATAR_DIM, TAGGS_GRADIENT, TAGG_LIGHT_BLUE} from '../../constants';
 import {TwitterPostType} from '../../types';
 import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
 import {DateLabel, PostCarousel} from '../common';
@@ -94,7 +90,10 @@ const TwitterTaggPost: React.FC<TwitterTaggPostProps> = ({
                       <Text
                         style={styles.replyHandleText}
                         onPress={() =>
-                          openTwitterProfileLink(post.in_reply_to?.handle)
+                          handleOpenSocialUrlOnBrowser(
+                            post.in_reply_to?.handle,
+                            'Twitter',
+                          )
                         }>
                         @{post.in_reply_to.handle}
                       </Text>
diff --git a/src/screens/onboarding/UpdateRequired.tsx b/src/screens/onboarding/UpdateRequired.tsx
index 17fcc6cf..adf7ba71 100644
--- a/src/screens/onboarding/UpdateRequired.tsx
+++ b/src/screens/onboarding/UpdateRequired.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Image, Modal, StyleSheet, View} from 'react-native';
+import {Image, Linking, Modal, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {CenteredView, TaggSquareButton} from '../../components';
 import {normalize, SCREEN_WIDTH} from '../../utils';
@@ -24,7 +24,11 @@ const UpdateRequired: React.FC<UpdateRequiredProps> = ({visible}) => {
           </Text>
           <TaggSquareButton
             title={'Update'}
-            onPress={() => {}}
+            onPress={() => {
+              Linking.openURL(
+                'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613',
+              );
+            }}
             buttonStyle={'normal'}
             buttonColor={'purple'}
             labelColor={'white'}
-- 
cgit v1.2.3-70-g09d2