feat: Travellers screen | MenuButton fix name

assets/icons/chart-pie.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_693_3919)">
+<path d="M8.44423 6.66667V0.461111C8.44423 0.211111 8.63867 0 8.88867 0C12.3248 0 15.1109 2.78611 15.1109 6.22222C15.1109 6.47222 14.8998 6.66667 14.6498 6.66667H8.44423ZM0.888672 7.55556C0.888672 4.18611 3.39145 1.39722 6.63867 0.952778C6.89423 0.916667 7.11089 1.12222 7.11089 1.38056V8L11.4581 12.3472C11.6442 12.5333 11.6303 12.8389 11.4164 12.9889C10.3276 13.7667 8.99423 14.2222 7.55534 14.2222C3.87478 14.2222 0.888672 11.2389 0.888672 7.55556ZM15.5109 8C15.7692 8 15.972 8.21667 15.9387 8.47222C15.7248 10.025 14.9776 11.4056 13.8859 12.425C13.7192 12.5806 13.4581 12.5694 13.297 12.4056L8.88867 8H15.5109Z" />
+</g>
+<defs>
+<clipPath id="clip0_693_3919">
+<rect width="16" height="14.2222" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/crown.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.58333 2.94423C8.9 2.74978 9.11111 2.39701 9.11111 1.99978C9.11111 1.38589 8.61389 0.888672 8 0.888672C7.38611 0.888672 6.88889 1.38589 6.88889 1.99978C6.88889 2.39978 7.1 2.74978 7.41667 2.94423L5.825 6.12756C5.57222 6.63312 4.91667 6.77756 4.475 6.42478L2 4.44423C2.13889 4.25812 2.22222 4.02756 2.22222 3.77756C2.22222 3.16367 1.725 2.66645 1.11111 2.66645C0.497222 2.66645 0 3.16367 0 3.77756C0 4.39145 0.497222 4.88867 1.11111 4.88867C1.11667 4.88867 1.125 4.88867 1.13056 4.88867L2.4 11.872C2.55278 12.7164 3.28889 13.3331 4.15 13.3331H11.85C12.7083 13.3331 13.4444 12.7192 13.6 11.872L14.8694 4.88867C14.875 4.88867 14.8833 4.88867 14.8889 4.88867C15.5028 4.88867 16 4.39145 16 3.77756C16 3.16367 15.5028 2.66645 14.8889 2.66645C14.275 2.66645 13.7778 3.16367 13.7778 3.77756C13.7778 4.02756 13.8611 4.25812 14 4.44423L11.525 6.42478C11.0833 6.77756 10.4278 6.63312 10.175 6.12756L8.58333 2.94423Z" />
+</svg>

assets/icons/id-card.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6667 4.44423V11.5553C14.6667 11.7998 14.4667 11.9998 14.2222 11.9998H8.88889C8.88889 10.772 7.89444 9.77756 6.66667 9.77756H4.88889C3.66111 9.77756 2.66667 10.772 2.66667 11.9998H1.77778C1.53333 11.9998 1.33333 11.7998 1.33333 11.5553V4.44423H14.6667ZM1.77778 0.888672C0.797222 0.888672 0 1.68589 0 2.66645V11.5553C0 12.5359 0.797222 13.3331 1.77778 13.3331H14.2222C15.2028 13.3331 16 12.5359 16 11.5553V2.66645C16 1.68589 15.2028 0.888672 14.2222 0.888672H1.77778ZM7.55556 7.11089C7.55556 6.6394 7.36825 6.18721 7.03486 5.85382C6.70146 5.52042 6.24927 5.33312 5.77778 5.33312C5.30628 5.33312 4.8541 5.52042 4.5207 5.85382C4.1873 6.18721 4 6.6394 4 7.11089C4 7.58239 4.1873 8.03457 4.5207 8.36797C4.8541 8.70137 5.30628 8.88867 5.77778 8.88867C6.24927 8.88867 6.70146 8.70137 7.03486 8.36797C7.36825 8.03457 7.55556 7.58239 7.55556 7.11089ZM10.4444 5.77756C10.075 5.77756 9.77778 6.07478 9.77778 6.44423C9.77778 6.81367 10.075 7.11089 10.4444 7.11089H12.6667C13.0361 7.11089 13.3333 6.81367 13.3333 6.44423C13.3333 6.07478 13.0361 5.77756 12.6667 5.77756H10.4444ZM10.4444 8.44423C10.075 8.44423 9.77778 8.74145 9.77778 9.11089C9.77778 9.48034 10.075 9.77756 10.4444 9.77756H12.6667C13.0361 9.77756 13.3333 9.48034 13.3333 9.11089C13.3333 8.74145 13.0361 8.44423 12.6667 8.44423H10.4444Z" />
+</svg>

