Merge branch 'ranking-styling' of SashaGoncharov19/nomadmania-app into dev

src/components/AvatarWithInitials/styles.tsx

@@ -6,8 +6,8 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',
-    borderColor: Colors.LIGHT_GRAY,
-    borderWidth: 1
+    borderColor: Colors.FILL_LIGHT,
+    borderWidth: 2
   },
   avatar: {
     width: '100%',

src/screens/InAppScreens/TravellersScreen/Components/Profile.tsx

@@ -98,14 +98,22 @@ export const Profile: FC<Props> = ({
       </View>
     );
 
-    return tbt_rank && tbt_rank >= 1 ? (
+    return (
       <View style={adaptiveStyle(TBTStyles.badgeRoot, {})}>
         <View style={adaptiveStyle(TBTStyles.badgeWrapper, {})}>
-          {badge_tbt ? <Rank color={colors[tbt_rank - 1]} /> : null}
-          <Text style={adaptiveStyle([ScoreStyles.scoreNameText], {})}>TBT # {tbt_rank}</Text>
+          {badge_tbt && tbt_rank ? (
+            <Rank color={colors[tbt_rank - 1]} />
+          ) : (
+            <View style={adaptiveStyle(ProfileStyles.badge, {})} />
+          )}
+          {tbt_rank && tbt_rank >= 1 ? (
+            <Text style={adaptiveStyle([ScoreStyles.scoreNameText], {})}>TBT # {tbt_rank}</Text>
+          ) : (
+            <View style={{ height: 11 }} />
+          )}
         </View>
       </View>
-    ) : null;
+    );
   };
 
   const EmptyScore: FC<{ scoreName: string }> = ({ scoreName }) => {
@@ -118,18 +126,21 @@ export const Profile: FC<Props> = ({
   };
 
   return (
-    <View
-      style={{ backgroundColor: Colors.FILL_LIGHT, borderRadius: 8, padding: 6, marginBottom: 12 }}
-    >
-      <TouchableOpacity onPress={() => handlePress()}>
-        <View style={adaptiveStyle(ProfileStyles.profileRoot, {})}>
-          <View style={{ paddingLeft: 20 }}>
-            {index + 1 < 100 ? (
-              <View>
-                <Text style={adaptiveStyle(ScoreStyles.rankText, {})}>{index + 1}</Text>
-              </View>
-            ) : null}
-            <View style={{ marginLeft: 5 }}>
+    <View style={ProfileStyles.wrapper}>
+      <View
+        style={[
+          ProfileStyles.index,
+          {
+            width: index + 1 < 100 ? 26 : 38
+          }
+        ]}
+      >
+        <Text style={adaptiveStyle(ScoreStyles.rankText, {})}>{index + 1}</Text>
+      </View>
+      <View style={{ flex: 1, paddingLeft: 8, paddingRight: 3, paddingBottom: 3 }}>
+        <TouchableOpacity onPress={() => handlePress()}>
+          <View style={adaptiveStyle(ProfileStyles.profileRoot, {})}>
+            <View style={ProfileStyles.avatarContainer}>
               {avatar ? (
                 <Image
                   style={adaptiveStyle(ProfileStyles.profileAvatar, {})}
@@ -143,68 +154,70 @@ export const Profile: FC<Props> = ({
                 />
               )}
             </View>
-          </View>
-          <View style={adaptiveStyle(ProfileStyles.profileDataRoot, {})}>
-            <Text
-              style={adaptiveStyle(
-                [ProfileStyles.profileFirstLastName, { fontSize: getFontSize(14), flex: 0 }],
-                {}
-              )}
-            >
-              {first_name ?? ''} {last_name ?? ''}
-            </Text>
-            <View style={adaptiveStyle(ProfileStyles.profileDataContainer, {})}>
-              <View style={adaptiveStyle(ProfileStyles.profileDataWrapper, {})}>
-                <Text style={adaptiveStyle(ProfileStyles.profileAge, {})}>
-                  Age: {date_of_birth ?? ''}
-                </Text>
-                <Image
-                  source={{ uri: flagBaseUri + homebase_flag }}
-                  style={adaptiveStyle(ProfileStyles.countryFlag, {})}
-                />
-                {homebase2_flag && homebase2_flag !== homebase_flag ? (
+            <View style={adaptiveStyle(ProfileStyles.profileDataRoot, {})}>
+              <Text
+                style={adaptiveStyle(
+                  [ProfileStyles.profileFirstLastName, { fontSize: getFontSize(14), flex: 0 }],
+                  {}
+                )}
+              >
+                {first_name ?? ''} {last_name ?? ''}
+              </Text>
+              <View style={adaptiveStyle(ProfileStyles.profileDataContainer, {})}>
+                <View style={adaptiveStyle(ProfileStyles.profileDataWrapper, {})}>
+                  <Text style={adaptiveStyle(ProfileStyles.profileAge, {})}>
+                    Age: {date_of_birth ?? ''}
+                  </Text>
                   <Image
-                    source={{ uri: flagBaseUri + homebase2_flag }}
-                    style={adaptiveStyle([ProfileStyles.countryFlag, { marginLeft: -15 }], {})}
+                    source={{ uri: flagBaseUri + homebase_flag }}
+                    style={adaptiveStyle(ProfileStyles.countryFlag, {})}
                   />
-                ) : null}
-                <View style={adaptiveStyle(ProfileStyles.badgesWrapper, {})}>
-                  {auth ? <TickIcon /> : null}
-                  {badge_un ? <UNIcon /> : null}
-                  {badge_1281 ? <NMIcon /> : null}
+                  {homebase2_flag && homebase2_flag !== homebase_flag ? (
+                    <Image
+                      source={{ uri: flagBaseUri + homebase2_flag }}
+                      style={adaptiveStyle([ProfileStyles.countryFlag, { marginLeft: -15 }], {})}
+                    />
+                  ) : null}
+                  <View style={adaptiveStyle(ProfileStyles.badgesWrapper, {})}>
+                    {auth ? <TickIcon /> : null}
+                    {badge_un ? <UNIcon /> : null}
+                    {badge_1281 ? <NMIcon /> : null}
+                  </View>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </TouchableOpacity>
-      <View style={adaptiveStyle(ScoreStyles.rankingWrapper, {})}>
-        <View style={adaptiveStyle(ScoreStyles.nmWrapper, {})}>
-          <Text style={adaptiveStyle(ScoreStyles.activeScoreRanking, {})}>
-            {score[active_score]}
-          </Text>
-          <Text style={adaptiveStyle(ScoreStyles.activeScoreName, {})}>
-            {scoreNames[active_score]}
-          </Text>
-          <TBRanking />
-        </View>
+        </TouchableOpacity>
+        <View style={adaptiveStyle(ScoreStyles.rankingWrapper, {})}>
+          <View style={adaptiveStyle(ScoreStyles.nmWrapper, {})}>
+            <View style={ScoreStyles.score}>
+              <Text style={adaptiveStyle(ScoreStyles.activeScoreRanking, {})}>
+                {score[active_score]}
+              </Text>
+              <Text style={adaptiveStyle(ScoreStyles.activeScoreName, {})}>
+                {scoreNames[active_score]}
+              </Text>
+            </View>
+            <TBRanking />
+          </View>
 
-        <View style={adaptiveStyle(ScoreStyles.rankingScoresWrapper, {})}>
-          {score.map((number, index) => {
-            if (scoreNames[index] === 'SLOW' && number >= 4500)
-              return <EmptyScore key={index} scoreName={scoreNames[index]} />;
-            if (scoreNames[index] === 'YES' && number >= 10000)
-              return <EmptyScore key={index} scoreName={scoreNames[index]} />;
-            if (!number) return <EmptyScore key={index} scoreName={scoreNames[index]} />;
-            return (
-              <View key={index} style={adaptiveStyle(ScoreStyles.scoreWrapper, {})}>
-                <Text style={adaptiveStyle([ScoreStyles.scoreHeaderText], {})}>{number}</Text>
-                <Text style={adaptiveStyle([ScoreStyles.scoreNameText], {})}>
-                  {scoreNames[index]}
-                </Text>
-              </View>
-            );
-          })}
+          <View style={adaptiveStyle(ScoreStyles.rankingScoresWrapper, {})}>
+            {score.map((number, index) => {
+              if (scoreNames[index] === 'SLOW' && number >= 4500)
+                return <EmptyScore key={index} scoreName={scoreNames[index]} />;
+              if (scoreNames[index] === 'YES' && number >= 10000)
+                return <EmptyScore key={index} scoreName={scoreNames[index]} />;
+              if (!number) return <EmptyScore key={index} scoreName={scoreNames[index]} />;
+              return (
+                <View key={index} style={adaptiveStyle(ScoreStyles.scoreWrapper, {})}>
+                  <Text style={adaptiveStyle([ScoreStyles.scoreHeaderText], {})}>{number}</Text>
+                  <Text style={adaptiveStyle([ScoreStyles.scoreNameText], {})}>
+                    {scoreNames[index]}
+                  </Text>
+                </View>
+              );
+            })}
+          </View>
         </View>
       </View>
       {modalType && (

src/screens/InAppScreens/TravellersScreen/Components/SeriesRankingItem.tsx

@@ -45,12 +45,18 @@ const SeriesRankingItem = React.memo(
           { backgroundColor: Colors.FILL_LIGHT, padding: 6, borderRadius: 8, marginBottom: 12 }
         ]}
       >
-        <View style={[ProfileStyles.profileRoot, {marginBottom: 0}]}>
-          <View style={{ paddingLeft: 20 }}>
-            <View>
+        <View style={[ProfileStyles.profileRoot, { marginBottom: 0 }]}>
+          <View style={{ flexDirection: 'row' }}>
+            <View
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: index + 1 < 100 ? 26 : index + 1 < 1000 ? 38 : 50
+              }}
+            >
               <Text style={ScoreStyles.rankText}>{index + 1}</Text>
             </View>
-            <View style={{ marginLeft: index + 1 < 100 ? 5 : index + 1 < 1000 ? 15 : 25 }}>
+            <View style={{ marginLeft: 4 }}>
               {item.avatar ? (
                 <Image style={ProfileStyles.profileAvatar} source={{ uri: avatarBaseUri }} />
               ) : (

src/screens/InAppScreens/TravellersScreen/Components/styles.ts

@@ -1,9 +1,14 @@
 import { Colors } from '../../../../theme';
 import { StyleSheet } from 'react-native';
 import { getFontSize } from '../../../../utils';
-import { widthPercentageToDP } from '../../ProfileScreen/navigation-opts';
 
 export const ProfileStyles = StyleSheet.create({
+  wrapper: {
+    backgroundColor: Colors.FILL_LIGHT,
+    borderRadius: 12,
+    marginBottom: 12,
+    flexDirection: 'row'
+  },
   badge: {
     width: 36,
     height: 14,
@@ -22,12 +27,29 @@ export const ProfileStyles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     gap: 10,
-    marginBottom: 5
+  },
+  index: {
+    backgroundColor: '#E7E7E7',
+    borderTopLeftRadius: 12,
+    borderBottomLeftRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  avatarContainer: {
+    backgroundColor: '#E7E7E7',
+    height: '100%',
+    paddingTop: 3,
+    paddingBottom: 4,
+    alignItems: 'center',
+    maxHeight: 70,
+    justifyContent: 'center'
   },
   profileAvatar: {
     borderRadius: 24,
     width: 48,
-    height: 48
+    height: 48,
+    borderWidth: 2,
+    borderColor: Colors.FILL_LIGHT,
   },
   profileFirstLastName: {
     flex: 1,
@@ -37,7 +59,9 @@ export const ProfileStyles = StyleSheet.create({
   },
   profileDataRoot: {
     gap: 5,
-    width: '75%'
+    paddingBottom: 4,
+    flex: 1,
+    paddingTop: 3
   },
   profileDataContainer: {
     display: 'flex',
@@ -82,7 +106,7 @@ export const ScoreStyles = StyleSheet.create({
     width: 40
   },
   scoreHeaderText: {
-    fontFamily: 'redhat-700',
+    fontFamily: 'montserrat-700',
     color: Colors.DARK_BLUE,
     fontSize: getFontSize(12),
     textAlign: 'center'
@@ -97,22 +121,17 @@ export const ScoreStyles = StyleSheet.create({
     fontSize: 18,
     color: Colors.DARK_BLUE,
     fontWeight: '700',
-    position: 'absolute',
-    left: -20,
-    top: 14
   },
   nmWrapper: {
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
-    marginLeft: widthPercentageToDP(6)
   },
   rankingWrapper: {
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: 8,
     flex: 1,
   },
   rankingScoresWrapper: {
@@ -121,29 +140,38 @@ export const ScoreStyles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     flexWrap: 'wrap',
-    columnGap: 5,
     flex: 1
   },
+  score: {
+    backgroundColor: '#E7E7E7',
+    width: 48,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flex: 1,
+    alignSelf: 'flex-start'
+  },
   activeScoreRanking: {
-    fontSize: 20,
+    fontSize: 16,
     color: Colors.DARK_BLUE,
-    fontWeight: '700'
+    fontWeight: '700',
+    fontFamily: 'montserrat-700',
   },
   activeScoreName: {
-    fontSize: 14,
+    fontSize: 12,
     color: Colors.DARK_BLUE,
-    fontWeight: '500'
+    fontWeight: '600'
   }
 });
 
 export const TBTStyles = StyleSheet.create({
   badgeRoot: {
     display: 'flex',
-    marginTop: 10
+    marginTop: 10,
+    flex: 1
   },
   badgeWrapper: {
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'center',
   }
 });