Repository: kiwicom/mobile
Pull request #1195 (2018-10-08 09:05:54)

UI fix: Aligning elements in Tickets scene


Patch:
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/BoardingPasses.js b/app/MMB/src/scenes/tickets/boardingPasses/BoardingPasses.js
index b314f539..b335ee52 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/BoardingPasses.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/BoardingPasses.js
@@ -38,7 +38,7 @@ const BoardingPasses = (props: Props) => (
 
 const styles = StyleSheet.create({
   header: {
-    marginBottom: 12,
+    marginBottom: 28,
     paddingTop: 4,
   },
 });
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/FlightFromTo.js b/app/MMB/src/scenes/tickets/boardingPasses/FlightFromTo.js
index 0536a15f..680d3f13 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/FlightFromTo.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/FlightFromTo.js
@@ -8,6 +8,7 @@ import { TextIcon, StyleSheet, Text } from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
+import BoardingPassRow from '../components/BoardingPassRow';
 import AppleWallet from './appleWallet/AppleWallet';
 import DownloadButton from './DownloadButton';
 import type { FlightFromTo as RouteStopType } from './__generated__/FlightFromTo.graphql';
@@ -37,48 +38,54 @@ export class FlightFromTo extends React.Component<PropsWithContext> {
       : '';
     const time = date ? DateFormatter(new Date(date)).formatToTime() : '';
     return (
-      <View style={styles.row}>
-        <View style={styles.dateContainer}>
-          <Text style={styles.dateText}>
-            <Translation passThrough={shortDate} />
-          </Text>
-          <Text style={styles.dateText}>
-            <Translation passThrough={time} />
-          </Text>
-        </View>
-        <View style={styles.rightColumn}>
-          <View style={[styles.row, styles.cityContainer]}>
-            <Text style={styles.cityText}>
-              <Translation
-                passThrough={idx(
-                  this.props.data,
-                  _ => _.departure.airport.city.name,
-                )}
-              />
+      <BoardingPassRow
+        leftColumn={
+          <View style={styles.dateContainer}>
+            <Text style={styles.dateText}>
+              <Translation passThrough={shortDate} />
             </Text>
-            <TextIcon code="C" style={styles.icon} />
-            <Text style={styles.cityText}>
-              <Translation
-                passThrough={idx(
-                  this.props.data,
-                  _ => _.arrival.airport.city.name,
-                )}
-              />
+            <Text style={styles.dateText}>
+              <Translation passThrough={time} />
             </Text>
           </View>
-          <View style={styles.buttonContainer}>
-            <DownloadButton data={idx(this.props.data, _ => _.boardingPass)} />
-          </View>
-          {Platform.OS === 'ios' && (
-            <View style={styles.appleWalletContainer}>
-              <AppleWallet
-                segmentId={idx(this.props.data, _ => _.id)}
+        }
+        rightColumn={
+          <View style={styles.rightColumn}>
+            <View style={[styles.row, styles.cityContainer]}>
+              <Text style={styles.cityText}>
+                <Translation
+                  passThrough={idx(
+                    this.props.data,
+                    _ => _.departure.airport.city.name,
+                  )}
+                />
+              </Text>
+              <TextIcon code="C" style={styles.icon} />
+              <Text style={styles.cityText}>
+                <Translation
+                  passThrough={idx(
+                    this.props.data,
+                    _ => _.arrival.airport.city.name,
+                  )}
+                />
+              </Text>
+            </View>
+            <View style={styles.buttonContainer}>
+              <DownloadButton
                 data={idx(this.props.data, _ => _.boardingPass)}
               />
             </View>
-          )}
-        </View>
-      </View>
+            {Platform.OS === 'ios' && (
+              <View style={styles.appleWalletContainer}>
+                <AppleWallet
+                  segmentId={idx(this.props.data, _ => _.id)}
+                  data={idx(this.props.data, _ => _.boardingPass)}
+                />
+              </View>
+            )}
+          </View>
+        }
+      />
     );
   };
 }
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/FlightSegments.js b/app/MMB/src/scenes/tickets/boardingPasses/FlightSegments.js
index 1442025c..5459d40b 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/FlightSegments.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/FlightSegments.js
@@ -9,6 +9,7 @@ import { SeparatorFullWidth } from '@kiwicom/mobile-navigation';
 import idx from 'idx';
 import { defaultTokens } from '@kiwicom/mobile-orbit';
 
+import BoardingPassRow from '../components/BoardingPassRow';
 import FlightFromTo from './FlightFromTo';
 import type { FlightSegments as FlightSegmentsType } from './__generated__/FlightSegments.graphql';
 