assets/icons/monument.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_693_3921)">
+<path d="M5.64687 0.146777C5.84062 -0.0469727 6.15938 -0.0469727 6.35313 0.146777L8.85312 2.64678C8.93125 2.7249 8.98125 2.82803 8.99687 2.9374L10.2531 12.9999H1.74688L3.00312 2.9374C3.01562 2.82803 3.06562 2.7249 3.14687 2.64678L5.64687 0.146777ZM4.75 8.4999C4.33437 8.4999 4 8.83428 4 9.2499C4 9.66553 4.33437 9.9999 4.75 9.9999H7.25C7.66563 9.9999 8 9.66553 8 9.2499C8 8.83428 7.66563 8.4999 7.25 8.4999H4.75ZM1 13.9999H11C11.5531 13.9999 12 14.4468 12 14.9999C12 15.553 11.5531 15.9999 11 15.9999H1C0.446875 15.9999 0 15.553 0 14.9999C0 14.4468 0.446875 13.9999 1 13.9999Z" />
+</g>
+<defs>
+<clipPath id="clip0_693_3921">
+<rect width="12" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/scroll.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2.22201V3.55534C0 4.04701 0.397222 4.44423 0.888889 4.44423H1.33333H2.66667V2.22201C2.66667 1.48589 2.06944 0.888672 1.33333 0.888672C0.597222 0.888672 0 1.48589 0 2.22201ZM3.11111 0.888672C3.38889 1.26089 3.55556 1.72201 3.55556 2.22201V10.6664C3.55556 11.647 4.35278 12.4442 5.33333 12.4442C6.31389 12.4442 7.11111 11.647 7.11111 10.6664V10.5192C7.11111 9.61923 7.84167 8.88867 8.74167 8.88867H13.3333V3.55534C13.3333 2.08312 12.1389 0.888672 10.6667 0.888672H3.11111ZM12.8889 13.3331C14.6083 13.3331 16 11.9415 16 10.222C16 9.97756 15.8 9.77756 15.5556 9.77756H8.74167C8.33333 9.77756 8 10.1081 8 10.5192V10.6664C8 12.1387 6.80556 13.3331 5.33333 13.3331H10.2222H12.8889Z" />
+</svg>

