From 3797dd4dbabe2d25374c345c2079defb7fa80695 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 2 Feb 2021 19:02:55 -0500
Subject: adjusted styling

---
 src/components/common/TaggSquareButton.tsx | 29 ++++++------
 src/screens/onboarding/Login.tsx           | 76 +++---------------------------
 src/screens/onboarding/WelcomeScreen.tsx   |  2 +-
 3 files changed, 21 insertions(+), 86 deletions(-)

(limited to 'src')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 41e0b891..4fe61b95 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -7,7 +7,7 @@ import {
   ViewProps,
   ViewStyle,
 } from 'react-native';
-import {normalize} from '../../utils';
+import {normalize, SCREEN_WIDTH} from '../../utils';
 
 interface TaggSquareButtonProps extends ViewProps {
   onPress: (event: GestureResponderEvent) => void;
@@ -18,13 +18,13 @@ interface TaggSquareButtonProps extends ViewProps {
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
-  const color = (() => {
+  const buttonStyles = (() => {
     switch (props.color) {
       case 'purple':
-        return '#8F01FF';
+        return {backgroundColor: '#8F01FF'};
       case 'white':
       default:
-        return 'white';
+        return {backgroundColor: 'white'};
     }
   })();
   switch (props.mode) {
@@ -32,8 +32,8 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
-          <Text style={styles.normalLabel}>{props.title}</Text>
+          style={[styles.largeButton, buttonStyles, props.style]}>
+          <Text style={styles.largeLabel}>{props.title}</Text>
         </TouchableOpacity>
       );
     case 'normal':
@@ -41,7 +41,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       return (
         <TouchableOpacity
           onPress={props.onPress}
-          style={[styles.normalButton, {backgroundColor: color}, props.style]}>
+          style={[styles.normalButton, buttonStyles, props.style]}>
           <Text style={styles.normalLabel}>{props.title}</Text>
         </TouchableOpacity>
       );
@@ -55,25 +55,24 @@ const styles = StyleSheet.create({
     width: '70%',
     height: '10%',
     borderRadius: 5,
-    // marginBottom: '15%',
   },
   largeLabel: {
-    fontSize: normalize(30),
+    fontSize: normalize(26),
     fontWeight: '500',
-    color: '#ddd',
+    color: '#eee',
   },
   normalButton: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: '70%',
-    height: '10%',
+    width: SCREEN_WIDTH * 0.45,
+    aspectRatio: 3.7,
     borderRadius: 5,
-    // marginBottom: '15%',
+    marginBottom: '5%',
   },
   normalLabel: {
-    fontSize: normalize(24),
+    fontSize: normalize(20),
     fontWeight: '500',
-    color: '#ddd',
+    color: '#78A0EF',
   },
 });
 
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 833e36cb..2db039c1 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -11,16 +11,11 @@ import {
   StyleSheet,
   Text,
   TouchableOpacity,
-  View,
 } from 'react-native';
 import SplashScreen from 'react-native-splash-screen';
 import {useDispatch} from 'react-redux';
 import {Background, TaggInput, TaggSquareButton} from '../../components';
-import {
-  LOGIN_ENDPOINT,
-  TAGG_LIGHT_PURPLE,
-  usernameRegex,
-} from '../../constants';
+import {LOGIN_ENDPOINT, usernameRegex} from '../../constants';
 import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_FAILED_LOGIN_INFO,
@@ -215,31 +210,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
     </TouchableOpacity>
   );
 
-  /**
-   * Login screen registration prompt.
-   */
-  const RegistrationPrompt = () => (
-    <View style={styles.newUserContainer}>
-      <Text
-        accessible={true}
-        accessibilityLabel="New to tagg?"
-        style={styles.newUser}>
-        New to tagg?{' '}
-      </Text>
-      <TouchableOpacity
-        accessibilityLabel="Get started."
-        accessibilityHint="Select this if you do not have a tagg account">
-        <Text
-          accessible={true}
-          accessibilityLabel="Get started"
-          style={styles.getStarted}
-          onPress={startRegistrationProcess}>
-          Get started!
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-
   return (
     <Background
       centered
@@ -290,17 +260,15 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           onPress={handleLogin}
           title={'Login'}
           mode={'normal'}
-          color={'purple'}
+          color={'white'}
         />
         <TaggSquareButton
-          onPress={handleLogin}
-          title={'Login'}
+          onPress={startRegistrationProcess}
+          title={'Sign up'}
           mode={'normal'}
-          color={'white'}
+          color={'purple'}
         />
-        {/* <LoginButton /> */}
       </KeyboardAvoidingView>
-      <RegistrationPrompt />
     </Background>
   );
 };
@@ -326,44 +294,12 @@ const styles = StyleSheet.create({
     paddingBottom: '1%',
     left: '3%',
     borderBottomColor: 'white',
+    marginBottom: '8%',
   },
   forgotPasswordText: {
     fontSize: normalize(14),
     color: '#fff',
   },
-  start: {
-    width: 144,
-    height: 36,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderRadius: 18,
-    marginBottom: '15%',
-  },
-  startDisabled: {
-    backgroundColor: '#ddd',
-  },
-  startText: {
-    fontSize: 16,
-    color: '#78a0ef',
-    fontWeight: 'bold',
-  },
-  newUserContainer: {
-    flexDirection: 'row',
-    color: '#fff',
-  },
-  newUser: {
-    fontSize: 14,
-    color: TAGG_LIGHT_PURPLE,
-  },
-  getStarted: {
-    fontSize: 14,
-    color: '#fff',
-    textDecorationLine: 'underline',
-  },
-  button: {
-    marginVertical: '10%',
-  },
 });
 
 export default Login;
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 541ca512..bfb1a127 100644
--- a/src/screens/onboarding/WelcomeScreen.tsx
+++ b/src/screens/onboarding/WelcomeScreen.tsx
@@ -39,7 +39,7 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
       <TaggSquareButton
         onPress={handleNext}
         title={'Next'}
-        mode={'normal'}
+        mode={'large'}
         color={'purple'}
         style={styles.nextButton}
       />
-- 
cgit v1.2.3-70-g09d2