profile fixes

Route.tsx

@@ -65,7 +65,10 @@ const Route = () => {
   const [fontsLoaded] = useFonts({
     'redhat-900': require('./assets/fonts/RedHatDisplay-Black-900.ttf'),
     'redhat-700': require('./assets/fonts/RedHatDisplay-Bold-700.ttf'),
-    'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf')
+    'redhat-600': require('./assets/fonts/RedHatDisplay-SemiBold-600.ttf'),
+    'montserrat-700': require('./assets/fonts/Montserrat-Bold.ttf'),
+    'montserrat-600': require('./assets/fonts/Montserrat-SemiBold.ttf'),
+    'montserrat-400': require('./assets/fonts/Montserrat-Regular.ttf'),
   });
   const [dbLoaded, setDbLoaded] = useState(false);
 

assets/icons/next.svg

@@ -0,0 +1,10 @@
+<svg width="23" height="10" viewBox="0 0 23 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2817_21758)">
+<path d="M1.5 1L9.73232 8.34907C10.7045 9.21698 12.2955 9.21698 13.2677 8.34907L21.5 1" stroke="#B7C6CB" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2817_21758">
+<rect width="22" height="10" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, useState } from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Linking, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
 import { CommonActions, NavigationProp, useNavigation } from '@react-navigation/native';
 
@@ -35,6 +35,7 @@ import IconYouTube from '../../../../assets/icons/youtube.svg';
 import IconGlobe from '../../../../assets/icons/bottom-navigation/globe.svg';
 import IconLink from '../../../../assets/icons/link.svg';
 import GearIcon from '../../../../assets/icons/gear.svg';
+import ArrowIcon from '../../../../assets/icons/next.svg';
 
 type Props = {
   navigation: NavigationProp<any>;
@@ -72,11 +73,18 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
             />
           )}
         </View>
-        <View style={{ gap: 5, width: '75%' }}>
+        <View style={{ gap: 5, flex: 1 }}>
           <Text style={[styles.headerText, { fontSize: getFontSize(18), flex: 0 }]}>
             {data.first_name} {data.last_name}
           </Text>