assets/icons/street-view.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_706_3958)">
+<path d="M10 2C10 1.46957 9.78929 0.960859 9.41421 0.585786C9.03914 0.210714 8.53043 0 8 0C7.46957 0 6.96086 0.210714 6.58579 0.585786C6.21071 0.960859 6 1.46957 6 2C6 2.53043 6.21071 3.03914 6.58579 3.41421C6.96086 3.78929 7.46957 4 8 4C8.53043 4 9.03914 3.78929 9.41421 3.41421C9.78929 3.03914 10 2.53043 10 2ZM7 5C5.89687 5 5 5.89687 5 7V8.5C5 9.05313 5.44688 9.5 6 9.5H6.05625L6.40312 12.6094C6.45937 13.1156 6.8875 13.5 7.39687 13.5H8.60625C9.11562 13.5 9.54375 13.1156 9.6 12.6094L9.94375 9.5H10C10.5531 9.5 11 9.05313 11 8.5V7C11 5.89687 10.1031 5 9 5H7ZM4.13438 12.3188C4.54063 12.2438 4.8125 11.8531 4.7375 11.4469C4.6625 11.0406 4.27187 10.7688 3.86562 10.8438C2.85312 11.0281 1.9625 11.2875 1.30313 11.6187C0.975 11.7844 0.66875 11.9844 0.434375 12.2312C0.2 12.4844 0 12.8281 0 13.25C0 13.9187 0.484375 14.3781 0.909375 14.6562C1.36875 14.9563 1.98125 15.1969 2.67188 15.3875C4.06875 15.7719 5.95 16 8 16C10.05 16 11.9312 15.7719 13.325 15.3875C14.0156 15.1969 14.6312 14.9563 15.0875 14.6562C15.5156 14.3781 15.9969 13.9187 15.9969 13.25C15.9969 12.8281 15.7969 12.4844 15.5594 12.2312C15.325 11.9844 15.0188 11.7844 14.6906 11.6187C14.0344 11.2875 13.1438 11.0281 12.1281 10.8438C11.7219 10.7688 11.3313 11.0406 11.2563 11.4469C11.1813 11.8531 11.4531 12.2438 11.8594 12.3188C12.8031 12.4906 13.5375 12.7188 14.0156 12.9594C14.1156 13.0094 14.1969 13.0563 14.2625 13.1C14.375 13.175 14.375 13.325 14.2625 13.4C13.9875 13.5781 13.5406 13.7688 12.9187 13.9406C11.6969 14.2812 9.95312 14.5 8 14.5C6.04688 14.5 4.30313 14.2812 3.07188 13.9406C2.45 13.7688 2.00312 13.5781 1.72812 13.4C1.61563 13.325 1.61563 13.175 1.72812 13.1C1.79375 13.0563 1.87813 13.0094 1.975 12.9594C2.45312 12.7188 3.1875 12.4938 4.13125 12.3188H4.13438Z" />
+</g>
+<defs>
+<clipPath id="clip0_706_3958">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/trophy.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_697_3925)">
+<path d="M11.1111 0H4.88889C4.15278 0 3.55278 0.605556 3.58056 1.33889C3.58611 1.48611 3.59167 1.63333 3.6 1.77778H0.666667C0.297222 1.77778 0 2.075 0 2.44444C0 5.01667 0.930556 6.80556 2.18056 8.01944C3.41111 9.21667 4.91111 9.81944 6.01667 10.125C6.66667 10.3056 7.11111 10.8472 7.11111 11.3917C7.11111 11.9722 6.63889 12.4444 6.05833 12.4444H5.33333C4.84167 12.4444 4.44444 12.8417 4.44444 13.3333C4.44444 13.825 4.84167 14.2222 5.33333 14.2222H10.6667C11.1583 14.2222 11.5556 13.825 11.5556 13.3333C11.5556 12.8417 11.1583 12.4444 10.6667 12.4444H9.94167C9.36111 12.4444 8.88889 11.9722 8.88889 11.3917C8.88889 10.8472 9.33056 10.3028 9.98333 10.125C11.0917 9.81944 12.5917 9.21667 13.8222 8.01944C15.0694 6.80556 16 5.01667 16 2.44444C16 2.075 15.7028 1.77778 15.3333 1.77778H12.4C12.4083 1.63333 12.4139 1.48889 12.4194 1.33889C12.4472 0.605556 11.8472 0 11.1111 0ZM1.35833 3.11111H3.70278C3.95556 5.61389 4.51389 7.28611 5.14444 8.40556C4.45278 8.1 3.73333 7.66944 3.11111 7.06389C2.22222 6.2 1.5 4.95278 1.36111 3.11111H1.35833ZM12.8917 7.06389C12.2694 7.66944 11.55 8.1 10.8583 8.40556C11.4889 7.28611 12.0472 5.61389 12.3 3.11111H14.6444C14.5028 4.95278 13.7806 6.2 12.8944 7.06389H12.8917Z" />
+</g>
+<defs>
+<clipPath id="clip0_697_3925">
+<rect width="16" height="14.2222" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/icons/user-group.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_706_3956)">
+<path d="M2.4 3.2C2.4 2.35131 2.73714 1.53737 3.33726 0.937258C3.93737 0.337142 4.75131 0 5.6 0C6.44869 0 7.26263 0.337142 7.86274 0.937258C8.46286 1.53737 8.8 2.35131 8.8 3.2C8.8 4.04869 8.46286 4.86263 7.86274 5.46274C7.26263 6.06286 6.44869 6.4 5.6 6.4C4.75131 6.4 3.93737 6.06286 3.33726 5.46274C2.73714 4.86263 2.4 4.04869 2.4 3.2ZM0 12.0575C0 9.595 1.995 7.6 4.4575 7.6H6.7425C9.205 7.6 11.2 9.595 11.2 12.0575C11.2 12.4675 10.8675 12.8 10.4575 12.8H0.7425C0.3325 12.8 0 12.4675 0 12.0575ZM15.2325 12.8H11.785C11.92 12.565 12 12.2925 12 12V11.8C12 10.2825 11.3225 8.92 10.255 8.005C10.315 8.0025 10.3725 8 10.4325 8H11.9675C14.195 8 16 9.805 16 12.0325C16 12.4575 15.655 12.8 15.2325 12.8ZM10.8 6.4C10.025 6.4 9.325 6.085 8.8175 5.5775C9.31 4.9125 9.6 4.09 9.6 3.2C9.6 2.53 9.435 1.8975 9.1425 1.3425C9.6075 1.0025 10.18 0.8 10.8 0.8C12.3475 0.8 13.6 2.0525 13.6 3.6C13.6 5.1475 12.3475 6.4 10.8 6.4Z" />
+</g>
+<defs>
+<clipPath id="clip0_706_3956">
+<rect width="16" height="12.8" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/MenuButton/index.tsx

