diff --git a/src/components/Anchor.js b/src/components/Anchor.js
new file mode 100644
index 0000000000000..c316d00588540
--- /dev/null
+++ b/src/components/Anchor.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {Linking} from 'react-native';
+import Text from './Text';
+
+/**
+ * Text based component that is passed a URL to open onPress
+ */
+
+const propTypes = {
+ // The URL to open
+ href: PropTypes.string.isRequired,
+
+ // Any children to display
+ children: PropTypes.node,
+
+ // Any additional styles to apply
+ // eslint-disable-next-line react/forbid-prop-types
+ style: PropTypes.any,
+};
+
+const defaultProps = {
+ children: null,
+ style: {},
+};
+
+const Anchor = ({
+ href,
+ children,
+ style,
+ ...props
+}) => {
+ // If the style prop is an array of styles, we need to mix them all together
+ const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
+ ...finalStyles,
+ ...s
+ }), {});
+
+ return (
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ Linking.openURL(href)} {...props}>{children}
+ );
+};
+
+Anchor.propTypes = propTypes;
+Anchor.defaultProps = defaultProps;
+Anchor.displayName = 'Anchor';
+
+export default Anchor;
diff --git a/src/components/webView/index.js b/src/components/WebView/index.js
similarity index 100%
rename from src/components/webView/index.js
rename to src/components/WebView/index.js
diff --git a/src/components/webView/index.native.js b/src/components/WebView/index.native.js
similarity index 100%
rename from src/components/webView/index.native.js
rename to src/components/WebView/index.native.js
diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js
index a3417c28e032a..6b88be6787a75 100644
--- a/src/page/HomePage/Report/ReportHistoryItemFragment.js
+++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js
@@ -1,5 +1,5 @@
import React from 'react';
-import WebView from '../../../components/webView';
+import WebView from '../../../components/WebView';
import Str from '../../../lib/Str';
import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
import styles from '../../../style/StyleSheet';
diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js
index 09822274eb000..769b2287c0fe2 100644
--- a/src/page/HomePage/SidebarView.js
+++ b/src/page/HomePage/SidebarView.js
@@ -15,6 +15,7 @@ import {fetchAll} from '../../lib/actions/ActionsReport';
import SidebarLink from './SidebarLink';
import logo from '../../../assets/images/expensify-logo_reversed.png';
import PageTitleUpdater from '../../lib/PageTitleUpdater';
+import Anchor from '../../components/Anchor';
const propTypes = {
// Toggles the hamburger menu open and closed
@@ -76,7 +77,21 @@ class SidebarView extends React.Component {
{this.state.userDisplayName}
)}
- Sign Out
+
+
+ iOS
+
+
+ Android
+
+ Sign Out
+
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 2594c1d809542..6b8cb7fadc287 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -16,8 +16,12 @@ const colors = {
const styles = {
// Utility classes
mr1: {
- marginRight: 10,
+ marginRight: 4,
},
+ mr2: {
+ marginRight: 8,
+ },
+
ml1: {
marginLeft: 10,
},
@@ -40,6 +44,13 @@ const styles = {
p1: {
padding: 10,
},
+ pr1: {
+ paddingRight: 4,
+ },
+ pr2: {
+ paddingRight: 8,
+ },
+
h100p: {
height: '100%',
},