[refactor] simplify global style names.

calblueprint · May 15, 2024 · 3c3e991 · 3c3e991
1 parent 1d165ca
commit 3c3e991
Show file tree

Hide file tree

Showing 23 changed files with 129 additions and 183 deletions.
diff --git a/src/app/(Authentication)/Login/Email/index.tsx b/src/app/(Authentication)/Login/Email/index.tsx
@@ -7,7 +7,7 @@ import { ButtonBlack } from '../../../../Components/AuthButton/AuthButton';
 import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 import { emailExists } from '../../../../supabase/queries/auth';
 
 export default function LoginScreen() {
@@ -35,11 +35,11 @@ export default function LoginScreen() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Please enter your email address.</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={email}
             onChangeInput={onChangeEmail}
@@ -51,13 +51,13 @@ export default function LoginScreen() {
           />
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>
             {errorExists ? errorMessage : ' '}
           </Text>
         </View>
 
-        <View style={inputScreenStyles.inlineInputContainer}>
+        <View style={input.inlineInputContainer}>
           <TouchableOpacity
             onPress={() => router.push('/OTPFlow/OTPEmailInput')}
           >

diff --git a/src/app/(Authentication)/Login/Password/index.tsx b/src/app/(Authentication)/Login/Password/index.tsx
@@ -8,7 +8,7 @@ import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { useSession } from '../../../../context/AuthContext';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 
 export default function LoginScreen() {
   const { email } = useLocalSearchParams() as unknown as { email: string };
@@ -40,11 +40,11 @@ export default function LoginScreen() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Please enter your password.</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={password}
             onChangeInput={onChangePassword}
@@ -56,13 +56,13 @@ export default function LoginScreen() {
           />
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>
             {errorExists ? errorMessage : ' '}
           </Text>
         </View>
 
-        <View style={inputScreenStyles.inlineInputContainer}>
+        <View style={input.inlineInputContainer}>
           <TouchableOpacity
             onPress={() => router.push('/OTPFlow/OTPEmailInput')}
           >

diff --git a/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx b/src/app/(Authentication)/OTPFlow/OTPEmailInput/index.tsx
@@ -8,7 +8,7 @@ import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { useSession } from '../../../../context/AuthContext';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 import { emailExists } from '../../../../supabase/queries/auth';
 
 export default function OTPEmailInput() {
@@ -48,13 +48,13 @@ export default function OTPEmailInput() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>
             Please enter the email you used to create your account.
           </Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={email}
             onChangeInput={onChangeEmail}
@@ -66,7 +66,7 @@ export default function OTPEmailInput() {
           />
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>
             {errorExists ? errorMessage : ' '}
           </Text>

diff --git a/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx b/src/app/(Authentication)/OTPFlow/OTPNewPassword/index.tsx
@@ -8,7 +8,7 @@ import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { useSession } from '../../../../context/AuthContext';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 
 export default function OTPNewPassword() {
   const [password, setPassword] = useState<string>('');
@@ -68,11 +68,11 @@ export default function OTPNewPassword() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Create a new password.</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={password}
             onChangeInput={onChangePassword}
@@ -94,7 +94,7 @@ export default function OTPNewPassword() {
           />
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>
             {disableButton ? errorMessage : ' '}
           </Text>

diff --git a/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx b/src/app/(Authentication)/OTPFlow/OTPVerify/index.tsx
@@ -11,7 +11,7 @@ import { useSession } from '../../../../context/AuthContext';
 import { colors } from '../../../../styles/colors';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 
 export default function OTPFlow() {
   const { changePassword } = useLocalSearchParams() as unknown as {
@@ -53,12 +53,12 @@ export default function OTPFlow() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Enter verification code.</Text>
           <Text style={fonts.greySmall}>We've sent it to {email}</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <OTPTextInput
             inputCount={6}
             tintColor={colors.darkGrey}
@@ -82,7 +82,7 @@ export default function OTPFlow() {
           </TouchableOpacity>
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>{errorMessage}</Text>
         </View>
 

diff --git a/src/app/(Authentication)/SignUp/Address/index.tsx b/src/app/(Authentication)/SignUp/Address/index.tsx
@@ -8,7 +8,7 @@ import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { useSession } from '../../../../context/AuthContext';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 
 export default function SignUpScreen() {
   const { name } = useLocalSearchParams() as unknown as { name: string };
@@ -70,11 +70,11 @@ export default function SignUpScreen() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Last, enter your address.</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={streetAddress}
             onChangeInput={onChangeStreetAddress}
@@ -95,7 +95,7 @@ export default function SignUpScreen() {
             autoCapitalization
           />
 
-          <View style={inputScreenStyles.inlineInputContainer}>
+          <View style={input.inlineInputContainer}>
             <AuthInput
               input={state}
               onChangeInput={onChangeState}
@@ -118,7 +118,7 @@ export default function SignUpScreen() {
           </View>
         </View>
 
-        <View style={inputScreenStyles.inputScreenGap} />
+        <View style={input.inputScreenGap} />
 
         <ButtonBlack
           disabled={
@@ -130,7 +130,7 @@ export default function SignUpScreen() {
           onPress={() => handleSubmit()}
           $centeredContent
         >
-          <View style={inputScreenStyles.groupButtonContent}>
+          <View style={input.groupButtonContent}>
             <Text style={fonts.whiteButton}>Sign Up</Text>
             <Check />
           </View>

diff --git a/src/app/(Authentication)/SignUp/Email/index.tsx b/src/app/(Authentication)/SignUp/Email/index.tsx
@@ -8,7 +8,7 @@ import { ButtonBlack } from '../../../../Components/AuthButton/AuthButton';
 import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 import { emailExists } from '../../../../supabase/queries/auth';
 
 export default function SignUpScreen() {
@@ -62,11 +62,11 @@ export default function SignUpScreen() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Create your account.</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={name}
             onChangeInput={onChangeName}
@@ -87,7 +87,7 @@ export default function SignUpScreen() {
           />
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>
             {errorExists ? errorMessage : ' '}
           </Text>

diff --git a/src/app/(Authentication)/SignUp/Password/index.tsx b/src/app/(Authentication)/SignUp/Password/index.tsx
@@ -7,7 +7,7 @@ import { ButtonBlack } from '../../../../Components/AuthButton/AuthButton';
 import AuthInput from '../../../../Components/AuthInput/AuthInput';
 import { fonts } from '../../../../styles/fonts';
 import { SafeArea, ContentContainer } from '../../../../styles/global';
-import { inputScreenStyles } from '../../../../styles/inputScreen';
+import { input } from '../../../../styles/input';
 import supabase from '../../../../supabase/createClient';
 
 export default function SignUpScreen() {
@@ -73,11 +73,11 @@ export default function SignUpScreen() {
   return (
     <SafeArea>
       <ContentContainer>
-        <View style={inputScreenStyles.instructionContainer}>
+        <View style={input.instructionContainer}>
           <Text style={fonts.headline}>Next, make a password.</Text>
         </View>
 
-        <View style={inputScreenStyles.inputBoxContainer}>
+        <View style={input.inputBoxContainer}>
           <AuthInput
             input={password}
             onChangeInput={onChangePassword}
@@ -99,7 +99,7 @@ export default function SignUpScreen() {
           />
         </View>
 
-        <View style={inputScreenStyles.errorMessageContainer}>
+        <View style={input.errorMessageContainer}>
           <Text style={fonts.errorMessage}>
             {disableButton ? errorMessage : ' '}
           </Text>

diff --git a/src/app/(BottomTabNavigation)/AllCases/ClaimActions/FileClaim/[caseUid].tsx b/src/app/(BottomTabNavigation)/AllCases/ClaimActions/FileClaim/[caseUid].tsx
@@ -12,7 +12,7 @@ import {
   ButtonWhite,
 } from '../../../../../Components/AuthButton/AuthButton';
 import { fonts } from '../../../../../styles/fonts';
-import instructionScreen from '../../../../../styles/instructionScreen';
+import { instruction } from '../../../../../styles/instruction';
 import {
   getCaseById,
   updateCaseStatus,
@@ -50,38 +50,38 @@ export default function FileClaimScreen() {
   }, []);
 
   return (
-    <View style={instructionScreen.container}>
+    <View style={instruction.container}>
       {caseData === undefined ? (
         <Text>Loading...</Text>
       ) : (
-        <View style={instructionScreen.screenContainer}>
-          <View style={instructionScreen.contentContainer}>
-            <Text style={fonts.tabHeading}>Filing a claim</Text>
+        <View style={instruction.screenContainer}>
+          <View style={instruction.contentContainer}>
+            <Text style={fonts.instructionHeading}>Filing a claim</Text>
 
-            <View style={instructionScreen.instructionContainer}>
-              <View style={instructionScreen.instructionRow}>
+            <View style={instruction.instructionContainer}>
+              <View style={instruction.instructionRow}>
                 <Fileclaim />
-                <View style={instructionScreen.textContainer}>
+                <View style={instruction.textContainer}>
                   <Text style={fonts.greyBody}>
                     Filing a claim commits you to the class action and any
                     potential compensation awarded
                   </Text>
                 </View>
               </View>
 
-              <View style={instructionScreen.instructionRow}>
+              <View style={instruction.instructionRow}>
                 <Document />
-                <View style={instructionScreen.textContainer}>
+                <View style={instruction.textContainer}>
                   <Text style={fonts.greyBody}>
                     Complete the required claim form on the official claim
                     filing site to submit your claim
                   </Text>
                 </View>
               </View>
 
-              <View style={instructionScreen.instructionRow}>
+              <View style={instruction.instructionRow}>
                 <Checkbox />
-                <View style={instructionScreen.textContainer}>
+                <View style={instruction.textContainer}>
                   <Text style={fonts.greyBody}>
                     Come back to this screen to update your claim filing status
                   </Text>
@@ -90,7 +90,7 @@ export default function FileClaimScreen() {
             </View>
           </View>
 
-          <View style={instructionScreen.buttonsContainer}>
+          <View style={instruction.buttonsContainer}>
             <ButtonWhite onPress={() => navigateToClaimLink()}>
               <Text style={fonts.blackButton}>
                 Take me to claim filing site