Finish standardizing styles for login and onboarding

calblueprint · Feb 2, 2024 · 805f9c0 · 805f9c0
1 parent d25197e
commit 805f9c0
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 45 deletions.
diff --git a/src/app/auth/login/index.tsx b/src/app/auth/login/index.tsx
@@ -10,6 +10,7 @@ import StyledButton from '../../../components/StyledButton/StyledButton';
 import UserStringInput from '../../../components/UserStringInput/UserStringInput';
 import { isEmailUsed, queryEmailByUsername } from '../../../queries/auth';
 import globalStyles from '../../../styles/globalStyles';
+import colors from '../../../styles/colors';
 import { useSession } from '../../../utils/AuthContext';
 
 function LoginScreen() {
@@ -68,13 +69,14 @@ function LoginScreen() {
   return (
     <SafeAreaView style={[globalStyles.authContainer, styles.flex]}>
       <View>
-        <Text style={styles.title}>{'Read stories from \nyoung creators'}</Text>
+        <Text style={[globalStyles.h1, styles.title]}>{'Read stories from \nyoung creators'}</Text>
 
         <UserStringInput
           placeholder="Email or Username"
           label="Email or Username"
           onChange={setEmailOrUsername}
           value={emailOrUsername}
+          placeholderTextColor={colors.darkGrey}
           attributes={{
             textContentType: 'emailAddress',
           }}
@@ -84,6 +86,7 @@ function LoginScreen() {
           placeholder="Password"
           onChange={setPassword}
           value={password}
+          placeholderTextColor={colors.darkGrey}
           attributes={{
             textContentType: 'password',
             secureTextEntry: passwordTextHidden,
@@ -97,10 +100,10 @@ function LoginScreen() {
           />
         </UserStringInput>
 
-        <Link style={styles.forgotPassword} href="/auth/forgotPassword">
+        <Link style={[globalStyles.bodyUnderline, styles.forgotPassword]} href="/auth/forgotPassword">
           Forgot password?
         </Link>
-        {error && <Text style={styles.error}>{error}</Text>}
+        {error && <Text style={globalStyles.errorMessage}>{error}</Text>}
       </View>
 
       <View>
@@ -112,9 +115,9 @@ function LoginScreen() {
           />
         </View>
 
-        <Text style={styles.redirectText}>
+        <Text style={[globalStyles.body1, styles.redirectText]}>
           Don&apos;t have an account?{' '}
-          <Link style={styles.link} href="/auth/signup">
+          <Link style={globalStyles.bodyBoldUnderline} href="/auth/signup">
             Sign Up
           </Link>
         </Text>

diff --git a/src/app/auth/login/styles.tsx b/src/app/auth/login/styles.tsx
@@ -1,16 +1,13 @@
 import { StyleSheet } from 'react-native';
+import colors from '../../../styles/colors';
 
 export default StyleSheet.create({
   flex: {
     justifyContent: 'space-between',
   },
   forgotPassword: {
-    fontFamily: 'Manrope-Regular',
-    fontSize: 12,
-    textDecorationLine: 'underline',
     paddingTop: 18,
     paddingBottom: 16,
-    fontWeight: '400',
   },
   link: {
     fontWeight: '700',
@@ -22,15 +19,9 @@ export default StyleSheet.create({
     marginBottom: 64,
   },
   title: {
-    fontFamily: 'Manrope-Bold',
     lineHeight: 33,
     paddingTop: 64,
     marginBottom: 28,
-    fontSize: 24,
-    // fontWeight: '700',
-  },
-  error: {
-    color: 'red',
   },
   icon: {
     paddingRight: 10,

diff --git a/src/app/auth/signup/index.tsx b/src/app/auth/signup/index.tsx
@@ -163,51 +163,55 @@ function SignUpScreen() {
     >
       <ScrollView
         showsVerticalScrollIndicator={false}
-        // bounces={false}
         contentContainerStyle={styles.flex}
       >
         <View style={styles.inputs}>
-          <Text style={styles.title}>
+          <Text style={[globalStyles.h1, styles.title]}>
             {'Read stories from \nyoung creators'}
           </Text>
 
           <UserStringInput
             placeholder="Username"
             label="Username"
+            placeholderTextColor={colors.darkGrey}
             onChange={setAndCheckUsername}
             value={username}
           />
           {usernameError && (
-            <Text style={styles.inputError}>{usernameError}</Text>
+            <Text style={[globalStyles.errorMessage, styles.inputError]}>{usernameError}</Text>
           )}
 
           <UserStringInput
             placeholder="First Name"
             label="First Name"
+            placeholderTextColor={colors.darkGrey}
             onChange={setFirstName}
             value={firstName}
           />
           <UserStringInput
             placeholder="Last Name"
             label="Last Name"
+            placeholderTextColor={colors.darkGrey}
             onChange={setLastName}
             value={lastName}
           />
           <UserStringInput
             placeholder="Email"
             label="Email"
+            placeholderTextColor={colors.darkGrey}
             onChange={setAndCheckEmail}
             value={email}
             attributes={{
               textContentType: 'emailAddress',
               secureTextEntry: false,
             }}
           />
-          {emailError && <Text style={styles.inputError}>{emailError}</Text>}
+          {emailError && <Text style={[globalStyles.errorMessage, styles.inputError]}>{emailError}</Text>}
 
           <UserStringInput
             placeholder="Password"
             label="Password"
+            placeholderTextColor={colors.darkGrey}
             onChange={text => {
               setPassword(text);
               checkPassword(text);
@@ -232,6 +236,7 @@ function SignUpScreen() {
             <Icon type={hasUppercase ? 'green_check' : 'grey_dot'} />
             <Text
               style={[
+                globalStyles.errorMessage,
                 styles.passwordErrorText,
                 hasUppercase
                   ? { color: colors.textGreen }
@@ -247,6 +252,7 @@ function SignUpScreen() {
             <Icon type={hasLowercase ? 'green_check' : 'grey_dot'} />
             <Text
               style={[
+                globalStyles.errorMessage,
                 styles.passwordErrorText,
                 hasLowercase
                   ? { color: colors.textGreen }
@@ -262,6 +268,7 @@ function SignUpScreen() {
             <Icon type={hasNumber ? 'green_check' : 'grey_dot'} />
             <Text
               style={[
+                globalStyles.errorMessage,
                 styles.passwordErrorText,
                 hasNumber
                   ? { color: colors.textGreen }
@@ -277,6 +284,7 @@ function SignUpScreen() {
             <Icon type={hasLength ? 'green_check' : 'grey_dot'} />
             <Text
               style={[
+                globalStyles.errorMessage,
                 styles.passwordErrorText,
                 hasLength
                   ? { color: colors.textGreen }
@@ -303,9 +311,9 @@ function SignUpScreen() {
               onPress={signUpWithEmail}
             />
           </View>
-          <Text style={styles.redirectText}>
+          <Text style={[globalStyles.body1, styles.redirectText]}>
             Already have an account?{' '}
-            <Link style={styles.link} href="/auth/login">
+            <Link style={globalStyles.bodyBoldUnderline} href="/auth/login">
               Log In
             </Link>
           </Text>

diff --git a/src/app/auth/signup/styles.tsx b/src/app/auth/signup/styles.tsx
@@ -7,7 +7,6 @@ export default StyleSheet.create({
     justifyContent: 'space-between',
   },
   inputError: {
-    color: 'red',
     marginTop: 8,
   },
   link: {
@@ -20,10 +19,8 @@ export default StyleSheet.create({
     marginTop: 16,
   },
   title: {
-    fontSize: 24,
     paddingTop: 64,
     marginBottom: 23,
-    fontWeight: '700',
   },
   icon: {
     marginRight: 10,
@@ -34,7 +31,6 @@ export default StyleSheet.create({
     paddingBottom: 8,
   },
   passwordErrorText: {
-    fontSize: 12,
     marginLeft: 8,
   },
   verticallySpaced: {

diff --git a/src/app/settings/styles.tsx b/src/app/settings/styles.tsx
@@ -16,15 +16,15 @@ export default StyleSheet.create({
     alignSelf: 'stretch',
   },
   subheading: {
-    fontFamily: 'Manrope',
+    fontFamily: 'Manrope-Regular',
     fontSize: 18,
     fontStyle: 'normal',
     fontWeight: '700',
     paddingBottom: 16,
   },
   heading: {
     paddingBottom: 24,
-    fontFamily: 'Manrope',
+    fontFamily: 'Manrope-Regular',
     fontSize: 24,
     fontStyle: 'normal',
     fontWeight: '700',
@@ -44,7 +44,7 @@ export default StyleSheet.create({
   },
   label: {
     fontSize: 12,
-    fontFamily: 'Manrope',
+    fontFamily: 'Manrope-Regular',
     fontStyle: 'normal',
     fontWeight: '400',
   },

diff --git a/src/components/StyledButton/StyledButton.tsx b/src/components/StyledButton/StyledButton.tsx
@@ -1,5 +1,6 @@
 import { Button } from 'react-native-elements';
 
+import globalStyles from '../../styles/globalStyles';
 import styles from './styles';
 
 type StyledButtonProps = {
@@ -13,7 +14,7 @@ function StyledButton({ disabled, onPress, text }: StyledButtonProps) {
     <Button
       disabledStyle={styles.disabledStyle}
       buttonStyle={styles.buttonStyle}
-      disabledTitleStyle={styles.disabledTitleStyle}
+      disabledTitleStyle={[globalStyles.button2, styles.disabledTitleStyle]}
       titleStyle={styles.titleStyle}
       title={text}
       disabled={disabled}

diff --git a/src/components/StyledButton/styles.tsx b/src/components/StyledButton/styles.tsx
@@ -12,15 +12,11 @@ export default StyleSheet.create({
     backgroundColor: colors.gwnOrange,
   },
   disabledTitleStyle: {
-    fontSize: 21,
-    fontWeight: '400',
     paddingHorizontal: 24,
     paddingVertical: 10,
     color: 'white',
   },
   titleStyle: {
-    fontSize: 21,
-    fontWeight: '400',
     paddingHorizontal: 24,
     paddingVertical: 10,
     color: 'white',

diff --git a/src/components/UserStringInput/UserStringInput.tsx b/src/components/UserStringInput/UserStringInput.tsx
@@ -2,6 +2,8 @@ import { ReactNode } from 'react';
 import { View, Text, TextInput } from 'react-native';
 
 import styles from './styles';
+import globalStyles from '../../styles/globalStyles';
+import colors from '../../styles/colors';
 
 type UserStringInputProps = {
   placeholder: string;
@@ -10,6 +12,7 @@ type UserStringInputProps = {
   children?: ReactNode;
   label?: string;
   labelColor?: string;
+  placeholderTextColor?: string;
   onChange?: (text: string) => any;
 };
 
@@ -20,20 +23,22 @@ export default function UserStringInput({
   label,
   children,
   labelColor = '#000',
-  onChange = _ => {},
+  placeholderTextColor = '#000',
+  onChange = _ => { },
 }: UserStringInputProps) {
+
   return (
     <View style={styles.mt16}>
       {label && (
-        <Text style={{ color: labelColor, ...styles.label }}>{label}</Text>
+        <Text style={{ ...globalStyles.subtext, color: labelColor }}>{label}</Text>
       )}
       <View style={[styles.container, styles.verticallySpaced]}>
         <TextInput
           onChange={e => onChange(e.nativeEvent.text)}
           value={value ?? ''}
-          style={styles.inputField}
+          style={[styles.inputField, globalStyles.body1]}
           placeholder={placeholder}
-          placeholderTextColor="#000"
+          placeholderTextColor={placeholderTextColor}
           {...attributes}
         />
         {children}

diff --git a/src/components/UserStringInput/styles.tsx b/src/components/UserStringInput/styles.tsx
@@ -5,12 +5,6 @@ export default StyleSheet.create({
     marginTop: 16,
     width: '100%',
   },
-  label: {
-    fontSize: 12,
-    fontStyle: 'normal',
-    fontWeight: '400',
-    fontFamily: 'Manrope-Regular',
-  },
   container: {
     paddingRight: 10,
     marginTop: 8,

diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -6,7 +6,8 @@ const colors = {
   lime: '#ACC073',
   melanin: '#703929',
   citrus: '#E66E3F',
-  moss: '5A7906',
+  moss: '#5A7906',
+  error: '#EB563B',
 
   // Neutrals
   black: '#000000',

diff --git a/src/styles/globalStyles.ts b/src/styles/globalStyles.ts
@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import colors from './colors';
 
 export default StyleSheet.create({
   container: {
@@ -106,7 +107,7 @@ export default StyleSheet.create({
     color: 'black',
   },
   button2: {
-    fontFamily: 'Manrope-Semibold',
+    fontFamily: 'Manrope-Regular',
     fontSize: 21,
     textAlign: 'left',
     color: 'black',
@@ -122,6 +123,12 @@ export default StyleSheet.create({
     fontFamily: 'Manrope-Semibold',
     fontSize: 12,
     textAlign: 'left',
+    color: colors.error,
+  },
+  test: { // TODO: Remove when done testing styles
+    fontFamily: 'Avenir',
+    fontSize: 12,
+    textAlign: 'left',
     color: 'black',
   },