fix(mobile): menu review 2, #129

Author: Sergey Yuferev

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}
+              />
+            }
           />
         ))}
       />

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} />}
       />
     )}
   />

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} />}
       />
     )}
   />