#2243 optimizing for iphone x

storybookjs · Nov 8, 2017 · 6ebb68c · 6ebb68c
1 parent c06a289
commit 6ebb68c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -7,6 +7,7 @@ import {
   View,
   TouchableWithoutFeedback,
   Image,
+  Platform,
   Text,
   StatusBar,
 } from 'react-native';
@@ -72,6 +73,8 @@ export default class OnDeviceUI extends Component {
     const { stories, events, url } = this.props;
     const { menuAnimation, selectedKind, selectedStory, menuWidth } = this.state;
 
+    const StatusBarHeight = Platform.OS === 'ios' ? 30 : 0;
+
     const menuStyles = [
       style.menuContainer,
       {
@@ -83,6 +86,7 @@ export default class OnDeviceUI extends Component {
             }),
           },
         ],
+        marginTop: StatusBarHeight,
       },
     ];
 
@@ -92,6 +96,7 @@ export default class OnDeviceUI extends Component {
           inputRange: [0, 1],
           outputRange: [0, menuWidth],
         }),
+        marginTop: StatusBarHeight,
       },
     ];
 
@@ -105,6 +110,13 @@ export default class OnDeviceUI extends Component {
       },
     ];
 
+    const previewContainerStyles = [
+      style.previewContainer,
+      {
+        marginTop: StatusBarHeight,
+      },
+    ];
+
     /*
       Checks if import is a base64 encoded string uri.
       If using haul as bundler, some projects are set up to include small files as base64 strings.
@@ -120,9 +132,9 @@ export default class OnDeviceUI extends Component {
 
     return (
       <View style={style.main}>
-        <StatusBar hidden />
+        <StatusBar />
         <Animated.View style={menuSpacerStyles} />
-        <View style={style.previewContainer}>
+        <View style={previewContainerStyles}>
           <Animated.View style={headerStyles}>
             <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
               <View>

diff --git a/app/react-native/src/preview/components/OnDeviceUI/style.js b/app/react-native/src/preview/components/OnDeviceUI/style.js
@@ -7,18 +7,18 @@ export default {
     backgroundColor: 'rgba(255, 255, 255, 1)',
   },
   icon: {
-    width: 20,
-    height: 20,
+    width: 30,
+    height: 30,
     opacity: 0.5,
   },
   headerContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    margin: 5,
+    margin: 10,
   },
   headerText: {
-    marginLeft: 5,
-    fontSize: 14,
+    marginLeft: 10,
+    fontSize: 20,
     color: 'rgba(0, 0, 0, 0.5)',
   },
   menuContainer: {
@@ -35,7 +35,7 @@ export default {
     flex: 1,
   },
   closeButton: {
-    marginVertical: 5,
+    marginVertical: 10,
   },
   preview: {
     ...StyleSheet.absoluteFillObject,

diff --git a/app/react-native/src/preview/components/StoryListView/style.js b/app/react-native/src/preview/components/StoryListView/style.js
@@ -3,21 +3,21 @@ export default {
     flex: 1,
   },
   header: {
-    paddingTop: 4,
-    paddingBottom: 4,
+    paddingTop: 5,
+    paddingBottom: 5,
   },
   headerText: {
-    fontSize: 16,
+    fontSize: 20,
   },
   headerTextSelected: {
     fontWeight: 'bold',
   },
   item: {
-    paddingVertical: 4,
+    paddingVertical: 5,
     paddingHorizontal: 16,
   },
   itemText: {
-    fontSize: 14,
+    fontSize: 16,
   },
   itemTextSelected: {
     fontWeight: 'bold',