diff --git a/core/screens/mail/Unsubscribe.web.tsx b/core/screens/mail/Unsubscribe.web.tsx index b4340495d649b690d72a1f8d16d524e042e5ac50..3cecca75e8c401dfe58af32639e7f510084c4d88 100644 --- a/core/screens/mail/Unsubscribe.web.tsx +++ b/core/screens/mail/Unsubscribe.web.tsx @@ -1,5 +1,5 @@ import type React from 'react' -import { Platform, Pressable, StyleSheet, View } from 'react-native' +import { Pressable, StyleSheet, View } from 'react-native' import useRouting from '@holi/core/navigation/hooks/useRouting' import { HoliGap } from '@holi/ui/components/atoms/HoliGap' import HoliLogo from '@holi/ui/components/atoms/HoliLogo' @@ -12,6 +12,7 @@ import { useEffect, useState } from 'react' import { EmailIllustration } from './components/EmailIllustration' import { EmailContent } from './components/EmailContent' import { useEmailSubscriptionAnimation } from './hooks/useEmailSubscriptionAnimation' +import { dimensions } from '@holi/ui/styles/globalVars' import { unsubscribeFromNewsletterMutation } from '@holi/core/screens/mail/mutations' import { useMutation } from '@apollo/client' import createParamHooks from '@holi/core/navigation/hooks/useParam' @@ -70,38 +71,47 @@ export const Unsubscribe: React.FC = () => { } return ( - <View style={styles.contentContainer}> - <HoliGap size="xs" /> - - <Pressable onPress={() => navigate('/')}> - <View style={styles.logo}> - <HoliLogo color={theme.colors.black300} /> - </View> - </Pressable> - - <HoliGap size="l" /> - - <EmailIllustration isResubscribed={isResubscribed} fadeAnim={fadeAnim} /> - - <EmailContent - isResubscribed={isResubscribed} - fadeAnim={fadeAnim} - series={series || ''} - email={maskedEmail} - onResubscribe={handleResubscribe} - onLogin={handleLoginPress} - /> + <View style={styles.container}> + <View style={styles.contentContainer}> + <HoliGap size="xs" /> + + <Pressable onPress={() => navigate('/')}> + <View style={styles.logo}> + <HoliLogo color={theme.colors.black300} /> + </View> + </Pressable> + + <HoliGap size="l" /> + + <EmailIllustration isResubscribed={isResubscribed} fadeAnim={fadeAnim} /> + + <EmailContent + isResubscribed={isResubscribed} + fadeAnim={fadeAnim} + series={series || ''} + email={maskedEmail} + resubscribe={false} + onResubscribe={handleResubscribe} + onLogin={handleLoginPress} + /> + </View> </View> ) } const getStyles = (theme: HoliTheme) => StyleSheet.create({ + container: { + flex: 1, + backgroundColor: theme.colors.white200, + }, contentContainer: { flex: 1, - paddingHorizontal: Platform.OS === 'web' ? 0 : 24, + paddingHorizontal: 24, backgroundColor: theme.colors.white200, paddingTop: Spacing['4xl'], + maxWidth: dimensions.maxScreenWidth, + marginHorizontal: 'auto', }, logo: { alignItems: 'flex-start', diff --git a/core/screens/mail/components/EmailContent.tsx b/core/screens/mail/components/EmailContent.tsx index 15a31bc551f74f89373f6c4e23e03f98b03b57c3..2e072521366a55dad80abe4e6c1feb7344b10e2a 100644 --- a/core/screens/mail/components/EmailContent.tsx +++ b/core/screens/mail/components/EmailContent.tsx @@ -10,6 +10,7 @@ import { useTheme } from '@holi/ui/styles/theme' import { useTranslation } from 'react-i18next' interface EmailContentProps { + resubscribe: boolean isResubscribed: boolean fadeAnim?: Animated.Value series: string @@ -19,6 +20,7 @@ interface EmailContentProps { } export const EmailContent: React.FC<EmailContentProps> = ({ + resubscribe = false, isResubscribed, fadeAnim, series, @@ -51,7 +53,7 @@ export const EmailContent: React.FC<EmailContentProps> = ({ <HoliGap size="ml" /> - {!isResubscribed && ( + {!isResubscribed && resubscribe ? ( <> <Text size="md" color="main" textAlign="left"> {t('email.unsubscribe.subText')} @@ -68,7 +70,7 @@ export const EmailContent: React.FC<EmailContentProps> = ({ <HoliGap size="ml" /> </> - )} + ) : null} <Button size="lg" label="Log into holi" variant="primary" onPress={onLogin} /> </Animated.View>