Show app version and account username on Preferences screen

Plus some design tweaks

packages/shared/src/components/common/AppVersion.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+import { ThemeConsumer } from '../context/ThemeContext'
+
+const pkg = require('shared/package.json') // tslint:disable-line
+
+const styles = StyleSheet.create({
+  appVersion: {
+    alignSelf: 'center',
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'center',
+  },
+})
+
+export function AppVersion() {
+  return (
+    <ThemeConsumer>
+      {({ theme }) => (
+        <Text
+          style={[
+            styles.appVersion,
+            { color: theme.foregroundColorTransparent50 },
+          ]}
+        >{`v${pkg.version}`}</Text>
+      )}
+    </ThemeConsumer>
+  )
+}

packages/shared/src/components/modals/SettingsModal.tsx

@@ -1,21 +1,33 @@
 import hoistNonReactStatics from 'hoist-non-react-statics'
 import React, { PureComponent } from 'react'
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
+import { ScrollView, Text, View } from 'react-native'
 import { connect } from 'react-redux'
 
 import * as actions from '../../redux/actions'
-import * as colors from '../../styles/colors'
+import * as selectors from '../../redux/selectors'
 import { contentPadding } from '../../styles/variables'
 import { ExtractPropsFromConnector } from '../../types'
 import { ModalColumn } from '../columns/ModalColumn'
+import { AppVersion } from '../common/AppVersion'
+import { Avatar } from '../common/Avatar'
 import { Button } from '../common/Button'
+import { H2 } from '../common/H2'
+import { Link } from '../common/Link'
+import { Spacer } from '../common/Spacer'
 import { DimensionsConsumer } from '../context/DimensionsContext'
+import { ThemeConsumer } from '../context/ThemeContext'
 import { ThemePreference } from '../widgets/ThemePreference'
 
 export interface SettingsModalProps {}
 
 const connectToStore = connect(
-  null,
+  (state: any) => {
+    const user = selectors.currentUserSelector(state)
+
+    return {
+      username: (user && user.login) || '',
+    }
+  },
   { logout: actions.logout },
 )
 
@@ -23,6 +35,8 @@ class SettingsModalComponent extends PureComponent<
   SettingsModalProps & ExtractPropsFromConnector<typeof connectToStore>
 > {
   render() {
+    const { username } = this.props
+
     return (
       <ModalColumn
         columnId="preferences-modal"
@@ -34,19 +48,56 @@ class SettingsModalComponent extends PureComponent<
           contentContainerStyle={{ padding: contentPadding }}
         >
           <ThemePreference />
+
+          <ThemeConsumer>
+            {({ theme }) => (
+              <DimensionsConsumer>
+                {({ width }) => {
+                  if (!username) return null
+                  if (!(width <= 420)) return null
+
+                  return (
+                    <>
+                      <Spacer height={contentPadding} />
+
+                      <H2 withMargin>Account</H2>
+
+                      <View
+                        style={{
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <Avatar size={28} username={username} />
+                        <Spacer width={contentPadding / 2} />
+                        <Text style={{ color: theme.foregroundColor }}>
+                          Logged as{' '}
+                          <Link href={`https://github.com/${username}`}>
+                            <Text style={{ fontWeight: 'bold' }}>
+                              {username}
+                            </Text>
+                          </Link>
+                        </Text>
+                      </View>
+
+                      <Spacer height={contentPadding} />
+                      <Button
+                        key="logout-button"
+                        onPress={() => this.props.logout()}
+                      >
+                        Logout
+                      </Button>
+                    </>
+                  )
+                }}
+              </DimensionsConsumer>
+            )}
+          </ThemeConsumer>
         </ScrollView>
 
-        <DimensionsConsumer>
-          {({ width }) =>
-            width <= 420 && (
-              <View style={{ padding: contentPadding, paddingTop: 0 }}>
-                <Button key="logout-button" onPress={() => this.props.logout()}>
-                  Logout
-                </Button>
-              </View>
-            )
-          }
-        </DimensionsConsumer>
+        <View style={{ padding: contentPadding }}>
+          <AppVersion />
+        </View>
       </ModalColumn>
     )
   }

packages/shared/src/components/widgets/ThemePreference.tsx

@@ -88,12 +88,12 @@ class ThemePreferenceComponent extends PureComponent<
               alignItems: 'center',
               justifyContent: 'center',
               marginRight: contentPadding / 2,
-              width: 32,
-              height: 32,
-              borderRadius: 32 / 2,
+              width: 28,
+              height: 28,
+              borderRadius: 28 / 2,
               backgroundColor: theme.backgroundColor,
               borderWidth: StyleSheet.hairlineWidth,
-              borderColor: theme.foregroundColorMuted50,
+              borderColor: theme.backgroundColorDarker08,
             }}
           >
             <Text
@@ -102,8 +102,8 @@ class ThemePreferenceComponent extends PureComponent<
                 margin: 0,
                 padding: 0,
                 fontWeight: '500',
-                fontSize: 13,
-                lineHeight: 32,
+                fontSize: 12,
+                lineHeight: 28,
                 color: theme.foregroundColorMuted50,
                 textAlign: 'center',
               }}
@@ -159,6 +159,8 @@ class ThemePreferenceComponent extends PureComponent<
                 value={this.props.currentThemeId === 'auto'}
               />
             </View>
+
+            <Spacer height={contentPadding} />
           </View>
         )}
       </ThemeConsumer>

packages/shared/src/screens/LoginScreen.tsx

@@ -8,6 +8,7 @@ import {
 import { connect } from 'react-redux'
 
 import { GitHubLoginButton } from '../components/buttons/GitHubLoginButton'
+import { AppVersion } from '../components/common/AppVersion'
 import { Screen } from '../components/common/Screen'
 import { ThemeConsumer } from '../components/context/ThemeContext'
 import { executeOAuth } from '../libs/oauth'
@@ -17,7 +18,6 @@ import { contentPadding } from '../styles/variables'
 import { ExtractPropsFromConnector } from '../types'
 
 const logo = require('shared/assets/logo.png') // tslint:disable-line
-const pkg = require('shared/package.json') // tslint:disable-line
 
 const serverURL = 'https://micro-oauth-pmkvlpfaua.now.sh'
 
@@ -185,12 +185,7 @@ export class LoginScreenComponent extends PureComponent<
                 >
                   TweetDeck for GitHub
                 </Text>
-                <Text
-                  style={[
-                    styles.appVersion,
-                    { color: theme.foregroundColorTransparent50 },
-                  ]}
-                >{`v${pkg.version}`}</Text>
+                <AppVersion />
               </View>
             </View>
           </Screen>