Repository: kiwicom/mobile
Pull request #1151 (2018-09-27 11:35:30)

Menu Items: replacing TextIcons by Orbit icons


Patch:
diff --git a/app/MMB/src/menuGroups/ManageMenuGroup.js b/app/MMB/src/menuGroups/ManageMenuGroup.js
index 8715c263..d7413225 100644
--- a/app/MMB/src/menuGroups/ManageMenuGroup.js
+++ b/app/MMB/src/menuGroups/ManageMenuGroup.js
@@ -24,7 +24,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={<TextIcon code="F" orbit={true} />}
         title={<Translation id="mmb.main_menu.manage.help" />}
         description={<Translation id="mmb.main_menu.manage.help.description" />}
       />
@@ -32,7 +32,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={<TextIcon code="&#xe07d;" orbit={true} />}
         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 56fecc57..781036fe 100644
--- a/app/MMB/src/menuGroups/TripInfoMenuGroup.js
+++ b/app/MMB/src/menuGroups/TripInfoMenuGroup.js
@@ -25,14 +25,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={<TextIcon code="." orbit={true} />}
         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="&#xe059;" />}
+        icon={<TextIcon code="e" orbit={true} />}
         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 f664791c..40f04c04 100644
--- a/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
+++ b/app/MMB/src/menuGroups/passengerMenuGroup/PassengerMenuGroup.js
@@ -32,7 +32,7 @@ class PassengerMenuGroup extends React.Component<Props> {
           isActive={
             this.props.activeId === 'mmb.main_menu.passengers.passenger_details'
           }
-          icon={<TextIcon code="&#xe087;" />}
+          icon={<TextIcon code="w" orbit={true} />}
         />
       </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 5f91c9a9..4280ab7e 100644
--- a/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
+++ b/app/MMB/src/menuGroups/servicesMenuGroup/FlightServicesMenuItem.js
@@ -27,7 +27,7 @@ export const FlightServicesMenuItem = (props: Props) => {
     <MenuItem
       onPress={props.onPress}
       isActive={props.isActive}
-      icon={<TextIcon code="&#xe049;" />}
+      icon={<TextIcon code="&#xe049;" orbit={true} />}
       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 17bb4fa7..abaef09e 100644
--- a/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
+++ b/app/MMB/src/menuGroups/servicesMenuGroup/ServicesMenuGroup.js
@@ -43,7 +43,7 @@ export class ServicesMenuGroup extends React.Component<PropsWithContext> {
         isActive={
           this.props.activeId === 'mmb.main_menu.services.trip_services'
         }
-        icon={<TextIcon code="&#xe08a;" />}
+        icon={<TextIcon code="r" orbit={true} />}
         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/FlightServicesMenuGroup.js b/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
index 175eed53..3c230a41 100644
--- a/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
+++ b/app/MMB/src/scenes/flightServices/FlightServicesMenuGroup.js
@@ -31,37 +31,37 @@ const offeredFlightServices: OfferedFlightServicesType[] = [
     key: 'BAGS',
     title: <Translation id="mmb.flight_services.additional_baggage" />,
     routeName: 'mmb.flight_services.checked_baggage',
-    icon: <TextIcon code="&#xe071;" />,
+    icon: <TextIcon code="h" orbit={true} />,
   },
   {
     key: 'ALLOCATED_SEATING',
     title: <Translation id="mmb.flight_services.allocated_seating" />,
     routeName: 'mmb.flight_services.allocated_seating',
-    icon: <TextIcon code="&#xe02a;" />,
+    icon: <TextIcon code="&#xe02a;" orbit={true} />,
   },
   {
     key: 'SPORTS_EQUIPMENT',
     title: <Translation id="mmb.flight_services.sports_equipment" />,
     routeName: 'mmb.flight_services.sports_equipment',
-    icon: <TextIcon code="&#xe089;" />,
+    icon: <TextIcon code="&#xe089;" orbit={true} />,
   },
   {
     key: 'MUSICAL_EQUIPMENT',
     title: <Translation id="mmb.flight_services.musical_equipment" />,
     routeName: 'mmb.flight_services.musical_equipment',
-    icon: <TextIcon code="&#xe086;" />,
+    icon: <TextIcon code="&#xe086;" orbit={true} />,
   },
   {
     key: 'SPECIAL_ASSISTANCE',
     title: <Translation id="mmb.flight_services.special_assistance" />,
     routeName: 'mmb.flight_services.special_assistance',
-    icon: <TextIcon code="&#xe088;" />,
+    icon: <TextIcon code="&#xe088;" orbit={true} />,
   },
   {
     key: 'TRAVELLING_WITH_PETS',
     title: <Translation id="mmb.flight_services.traveling_with_pets" />,
     routeName: 'mmb.flight_services.pets',
-    icon: <TextIcon code="&#xe043;" />,
+    icon: <TextIcon code="&#xe043;" orbit={true} />,
   },
 ];
 
diff --git a/app/MMB/src/scenes/help/Help.js b/app/MMB/src/scenes/help/Help.js
index 47d046b3..26853cab 100644
--- a/app/MMB/src/scenes/help/Help.js
+++ b/app/MMB/src/scenes/help/Help.js
@@ -77,7 +77,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={
+                <TextIcon code="&#xe058;" style={styles.icon} orbit={true} />
+              }
               description={<Translation passThrough={`+${number}`} />}
             />
           )}