-          <View style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'row' }}>
+          <View
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'row',
+              alignItems: 'center'
+            }}
+          >
             <View
               style={{
                 display: 'flex',
@@ -100,11 +108,12 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
             </View>
 
             {!isPublicView ? (
-              <View>
-                <TouchableOpacity onPress={() => navigation.navigate(NAVIGATION_PAGES.SETTINGS)}>
-                  <GearIcon fill={Colors.DARK_BLUE} />
-                </TouchableOpacity>
-              </View>
+              <TouchableOpacity
+                style={{ paddingVertical: 4 }}
+                onPress={() => navigation.navigate(NAVIGATION_PAGES.SETTINGS)}
+              >
+                <GearIcon fill={Colors.DARK_BLUE} />
+              </TouchableOpacity>
             ) : null}
           </View>
         </View>
@@ -145,6 +154,11 @@ type PersonalInfoProps = {
 
 const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
   const [showMoreSeries, setShowMoreSeries] = useState(false);
+  const scores = ['NM1301', 'DARE', 'UN', 'UN+', 'TCC', 'SLOW', 'YES', 'WHS'];
+
+  const handleOpenUrl = (url: string | undefined) => {
+    url && Linking.openURL(url);
+  };
 
   return (
     <ScrollView
@@ -154,12 +168,17 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
     >
       <InfoItem inline={true} title={'RANKING'}>
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between' }}>
-          {data.scores?.map((data, index) => {
-            if (!data.score) return null;
+          {scores.map((score, index) => {
+            let scoreRank = data.scores?.find((s) => s.name === score && s.score > 0)?.score ?? '-';
+
+            if (score === 'YES' && +scoreRank >= 4500) {
+              scoreRank = '-';
+            }
+
             return (
               <View key={index} style={styles.rankingItem}>
-                <Text style={[styles.headerText, { flex: 0 }]}>{data.score}</Text>
-                <Text style={[styles.titleText, { flex: 0 }]}>{data.name}</Text>
+                <Text style={styles.rankingScore}>{scoreRank}</Text>
+                <Text style={[styles.titleText, { flex: 0 }]}>{score}</Text>
               </View>
             );
           })}
@@ -177,11 +196,16 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
         ))}
       </InfoItem>
       {data.series?.length > 8 ? (
-        <Button
-          children={showMoreSeries ? 'Hide series' : 'Show more'}
-          variant={ButtonVariants.TEXT}
-          onPress={() => setShowMoreSeries(!showMoreSeries)}
-        />
+        <TouchableOpacity onPress={() => setShowMoreSeries(!showMoreSeries)}>
+          <View
+            style={[
+              { alignItems: 'center' },
+              showMoreSeries ? { transform: 'rotate(180deg)', paddingTop: 8 } : { paddingBottom: 8 }
+            ]}
+          >
+            <ArrowIcon stroke={'#B7C6CB'} />
+          </View>
+        </TouchableOpacity>
       ) : null}
       <View style={{ display: 'flex', flexDirection: 'row' }}>
         <Text style={styles.headerText}>DATE OF BIRTH</Text>
@@ -201,13 +225,37 @@ const PersonalInfo: FC<PersonalInfoProps> = ({ data }) => {
         <Text style={[styles.titleText, { flex: 0 }]}>{data.bio}</Text>
       </InfoItem>
       <InfoItem title={'SOCIAL LINKS'}>
-        <View style={{ display: 'flex', flexDirection: 'row', gap: 15, alignItems: 'center' }}>
-          {data.links?.f?.link ? <IconFacebook fill={Colors.DARK_BLUE} /> : null}
-          {data.links?.i?.link ? <IconInstagram fill={Colors.DARK_BLUE} /> : null}
-          {data.links?.t?.link ? <IconTwitter fill={Colors.DARK_BLUE} /> : null}
-          {data.links?.y?.link ? <IconYouTube fill={Colors.DARK_BLUE} /> : null}
-          {data.links?.www?.link ? <IconGlobe fill={Colors.DARK_BLUE} /> : null}
-          {data.links?.other?.link ? <IconLink fill={Colors.DARK_BLUE} /> : null}
+        <View style={styles.linksBox}>
+          {data.links?.f?.link && data.links?.f?.active !== 0 ? (
+            <TouchableOpacity onPress={() => handleOpenUrl(data.links?.f?.link)}>
+              <IconFacebook fill={Colors.DARK_BLUE} />
+            </TouchableOpacity>
+          ) : null}
+          {data.links?.i?.link && data.links?.i?.active !== 0 ? (
+            <TouchableOpacity onPress={() => handleOpenUrl(data.links?.i?.link)}>
+              <IconInstagram fill={Colors.DARK_BLUE} />
+            </TouchableOpacity>
+          ) : null}
+          {data.links?.t?.link && data.links?.t?.active !== 0 ? (
+            <TouchableOpacity onPress={() => handleOpenUrl(data.links?.t?.link)}>
+              <IconTwitter fill={Colors.DARK_BLUE} />
+            </TouchableOpacity>
+          ) : null}
+          {data.links?.y?.link && data.links?.y?.active !== 0 ? (
+            <TouchableOpacity onPress={() => handleOpenUrl(data.links?.y?.link)}>
+              <IconYouTube fill={Colors.DARK_BLUE} />
+            </TouchableOpacity>
+          ) : null}
+          {data.links?.www?.link && data.links?.www?.active !== 0 ? (
+            <TouchableOpacity onPress={() => handleOpenUrl(data.links?.www?.link)}>
+              <IconGlobe fill={Colors.DARK_BLUE} />
+            </TouchableOpacity>
+          ) : null}
+          {data.links?.other?.link && data.links?.other?.active !== 0 ? (
+            <TouchableOpacity onPress={() => handleOpenUrl(data.links?.other?.link)}>
+              <IconLink fill={Colors.DARK_BLUE} />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </InfoItem>
     </ScrollView>

src/screens/InAppScreens/ProfileScreen/styles.ts

@@ -23,11 +23,24 @@ export const styles = StyleSheet.create({
     flexDirection: 'column',
     alignItems: 'center'
   },
+  rankingScore: {
+    flex: 0,
+    fontFamily: 'montserrat-700',
+    color: Colors.DARK_BLUE,
+    fontSize: getFontSize(14),
+  },
   titleText: {
     flex: 1,
     color: Colors.DARK_BLUE,
     fontWeight: '600',
-    fontSize: getFontSize(13)
+    fontSize: getFontSize(12)
+  },
+  linksBox: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 15,
+    alignItems: 'center',
+    paddingBottom: 16
   },
   countryFlag: {
     width: 20,