style(membership): show the expiry date above the purchase options

src/modules/membership/Proof.tsx

@@ -117,6 +117,7 @@ const PurchaseButton = ({
 
   return (
     <View>
+      <View style={styles.divider} />
       <Text style={[theme.text, styles.selectText]}>Velg medlemskapstype</Text>
       <View style={styles.radioForm}>
         <RadioButton data={options} onSelect={onSelect} defaultValue={defaultValue} />
@@ -271,6 +272,7 @@ const Proof = ({ fetchUser, isRefetching }: ProofProps) => {
             <Logo user={user} />
             <MembershipName user={user} />
             <MembershipStatus user={user} onMembershipPress={onMembershipPress} />
+            <MembershipValidTo user={user} />
             <PurchaseButton
               user={user}
               paymentLoading={paymentLoading}
@@ -286,7 +288,6 @@ const Proof = ({ fetchUser, isRefetching }: ProofProps) => {
               }}
               setMembershipTypeSlug={setMembershipTypeSlug}
             />
-            <MembershipValidTo user={user} />
           </View>
         </ScrollView>
       </View>
@@ -394,10 +395,16 @@ const styles = StyleSheet.create({
     marginTop: 16,
     marginBottom: 20,
   },
+  // Separates the current membership above from buying a new one
+  divider: {
+    borderBottomWidth: 1,
+    borderBottomColor: theme.colors.neufPink,
+    marginTop: 24,
+  },
   selectText: {
     ...theme.typography.h3,
     textAlign: 'center',
-    marginTop: 30,
+    marginTop: 24,
   },
   container: {
     flex: 1,