style(membership): move the name below the logo and even out the logo spacing

src/modules/membership/Proof.tsx

@@ -190,11 +190,7 @@ const Logo = ({ user }: { user: UserType }) => {
     return null;
   }
 
-  return (
-    <View style={{ marginTop: 8 }}>
-      <Image style={styles.logo} source={logo} />
-    </View>
-  );
+  return <Image style={styles.logo} source={logo} />;
 };
 
 const MembershipName = ({ user }: { user: UserType }) => (
@@ -272,8 +268,8 @@ const Proof = ({ fetchUser, isRefetching }: ProofProps) => {
           refreshControl={<RefreshControl testID="refresh-control" refreshing={isRefetching} onRefresh={fetchUser} />}
         >
           <View style={styles.content}>
-            <MembershipName user={user} />
             <Logo user={user} />
+            <MembershipName user={user} />
             <MembershipStatus user={user} onMembershipPress={onMembershipPress} />
             <PurchaseButton
               user={user}
@@ -308,6 +304,14 @@ const Proof = ({ fetchUser, isRefetching }: ProofProps) => {
 };
 export default Proof;
 
+// 80% of screen width, at the 500×180 proportions of DNS-logo-svart.png
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const LOGO_WIDTH = SCREEN_WIDTH * 0.8;
+const LOGO_ASPECT = 180 / 500;
+// Gap between the logo and the screen edges, reused above it
+const LOGO_INSET = (SCREEN_WIDTH - LOGO_WIDTH) / 2;
+const CONTENT_PADDING = 16;
+
 const styles = StyleSheet.create({
   confetti: {
     position: 'absolute',
@@ -378,9 +382,12 @@ const styles = StyleSheet.create({
     color: theme.colors.danger,
   },
   logo: {
-    margin: 10,
+    marginTop: LOGO_INSET - CONTENT_PADDING,
+    marginBottom: 28,
     resizeMode: 'contain',
-    width: Dimensions.get('window').width * 0.8, // 80% of screen width
+    width: LOGO_WIDTH,
+    // Without an explicit height the image box keeps the PNG's 180px height and letterboxes the logo
+    height: LOGO_WIDTH * LOGO_ASPECT,
     alignSelf: 'center',
   },
   radioForm: {
@@ -399,6 +406,6 @@ const styles = StyleSheet.create({
   },
   // On the page itself, not a card: the status banner bleeds to the edges
   content: {
-    padding: 16,
+    padding: CONTENT_PADDING,
   },
 });