From fb6f1bdba0da95c0f770a9438709710540998fba Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Thu, 21 Dec 2017 00:02:22 -0600 Subject: [PATCH] [RN] Accommodate iPhone X on the WelcomePage --- react/features/welcome/components/styles.js | 28 ++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js index 879c01a87..d1babc6b7 100644 --- a/react/features/welcome/components/styles.js +++ b/react/features/welcome/components/styles.js @@ -54,7 +54,11 @@ export default createStyleSheet({ alignItems: 'center', flex: 0, flexDirection: 'row', - justifyContent: 'center' + justifyContent: 'center', + + // XXX Lift the legaleseContainer up above the iPhone X home indicator; + // otherwise, the former is partially underneath the latter. + marginBottom: BoxModel.margin }, /** @@ -62,6 +66,10 @@ export default createStyleSheet({ * Privacy Policy or Terms of Service displayed on the WelcomePage. */ legaleseItem: { + // XXX The backgroundColor must be transparent; otherwise, the + // backgroundColor of a parent may show through. Moreover, the + // legaleseItem is not really expected to have a background of its own. + backgroundColor: 'transparent', color: TEXT_COLOR, fontSize: 12, margin: BoxModel.margin @@ -84,9 +92,23 @@ export default createStyleSheet({ alignSelf: 'stretch', flex: 1, flexDirection: 'column', - justifyContent: 'center', + + // XXX RecentList will eventually push the room name TextInput and the + // Join button up from the center. I don't like that movement from + // center to top, especially without an animation. Just start with the + // room name TextInput and the Join button at the top. + justifyContent: 'flex-start', margin: 3 * BoxModel.margin, - marginBottom: BoxModel.margin + + // XXX Be consistent with the marginBottom of legaleseContainer! + marginBottom: BoxModel.margin, + + // XXX Push the roomContainer down bellow the iPhone X notchl otherwise, + // the former seems glued to the latter. THe amount of visual margin at + // the top is pretty much as the visual margin at the bottom (if you sum + // all bottom and top margins and account for legaleseItem) which brings + // symmetry as well. + marginTop: 5 * BoxModel.margin }, /**