diff --git a/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js b/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
index 21affc30..9c091ade 100644
--- a/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/CarRentalMenuItem.js
@@ -109,7 +109,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={<TextIcon code="&#xe03a;" orbit={true} />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/LoungeMenuItem.js b/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
index 44e08d29..cd99d3a7 100644
--- a/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/LoungeMenuItem.js
@@ -107,7 +107,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={<TextIcon code="&#xe04e;" orbit={true} />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/ParkingMenuItem.js b/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
index 73f46810..e1f5a885 100644
--- a/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/ParkingMenuItem.js
@@ -47,7 +47,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={<TextIcon code="&#xe03e;" orbit={true} />}
       />
     );
   };
diff --git a/app/MMB/src/scenes/tripServices/TripServiceRefreshContainer.js b/app/MMB/src/scenes/tripServices/TripServiceRefreshContainer.js
index 57f3bfcc..d68500cb 100644
--- a/app/MMB/src/scenes/tripServices/TripServiceRefreshContainer.js
+++ b/app/MMB/src/scenes/tripServices/TripServiceRefreshContainer.js
@@ -78,7 +78,12 @@ class TripServiceRefreshContainer extends React.Component<Props, State> {
       {/* TODO: ordered services - how does it work here? */}
 
       <TitledMenuGroup
-        title={<Translation id="mmb.trip_services.general_services" />}
+        title={
+          <Translation
+            id="mmb.trip_services.general_services"
+            textTransform="uppercase"
+          />
+        }
       >
         <InsuranceMenuItemContainer
           onOpenInsurance={this.openInsurance}
@@ -87,7 +92,12 @@ class TripServiceRefreshContainer extends React.Component<Props, State> {
       </TitledMenuGroup>
 
       <TitledMenuGroup
-        title={<Translation id="mmb.trip_services.local_services" />}
+        title={
+          <Translation
+            id="mmb.trip_services.local_services"
+            textTransform="uppercase"
+          />
+        }
       >
         <CarRentalMenuItem
           data={idx(this.props.data, _ => _.availableWhitelabeledServices)}
diff --git a/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js b/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
index 43db33f5..9eea40d5 100644
--- a/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/hotelMenuItem/HotelMenuItem.js
@@ -154,7 +154,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="&#xe03a;" />}
+          icon={<TextIcon code="&#xe085;" orbit={true} />}
         />
       </React.Fragment>
     );
diff --git a/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js b/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
index cb2fc432..c81ab747 100644
--- a/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/insuranceMenuItem/InsuranceMenuItem.js
@@ -39,7 +39,7 @@ export class InsuranceMenuItem extends React.Component<Props> {
         title={
           <Translation id="mmb.trip_services.general_services.insurance" />
         }
-        icon={<TextIcon code="'" />}
+        icon={<TextIcon code="'" orbit={true} />}
         onPress={this.onPress}
       />
     );
diff --git a/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js b/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
index 6f7742bc..582df43b 100644
--- a/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/transportationMenuItem/TransportationMenuItem.js
@@ -133,7 +133,7 @@ class TransportationMenuItem extends React.Component<Props, State> {
             <Translation id="mmb.trip_services.local_services.transportation" />
           }
           onPress={this.openPopup}
-          icon={<TextIcon code=";" />}
+          icon={<TextIcon code=";" orbit={true} />}
         />
       </React.Fragment>
     );
diff --git a/packages/navigation/src/MenuItemIcon.js b/packages/navigation/src/MenuItemIcon.js
index bc031513..4beb7eab 100644
--- a/packages/navigation/src/MenuItemIcon.js
+++ b/packages/navigation/src/MenuItemIcon.js
@@ -31,10 +31,10 @@ const styleSheet = StyleSheet.create({
   },
   icon: {
     android: {
-      fontSize: 15,
+      fontSize: 20,
     },
     ios: {
-      fontSize: 14,
+      fontSize: 19,
       color: defaultTokens.colorIconSecondary,
     },
   },


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 4b037a72..a1a6f00d 100644
--- a/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
+++ b/app/MMB/src/scenes/flightServices/__tests__/FlightServicesMenuGroup.test.js
@@ -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="&#xe071;" />,
+        icon: <TextIcon code="h" orbit={true} />,
       },
     ],
     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: <TextIcon code="&#xe02a;" orbit={true} />,
       },
       {
         key: 'SPORTS_EQUIPMENT',
         title: <Translation id="mmb.flight_services.sports_equipment" />,
         routeName: 'mmb.flight_services.sports_equipment',
-        icon: <TextIcon code="&#xe089;" />,
+        icon: <TextIcon code="&#xe089;" orbit={true} />,
       },
       {
         key: 'MUSICAL_EQUIPMENT',
         title: <Translation id="mmb.flight_services.musical_equipment" />,
         routeName: 'mmb.flight_services.musical_equipment',
-        icon: <TextIcon code="&#xe086;" />,
+        icon: <TextIcon code="&#xe086;" orbit={true} />,
       },
       {
         key: 'SPECIAL_ASSISTANCE',
         title: <Translation id="mmb.flight_services.special_assistance" />,
         routeName: 'mmb.flight_services.special_assistance',
-        icon: <TextIcon code="&#xe088;" />,
+        icon: <TextIcon code="&#xe088;" orbit={true} />,
       },
       {
         key: 'TRAVELLING_WITH_PETS',
         title: <Translation id="mmb.flight_services.traveling_with_pets" />,
         routeName: 'mmb.flight_services.pets',
-        icon: <TextIcon code="&#xe043;" />,
+        icon: <TextIcon code="&#xe043;" orbit={true} />,
       },
     ],
   });