fix(login): add SafeAreaView and update color

Author: chinesedfan

src/auth/screens/login.screen.js

@@ -8,6 +8,7 @@ import { Button, Icon } from 'react-native-elements';
 import Swiper from 'react-native-swiper';
 import queryString from 'query-string';
 import CookieManager from 'react-native-cookies';
+import { SafeAreaView } from 'react-navigation';
 
 import { ViewContainer, ErrorScreen } from 'components';
 import { colors, fonts, normalize } from 'config';
@@ -42,8 +43,17 @@ const Modal = styled.Modal`
 
 const ModalWrapper = styled.View`
   flex: 1;
-  padding-top: 20;
-  background-color: #1f2327;
+  background-color: ${colors.githubDark}
+`;
+
+// https://github.com/facebook/react-native/issues/9090
+const StyledSafeAreaView = styled(SafeAreaView).attrs({
+  forceInset: Platform.select({
+    ios: { top: 'always', bottom: 'never' },
+    android: {},
+  }),
+})`
+  background-color: ${colors.githubDark};
 `;
 
 const Slide = styled.View`
@@ -342,6 +352,7 @@ class Login extends Component {
             visible={this.state.modalVisible}
           >
             <ModalWrapper>
+              <StyledSafeAreaView />
               <BrowserSection>
                 <WebView
                   source={{

src/config/colors.js

@@ -29,7 +29,7 @@ export const colors = {
   lightPurple: '#bf54eb',
   purple: '#8e44ad',
   orange: '#e67e22',
-  githubDark: '#1f2327',
+  githubDark: '#24292e',
   alabaster: '#f7f7f7',
   topicLightBlue: '#f1f8ff',
 };