From bd9ed0712bae14729d18f4d34b891bb82d4550ff Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Mon, 1 Feb 2021 17:05:18 -0500
Subject: initial work

---
 src/components/common/TaggSquareButton.tsx | 80 ++++++++++++++++++++++++++++++
 src/components/common/index.ts             |  1 +
 src/screens/onboarding/Login.tsx           | 30 ++++++-----
 src/screens/onboarding/WelcomeScreen.tsx   | 49 +++++++-----------
 4 files changed, 114 insertions(+), 46 deletions(-)
 create mode 100644 src/components/common/TaggSquareButton.tsx

(limited to 'src')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
new file mode 100644
index 00000000..41e0b891
--- /dev/null
+++ b/src/components/common/TaggSquareButton.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  GestureResponderEvent,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import {normalize} from '../../utils';
+
+interface TaggSquareButtonProps extends ViewProps {
+  onPress: (event: GestureResponderEvent) => void;
+  title: string;
+  mode: 'normal' | 'large';
+  color: 'purple' | 'white';
+  style?: ViewStyle;
+}
+
+const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
+  const color = (() => {
+    switch (props.color) {
+      case 'purple':
+        return '#8F01FF';
+      case 'white':
+      default:
+        return 'white';
+    }
+  })();
+  switch (props.mode) {
+    case 'large':
+      return (
+        <TouchableOpacity
+          onPress={props.onPress}
+          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
+          <Text style={styles.normalLabel}>{props.title}</Text>
+        </TouchableOpacity>
+      );
+    case 'normal':
+    default:
+      return (
+        <TouchableOpacity
+          onPress={props.onPress}
+          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
+          <Text style={styles.normalLabel}>{props.title}</Text>
+        </TouchableOpacity>
+      );
+  }
+};
+
+const styles = StyleSheet.create({
+  largeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+    // marginBottom: '15%',
+  },
+  largeLabel: {
+    fontSize: normalize(30),
+    fontWeight: '500',
+    color: '#ddd',
+  },
+  normalButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: '10%',
+    borderRadius: 5,
+    // marginBottom: '15%',
+  },
+  normalLabel: {
+    fontSize: normalize(24),
+    fontWeight: '500',
+    color: '#ddd',
+  },
+});
+
+export default TaggSquareButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 61c7fa26..a5718c1e 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -20,3 +20,4 @@ export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer';
 export {default as TaggPopUp} from './TaggPopup';
 export {default as TaggPrompt} from './TaggPrompt';
 export {default as AcceptDeclineButtons} from './AcceptDeclineButtons';
+export {default as TaggSquareButton} from './TaggSquareButton';
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 63296ede..833e36cb 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -15,7 +15,7 @@ import {
 } from 'react-native';
 import SplashScreen from 'react-native-splash-screen';
 import {useDispatch} from 'react-redux';
-import {Background, SubmitButton, TaggInput} from '../../components';
+import {Background, TaggInput, TaggSquareButton} from '../../components';
 import {
   LOGIN_ENDPOINT,
   TAGG_LIGHT_PURPLE,
@@ -215,20 +215,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     </TouchableOpacity>
   );
 
-  /**
-   * Login screen login button.
-   */
-  const LoginButton = () => (
-    <SubmitButton
-      text="Let's Start!"
-      color="#fff"
-      style={styles.button}
-      accessibilityLabel="Let's Start!"
-      accessibilityHint="Select this after entering your tagg username and password"
-      onPress={handleLogin}
-    />
-  );
-
   /**
    * Login screen registration prompt.
    */
@@ -300,7 +286,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           ref={inputRef}
         />
         <ForgotPassword />
-        <LoginButton />
+        <TaggSquareButton
+          onPress={handleLogin}
+          title={'Login'}
+          mode={'normal'}
+          color={'purple'}
+        />
+        <TaggSquareButton
+          onPress={handleLogin}
+          title={'Login'}
+          mode={'normal'}
+          color={'white'}
+        />
+        {/* <LoginButton /> */}
       </KeyboardAvoidingView>
       <RegistrationPrompt />
     </Background>
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 7e18cb99..541ca512 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -1,10 +1,10 @@
+import {StackNavigationProp} from '@react-navigation/stack';
 import * as React from 'react';
-import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-import {Background} from '../../components';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {Background, TaggSquareButton} from '../../components';
 import {OnboardingStackParams} from '../../routes';
-import {StackNavigationProp} from '@react-navigation/stack';
 import {BackgroundGradientType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
 
 type WelcomeScreenNavigationProps = StackNavigationProp<
   OnboardingStackParams,
@@ -29,16 +29,20 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
       />
 
       <View>
-        <Text style={styles.header}>Welcome to Tagg!</Text>
+        <Text style={styles.header}>Welcome to TAGG!</Text>
         <Text style={styles.subtext}>
           Tagg is the new social networking platform for you! It will help you
           create your own personalized digital space where you can express who
           you are, along with all the moments that comprehensively define you!
         </Text>
       </View>
-      <TouchableOpacity onPress={handleNext} style={styles.nextButton}>
-        <Text style={styles.nextButtonLabel}>Next</Text>
-      </TouchableOpacity>
+      <TaggSquareButton
+        onPress={handleNext}
+        title={'Next'}
+        mode={'normal'}
+        color={'purple'}
+        style={styles.nextButton}
+      />
     </Background>
   );
 };
@@ -53,44 +57,29 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: '10%',
   },
   image: {
-    width: SCREEN_WIDTH * 0.9,
-    height: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH,
+    height: SCREEN_WIDTH,
   },
   header: {
     color: '#fff',
-    fontSize: normalize(28),
-    fontWeight: '700',
+    fontSize: 32,
+    fontWeight: '600',
     textAlign: 'center',
     marginBottom: '4%',
     marginHorizontal: '10%',
   },
   subtext: {
     color: '#fff',
-    fontSize: normalize(17),
-    fontWeight: '500',
+    fontSize: 16,
+    fontWeight: '600',
     textAlign: 'center',
-    marginBottom: '10%',
+    marginBottom: '15%',
     marginHorizontal: '10%',
-    lineHeight: normalize(25),
   },
   nextButton: {
-    backgroundColor: '#8F01FF',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '70%',
-    height: '10%',
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#8F01FF',
     marginBottom: '15%',
   },
-  nextButtonLabel: {
-    fontSize: normalize(20),
-    fontWeight: '700',
-    color: '#ddd',
-  },
 });
 export default WelcomeScreen;
-- 
cgit v1.2.3-70-g09d2