aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/common/TaggSquareButton.tsx79
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/screens/onboarding/Login.tsx96
-rw-r--r--src/screens/onboarding/WelcomeScreen.tsx49
4 files changed, 114 insertions, 111 deletions
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
new file mode 100644
index 00000000..4fe61b95
--- /dev/null
+++ b/src/components/common/TaggSquareButton.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+ GestureResponderEvent,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ ViewProps,
+ ViewStyle,
+} from 'react-native';
+import {normalize, SCREEN_WIDTH} 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 buttonStyles = (() => {
+ switch (props.color) {
+ case 'purple':
+ return {backgroundColor: '#8F01FF'};
+ case 'white':
+ default:
+ return {backgroundColor: 'white'};
+ }
+ })();
+ switch (props.mode) {
+ case 'large':
+ return (
+ <TouchableOpacity
+ onPress={props.onPress}
+ style={[styles.largeButton, buttonStyles, props.style]}>
+ <Text style={styles.largeLabel}>{props.title}</Text>
+ </TouchableOpacity>
+ );
+ case 'normal':
+ default:
+ return (
+ <TouchableOpacity
+ onPress={props.onPress}
+ style={[styles.normalButton, buttonStyles, 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,
+ },
+ largeLabel: {
+ fontSize: normalize(26),
+ fontWeight: '500',
+ color: '#eee',
+ },
+ normalButton: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.45,
+ aspectRatio: 3.7,
+ borderRadius: 5,
+ marginBottom: '5%',
+ },
+ normalLabel: {
+ fontSize: normalize(20),
+ fontWeight: '500',
+ color: '#78A0EF',
+ },
+});
+
+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..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, SubmitButton, TaggInput} from '../../components';
-import {
- LOGIN_ENDPOINT,
- TAGG_LIGHT_PURPLE,
- usernameRegex,
-} from '../../constants';
+import {Background, TaggInput, TaggSquareButton} from '../../components';
+import {LOGIN_ENDPOINT, usernameRegex} from '../../constants';
import {
ERROR_DOUBLE_CHECK_CONNECTION,
ERROR_FAILED_LOGIN_INFO,
@@ -215,45 +210,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.
- */
- 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
@@ -300,9 +256,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
ref={inputRef}
/>
<ForgotPassword />
- <LoginButton />
+ <TaggSquareButton
+ onPress={handleLogin}
+ title={'Login'}
+ mode={'normal'}
+ color={'white'}
+ />
+ <TaggSquareButton
+ onPress={startRegistrationProcess}
+ title={'Sign up'}
+ mode={'normal'}
+ color={'purple'}
+ />
</KeyboardAvoidingView>
- <RegistrationPrompt />
</Background>
);
};
@@ -328,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 7e18cb99..bfb1a127 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={'large'}
+ 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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:21:03 +0000