Repository: kiwicom/mobile
Pull request #1437 (2019-01-16 17:55:58)

Hotels: Use icon component in HotelAmenities
Refactor component structure for hotel amenities


Patch:
diff --git a/app/MMB/src/components/header/Header.js b/app/MMB/src/components/header/Header.js
index 529d2c1f..78502bcc 100644
--- a/app/MMB/src/components/header/Header.js
+++ b/app/MMB/src/components/header/Header.js
@@ -5,7 +5,7 @@ import { View } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import {
   AdaptableLayout,
-  TextIcon,
+  Icon,
   StyleSheet,
   TouchableWithoutFeedback,
 } from '@kiwicom/mobile-shared';
@@ -84,7 +84,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
               onPress={this.handleOpenTripOverviewSubmenu}
               title={<Translation id="mmb.flight_overview.title" />}
               isActive={this.props.activeId === 'mmb.main_menu.trip_overview'}
-              icon={<TextIcon code="f" />}
+              icon={<Icon name="calendar" />}
             />
           </React.Fragment>
         }
diff --git a/app/MMB/src/menuGroups/ManageMenuGroup.js b/app/MMB/src/menuGroups/ManageMenuGroup.js
index 4b56fb31..ea0f4a4d 100644
--- a/app/MMB/src/menuGroups/ManageMenuGroup.js
+++ b/app/MMB/src/menuGroups/ManageMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
 
