Skip to content

Commit

Permalink
Revert to Link-component
Browse files Browse the repository at this point in the history
- The behaviour was inconsistant between platforms and also devices with
  notches in the platforms itself.
  • Loading branch information
rottabonus committed Jan 21, 2024
1 parent 6d25168 commit 5f8c50e
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 59 deletions.
49 changes: 29 additions & 20 deletions src/Screens/Onboarding/Welcome.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import Card from '../components/Card';
import SosBanner from '../components/CreatedBySosBanner';
import AppTitle from '../components/AppTitle';
import Message from '../components/Message';
import { MessageWithLink } from '../components/Link';
import Link from '../components/Link';
import MessageButton from '../components/MessageButton';
import fonts from '../components/fonts';
import colors from '../components/colors';
Expand Down Expand Up @@ -45,24 +45,26 @@ export default ({ navigation }: Props) => {
<Message style={styles.text} id={'onboarding.welcome.text1'} />
<Message style={styles.text} id={'onboarding.welcome.text2'} />
<Message style={styles.text} id={'onboarding.welcome.text3'} />
<MessageWithLink
style={styles.text}
id={'onboarding.welcome.text4'}
link={{
linkName: 'onboarding.welcome.apuu.link',
style: styles.link,
url: config.apuuUrl,
}}
/>
<MessageWithLink
style={styles.text}
id={'onboarding.welcome.text5'}
link={{
style: styles.link,
linkName: 'onboarding.welcome.sekasin.link',
url: config.sekasinUrl,
}}
/>
<RN.View>
<Message style={styles.text} id={'onboarding.welcome.text4'} />
<Link
style={styles.link}
linkTextStyle={styles.linkText}
linkIconStyle={styles.linkIcon}
linkName="onboarding.welcome.apuu.link"
url={config.apuuUrl}
/>
</RN.View>
<RN.View>
<Message style={styles.text} id={'onboarding.welcome.text5'} />
<Link
style={styles.link}
linkTextStyle={styles.linkText}
linkIconStyle={styles.linkIcon}
linkName="onboarding.welcome.sekasin.link"
url={config.sekasinUrl}
/>
</RN.View>
<Message style={styles.text} id={'onboarding.welcome.text6'} />
<MessageButton
style={styles.button}
Expand Down Expand Up @@ -122,7 +124,14 @@ const styles = RN.StyleSheet.create({
color: colors.darkestBlue,
},
link: {
paddingLeft: 4,
alignSelf: 'center',
},
linkText: {
...fonts.smallBold,
},
linkIcon: {
width: 20,
height: 20,
},
button: {
alignSelf: 'center',
Expand Down
41 changes: 4 additions & 37 deletions src/Screens/components/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,62 +28,29 @@ const Link = ({

return (
<RN.TouchableOpacity style={[styles.touchable, style]} onPress={onPress}>
<Message style={[styles.commonText, linkTextStyle]} id={linkName} />
<Message style={[styles.text, linkTextStyle]} id={linkName} />
<RN.Image
source={require('../images/link.svg')}
style={[styles.commonIcon, linkIconStyle]}
style={[styles.icon, linkIconStyle]}
/>
</RN.TouchableOpacity>
);
};

interface MessageLinkProps extends RN.TextProps {
id: localization.MessageId;
link: {
linkName: localization.MessageId;
url: string;
style?: RN.StyleProp<RN.ViewStyle>;
};
}

export const MessageWithLink = ({
id,
link,
...textProps
}: MessageLinkProps) => (
<RN.Text {...textProps}>
{localization.trans(id)}
<Link
{...link}
linkTextStyle={[styles.commonText, styles.linkMessageText]}
linkIconStyle={[styles.commonIcon, styles.textLinkIcon]}
/>
</RN.Text>
);

const styles = RN.StyleSheet.create({
touchable: {
display: 'flex',
flexDirection: 'row',
gap: 3,
},
commonText: {
text: {
...fonts.largeBold,
color: colors.purple,
textDecorationLine: 'underline',
},
linkMessageText: {
...fonts.smallBold,
marginBottom: -5,
},
commonIcon: {
icon: {
tintColor: colors.purple,
},
textLinkIcon: {
width: 20,
height: 20,
marginBottom: -5,
},
});

export default Link;
4 changes: 2 additions & 2 deletions src/localization/fi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,8 +224,8 @@ export const messages = {
'onboarding.welcome.text2':
'Voit jutella mentoreiden kanssa mielessäsi olevista asioista.',
'onboarding.welcome.text3': `Palvelu on tarkoitettu 17 vuotta täyttäneille. Mikäli olet alle 17-vuotias, voit vierailla 7—15-vuotiaille tarkoitutetussa Apuu-chatissa tai 13—29-vuotiaille tarkoitetussa Sekasin-chatissa.`,
'onboarding.welcome.text4': `Mikäli olet alle 15-vuotias, voit vierailla`,
'onboarding.welcome.text5': `Mikäli olet alle 17-vuotias, voit vierailla`,
'onboarding.welcome.text4': `Mikäli olet alle 15-vuotias, voit vierailla:`,
'onboarding.welcome.text5': `Mikäli olet alle 17-vuotias, voit vierailla:`,
'onboarding.welcome.text6': 'Mukavia keskusteluja!',
'onboarding.welcome.title': 'Moi!',

Expand Down

0 comments on commit 5f8c50e

Please sign in to comment.