From 99e221c645f85b1f0a67f5cb4df5590d7b3ec0c4 Mon Sep 17 00:00:00 2001
From: Sergey Yuferev <s.yuferev@qiwi.com>
Date: Mon, 22 Apr 2019 16:26:36 +0300
Subject: [PATCH] fix(mobile): menu review 2,
 https://github.com/qiwi/pijma/pull/129

---
 .../src/horizontal-menu/HorizontalMenu.tsx    | 19 ++++++++++++-------
 .../horizontal-menu/HorizontalMenuItem.tsx    | 19 +++++--------------
 .../mobile/src/select-menu/SelectMenuItem.tsx | 17 +++++------------
 3 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx b/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx
index a83669efb..3becf551f 100644
--- a/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx
+++ b/packages/mobile/src/horizontal-menu/HorizontalMenu.tsx
@@ -1,4 +1,4 @@
-import {BaseMenuItem, styled, Flex, Card} from '@qiwi/pijma-core'
+import {BaseMenuItem, styled, Flex, Card, Box} from '@qiwi/pijma-core'
 import React from 'react'
 
 import {HorizontalMenuItem} from './HorizontalMenuItem'
@@ -42,13 +42,18 @@ export const HorizontalMenu = <Item extends BaseMenuItem>({
         wrap="nowrap"
         px={4}
         children={items.map((item, index) => (
-          <HorizontalMenuItem
-            id={`${id}-${item.id}`}
-            active={selected === item.id}
+          <Box
             key={item.id}
-            isLast={index === items.length - 1}
-            onClick={onSelect.bind(null, item)}
-            children={item.title}
+            id={`${id}-${item.id}-wrap`}
+            mr={index === items.length - 1 ? 0 : 6}
+            children={
+              <HorizontalMenuItem
+                id={`${id}-${item.id}`}
+                active={selected === item.id}
+                onClick={onSelect.bind(null, item)}
+                children={item.title}
+              />
+            }
           />
         ))}
       />
diff --git a/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx b/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx
index 6bf48fd80..f48762bff 100644
--- a/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx
+++ b/packages/mobile/src/horizontal-menu/HorizontalMenuItem.tsx
@@ -1,13 +1,14 @@
-import {Card, LinkControl, Lnk, Typo} from '@qiwi/pijma-core'
+import {Card, LinkControl, Lnk} from '@qiwi/pijma-core'
 import React from 'react'
 
+import {Text} from '../typography'
+
 export interface HorizontalMenuItemProps {
   active: boolean
   id: string
   href?: string
   target?: string
   reverse?: boolean
-  isLast?: boolean
   onClick?: () => void
 }
 
@@ -30,22 +31,12 @@ export const HorizontalMenuItem: React.FC<HorizontalMenuItemProps> = props => (
         onMouseUp={renderProps.onMouseUp}
         onMouseDown={renderProps.onMouseDown}
         cursor="pointer"
-        mr={props.isLast ? 0 : 6}
+        display="block"
         pb={1}
         bb={`4px solid ${
           renderProps.hover || props.active ? '#ff8c00' : 'transparent'
         }`}
-        children={
-          <Typo
-            id={`${props.id}-text`}
-            as="span"
-            cursor="pointer"
-            size={4}
-            height={6}
-            weight={500}
-            children={props.children}
-          />
-        }
+        children={<Text bold size="m" children={props.children} />}
       />
     )}
   />
diff --git a/packages/mobile/src/select-menu/SelectMenuItem.tsx b/packages/mobile/src/select-menu/SelectMenuItem.tsx
index db6773f0c..cf1b66bf3 100644
--- a/packages/mobile/src/select-menu/SelectMenuItem.tsx
+++ b/packages/mobile/src/select-menu/SelectMenuItem.tsx
@@ -1,6 +1,8 @@
-import {Card, LinkControl, Lnk, Typo} from '@qiwi/pijma-core'
+import {Card, LinkControl, Lnk} from '@qiwi/pijma-core'
 import React from 'react'
 
+import {Text} from '../typography'
+
 export interface SelectMenuItemProps {
   id: string
   href?: string
@@ -28,20 +30,11 @@ export const SelectMenuItem: React.FC<SelectMenuItemProps> = props => (
         onMouseUp={renderProps.onMouseUp}
         onMouseDown={renderProps.onMouseDown}
         cursor="pointer"
+        display="block"
         px={4}
         py={2}
         bg={`${renderProps.hover ? '#f5f5f5' : 'transparent'}`}
-        children={
-          <Typo
-            id={`${props.id}-text`}
-            weight={300}
-            as="span"
-            cursor="pointer"
-            size={4}
-            height={6}
-            children={props.children}
-          />
-        }
+        children={<Text bold={false} size="m" children={props.children} />}
       />
     )}
   />