Revert to Link-component

- The behaviour was inconsistant between platforms and also devices with notches in the platforms itself.
sos-lapsikyla · Jan 21, 2024 · 5f8c50e · 5f8c50e
1 parent 6d25168
commit 5f8c50e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 59 deletions.
diff --git a/src/Screens/Onboarding/Welcome.tsx b/src/Screens/Onboarding/Welcome.tsx
@@ -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';
@@ -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}
@@ -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',

diff --git a/src/Screens/components/Link.tsx b/src/Screens/components/Link.tsx
@@ -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;
diff --git a/src/localization/fi.ts b/src/localization/fi.ts
@@ -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!',