aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/images/welcome.pngbin304406 -> 415560 bytes
-rw-r--r--src/components/common/TaggSquareButton.tsx79
-rw-r--r--src/components/common/index.ts1
-rw-r--r--src/components/profile/ProfileBody.tsx6
-rw-r--r--src/screens/onboarding/Login.tsx109
-rw-r--r--src/screens/onboarding/WelcomeScreen.tsx31
6 files changed, 116 insertions, 110 deletions
diff --git a/src/assets/images/welcome.png b/src/assets/images/welcome.png
index 46ab4f9f..62b46077 100644
--- a/src/assets/images/welcome.png
+++ b/src/assets/images/welcome.png
Binary files differ
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/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 1ee3ae2b..f2d75519 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -179,9 +179,8 @@ const styles = StyleSheet.create({
height: SCREEN_WIDTH * 0.075,
borderColor: TAGG_LIGHT_BLUE,
borderWidth: 2,
- borderRadius: 0,
+ borderRadius: 3,
marginRight: '2%',
- marginLeft: '1%',
padding: 0,
backgroundColor: 'transparent',
},
@@ -205,9 +204,8 @@ const styles = StyleSheet.create({
padding: 0,
borderWidth: 2,
borderColor: TAGG_LIGHT_BLUE,
- borderRadius: 0,
+ borderRadius: 3,
marginRight: '2%',
- marginLeft: '1%',
backgroundColor: TAGG_LIGHT_BLUE,
},
});
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index 8974e000..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,
@@ -31,7 +26,7 @@ import {
import {OnboardingStackParams} from '../../routes/onboarding';
import {fcmService} from '../../services';
import {BackgroundGradientType, UserType} from '../../types';
-import {userLogin} from '../../utils';
+import {normalize, userLogin} from '../../utils';
type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
type VerificationScreenNavigationProp = StackNavigationProp<
@@ -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>
);
};
@@ -322,46 +288,17 @@ const styles = StyleSheet.create({
marginBottom: '10%',
},
forgotPassword: {
- marginTop: 10,
- marginBottom: 15,
+ alignSelf: 'flex-start',
+ marginVertical: '1%',
+ borderBottomWidth: 1,
+ paddingBottom: '1%',
+ left: '3%',
+ borderBottomColor: 'white',
+ marginBottom: '8%',
},
forgotPasswordText: {
- fontSize: 14,
+ fontSize: normalize(14),
color: '#fff',
- textDecorationLine: 'underline',
- },
- 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%',
},
});
diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx
index 96d3f929..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 {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,
@@ -36,9 +36,13 @@ const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
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>
);
};
@@ -75,20 +79,7 @@ const styles = StyleSheet.create({
marginHorizontal: '10%',
},
nextButton: {
- backgroundColor: '#8F01FF',
- justifyContent: 'center',
- alignItems: 'center',
- width: '70%',
- height: '10%',
- borderRadius: 5,
- borderWidth: 1,
- borderColor: '#8F01FF',
marginBottom: '15%',
},
- nextButtonLabel: {
- fontSize: 30,
- fontWeight: '500',
- color: '#ddd',
- },
});
export default WelcomeScreen;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:13:32 +0000