@@ -25,12 +26,15 @@ const FlightSegments = (props: Props) => {
   });
   return (
     <React.Fragment>
-      <View style={styles.row}>
-        {icon}
-        <Text style={styles.text}>{props.iconTitle}</Text>
-      </View>
+      <BoardingPassRow
+        leftColumn={icon}
+        rightColumn={<Text style={styles.text}>{props.iconTitle}</Text>}
+      />
       <View style={styles.separator}>
-        <SeparatorFullWidth />
+        <SeparatorFullWidth
+          color={defaultTokens.paletteCloudLight}
+          height={1}
+        />
       </View>
       {legs.map(item => (
         <View style={styles.flightItem} key={idx(item, _ => _.id)}>
@@ -54,21 +58,17 @@ export default createFragmentContainer(
 );
 
 const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
   separator: {
     marginBottom: 20,
-    marginTop: 9,
+    marginTop: 5,
   },
   text: {
     color: defaultTokens.colorTextSecondary,
     fontSize: 12,
-    alignSelf: 'center',
   },
   icon: {
-    marginEnd: 18,
     fontSize: 24,
+    alignSelf: 'center',
   },
   flightItem: {
     marginBottom: 20,
diff --git a/app/MMB/src/scenes/tickets/components/BoardingPassRow.js b/app/MMB/src/scenes/tickets/components/BoardingPassRow.js
new file mode 100644
index 00000000..cbcaa106
--- /dev/null
+++ b/app/MMB/src/scenes/tickets/components/BoardingPassRow.js
@@ -0,0 +1,31 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { StyleSheet } from '@kiwicom/mobile-shared';
+
+type Props = {|
+  +leftColumn: React.Node,
+  +rightColumn: React.Node,
+|};
+
+const BoardingPassRow = ({ leftColumn, rightColumn }: Props) => (
+  <View style={styles.row}>
+    <View style={styles.leftColumn}>{leftColumn}</View>
+    <View style={styles.rightColumn}>{rightColumn}</View>
+  </View>
+);
+
+export default BoardingPassRow;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  leftColumn: {
+    width: 50,
+  },
+  rightColumn: {
+    flex: 1,
+  },
+});
diff --git a/packages/localization/src/vocabularies/ManageMyBooking.js b/packages/localization/src/vocabularies/ManageMyBooking.js
index 51a25e31..fef88f5c 100644
--- a/packages/localization/src/vocabularies/ManageMyBooking.js
+++ b/packages/localization/src/vocabularies/ManageMyBooking.js
@@ -49,7 +49,7 @@ export default {
   'mmb.boarding_passes.future_booking_information.missing_information':
     'We need your passport/ID details to check you in online.',
   'mmb.boarding_passes.future_booking_information.available':
-    'You have been provided with digital boarding pass, but you should print it out because some airlines require a physical copy',
+    "We've provided you with a digital boarding pass but you should print it out because some airlines require a physical copy.",
   'mmb.boarding_passes.apple_wallet.title': 'Apple Wallet boarding pass',
   'mmb.boarding_passes.apple_wallet.information_text':
     'Board the plane with an electronic boarding pass from your Apple Wallet',


Test patch:
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/__tests__/FlightFromTo.test.js b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/FlightFromTo.test.js
index 28feec7e..ed8dadef 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/__tests__/FlightFromTo.test.js
+++ b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/FlightFromTo.test.js
@@ -14,118 +14,116 @@ describe('FlightFromTo', () => {
     const wrapper = renderer.render(<FlightFromTo />);
 
     expect(wrapper).toMatchInlineSnapshot(`
-<Component
-  style={
-    Object {
-      "flexDirection": "row",
-    }
-  }
->
-  <Component
-    style={
-      Object {
-        "marginEnd": 10,
-      }
-    }
-  >
-    <Text
-      style={
-        Object {
-          "color": "#7f91a8",
-          "fontSize": 12,
-          "fontWeight": "600",
-        }
-      }
-    >
-      <Translation
-        passThrough=""
-      />
-    </Text>
-    <Text
+<BoardingPassRow
+  leftColumn={
+    <Component
       style={
         Object {
-          "color": "#7f91a8",
-          "fontSize": 12,
-          "fontWeight": "600",
+          "marginEnd": 10,
         }
       }
-    >
-      <Translation
-        passThrough=""
-      />
-    </Text>
-  </Component>
-  <Component
-    style={
-      Object {
-        "flex": 1,
-        "marginEnd": 9,
-      }
-    }
-  >
-    <Component
-      style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "alignSelf": "flex-start",
-          },
-        ]
-      }
     >
       <Text
         style={
           Object {
-            "fontSize": 16,
+            "color": "#7f91a8",
+            "fontSize": 12,
             "fontWeight": "600",
           }
         }
       >
-        <Translation />
+        <Translation
+          passThrough=""
+        />
       </Text>
-      <TextIcon
-        code="C"
-        style={
-          Object {
-            "color": "#7f91a8",
-            "fontSize": 18,
-            "marginHorizontal": 8,
-          }
-        }
-      />
       <Text
         style={
           Object {
-            "fontSize": 16,
+            "color": "#7f91a8",
+            "fontSize": 12,
             "fontWeight": "600",
           }
         }
       >
-        <Translation />
+        <Translation
+          passThrough=""
+        />
       </Text>
     </Component>
+  }
+  rightColumn={
     <Component
       style={
         Object {
-          "marginTop": 15,
+          "flex": 1,
+          "marginEnd": 9,
         }
       }
     >
-      <ForwardRef(Relay(withNavigation(DownloadButton))) />
-    </Component>
-    <Component
-      style={
-        Object {
-          "marginTop": 20,
+      <Component
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "alignSelf": "flex-start",
+            },
+          ]
         }
-      }
-    >
-      <ForwardRef(Relay(AppleWallet)) />
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 16,
+              "fontWeight": "600",
+            }
+          }
+        >
+          <Translation />
+        </Text>
+        <TextIcon
+          code="C"
+          style={
+            Object {
+              "color": "#7f91a8",
+              "fontSize": 18,
+              "marginHorizontal": 8,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 16,
+              "fontWeight": "600",
+            }
+          }
+        >
+          <Translation />
+        </Text>
+      </Component>
+      <Component
+        style={
+          Object {
+            "marginTop": 15,
+          }
+        }
+      >
+        <ForwardRef(Relay(withNavigation(DownloadButton))) />
+      </Component>
+      <Component
+        style={
+          Object {
+            "marginTop": 20,
+          }
+        }
+      >
+        <ForwardRef(Relay(AppleWallet)) />
+      </Component>
     </Component>
-  </Component>
-</Component>
+  }
+/>
 `);
   });
 
@@ -134,109 +132,107 @@ describe('FlightFromTo', () => {
     Platform.OS = 'android';
     // $FlowExpectedError: https://github.com/flow-typed/flow-typed/issues/2264
     expect(renderer.render(<FlightFromTo />)).toMatchInlineSnapshot(`
-<Component
-  style={
-    Object {
-      "flexDirection": "row",
-    }
-  }
->
-  <Component
-    style={
-      Object {
-        "marginEnd": 10,
-      }
-    }
-  >
-    <Text
-      style={
-        Object {
-          "color": "#7f91a8",
-          "fontSize": 12,
-          "fontWeight": "600",
-        }
-      }
-    >
-      <Translation
-        passThrough=""
-      />
-    </Text>
-    <Text
+<BoardingPassRow
+  leftColumn={
+    <Component
       style={
         Object {
-          "color": "#7f91a8",
-          "fontSize": 12,
-          "fontWeight": "600",
+          "marginEnd": 10,
         }
       }
-    >
-      <Translation
-        passThrough=""
-      />
-    </Text>
-  </Component>
-  <Component
-    style={
-      Object {
-        "flex": 1,
-        "marginEnd": 9,
-      }
-    }
-  >
-    <Component
-      style={
-        Array [
-          Object {
-            "flexDirection": "row",
-          },
-          Object {
-            "alignSelf": "flex-start",
-          },
-        ]
-      }
     >
       <Text
         style={
           Object {
-            "fontSize": 16,
+            "color": "#7f91a8",
+            "fontSize": 12,
             "fontWeight": "600",
           }
         }
       >
-        <Translation />
+        <Translation
+          passThrough=""
+        />
       </Text>
-      <TextIcon
-        code="C"
-        style={
-          Object {
-            "color": "#7f91a8",
-            "fontSize": 18,
-            "marginHorizontal": 8,
-          }
-        }
-      />
       <Text
         style={
           Object {
-            "fontSize": 16,
+            "color": "#7f91a8",
+            "fontSize": 12,
             "fontWeight": "600",
           }
         }
       >
-        <Translation />
+        <Translation
+          passThrough=""
+        />
       </Text>
     </Component>
+  }
+  rightColumn={
     <Component
       style={
         Object {
-          "marginTop": 15,
+          "flex": 1,
+          "marginEnd": 9,
         }
       }
     >
-      <ForwardRef(Relay(withNavigation(DownloadButton))) />
+      <Component
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+            },
+            Object {
+              "alignSelf": "flex-start",
+            },
+          ]
+        }
+      >
+        <Text
+          style={
+            Object {
+              "fontSize": 16,
+              "fontWeight": "600",
+            }
+          }
+        >
+          <Translation />
+        </Text>
+        <TextIcon
+          code="C"
+          style={
+            Object {
+              "color": "#7f91a8",
+              "fontSize": 18,
+              "marginHorizontal": 8,
+            }
+          }
+        />
+        <Text
+          style={
+            Object {
+              "fontSize": 16,
+              "fontWeight": "600",
+            }
+          }
+        >
+          <Translation />
+        </Text>
+      </Component>
+      <Component
+        style={
+          Object {
+            "marginTop": 15,
+          }
+        }
+      >
+        <ForwardRef(Relay(withNavigation(DownloadButton))) />
+      </Component>
     </Component>
-  </Component>
-</Component>
+  }
+/>
 `);
     Platform.OS = OriginalPlatform;
   });