@@ -14,7 +14,7 @@ type ButtonProps = {
   red?: boolean;
 };
 
-export const SettingsButton: FC<ButtonProps> = ({ label, icon, buttonFn, red }) => {
+export const MenuButton: FC<ButtonProps> = ({ label, icon, buttonFn, red }) => {
   const navigation = useNavigation();
 
   return (

src/screens/InAppScreens/ProfileScreen/Settings/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Header, PageWrapper, SettingsButton } from '../../../../components';
+import { Header, PageWrapper, MenuButton } from '../../../../components';
 import { NAVIGATION_PAGES } from '../../../../types';
 import { Colors } from '../../../../theme';
 
@@ -65,7 +65,7 @@ const Settings = () => {
     <PageWrapper>
       <Header label={'Settings'} />
       {buttons.map((button) => (
-        <SettingsButton
+        <MenuButton
           label={button.label}
           icon={button.icon}
           red={button.red}

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -1,11 +1,61 @@
 import React from 'react';
-import { View, Text } from 'react-native';
+
+import { Colors } from '../../../theme';
+import { PageWrapper, MenuButton } from '../../../components';
+
+import { MenuButtonType } from '../../../types/components';
+
+import UserGroupIcon from '../../../../assets/icons/user-group.svg';
+import CrownIcon from '../../../../assets/icons/crown.svg';
+import IDCardIcon from '../../../../assets/icons/id-card.svg';
+import StreetPeopleIcon from '../../../../assets/icons/street-view.svg';
+import ChartPieIcon from '../../../../assets/icons/chart-pie.svg';
+import MemoriamIcon from '../../../../assets/icons/monument.svg';
+import ScrollIcon from '../../../../assets/icons/scroll.svg';
+import TrophyIcon from '../../../../assets/icons/trophy.svg';
+
+const buttons: MenuButtonType[] = [
+  {
+    label: 'Master Ranking',
+    icon: <UserGroupIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'UN Masters',
+    icon: <CrownIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'LPI Ranking',
+    icon: <IDCardIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'Series Ranking',
+    icon: <StreetPeopleIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'Statistics',
+    icon: <ChartPieIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'In Memoriam',
+    icon: <MemoriamIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'In History',
+    icon: <ScrollIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  },
+  {
+    label: 'Triumphs',
+    icon: <TrophyIcon fill={Colors.DARK_BLUE} width={20} height={20} />
+  }
+];
 
 const TravellersScreen = () => {
   return (
-    <View>
-      <Text>Travellers Screen</Text>
-    </View>
+    <PageWrapper>
+      {buttons.map((button) => (
+        <MenuButton label={button.label} icon={button.icon} />
+      ))}
+    </PageWrapper>
   );
 };