From 757d5e07d33ce3eae96935c218f56aa33506564b Mon Sep 17 00:00:00 2001
From: Leander Furumo <leander@furumo.eu>
Date: Sat, 17 Aug 2024 02:36:41 +0200
Subject: [PATCH] general styling changes

attempt at using the same styling as the website
---
 src/components/FormInput.tsx              |   2 +-
 src/components/PrivacyButton.tsx          |   6 +-
 src/modules/about/About.tsx               |  33 +++---
 src/modules/login/Login.tsx               |  16 +--
 src/modules/membership/MembershipInfo.tsx |  24 ++---
 src/modules/membership/Proof.tsx          |  68 ++++++-------
 src/modules/membership/UserDelete.tsx     |   7 +-
 src/modules/register/UserRegister.tsx     | 119 +++++++++++-----------
 8 files changed, 132 insertions(+), 143 deletions(-)

diff --git a/src/components/FormInput.tsx b/src/components/FormInput.tsx
index 5f5b4bb..35f7572 100644
--- a/src/components/FormInput.tsx
+++ b/src/components/FormInput.tsx
@@ -36,7 +36,7 @@ const FormInput = ({
         <>
           <TextField
             ref={ref}
-            label={label}
+            label={<Text style={theme.text}>{label}</Text>}
             returnKeyType={returnKeyType}
             onChangeText={onChange}
             onBlur={onBlur}
diff --git a/src/components/PrivacyButton.tsx b/src/components/PrivacyButton.tsx
index 0b66c51..6eb8ef0 100644
--- a/src/components/PrivacyButton.tsx
+++ b/src/components/PrivacyButton.tsx
@@ -5,7 +5,7 @@ import theme from 'src/theme';
 
 const PrivacyButton = () => (
   <TouchableOpacity
-    style={styles.button}
+    style={[theme.background, styles.button]}
     onPress={() => Linking.openURL(process.env.EXPO_PUBLIC_DUSKEN_PRIVACY_POLICY_URL || '')}
   >
     <Text style={styles.linkText}>Personvern</Text>
@@ -14,10 +14,10 @@ const PrivacyButton = () => (
 
 const styles = StyleSheet.create({
   button: {
-    margin: 16,
+    padding: 16,
   },
   linkText: {
-    color: theme.colors.neufBlue,
+    color: theme.colors.neufPurple,
     fontSize: 16,
     textAlign: 'center',
     textDecorationLine: 'underline',
diff --git a/src/modules/about/About.tsx b/src/modules/about/About.tsx
index f05ffe8..065ae48 100644
--- a/src/modules/about/About.tsx
+++ b/src/modules/about/About.tsx
@@ -75,13 +75,13 @@ const openMap = () => {
 
 /** FIXME: Values here are pretty hardcoded. Should fetch config from a JSON-file or API */
 const About = () => (
-  <ScrollView>
+  <ScrollView style={theme.background}>
     <View style={theme.card}>
-      <Text style={[styles.header, { marginTop: 8 }]}>Det Norske Studentersamfund</Text>
+      <Text style={[theme.text, styles.header, { marginTop: 8 }]}>Det Norske Studentersamfund</Text>
       <TouchableOpacity onPress={() => Linking.openURL('https://www.studentersamfundet.no/')}>
         <Image style={styles.logo} source={logo} />
       </TouchableOpacity>
-      <Text style={styles.header}>Følg oss på</Text>
+      <Text style={[theme.text, styles.header]}>Følg oss på</Text>
       <View style={[styles.section, { flex: 1, flexDirection: 'row' }]}>
         <TouchableOpacity style={styles.someBtn} onPress={openFacebook}>
           <IconFacebook width={55} height={55} />
@@ -93,43 +93,43 @@ const About = () => (
         </TouchableOpacity>
       </View>
 
-      <Text style={styles.header}>Adresse</Text>
+      <Text style={[theme.text, styles.header]}>Adresse</Text>
       <Text style={[styles.paragraph, { textAlign: 'center' }]}>
         Det Norske Studentersamfund{'\n'}Slemdalsveien 15, 0369 Oslo
       </Text>
       <View style={styles.section}>
-        <Button onPress={openMap}>
+        <Button onPress={openMap} style={theme.button}>
           <IconMap width={20} height={20} />
-          <Text> Vis i kart</Text>
+          <Text style={theme.buttonText}> Vis i kart</Text>
         </Button>
       </View>
-      <Text style={styles.header}>Åpningstider</Text>
+      <Text style={[theme.text, styles.header]}>Åpningstider</Text>
       <View style={styles.section}>
-        <Button onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')}>
+        <Button onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')} style={theme.button}>
           <IconClock width={20} height={20} style={styles.icon} />
-          <Text>Vis åpningstider</Text>
+          <Text style={theme.buttonText}>Vis åpningstider</Text>
         </Button>
       </View>
-      <Text style={styles.header}>Ta kontakt</Text>
+      <Text style={[theme.text, styles.header]}>Ta kontakt</Text>
       <View style={[styles.section, { flex: 1, flexDirection: 'row' }]}>
         <View>
-          <Button onPress={() => Linking.openURL('tel:+4794430002')} style={{ marginHorizontal: 10 }}>
+          <Button onPress={() => Linking.openURL('tel:+4794430002')} style={[theme.button, { marginHorizontal: 10 }]}>
             <IconPhone width={20} height={20} style={styles.icon} />
-            <Text>Ring</Text>
+            <Text style={theme.buttonText}>Ring</Text>
           </Button>
         </View>
         <View>
           <Button
             onPress={() => Linking.openURL('mailto:ledelsen@studentersamfundet.no')}
-            style={{ marginHorizontal: 10 }}
+            style={[theme.button, { marginHorizontal: 10 }]}
           >
             <IconMail width={20} height={20} style={styles.icon} />
-            <Text>Send e-post</Text>
+            <Text style={theme.buttonText}>Send e-post</Text>
           </Button>
         </View>
       </View>
 
-      <Text style={styles.header}>Chateau Neuf</Text>
+      <Text style={[theme.text, styles.header]}>Chateau Neuf</Text>
       <Image
         source={{
           uri: 'https://neuf.no/media/original_images/26_KUL_Chateauneuf.jpg',
@@ -162,12 +162,11 @@ const styles = StyleSheet.create({
   header: {
     fontSize: 20,
     fontWeight: 'bold',
-    color: theme.colors.neufBlack,
     textAlign: 'center',
   },
   paragraph: {
     fontSize: 16,
-    color: theme.colors.neufBlack,
+    color: theme.colors.neufBlue,
     paddingBottom: 10,
     lineHeight: 25,
   },
diff --git a/src/modules/login/Login.tsx b/src/modules/login/Login.tsx
index 725f971..90b13fb 100644
--- a/src/modules/login/Login.tsx
+++ b/src/modules/login/Login.tsx
@@ -12,7 +12,7 @@ const Login = () => {
   const { isLoggingIn, isSubmitted, errors, loginError, control, setFocus, onSubmit } = useLogin();
 
   return (
-    <ScrollView>
+    <ScrollView style={theme.background}>
       <View style={theme.card}>
         {errors && <FormErrors errors={errors} />}
         <FormInput
@@ -37,21 +37,21 @@ const Login = () => {
           onSubmitEditing={onSubmit}
           returnKeyType="send"
         />
-        <Button fullWidth onPress={onSubmit} style={styles.loginButton}>
-          <Text>Logg inn</Text>
+        <Button fullWidth onPress={onSubmit} style={[theme.button, styles.loginButton]}>
+          <Text style={theme.buttonText}>Logg inn</Text>
         </Button>
+        {loginError && isSubmitted && <FormErrors errors={loginError} />}
+        {isLoggingIn && <ActivityIndicator color={theme.colors.neufOrange} />}
         <Button
           small
           light
           onPress={() => {
             Linking.openURL(process.env.EXPO_PUBLIC_DUSKEN_FORGOT_PASSWORD_URL || '');
           }}
-          style={styles.forgotPasswordButton}
+          style={[theme.button, styles.forgotPasswordButton]}
         >
-          <Text>Glemt passord?</Text>
+          <Text style={theme.buttonText}>Glemt passord?</Text>
         </Button>
-        {loginError && isSubmitted && <FormErrors errors={loginError} />}
-        {isLoggingIn && <ActivityIndicator color={theme.colors.neufOrange} />}
       </View>
     </ScrollView>
   );
@@ -60,7 +60,7 @@ export default Login;
 
 const styles = StyleSheet.create({
   loginButton: {
-    marginTop: 16,
+    marginVertical: 16,
   },
   forgotPasswordButton: {
     alignSelf: 'center',
diff --git a/src/modules/membership/MembershipInfo.tsx b/src/modules/membership/MembershipInfo.tsx
index 3ff7017..004a65f 100644
--- a/src/modules/membership/MembershipInfo.tsx
+++ b/src/modules/membership/MembershipInfo.tsx
@@ -9,26 +9,26 @@ interface MembershipInfoProps {
   onLogin: () => void;
 }
 const MembershipInfo = ({ onRegister, onLogin }: MembershipInfoProps) => (
-  <ScrollView>
+  <ScrollView style={theme.background}>
     <View style={theme.card}>
-      <Text style={styles.headerTitle}>Hei 👋</Text>
-      <Text style={styles.paragraph}>
+      <Text style={[theme.text, styles.headerTitle]}>Hei 👋</Text>
+      <Text style={[theme.text, styles.paragraph]}>
         Her kan du bli medlem i Det Norske Studentersamfund - Chateau Neuf og ha medlemsbeviset ditt på telefonen
       </Text>
       <View style={styles.button}>
-        <Button onPress={onRegister} fullWidth>
-          <Text>Bli medlem</Text>
+        <Button onPress={onRegister} fullWidth style={theme.button}>
+          <Text style={theme.buttonText}>Bli medlem</Text>
         </Button>
       </View>
-      <Text style={styles.header}>Hva får jeg?</Text>
-      <Text style={[styles.paragraph, { textAlign: 'left', paddingLeft: 4 }]}>
+      <Text style={[theme.text, styles.header]}>Hva får jeg?</Text>
+      <Text style={[theme.text, styles.paragraph, { textAlign: 'left', paddingLeft: 4 }]}>
         - Minst 25% rabatt på de fleste arrangement{'\n'}- Gratis inngang på enkelte arrangement{'\n'}- Store rabatter i
         barene{'\n'}- Egne medlemsarrangement og -tilbud{'\n'}- Mulighet til å delta i landets eldste studentdemokrati
       </Text>
-      <Text style={styles.em}>Allerede medlem?</Text>
+      <Text style={[theme.text, styles.em]}>Allerede medlem?</Text>
       <View style={styles.button}>
-        <Button onPress={onLogin} fullWidth>
-          <Text>Logg inn</Text>
+        <Button onPress={onLogin} fullWidth style={theme.button}>
+          <Text style={theme.buttonText}>Logg inn</Text>
         </Button>
       </View>
     </View>
@@ -41,7 +41,6 @@ const styles = StyleSheet.create({
   paragraph: {
     textAlign: 'center',
     fontSize: 16,
-    color: theme.colors.neufBlack,
     paddingBottom: 10,
     lineHeight: 25,
   },
@@ -51,7 +50,6 @@ const styles = StyleSheet.create({
   },
   em: {
     fontSize: 16,
-    color: theme.colors.neufBlack,
     fontStyle: 'italic',
     textAlign: 'center',
     marginVertical: 10,
@@ -60,14 +58,12 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: 'bold',
     fontSize: 20,
-    color: theme.colors.neufBlack,
     paddingVertical: 10,
     lineHeight: 25,
   },
   header: {
     fontSize: 16,
     fontWeight: 'bold',
-    color: theme.colors.neufBlack,
     lineHeight: 25,
     paddingLeft: 2,
   },
diff --git a/src/modules/membership/Proof.tsx b/src/modules/membership/Proof.tsx
index 012e641..d2e057a 100644
--- a/src/modules/membership/Proof.tsx
+++ b/src/modules/membership/Proof.tsx
@@ -35,8 +35,8 @@ const MembershipValidTo = ({ user }: { user: UserType }) => {
 
   return (
     <View style={{ alignItems: 'center', flex: 1 }}>
-      <Text>Gyldig til: </Text>
-      <Text style={styles.validToValue}>{validTo}</Text>
+      <Text style={theme.text}>Gyldig til: </Text>
+      <Text style={[theme.text, styles.validToValue]}>{validTo}</Text>
     </View>
   );
 };
@@ -55,7 +55,7 @@ const MembershipStatus = ({
 
     return (
       <View style={styles.expired}>
-        <Text style={styles.expiredText}>Utløpt</Text>
+        <Text style={[theme.text, styles.expiredText]}>Utløpt</Text>
       </View>
     );
   }
@@ -65,7 +65,7 @@ const MembershipStatus = ({
   return (
     <View style={styles.membershipStatus}>
       <TouchableOpacity onPress={onMembershipPress} style={styles.valid}>
-        <Text style={styles.validText}>{statusText}</Text>
+        <Text style={[theme.text, styles.validText]}>{statusText}</Text>
       </TouchableOpacity>
     </View>
   );
@@ -121,12 +121,12 @@ const PurchaseButton = ({
         onPress={onPurchasePress}
         fullWidth
         disabled={paymentLoading || isLoadingMembershipType}
-        style={styles.purchaseButton}
+        style={[theme.button, styles.purchaseButton]}
       >
-        <Text>{`Kjøp medlemskap (${membershipPrice} NOK)`}</Text>
+        <Text style={theme.buttonText}>{`Kjøp medlemskap (${membershipPrice} NOK)`}</Text>
       </Button>
       <View style={styles.purchaseText}>
-        <Text style={styles.purchaseTextInner}>Medlemskapet er gyldig i ett år</Text>
+        <Text style={[theme.text, styles.purchaseTextInner]}>Medlemskapet er gyldig i ett år</Text>
       </View>
     </View>
   );
@@ -160,7 +160,7 @@ const MembershipName = ({ user }: { user: UserType }) => {
   }
   return (
     <View>
-      <Text style={styles.nameText}>{name}</Text>
+      <Text style={[theme.text, styles.nameText]}>{name}</Text>
     </View>
   );
 };
@@ -208,40 +208,38 @@ const Proof = ({ onLogoutPress, fetchUser, isFetchingUserData, onDeletePress }:
   if (!user) {
     return (
       <View>
-        <Text>No user!</Text>
+        <Text style={theme.text}>No user!</Text>
       </View>
     );
   }
 
   return (
     <>
-      <View>
-        <UserConfetti user={user} confettiRef={confettiRef} />
-        <ScrollView refreshControl={<RefreshControl refreshing={isFetchingUserData} onRefresh={fetchUser} />}>
-          <View style={[theme.card, { paddingVertical: 16 }]}>
-            <MembershipName user={user} />
-            <Logo user={user} />
-            <MembershipStatus user={user} onMembershipPress={onMembershipPress} />
-            <PurchaseButton
-              user={user}
-              paymentLoading={paymentLoading}
-              isLoadingMembershipType={isLoadingMembershipType}
-              membershipPrice={membershipPrice}
-              onPurchasePress={onPurchasePress}
-              setMembershipTypeSlug={setMembershipTypeSlug}
-            />
-            <MembershipValidTo user={user} />
-          </View>
-          <View>
-            <Button onPress={onLogoutPress} style={styles.logoutButton} small>
-              <Text>Logg ut</Text>
-            </Button>
-          </View>
-          <Button onPress={onDeletePress} style={styles.deleteButton} small>
-            <Text style={styles.whiteText}>Slett bruker</Text>
+      <UserConfetti user={user} confettiRef={confettiRef} />
+      <ScrollView refreshControl={<RefreshControl refreshing={isFetchingUserData} onRefresh={fetchUser} />}>
+        <View style={[theme.card, { paddingVertical: 16, backgroundColor: 'transparent' }]}>
+          <MembershipName user={user} />
+          <Logo user={user} />
+          <MembershipStatus user={user} onMembershipPress={onMembershipPress} />
+          <PurchaseButton
+            user={user}
+            paymentLoading={paymentLoading}
+            isLoadingMembershipType={isLoadingMembershipType}
+            membershipPrice={membershipPrice}
+            onPurchasePress={onPurchasePress}
+            setMembershipTypeSlug={setMembershipTypeSlug}
+          />
+          <MembershipValidTo user={user} />
+        </View>
+        <View>
+          <Button onPress={onLogoutPress} style={[theme.button, styles.logoutButton]} small>
+            <Text style={theme.buttonText}>Logg ut</Text>
           </Button>
-        </ScrollView>
-      </View>
+        </View>
+        <Button onPress={onDeletePress} style={[theme.button, styles.deleteButton]} small>
+          <Text style={styles.whiteText}>Slett bruker</Text>
+        </Button>
+      </ScrollView>
       <Toast
         message={toast?.message}
         visible={toast?.visible}
diff --git a/src/modules/membership/UserDelete.tsx b/src/modules/membership/UserDelete.tsx
index d83dab2..53c58cc 100644
--- a/src/modules/membership/UserDelete.tsx
+++ b/src/modules/membership/UserDelete.tsx
@@ -20,7 +20,7 @@ const UserDelete = () => {
   const isDisabled = !isDeletingUser && value !== user.username;
 
   return (
-    <ScrollView>
+    <ScrollView style={theme.background}>
       <View style={theme.card}>
         <Text style={styles.headerTitle}>Slett meg</Text>
         <Text style={styles.paragraph}>
@@ -72,7 +72,7 @@ const styles = StyleSheet.create({
   deleteButtonDisabled: {
     marginTop: 16,
     marginBottom: 16,
-    backgroundColor: theme.colors.neufGray,
+    backgroundColor: theme.colors.gray1,
   },
   whiteText: {
     color: theme.colors.neufWhite,
@@ -90,9 +90,10 @@ const styles = StyleSheet.create({
   },
   input: {
     height: 40,
-    borderColor: 'gray',
+    borderColor: theme.colors.neufPurple,
     borderWidth: 1,
     margin: 10,
     padding: 10,
+    textAlign: 'center',
   },
 });
diff --git a/src/modules/register/UserRegister.tsx b/src/modules/register/UserRegister.tsx
index 7a37f06..d82a28e 100644
--- a/src/modules/register/UserRegister.tsx
+++ b/src/modules/register/UserRegister.tsx
@@ -29,64 +29,62 @@ const UserRegister = () => {
 
   return (
     <>
-      <View style={theme.card}>
-        <ScrollView>
-          <FormInput
-            name="first_name"
-            label="Fornavn"
-            control={control}
-            errors={errors}
-            autoFocus
-            onSubmitEditing={() => setFocus('last_name')}
-          />
-          <FormInput
-            name="last_name"
-            label="Etternavn"
-            control={control}
-            errors={errors}
-            onSubmitEditing={() => setFocus('email')}
-          />
-          <FormInput
-            name="email"
-            label="E-post"
-            keyboardType="email-address"
-            control={control}
-            errors={errors}
-            autoCapitalize="none"
-            autoCorrect={false}
-            rules={{
-              required: 'Kan ikke være tomt!',
-              validate: (v) => EmailValidator.validate(v) || 'er ikke en gyldig e-post',
-            }}
-            onSubmitEditing={() => setFocus('phone_number')}
-          />
-          <FormInput
-            name="phone_number"
-            label="Mobilnummer"
-            control={control}
-            errors={errors}
-            keyboardType="phone-pad"
-            onSubmitEditing={() => setFocus('password')}
-          />
-          <FormInput
-            name="password"
-            label="Passord"
-            control={control}
-            errors={errors}
-            secureTextEntry
-            autoCapitalize="none"
-            autoCorrect={false}
-            returnKeyType="send"
-            onSubmitEditing={onSubmit}
-          />
-          <View style={styles.errorBox}>{registerError && isSubmitted && <FormErrors errors={registerError} />}</View>
-          <Button fullWidth disabled={isDisabled} onPress={onSubmit} style={styles.registerButton}>
-            <Text>Registrer meg</Text>
-          </Button>
-          {isRegisteringUser && <ActivityIndicator color={theme.colors.neufOrange} />}
-          <PrivacyButton />
-        </ScrollView>
-      </View>
+      <ScrollView style={theme.card}>
+        <FormInput
+          name="first_name"
+          label="Fornavn"
+          control={control}
+          errors={errors}
+          autoFocus
+          onSubmitEditing={() => setFocus('last_name')}
+        />
+        <FormInput
+          name="last_name"
+          label="Etternavn"
+          control={control}
+          errors={errors}
+          onSubmitEditing={() => setFocus('email')}
+        />
+        <FormInput
+          name="email"
+          label="E-post"
+          keyboardType="email-address"
+          control={control}
+          errors={errors}
+          autoCapitalize="none"
+          autoCorrect={false}
+          rules={{
+            required: 'Kan ikke være tomt!',
+            validate: (v) => EmailValidator.validate(v) || 'er ikke en gyldig e-post',
+          }}
+          onSubmitEditing={() => setFocus('phone_number')}
+        />
+        <FormInput
+          name="phone_number"
+          label="Mobilnummer"
+          control={control}
+          errors={errors}
+          keyboardType="phone-pad"
+          onSubmitEditing={() => setFocus('password')}
+        />
+        <FormInput
+          name="password"
+          label="Passord"
+          control={control}
+          errors={errors}
+          secureTextEntry
+          autoCapitalize="none"
+          autoCorrect={false}
+          returnKeyType="send"
+          onSubmitEditing={onSubmit}
+        />
+        {registerError && isSubmitted && <FormErrors errors={registerError} />}
+        {isRegisteringUser && <ActivityIndicator color={theme.colors.neufOrange} />}
+        <Button fullWidth disabled={isDisabled} onPress={onSubmit} style={[theme.button, styles.registerButton]}>
+          <Text style={theme.buttonText}>Registrer meg</Text>
+        </Button>
+      </ScrollView>
+      <PrivacyButton />
       <Toast
         message={toast?.message}
         visible={toast?.visible}
@@ -113,9 +111,6 @@ const styles = StyleSheet.create({
     height: 52,
   },
   registerButton: {
-    marginBottom: 16,
-  },
-  errorBox: {
-    marginVertical: 10,
+    marginVertical: 16,
   },
 });