@@ -25,7 +25,7 @@ export default class ManageMenuGroup extends React.Component<Props> {
         <MenuItem
           onPress={this.handleOpenHelpSubmenu}
           isActive={this.props.activeId === 'mmb.main_menu.manage.help'}
-          icon={<TextIcon code="F" />}
+          icon={<Icon name="question-circle" />}
           title={<Translation id="mmb.main_menu.manage.help" />}
           description={
             <Translation id="mmb.main_menu.manage.help.description" />
@@ -35,7 +35,7 @@ export default class ManageMenuGroup extends React.Component<Props> {
         <MenuItem
           onPress={this.handleOpenOtherSubmenu}
           isActive={this.props.activeId === 'mmb.main_menu.manage.other'}
-          icon={<TextIcon code="&#xe07d;" />}
+          icon={<Icon name="menu-meatballs" />}
           title={<Translation id="mmb.main_menu.manage.other" />}
           description={
             <Translation id="mmb.main_menu.manage.other.description" />
diff --git a/app/MMB/src/menuGroups/TripInfoMenuGroup.js b/app/MMB/src/menuGroups/TripInfoMenuGroup.js
index efad3ccd..664e7a73 100644
--- a/app/MMB/src/menuGroups/TripInfoMenuGroup.js
+++ b/app/MMB/src/menuGroups/TripInfoMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
 
@@ -26,14 +26,14 @@ export default class TripInfoMenuGroup extends React.Component<Props> {
           onPress={this.handleOpenTicketsSubmenu}
           title={<Translation id="mmb.button.tickets" />}
           isActive={this.props.activeId === 'mmb.main_menu.trip_info.tickets'}
-          icon={<TextIcon code="." />}
+          icon={<Icon name="ticket" />}
           description={<Translation id="mmb.tickets.boarding_passes" />}
         />
         <MenuItem
           onPress={this.handleOpenTimelineSubmenu}
           title={<Translation id="mmb.timeline.title" />}
           isActive={this.props.activeId === 'mmb.main_menu.trip_info.timeline'}
-          icon={<TextIcon code="e" />}
+          icon={<Icon name="clock" />}
           description={<Translation id="mmb.subtitle.trip_schedule" />}
         />
       </TitledMenuGroup>
diff --git a/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js b/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
index a8e2d1af..5b771f1e 100644
--- a/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
+++ b/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
@@ -34,7 +34,7 @@ class PassengerMenuGroup extends React.Component<Props> {
               this.props.activeId ===
               'mmb.main_menu.passengers.passenger_details'
             }
-            icon={<TextIcon code="w" />}
+            icon={<Icon name="passenger" />}
           />
         </TitledMenuGroup>
         <PassengerMenuDetail data={this.props.data} />
diff --git a/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js b/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
index d39da173..9bcf679a 100644
--- a/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
+++ b/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 
 import type { FlightServicesMenuItem as BookingType } from './__generated__/FlightServicesMenuItem.graphql';
@@ -26,7 +26,7 @@ export const FlightServicesMenuItem = (props: Props) => {
     <MenuItem
       onPress={props.onPress}
       isActive={props.isActive}
-      icon={<TextIcon code="&#xe049;" />}
+      icon={<Icon name="flight-services" />}
       title={<Translation id="mmb.main_menu.services.flight_services" />}
       description={
         <Translation id="mmb.main_menu.services.flight_services.description" />
diff --git a/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js b/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
index 9cb26d15..693ade20 100644
--- a/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
+++ b/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem, TitledMenuGroup } from '@kiwicom/mobile-navigation';
 
@@ -44,7 +44,7 @@ export class ServicesMenuGroup extends React.Component<PropsWithContext> {
           isActive={
             this.props.activeId === 'mmb.main_menu.services.trip_services'
           }
-          icon={<TextIcon code="r" />}
+          icon={<Icon name="insurance-confirmed" />}
           title={<Translation id="mmb.main_menu.services.trip_services" />}
           description={
             <Translation id="mmb.main_menu.services.trip_services.description" />
diff --git a/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js b/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js
index 5ea6d808..e1b06436 100644
--- a/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js
+++ b/app/MMB/src/scenes/flightServices/FlightServiceMenuItem.js
@@ -2,14 +2,14 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { type RouteNamesType, MenuItem } from '@kiwicom/mobile-navigation';
 
 type Props = {|
   +title: React.Element<typeof Translation>,
   +navigate: (routeName: RouteNamesType) => void,
   +routeName: RouteNamesType,
-  +icon: React.Element<typeof TextIcon>,
+  +icon: React.Element<typeof Icon>,
 |};
 
 export default class FlightServiceMenuItem extends React.Component<Props> {
diff --git a/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js b/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
index dac96a9e..44190ef9 100644
--- a/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
+++ b/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { TextIcon, RefreshableScrollView } from '@kiwicom/mobile-shared';
+import { Icon, RefreshableScrollView } from '@kiwicom/mobile-shared';
 import {
   type RouteNamesType,
   type NavigationType,
@@ -22,7 +22,7 @@ type OfferedFlightServicesType = {|
   key: string,
   title: React.Element<typeof Translation>,
   routeName: RouteNamesType,
-  icon: React.Element<typeof TextIcon>,
+  icon: React.Element<typeof Icon>,
 |};
 
 const offeredFlightServices: OfferedFlightServicesType[] = [
@@ -30,37 +30,37 @@ const offeredFlightServices: OfferedFlightServicesType[] = [
     key: 'BAGS',
     title: <Translation id="mmb.flight_services.additional_baggage" />,
     routeName: 'mmb.flight_services.checked_baggage',
-    icon: <TextIcon code="h" />,
+    icon: <Icon name="baggage-checked" />,
   },
   {
     key: 'ALLOCATED_SEATING',
     title: <Translation id="mmb.flight_services.allocated_seating" />,
     routeName: 'mmb.flight_services.allocated_seating',
-    icon: <TextIcon code="&#xe02a;" />,
+    icon: <Icon name="seat" />,
   },
   {
     key: 'SPORTS_EQUIPMENT',
     title: <Translation id="mmb.flight_services.sports_equipment" />,
     routeName: 'mmb.flight_services.sports_equipment',
-    icon: <TextIcon code="&#xe089;" />,
+    icon: <Icon name="gym" />,
   },
   {
     key: 'MUSICAL_EQUIPMENT',
     title: <Translation id="mmb.flight_services.musical_equipment" />,
     routeName: 'mmb.flight_services.musical_equipment',
-    icon: <TextIcon code="&#xe086;" />,
+    icon: <Icon name="musical-instruments" />,
   },
   {
     key: 'SPECIAL_ASSISTANCE',
     title: <Translation id="mmb.flight_services.special_assistance" />,
     routeName: 'mmb.flight_services.special_assistance',
-    icon: <TextIcon code="&#xe088;" />,
+    icon: <Icon name="wheelchair" />,
   },
   {
     key: 'TRAVELLING_WITH_PETS',
     title: <Translation id="mmb.flight_services.traveling_with_pets" />,
     routeName: 'mmb.flight_services.pets',
-    icon: <TextIcon code="&#xe043;" />,
+    icon: <Icon name="pet" />,
   },
 ];
 
diff --git a/app/MMB/src/scenes/help/Help.js b/app/MMB/src/scenes/help/Help.js
index 9d0ef281..7cd8ff9c 100644
--- a/app/MMB/src/scenes/help/Help.js
+++ b/app/MMB/src/scenes/help/Help.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
 import { ScrollView, Platform, Linking } from 'react-native';
-import { TextIcon, StyleSheet } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation, Alert } from '@kiwicom/mobile-localization';
 import {
   MenuItem,
@@ -76,7 +76,9 @@ class Help extends React.Component<Props> {
             <MenuItem
               title={<Translation id="mmb.sub_menu.help.call_support" />}
               onPress={this.handleOpenCallSupport}
-              actionIcon={<TextIcon code="&#xe058;" style={styles.icon} />}
+              actionIcon={
+                <Icon name="phone" color={defaultTokens.paletteProductNormal} />
+              }
               description={<Translation passThrough={`+${number}`} />}
             />
           )}
@@ -86,13 +88,6 @@ class Help extends React.Component<Props> {
   }
 }
 
-const styles = StyleSheet.create({
-  icon: {
-    color: defaultTokens.paletteProductNormal,
-    fontSize: 22,
-  },
-});
-
 export default createFragmentContainer(
   withNavigation(Help),
   graphql`
diff --git a/app/MMB/src/scenes/tickets/TicketDeleteButton.js b/app/MMB/src/scenes/tickets/TicketDeleteButton.js
index 1069f7a6..fe4e31d7 100644
--- a/app/MMB/src/scenes/tickets/TicketDeleteButton.js
+++ b/app/MMB/src/scenes/tickets/TicketDeleteButton.js
@@ -1,7 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
-import { TextIcon, StyleSheet } from '@kiwicom/mobile-shared';
+import { Icon, StyleSheet } from '@kiwicom/mobile-shared';
 import { HeaderButton } from '@kiwicom/mobile-navigation';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 import RNFetchBlob from 'rn-fetch-blob';
@@ -110,7 +110,12 @@ export class TicketDeleteButton extends React.Component<
     }
     return (
       <HeaderButton.Right onPress={this.onPress}>
-        <TextIcon code="W" style={styles.icon} />
+        <Icon
+          name="remove"
+          color={defaultTokens.paletteProductNormal}
+          style={styles.icon}
+          size="small"
+        />
       </HeaderButton.Right>
     );
   }
@@ -133,8 +138,6 @@ export default withNavigationFocus(TicketDeleteButtonWithContext);
 
 const styles = StyleSheet.create({
   icon: {
-    fontSize: 21,
-    color: defaultTokens.paletteProductNormal,
     alignSelf: 'flex-start',
   },
 });
diff --git a/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js b/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
index 9b135c2a..8bc7da27 100644
--- a/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import querystring from 'querystring';
@@ -107,7 +107,7 @@ export class CarRentalMenuItem extends React.Component<Props, State> {
             <Translation id="mmb.trip_services.local_services.car_rental" />
           }
           onPress={this.openPopup}
-          icon={<TextIcon code="&#xe03a;" />}
+          icon={<Icon name="car" />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/LoungeMenuItem.js b/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
index 466b0c2e..e90aa1a6 100644
--- a/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import querystring from 'querystring';
@@ -105,7 +105,7 @@ class LoungeMenuItem extends React.Component<Props, State> {
         <MenuItem
           title={<Translation id="mmb.trip_services.local_services.lounge" />}
           onPress={this.openPopup}
-          icon={<TextIcon code="&#xe04e;" />}
+          icon={<Icon name="lounge" />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/ParkingMenuItem.js b/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
index 945a1866..6d79f394 100644
--- a/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation, DeviceInfo } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import querystring from 'querystring';
@@ -45,7 +45,7 @@ class ParkingMenuItem extends React.Component<Props> {
       <MenuItem
         title={<Translation id="mmb.trip_services.local_services.parking" />}
         onPress={this.openLink}
-        icon={<TextIcon code="&#xe03e;" />}
+        icon={<Icon name="parking" />}
       />
     );
   }
diff --git a/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js b/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
index ea39bf60..e04d573b 100644
--- a/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
@@ -8,11 +8,7 @@ import {
   DateUtils,
   DateFormatter,
 } from '@kiwicom/mobile-localization';
-import {
-  TextIcon,
-  Dimensions,
-  type DimensionType,
-} from '@kiwicom/mobile-shared';
+import { Icon, Dimensions, type DimensionType } from '@kiwicom/mobile-shared';
 import {
   MenuItem,
   withNavigation,
@@ -150,7 +146,7 @@ export class HotelMenuItem extends React.Component<PropsWithContext, State> {
         <MenuItem
           title={<Translation id="mmb.trip_services.local_services.hotel" />}
           onPress={this.menuItemOnPress}
-          icon={<TextIcon code="&#xe085;" />}
+          icon={<Icon name="accommodation" />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js b/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
index 4223c29a..59e06947 100644
--- a/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
@@ -1,7 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation, DateUtils, Alert } from '@kiwicom/mobile-localization';
 import { MenuItem } from '@kiwicom/mobile-navigation';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
@@ -38,7 +38,7 @@ export class InsuranceMenuItem extends React.Component<Props> {
         title={
           <Translation id="mmb.trip_services.general_services.insurance" />
         }
-        icon={<TextIcon code="'" />}
+        icon={<Icon name="insurance" />}
         onPress={this.onPress}
       />
     );
diff --git a/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js b/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
index c7c9adb5..f0a66a09 100644
--- a/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import {
   MenuItem,
@@ -128,7 +128,7 @@ class TransportationMenuItem extends React.Component<Props, State> {
             <Translation id="mmb.trip_services.local_services.transportation" />
           }
           onPress={this.openPopup}
-          icon={<TextIcon code=";" />}
+          icon={<Icon name="taxi" />}
         />
       </React.Fragment>
     );
diff --git a/app/core/src/screens/hotelsStack/Homepage.js b/app/core/src/screens/hotelsStack/Homepage.js
index 32a609b0..4154ab5c 100644
--- a/app/core/src/screens/hotelsStack/Homepage.js
+++ b/app/core/src/screens/hotelsStack/Homepage.js
@@ -38,7 +38,7 @@ export default class Homepage extends React.Component<Props> {
       currency: 'EUR',
       checkin: DateFormatter(DateUtils().addDays(30)).formatForMachine(),
       checkout: DateFormatter(DateUtils().addDays(36)).formatForMachine(),
-      roomsConfiguration: [{ adultsCount: 3, children: [] }],
+      roomsConfiguration: [{ adultsCount: 1, children: [] }],
     });
 
   goToStay22HotelsPage = () =>
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenities.js b/app/hotels/src/filter/hotelAmenities/HotelAmenities.js
new file mode 100644
index 00000000..0855f6d5
--- /dev/null
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenities.js
@@ -0,0 +1,59 @@
+// @flow strict
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { type TranslationType } from '@kiwicom/mobile-localization';
+import { Icon, StyleSheet } from '@kiwicom/mobile-shared';
+import { defaultTokens } from '@kiwicom/mobile-orbit';
+import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
+
+import HotelAmenityCheckbox from './HotelAmenityCheckbox';
+
+type Amenity = {|
+  +text: TranslationType,
+  +icon: string,
+  +amenityName: string,
+|};
+
+type Props = {|
+  +amenities: $ReadOnlyArray<Amenity>,
+  +onPress: string => void,
+  +selectedAmenities: $ReadOnlyArray<string>,
+|};
+
+const SEPARATOR_HEIGHT = 0.5;
+
+export default function HotelAmenities(props: Props) {
+  return props.amenities.map<React.Node>(amenity => (
+    <View style={styles.wrapper} key={amenity.amenityName}>
+      <HotelAmenityCheckbox
+        isChecked={props.selectedAmenities.includes(amenity.amenityName)}
+        onPress={props.onPress}
+        icon={
+          <Icon name={amenity.icon} style={styles.amenityIcon} size="small" />
+        }
+        amenityName={amenity.amenityName}
+        text={amenity.text}
+      />
+      <View style={styles.separatorEnd}>
+        <SeparatorTrimmed
+          gapSizeStart={31}
+          color={defaultTokens.paletteInkLighter}
+          height={SEPARATOR_HEIGHT}
+        />
+      </View>
+    </View>
+  ));
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    marginBottom: -SEPARATOR_HEIGHT,
+  },
+  amenityIcon: {
+    marginEnd: 10,
+  },
+  separatorEnd: {
+    marginEnd: -15,
+  },
+});
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js b/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
index 2e583349..460eb0a5 100644
--- a/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenitiesPopup.js
@@ -1,19 +1,13 @@
 // @flow
 
 import * as React from 'react';
-import { View } from 'react-native';
-import {
-  ButtonPopup,
-  Checkbox,
-  StyleSheet,
-  Text,
-  TextIcon,
-} from '@kiwicom/mobile-shared';
+import { ButtonPopup, StyleSheet, Text } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
-import { SeparatorTrimmed } from '@kiwicom/mobile-navigation';
 import { SafeAreaView } from 'react-navigation';
 
+import HotelAmenities from './HotelAmenities';
+
 type Props = {|
   +amenities: string[],
   +onClose: () => void,
@@ -22,134 +16,112 @@ type Props = {|
 |};
 
 type State = {|
-  facilities: string[],
+  amenities: string[],
 |};
 
-const amenitiesList = {
-  airportShuttle: {
+const amenitiesList = [
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.airport_shuttle" />
     ),
-    icon: '<',
+    icon: 'bus',
+    amenityName: 'airportShuttle',
   },
-  familyRooms: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.family_rooms" />
     ),
-    icon: '\ue05d',
+    icon: 'child-friendly',
+    amenityName: 'familyRooms',
   },
-  facilitiesForDisabled: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.facilities_for_disabled" />
     ),
-    icon: '\uE088',
+    icon: 'wheelchair',
+    amenityName: 'facilitiesForDisabled',
   },
-  fitnessCenter: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.fitness_center" />
     ),
-    icon: '\uE089',
+    icon: 'gym',
+    amenityName: 'fitnessCenter',
   },
-  parking: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.parking" />
     ),
-    icon: '\uE03E',
+    icon: 'parking',
+    amenityName: 'parking',
   },
-  freeParking: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.free_parking" />
     ),
-    icon: '\uE03E',
+    icon: 'parking',
+    amenityName: 'freeParking',
   },
-  valetParking: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.valet_parking" />
     ),
-    icon: '\uE03E',
+    icon: 'parking',
+    amenityName: 'valetParking',
   },
-  indoorPool: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.indoor_pool" />
     ),
-    icon: '\uE123',
+    icon: 'pool',
+    amenityName: 'indoorPool',
   },
-  petsAllowed: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.pets_allowed" />
     ),
-    icon: '\uE043',
+    icon: 'pet',
+    amenityName: 'petsAllowed',
   },
-  spa: {
+  {
     text: <Translation id="hotels_search.filter.hotel_facilities_filter.spa" />,
-    icon: '\uE04A',
+    icon: 'spa',
+    amenityName: 'spa',
   },
-  wifi: {
+  {
     text: (
       <Translation id="hotels_search.filter.hotel_facilities_filter.wifi" />
     ),
-    icon: '\uE062',
+    icon: 'wifi',
+    amenityName: 'wifi',
   },
-};
+];
 
 export default class HotelAmenitiesPopup extends React.Component<Props, State> {
   state = {
-    facilities: this.props.amenities,
+    amenities: this.props.amenities,
   };
 
   static getDerivedStateFromProps = ({ amenities, isVisible }: Props) => {
     return isVisible ? null : amenities;
   };
 
-  handleCheckboxOnPress = (option: string) => () =>
+  handleCheckboxOnPress = (option: string) => {
     this.setState(state => {
-      let facilities = [...state.facilities];
-      if (facilities.includes(option)) {
-        facilities = facilities.filter(facility => facility !== option);
-      } else {
-        facilities.push(option);
+      if (state.amenities.includes(option)) {
+        return {
+          amenities: state.amenities.filter(amenity => amenity !== option),
+        };
       }
-      return { facilities };
-    });
-
-  onSave = () => this.props.onSave(this.state.facilities);
-
-  renderCheckboxes = (facilities: string[]) => {
-    const checkboxes = [];
-    const facilitiesListKeys = Object.keys(amenitiesList);
-    const facilitiesListLength = facilitiesListKeys.length;
-    facilitiesListKeys.forEach((key, i) => {
-      const facility = amenitiesList[key];
-      const isFacilityChecked = facilities.includes(key);
-      const isNotLastRow = i < facilitiesListLength - 1;
-      checkboxes.push(
-        <React.Fragment key={i}>
-          <Checkbox
-            isChecked={isFacilityChecked}
-            onPress={this.handleCheckboxOnPress(key)}
-          >
-            <View style={styles.checkbox}>
-              <TextIcon code={facility.icon} style={styles.facilityIcon} />
-              {facility.text}
-            </View>
-          </Checkbox>
-          {isNotLastRow && (
-            <View style={styles.separatorEnd}>
-              <SeparatorTrimmed
-                gapSizeStart={31}
-                color={defaultTokens.paletteInkLighter}
-                height={0.5}
-              />
-            </View>
-          )}
-        </React.Fragment>,
-      );
+      return {
+        amenities: [...state.amenities, option],
+      };
     });
-    return checkboxes;
   };
 
+  onSave = () => this.props.onSave(this.state.amenities);
+
   render() {
-    const { facilities } = this.state;
     return (
       <SafeAreaView>
         <ButtonPopup
@@ -166,7 +138,11 @@ export default class HotelAmenitiesPopup extends React.Component<Props, State> {
           <Text style={styles.title}>
             <Translation id="hotels_search.filter.hotel_facilities_popup.title" />
           </Text>
-          {this.renderCheckboxes(facilities)}
+          <HotelAmenities
+            onPress={this.handleCheckboxOnPress}
+            amenities={amenitiesList}
+            selectedAmenities={this.state.amenities}
+          />
         </ButtonPopup>
       </SafeAreaView>
     );
@@ -181,14 +157,4 @@ const styles = StyleSheet.create({
     paddingTop: 15,
     paddingBottom: 10,
   },
-  checkbox: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  facilityIcon: {
-    marginEnd: 10,
-  },
-  separatorEnd: {
-    marginEnd: -15,
-  },
 });
diff --git a/app/hotels/src/filter/hotelAmenities/HotelAmenityCheckbox.js b/app/hotels/src/filter/hotelAmenities/HotelAmenityCheckbox.js
new file mode 100644
index 00000000..b4d51177
--- /dev/null
+++ b/app/hotels/src/filter/hotelAmenities/HotelAmenityCheckbox.js
@@ -0,0 +1,38 @@
+// @flow strict
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { Checkbox, Icon, StyleSheet } from '@kiwicom/mobile-shared';
+import { type TranslationType } from '@kiwicom/mobile-localization';
+
+type Props = {|
+  +isChecked: boolean,
+  +icon: React.Element<typeof Icon>,
+  +onPress: string => void,
+  +amenityName: string,
+  +text: TranslationType,
+|};
+
+export default class HotelAmenityCheckbox extends React.Component<Props> {
+  onPress = () => {
+    this.props.onPress(this.props.amenityName);
+  };
+
+  render() {
+    return (
+      <Checkbox isChecked={this.props.isChecked} onPress={this.onPress}>
+        <View style={styles.checkbox}>
+          {this.props.icon}
+          {this.props.text}
+        </View>
+      </Checkbox>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  checkbox: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
diff --git a/package.json b/package.json
index d84430c0..d35737f0 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
     "react": "16.6.3",
     "react-native": "^0.57.8",
     "react-native-app-registry-components-to-constants": "0.0.1",
-    "detox": "^9.0.5",
+    "detox": "^10.0.2",
     "react-native-code-push": "^5.5.1"
   },
   "peerDependencies": {
diff --git a/packages/navigation/src/HeaderButton.js b/packages/navigation/src/HeaderButton.js
index 2838dcdf..0e3bb410 100644
--- a/packages/navigation/src/HeaderButton.js
+++ b/packages/navigation/src/HeaderButton.js
@@ -6,7 +6,6 @@ import {
   Touchable,
   StyleSheet,
   Text,
-  TextIcon,
   Icon,
   type StylePropType,
 } from '@kiwicom/mobile-shared';
@@ -21,7 +20,6 @@ type Props = {|
   +onLongPress?: (React.ElementRef<typeof Touchable>) => void,
   +children:
     | React.Element<typeof HeaderButton.Text>
-    | React.Element<typeof TextIcon>
     | React.Element<typeof Icon>,
   +left?: boolean,
   +style?: StylePropType,
@@ -68,7 +66,7 @@ export default class HeaderButton extends React.PureComponent<Props, State> {
   static CloseModal = ({ onPress, text }: CloseModalProps) => (
     <HeaderButton.Left onPress={onPress}>
       {Platform.OS === 'android' ? (
-        <TextIcon code="X" style={styles.closeIcon} />
+        <Icon name="close" color={defaultTokens.paletteProductNormal} />
       ) : (
         <HeaderButton.Text>
           {text || <Translation id="shared.button.close" />}
@@ -162,10 +160,6 @@ const styles = StyleSheet.create({
   disabledButton: {
     color: defaultTokens.paletteCloudNormal,
   },
-  closeIcon: {
-    fontSize: 24,
-    color: defaultTokens.paletteProductNormal,
-  },
 });
 
 HeaderButton.Left.displayName = 'HeaderButton.Left';
diff --git a/packages/navigation/src/MenuItem.js b/packages/navigation/src/MenuItem.js
index 4eac0968..f4b2f085 100644
--- a/packages/navigation/src/MenuItem.js
+++ b/packages/navigation/src/MenuItem.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import {
-  TextIcon,
+  Icon,
   StyleSheet,
   Text,
   Touchable,
@@ -20,10 +20,10 @@ type Props = {|
   isActive: boolean,
 
   // icon on the left
-  icon?: React.Element<typeof TextIcon>,
+  icon?: React.Element<typeof Icon>,
 
   // icon on the right (arrow by default)
-  actionIcon?: React.Element<typeof TextIcon>,
+  actionIcon?: React.Element<typeof Icon>,
   description?: React.Element<typeof Translation>,
   testID?: string,
 |};
@@ -78,7 +78,10 @@ function MenuItem(props: Props) {
             renderOnNarrow={Platform.select({
               ios: (
                 <View style={styleSheet.rightArrow}>
-                  <TextIcon code="&#xe01F;" style={styles.icon} />
+                  <Icon
+                    name="chevron-right"
+                    color={defaultTokens.paletteProductNormal}
+                  />
                 </View>
               ),
               android: null,
@@ -93,14 +96,6 @@ function MenuItem(props: Props) {
 AdaptableMenuItem.defaultProps = {
   isActive: false,
 };
-
-const styles = StyleSheet.create({
-  icon: {
-    color: defaultTokens.paletteProductNormal,
-    fontSize: 26,
-  },
-});
-
 export default function AdaptableMenuItem(props: Props) {
   // Menu item can be activated but only on tablets (wide devices). Otherwise
   // it's not possible to activate it because new scene should always open
diff --git a/packages/navigation/src/MenuItemIcon.js b/packages/navigation/src/MenuItemIcon.js
index 4beb7eab..66466a07 100644
--- a/packages/navigation/src/MenuItemIcon.js
+++ b/packages/navigation/src/MenuItemIcon.js
@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import { StyleSheet, Icon } from '@kiwicom/mobile-shared';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
 type Props = {|
   +invertColors: boolean,
-  +iconComponent: React.Element<typeof TextIcon>,
+  +iconComponent: React.Element<typeof Icon>,
 |};
 
 export default function MenuItemIcon(props: Props) {
@@ -32,9 +32,15 @@ const styleSheet = StyleSheet.create({
   icon: {
     android: {
       fontSize: 20,
+      height: 20,
+      width: 20,
+      lineHeight: 20,
     },
     ios: {
       fontSize: 19,
+      height: 19,
+      width: 19,
+      lineHeight: 19,
       color: defaultTokens.colorIconSecondary,
     },
   },
diff --git a/yarn.lock b/yarn.lock
index 30010755..1edd7c83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2634,10 +2634,10 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
-detox@^9.0.5:
-  version "9.0.5"
-  resolved "https://registry.yarnpkg.com/detox/-/detox-9.0.5.tgz#69e74f189df8fcf693c620b35d95a7631d5153c3"
-  integrity sha512-GXRrZ8OVKXtDbvbcxbryhsnyba+7CK6curwZzkFp2AHnpI1hw5qwf//hwGrrlnNeBVJAVqXjcaFGTFl7FAcIPA==
+detox@^10.0.2:
+  version "10.0.2"
+  resolved "https://registry.yarnpkg.com/detox/-/detox-10.0.2.tgz#a14f931f723a6482a04d0b7dda658cf6ecf64979"
+  integrity sha512-F3CYajiLVwxcvOhrgLUgh4ML7rS+3Je/4N2tZnpGFkMj8IyATVArUkTUEnfIXvVhJLE1LByu7XawfMxVh6MjEg==
   dependencies:
     bunyan "^1.8.12"
     bunyan-debug-stream "^1.1.0"


Test patch:
diff --git a/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js b/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
index b9db960b..85ccd858 100644
--- a/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
+++ b/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { TextIcon } from '@kiwicom/mobile-shared';
+import { Icon } from '@kiwicom/mobile-shared';
 
 import { FlightServicesMenuGroup } from '../FlightServicesMenuGroup';
 
@@ -29,7 +29,7 @@ it('should split ordered services from not ordered services', () => {
         key: 'BAGS',
         title: <Translation id="mmb.flight_services.additional_baggage" />,
         routeName: 'mmb.flight_services.checked_baggage',
-        icon: <TextIcon code="h" />,
+        icon: <Icon name="baggage-checked" />,
       },
     ],
     rest: [
@@ -37,31 +37,31 @@ it('should split ordered services from not ordered services', () => {
         key: 'ALLOCATED_SEATING',
         title: <Translation id="mmb.flight_services.allocated_seating" />,
         routeName: 'mmb.flight_services.allocated_seating',
-        icon: <TextIcon code="&#xe02a;" />,
+        icon: <Icon name="seat" />,
       },
       {
         key: 'SPORTS_EQUIPMENT',
         title: <Translation id="mmb.flight_services.sports_equipment" />,
         routeName: 'mmb.flight_services.sports_equipment',
-        icon: <TextIcon code="&#xe089;" />,
+        icon: <Icon name="gym" />,
       },
       {
         key: 'MUSICAL_EQUIPMENT',
         title: <Translation id="mmb.flight_services.musical_equipment" />,
         routeName: 'mmb.flight_services.musical_equipment',
-        icon: <TextIcon code="&#xe086;" />,
+        icon: <Icon name="musical-instruments" />,
       },
       {
         key: 'SPECIAL_ASSISTANCE',
         title: <Translation id="mmb.flight_services.special_assistance" />,
         routeName: 'mmb.flight_services.special_assistance',
-        icon: <TextIcon code="&#xe088;" />,
+        icon: <Icon name="wheelchair" />,
       },
       {
         key: 'TRAVELLING_WITH_PETS',
         title: <Translation id="mmb.flight_services.traveling_with_pets" />,
         routeName: 'mmb.flight_services.pets',
-        icon: <TextIcon code="&#xe043;" />,
+        icon: <Icon name="pet" />,
       },
     ],
   });
diff --git a/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap b/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
index d3cd8ffc..883b2b9d 100644
--- a/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
+++ b/app/MMB/src/scenes/tickets/__tests__/__snapshots__/TicketDeleteButton.test.js.snap
@@ -48,32 +48,24 @@ exports[`TicketDeleteButton renders correctly when booking has local files 1`] =
         style={
           Array [
             Object {
-              "color": "#171b1e",
-              "fontFamily": "CircularPro-Book",
-              "fontSize": 14,
-              "fontWeight": "normal",
-              "letterSpacing": -0.15,
+              "fontFamily": "orbit-icons",
+            },
+            Object {
+              "fontSize": 16,
+              "height": 16,
+              "lineHeight": 16,
+              "width": 16,
+            },
+            Object {
+              "color": "#00a991",
+            },
+            Object {
+              "alignSelf": "flex-start",
             },
-            Array [
-              Object {
-                "color": "#7f91a8",
-                "fontFamily": "orbit-icons",
-                "fontSize": 20,
-                "includeFontPadding": false,
-                "textAlignVertical": "center",
-              },
-              Object {
-                "alignSelf": "flex-start",
-                "color": "#00a991",
-                "fontSize": 21,
-              },
-            ],
           ]
         }
       >
-        <Text>
-          W
-        </Text>
+        W
       </Text>
     </View>
   </View>