Merge pull request #306 from Expensify/jack-fixFooterLinks

Fix the weird links on the Footer

src/components/Anchor.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {Linking, Text} from 'react-native';
+
+/**
+ * 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
+        <Text style={mergedStyles} onPress={() => Linking.openURL(href)} {...props}>
+            {children}
+        </Text>
+    );
+};
+
+Anchor.propTypes = propTypes;
+Anchor.defaultProps = defaultProps;
+Anchor.displayName = 'Anchor';
+
+export default Anchor;

src/components/Anchor/index.js → src/components/AnchorForCommentsOnly/index.js

@@ -31,7 +31,7 @@ const defaultProps = {
     style: {},
 };
 
-const Anchor = ({
+const AnchorForCommentsOnly = ({
     href,
     rel,
     target,
@@ -51,8 +51,8 @@ const Anchor = ({
     );
 };
 
-Anchor.propTypes = propTypes;
-Anchor.defaultProps = defaultProps;
-Anchor.displayName = 'Anchor';
+AnchorForCommentsOnly.propTypes = propTypes;
+AnchorForCommentsOnly.defaultProps = defaultProps;
+AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly';
 
-export default Anchor;
+export default AnchorForCommentsOnly;

src/components/Anchor/index.native.js → src/components/AnchorForCommentsOnly/index.native.js

@@ -35,7 +35,7 @@ const defaultProps = {
     style: {},
 };
 
-const Anchor = ({
+const AnchorForCommentsOnly = ({
     href,
     children,
     style,
@@ -53,8 +53,8 @@ const Anchor = ({
     );
 };
 
-Anchor.propTypes = propTypes;
-Anchor.defaultProps = defaultProps;
-Anchor.displayName = 'Anchor';
+AnchorForCommentsOnly.propTypes = propTypes;
+AnchorForCommentsOnly.defaultProps = defaultProps;
+AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly';
 
-export default Anchor;
+export default AnchorForCommentsOnly;

src/page/HomePage/Report/ReportHistoryItemFragment.js

@@ -6,7 +6,7 @@ import Str from '../../../lib/Str';
 import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
 import styles, {webViewStyles} from '../../../style/StyleSheet';
 import Text from '../../../components/Text';
-import Anchor from '../../../components/Anchor';
+import AnchorForCommentsOnly from '../../../components/AnchorForCommentsOnly';
 
 const propTypes = {
     // The message fragment needing to be displayed
@@ -30,7 +30,7 @@ class ReportHistoryItemFragment extends React.PureComponent {
         // For <a> tags, the <Anchor> attribute is used to be more cross-platform friendly
         this.customRenderers = {
             a: (htmlAttribs, children, convertedCSSStyles, passProps) => (
-                <Anchor href={htmlAttribs.href} target={htmlAttribs.target} rel={htmlAttribs.rel} style={passProps.style} key={passProps.key}>{children}</Anchor>
+                <AnchorForCommentsOnly href={htmlAttribs.href} target={htmlAttribs.target} rel={htmlAttribs.rel} style={passProps.style} key={passProps.key}>{children}</AnchorForCommentsOnly>
             ),
         };
     }

src/style/StyleSheet.js

@@ -259,6 +259,9 @@ const styles = {
     sidebarFooterLink: {
         color: '#C6C9CA',
         fontSize: 11,
+        textDecorationLine: 'none',
+        fontFamily: 'GTAmericaExp-Regular',
+        lineHeight: 20,
     },
 
     sidebarListContainer: {