From bd9ed0712bae14729d18f4d34b891bb82d4550ff Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 1 Feb 2021 17:05:18 -0500 Subject: initial work --- src/screens/onboarding/Login.tsx | 30 +++++++++---------- src/screens/onboarding/WelcomeScreen.tsx | 49 +++++++++++++------------------- 2 files changed, 33 insertions(+), 46 deletions(-) (limited to 'src/screens') 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 = ({navigation}: LoginProps) => { ); - /** - * Login screen login button. - */ - const LoginButton = () => ( - - ); - /** * Login screen registration prompt. */ @@ -300,7 +286,19 @@ const Login: React.FC = ({navigation}: LoginProps) => { ref={inputRef} /> - + + + {/* */} 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 = ({navigation}) => { /> - Welcome to Tagg! + Welcome to TAGG! 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! - - Next - + ); }; @@ -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 From 3797dd4dbabe2d25374c345c2079defb7fa80695 Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/screens') 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 = (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 = (props) => { return ( - {props.title} + style={[styles.largeButton, buttonStyles, props.style]}> + {props.title} ); case 'normal': @@ -41,7 +41,7 @@ const TaggSquareButton: React.FC = (props) => { return ( + style={[styles.normalButton, buttonStyles, props.style]}> {props.title} ); @@ -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 = ({navigation}: LoginProps) => { ); - /** - * Login screen registration prompt. - */ - const RegistrationPrompt = () => ( - - - New to tagg?{' '} - - - - Get started! - - - - ); - return ( = ({navigation}: LoginProps) => { onPress={handleLogin} title={'Login'} mode={'normal'} - color={'purple'} + color={'white'} /> - {/* */} - ); }; @@ -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 = ({navigation}) => { -- cgit v1.2.3-70-g09d2