From 6267208024300eb070dbcf60ed88a1a99e3bed7c Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 13 Apr 2023 16:36:11 -0500
Subject: [PATCH 1/6] Add icon for link that opens a new window

---
 i18n/en-US.yml                             |  1 +
 lib/components/admin/field-trip-details.js |  7 +++
 lib/components/admin/field-trip-list.js    |  9 ++-
 lib/components/user/terms-of-use-pane.js   | 17 ++++--
 lib/components/util/externalLink.tsx       | 64 ++++++++++++++++++++++
 lib/components/viewers/route-details.js    | 22 +++-----
 6 files changed, 100 insertions(+), 20 deletions(-)
 create mode 100644 lib/components/util/externalLink.tsx

diff --git a/i18n/en-US.yml b/i18n/en-US.yml
index 2cbfbe8ed..2a014600b 100644
--- a/i18n/en-US.yml
+++ b/i18n/en-US.yml
@@ -154,6 +154,7 @@ common:
     tripDurationFormat: >-
       {hours, plural, =0 {} other {# hr }}{minutes} min { seconds, plural, =0 {}
       other {# sec}}
+  linkOpensNewWindow: "(Opens new window)"
 components:
   A11yPrefs:
     accessibilityRoutingByDefault: Prefer accessible trips by default
diff --git a/lib/components/admin/field-trip-details.js b/lib/components/admin/field-trip-details.js
index 6d4aef155..01f6e54e6 100644
--- a/lib/components/admin/field-trip-details.js
+++ b/lib/components/admin/field-trip-details.js
@@ -42,6 +42,7 @@ import {
   Text,
   Val
 } from './styled'
+import { NewWindowIconA11y } from '../util/externalLink'
 import DraggableWindow from './draggable-window'
 import EditableSection from './editable-section'
 import FieldTripNotes from './field-trip-notes'
@@ -98,6 +99,9 @@ class FieldTripDetails extends Component {
     const { request, sessionId } = this.props
     const cancelled = request.status === 'cancelled'
     const printFieldTripLink = `/#/printFieldTrip/?requestId=${request.id}&sessionId=${sessionId}`
+    const newWindowIconStyles = (
+      <NewWindowIconA11y size={10} style={{ margin: '-3px 0 0 4px' }} />
+    )
     return (
       <div style={{ padding: '5px 10px 0px 10px' }}>
         <DropdownButton
@@ -112,12 +116,15 @@ class FieldTripDetails extends Component {
             target="_blank"
           >
             <IconWithText Icon={CommentDots}>Feedback link</IconWithText>
+            {newWindowIconStyles}
           </MenuItem>
           <MenuItem href={this._getRequestLink('receipt')} target="_blank">
             <IconWithText Icon={FileAlt}>Receipt link</IconWithText>
+            {newWindowIconStyles}
           </MenuItem>
           <MenuItem href={printFieldTripLink} target="_blank">
             <IconWithText Icon={Print}>Printable trip plan</IconWithText>
+            {newWindowIconStyles}
           </MenuItem>
         </DropdownButton>
         <Button
diff --git a/lib/components/admin/field-trip-list.js b/lib/components/admin/field-trip-list.js
index ce47a4929..4f58b9b17 100644
--- a/lib/components/admin/field-trip-list.js
+++ b/lib/components/admin/field-trip-list.js
@@ -15,6 +15,7 @@ import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
 import Loading from '../narrative/loading'
 
 import { FieldTripRecordButton, WindowHeader } from './styled'
+import { LinkOpensNewWindow } from '../util/externalLink'
 import DraggableWindow from './draggable-window'
 import FieldTripStatusIcon from './field-trip-status-icon'
 
@@ -185,8 +186,12 @@ class FieldTripList extends Component {
               type="date"
               value={date}
             />
-            <Button bsSize="xsmall" href={this._getReportUrl()} target="_blank">
-              View report
+            <Button bsSize="xsmall">
+              <LinkOpensNewWindow
+                contents="View report"
+                style={{ textDecoration: 'none' }}
+                url={this._getReportUrl()}
+              />
             </Button>
           </>
         }
diff --git a/lib/components/user/terms-of-use-pane.js b/lib/components/user/terms-of-use-pane.js
index 6f883bc54..38da55ba4 100644
--- a/lib/components/user/terms-of-use-pane.js
+++ b/lib/components/user/terms-of-use-pane.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
 import { FormattedMessage, useIntl } from 'react-intl'
 
+import { LinkOpensNewWindow } from '../util/externalLink'
 import { TERMS_OF_SERVICE_PATH, TERMS_OF_STORAGE_PATH } from '../../util/constants'
 
 /**
@@ -37,8 +38,12 @@ const TermsOfUsePane = ({
           <FormattedMessage
             id='components.TermsOfUsePane.termsOfServiceStatement'
             values={{
-              termsOfUseLink: contents => (
-                <a href={`/#${TERMS_OF_SERVICE_PATH}`} target='_blank'>{contents}</a>
+              termsOfUseLink: (contents) => (
+                <LinkOpensNewWindow
+                  contents={contents}
+                  inline
+                  url={`/#${TERMS_OF_SERVICE_PATH}`}
+                />
               )
             }}
           />
@@ -64,8 +69,12 @@ const TermsOfUsePane = ({
           <FormattedMessage
             id='components.TermsOfUsePane.termsOfStorageStatement'
             values={{
-              termsOfStorageLink: contents => (
-                <a href={`/#${TERMS_OF_STORAGE_PATH}`} target='_blank'>{contents}</a>
+              termsOfStorageLink: (contents) => (
+                <LinkOpensNewWindow
+                  contents={contents}
+                  inline
+                  url={`/#${TERMS_OF_STORAGE_PATH}`}
+                />
               )
             }}
           />
diff --git a/lib/components/util/externalLink.tsx b/lib/components/util/externalLink.tsx
new file mode 100644
index 000000000..9ff459e25
--- /dev/null
+++ b/lib/components/util/externalLink.tsx
@@ -0,0 +1,64 @@
+import { ExternalLinkAlt } from '@styled-icons/fa-solid'
+import { useIntl } from 'react-intl'
+import React, { HTMLAttributes } from 'react'
+
+interface LinkProps extends HTMLAttributes<HTMLElement> {
+  contents: JSX.Element | string
+  gap?: number
+  inline?: boolean
+  size?: number
+  style?: React.CSSProperties
+  url: string
+}
+
+interface IconProps extends HTMLAttributes<HTMLElement> {
+  size?: number
+  style?: React.CSSProperties
+}
+
+export const NewWindowIconA11y = ({
+  size = 14,
+  style
+}: IconProps): JSX.Element => {
+  const intl = useIntl()
+  return (
+    <ExternalLinkAlt
+      /* the "title" prop removes aria-hidden from styled-icons, so use the title as the aria-label as well
+        https://github.com/styled-icons/styled-icons#accessibility */
+      aria-labelledby="title"
+      height={size}
+      style={style}
+      title={intl.formatMessage({ id: 'common.linkOpensNewWindow' })}
+    />
+  )
+}
+
+export const LinkOpensNewWindow = ({
+  contents,
+  gap = 6,
+  inline,
+  size = 14,
+  style,
+  url
+}: LinkProps): JSX.Element => {
+  console.log(size)
+  return (
+    <a
+      href={url}
+      rel="noreferrer"
+      style={{
+        alignItems: 'center',
+        display: `${inline ? 'inline-flex' : 'flex'}`,
+        flexDirection: 'row',
+        gap: `${gap}px`,
+        textDecoration: 'underline',
+        whiteSpace: 'nowrap',
+        ...style
+      }}
+      target="_blank"
+    >
+      {contents}
+      <NewWindowIconA11y size={size} />
+    </a>
+  )
+}
diff --git a/lib/components/viewers/route-details.js b/lib/components/viewers/route-details.js
index cd04acb1f..38f218489 100644
--- a/lib/components/viewers/route-details.js
+++ b/lib/components/viewers/route-details.js
@@ -3,7 +3,7 @@
 import { connect } from 'react-redux'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import { getMostReadableTextColor } from '@opentripplanner/core-utils/lib/route'
-import { Link } from '@styled-icons/fa-solid/Link'
+import { LinkOpensNewWindow } from '../util/externalLink'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -14,7 +14,6 @@ import {
 import { findStopsForPattern } from '../../actions/api'
 import { getOperatorName } from '../../util/state'
 import { setHoveredStop, setViewedRoute, setViewedStop } from '../../actions/ui'
-import { StyledIconWrapper } from '../util/styledIcon'
 
 import {
   Container,
@@ -145,20 +144,15 @@ class RouteDetails extends Component {
               </>
             )}
             {url && (
-              <a
-                href={url}
-                rel="noreferrer"
+              <LinkOpensNewWindow
+                contents={
+                  <FormattedMessage id="components.RouteDetails.moreDetails" />
+                }
                 style={{
-                  color: getMostReadableTextColor(routeColor, route?.textColor),
-                  whiteSpace: 'nowrap'
+                  color: getMostReadableTextColor(routeColor, route?.textColor)
                 }}
-                target="_blank"
-              >
-                <StyledIconWrapper>
-                  <Link />
-                </StyledIconWrapper>
-                <FormattedMessage id="components.RouteDetails.moreDetails" />
-              </a>
+                url={url}
+              />
             )}
           </LogoLinkContainer>
         </RouteNameContainer>

From 5be3a31346c9f51e75299c403b4226dd2d2ac0ff Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Fri, 14 Apr 2023 14:23:19 -0500
Subject: [PATCH 2/6] resolve linting errors

---
 lib/components/user/terms-of-use-pane.js | 36 +++++++++++++++---------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/lib/components/user/terms-of-use-pane.js b/lib/components/user/terms-of-use-pane.js
index 38da55ba4..c42fe9b73 100644
--- a/lib/components/user/terms-of-use-pane.js
+++ b/lib/components/user/terms-of-use-pane.js
@@ -1,42 +1,43 @@
-import React from 'react'
-import { connect } from 'react-redux'
 import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
+import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
+import React from 'react'
 
 import { LinkOpensNewWindow } from '../util/externalLink'
-import { TERMS_OF_SERVICE_PATH, TERMS_OF_STORAGE_PATH } from '../../util/constants'
+import {
+  TERMS_OF_SERVICE_PATH,
+  TERMS_OF_STORAGE_PATH
+} from '../../util/constants'
 
 /**
  * User terms of use pane.
  */
+/* eslint-disable react/prop-types */
+/* TODO: Prop Types */
 const TermsOfUsePane = ({
   disableCheckTerms,
   handleBlur,
   handleChange,
-  termsOfStorageSet,
   values: userData
 }) => {
   const intl = useIntl()
-  const {
-    hasConsentedToTerms,
-    storeTripHistory
-  } = userData
+  const { hasConsentedToTerms, storeTripHistory } = userData
 
   return (
     <div>
       <ControlLabel>
-        <FormattedMessage id='components.TermsOfUsePane.mustAgreeToTerms' />
+        <FormattedMessage id="components.TermsOfUsePane.mustAgreeToTerms" />
       </ControlLabel>
       <FormGroup>
         <Checkbox
           checked={hasConsentedToTerms}
           disabled={disableCheckTerms}
-          name='hasConsentedToTerms'
+          name="hasConsentedToTerms"
           onBlur={disableCheckTerms ? null : handleBlur}
           onChange={disableCheckTerms ? null : handleChange}
         >
           <FormattedMessage
-            id='components.TermsOfUsePane.termsOfServiceStatement'
+            id="components.TermsOfUsePane.termsOfServiceStatement"
             values={{
               termsOfUseLink: (contents) => (
                 <LinkOpensNewWindow
@@ -52,13 +53,20 @@ const TermsOfUsePane = ({
       <FormGroup>
         <Checkbox
           checked={storeTripHistory}
-          name='storeTripHistory'
+          name="storeTripHistory"
           onBlur={handleBlur}
           onChange={(e) => {
             // Show alert when user is unchecking the checkbox
             if (storeTripHistory) {
               // Do nothing if the user hits cancel
-              if (!confirm(intl.formatMessage({id: 'components.TermsOfUsePane.confirmDeletionPrompt'}))) {
+              if (
+                // eslint-disable-next-line no-restricted-globals
+                !confirm(
+                  intl.formatMessage({
+                    id: 'components.TermsOfUsePane.confirmDeletionPrompt'
+                  })
+                )
+              ) {
                 return
               }
             }
@@ -67,7 +75,7 @@ const TermsOfUsePane = ({
           }}
         >
           <FormattedMessage
-            id='components.TermsOfUsePane.termsOfStorageStatement'
+            id="components.TermsOfUsePane.termsOfStorageStatement"
             values={{
               termsOfStorageLink: (contents) => (
                 <LinkOpensNewWindow

From 93cd40849433210759c98de01bc591c164e8fbb6 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Tue, 18 Apr 2023 16:16:19 -0500
Subject: [PATCH 3/6] refactor: address feedback

---
 lib/components/admin/field-trip-details.js | 8 ++++----
 lib/components/user/terms-of-use-pane.js   | 4 ++--
 lib/components/util/externalLink.tsx       | 7 +++----
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/lib/components/admin/field-trip-details.js b/lib/components/admin/field-trip-details.js
index 01f6e54e6..3781fa391 100644
--- a/lib/components/admin/field-trip-details.js
+++ b/lib/components/admin/field-trip-details.js
@@ -99,7 +99,7 @@ class FieldTripDetails extends Component {
     const { request, sessionId } = this.props
     const cancelled = request.status === 'cancelled'
     const printFieldTripLink = `/#/printFieldTrip/?requestId=${request.id}&sessionId=${sessionId}`
-    const newWindowIconStyles = (
+    const newWindowIconWithStyles = (
       <NewWindowIconA11y size={10} style={{ margin: '-3px 0 0 4px' }} />
     )
     return (
@@ -116,15 +116,15 @@ class FieldTripDetails extends Component {
             target="_blank"
           >
             <IconWithText Icon={CommentDots}>Feedback link</IconWithText>
-            {newWindowIconStyles}
+            {newWindowIconWithStyles}
           </MenuItem>
           <MenuItem href={this._getRequestLink('receipt')} target="_blank">
             <IconWithText Icon={FileAlt}>Receipt link</IconWithText>
-            {newWindowIconStyles}
+            {newWindowIconWithStyles}
           </MenuItem>
           <MenuItem href={printFieldTripLink} target="_blank">
             <IconWithText Icon={Print}>Printable trip plan</IconWithText>
-            {newWindowIconStyles}
+            {newWindowIconWithStyles}
           </MenuItem>
         </DropdownButton>
         <Button
diff --git a/lib/components/user/terms-of-use-pane.js b/lib/components/user/terms-of-use-pane.js
index c42fe9b73..fab0d334f 100644
--- a/lib/components/user/terms-of-use-pane.js
+++ b/lib/components/user/terms-of-use-pane.js
@@ -42,7 +42,7 @@ const TermsOfUsePane = ({
               termsOfUseLink: (contents) => (
                 <LinkOpensNewWindow
                   contents={contents}
-                  inline
+                  isInline
                   url={`/#${TERMS_OF_SERVICE_PATH}`}
                 />
               )
@@ -80,7 +80,7 @@ const TermsOfUsePane = ({
               termsOfStorageLink: (contents) => (
                 <LinkOpensNewWindow
                   contents={contents}
-                  inline
+                  isInline
                   url={`/#${TERMS_OF_STORAGE_PATH}`}
                 />
               )
diff --git a/lib/components/util/externalLink.tsx b/lib/components/util/externalLink.tsx
index 9ff459e25..4b27e8cca 100644
--- a/lib/components/util/externalLink.tsx
+++ b/lib/components/util/externalLink.tsx
@@ -5,7 +5,7 @@ import React, { HTMLAttributes } from 'react'
 interface LinkProps extends HTMLAttributes<HTMLElement> {
   contents: JSX.Element | string
   gap?: number
-  inline?: boolean
+  isInline?: boolean
   size?: number
   style?: React.CSSProperties
   url: string
@@ -36,19 +36,18 @@ export const NewWindowIconA11y = ({
 export const LinkOpensNewWindow = ({
   contents,
   gap = 6,
-  inline,
+  isInline,
   size = 14,
   style,
   url
 }: LinkProps): JSX.Element => {
-  console.log(size)
   return (
     <a
       href={url}
       rel="noreferrer"
       style={{
         alignItems: 'center',
-        display: `${inline ? 'inline-flex' : 'flex'}`,
+        display: `${isInline ? 'inline-flex' : 'flex'}`,
         flexDirection: 'row',
         gap: `${gap}px`,
         textDecoration: 'underline',

From da0e2f4070428382b7ac74c7f7161babdd675846 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 27 Apr 2023 13:09:56 -0500
Subject: [PATCH 4/6] refactor: address PR feedback

---
 lib/components/admin/field-trip-details.js    | 10 ++++----
 lib/components/user/new-account-wizard.js     |  2 +-
 ...s-of-use-pane.js => terms-of-use-pane.tsx} | 25 ++++++++++++-------
 lib/components/util/externalLink.tsx          |  9 +++----
 4 files changed, 26 insertions(+), 20 deletions(-)
 rename lib/components/user/{terms-of-use-pane.js => terms-of-use-pane.tsx} (81%)

diff --git a/lib/components/admin/field-trip-details.js b/lib/components/admin/field-trip-details.js
index 3781fa391..50501d1e2 100644
--- a/lib/components/admin/field-trip-details.js
+++ b/lib/components/admin/field-trip-details.js
@@ -28,6 +28,7 @@ import {
   TICKET_TYPES
 } from '../../util/call-taker'
 import { IconWithText, StyledIconWrapper } from '../util/styledIcon'
+import { NewWindowIconA11y } from '../util/externalLink'
 
 import {
   Bold,
@@ -42,7 +43,6 @@ import {
   Text,
   Val
 } from './styled'
-import { NewWindowIconA11y } from '../util/externalLink'
 import DraggableWindow from './draggable-window'
 import EditableSection from './editable-section'
 import FieldTripNotes from './field-trip-notes'
@@ -99,7 +99,7 @@ class FieldTripDetails extends Component {
     const { request, sessionId } = this.props
     const cancelled = request.status === 'cancelled'
     const printFieldTripLink = `/#/printFieldTrip/?requestId=${request.id}&sessionId=${sessionId}`
-    const newWindowIconWithStyles = (
+    const StyledNewWindowIcon = () => (
       <NewWindowIconA11y size={10} style={{ margin: '-3px 0 0 4px' }} />
     )
     return (
@@ -116,15 +116,15 @@ class FieldTripDetails extends Component {
             target="_blank"
           >
             <IconWithText Icon={CommentDots}>Feedback link</IconWithText>
-            {newWindowIconWithStyles}
+            {StyledNewWindowIcon}
           </MenuItem>
           <MenuItem href={this._getRequestLink('receipt')} target="_blank">
             <IconWithText Icon={FileAlt}>Receipt link</IconWithText>
-            {newWindowIconWithStyles}
+            {StyledNewWindowIcon}
           </MenuItem>
           <MenuItem href={printFieldTripLink} target="_blank">
             <IconWithText Icon={Print}>Printable trip plan</IconWithText>
-            {newWindowIconWithStyles}
+            {StyledNewWindowIcon}
           </MenuItem>
         </DropdownButton>
         <Button
diff --git a/lib/components/user/new-account-wizard.js b/lib/components/user/new-account-wizard.js
index d54df2561..9c9b666e0 100644
--- a/lib/components/user/new-account-wizard.js
+++ b/lib/components/user/new-account-wizard.js
@@ -6,7 +6,7 @@ import AccountSetupFinishPane from './account-setup-finish-pane'
 import FavoritePlaceList from './places/favorite-place-list'
 import NotificationPrefsPane from './notification-prefs-pane'
 import SequentialPaneDisplay from './sequential-pane-display'
-import TermsOfUsePane from './terms-of-use-pane'
+import TermsOfUsePane from './terms-of-use-pane.tsx'
 import VerifyEmailPane from './verify-email-pane'
 
 /**
diff --git a/lib/components/user/terms-of-use-pane.js b/lib/components/user/terms-of-use-pane.tsx
similarity index 81%
rename from lib/components/user/terms-of-use-pane.js
rename to lib/components/user/terms-of-use-pane.tsx
index fab0d334f..f0ed42c65 100644
--- a/lib/components/user/terms-of-use-pane.js
+++ b/lib/components/user/terms-of-use-pane.tsx
@@ -1,7 +1,7 @@
 import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap'
 import { connect } from 'react-redux'
 import { FormattedMessage, useIntl } from 'react-intl'
-import React from 'react'
+import React, { FormEventHandler } from 'react'
 
 import { LinkOpensNewWindow } from '../util/externalLink'
 import {
@@ -12,13 +12,20 @@ import {
 /**
  * User terms of use pane.
  */
-/* eslint-disable react/prop-types */
 /* TODO: Prop Types */
 const TermsOfUsePane = ({
   disableCheckTerms,
   handleBlur,
   handleChange,
   values: userData
+}: {
+  disableCheckTerms: boolean
+  handleBlur: () => void
+  handleChange: FormEventHandler<Checkbox>
+  values: {
+    hasConsentedToTerms: boolean
+    storeTripHistory: boolean
+  }
 }) => {
   const intl = useIntl()
   const { hasConsentedToTerms, storeTripHistory } = userData
@@ -33,16 +40,16 @@ const TermsOfUsePane = ({
           checked={hasConsentedToTerms}
           disabled={disableCheckTerms}
           name="hasConsentedToTerms"
-          onBlur={disableCheckTerms ? null : handleBlur}
-          onChange={disableCheckTerms ? null : handleChange}
+          onBlur={disableCheckTerms ? undefined : handleBlur}
+          onChange={disableCheckTerms ? undefined : handleChange}
         >
           <FormattedMessage
             id="components.TermsOfUsePane.termsOfServiceStatement"
             values={{
-              termsOfUseLink: (contents) => (
+              termsOfUseLink: (contents: any) => (
                 <LinkOpensNewWindow
                   contents={contents}
-                  isInline
+                  inline
                   url={`/#${TERMS_OF_SERVICE_PATH}`}
                 />
               )
@@ -77,10 +84,10 @@ const TermsOfUsePane = ({
           <FormattedMessage
             id="components.TermsOfUsePane.termsOfStorageStatement"
             values={{
-              termsOfStorageLink: (contents) => (
+              termsOfStorageLink: (contents: any) => (
                 <LinkOpensNewWindow
                   contents={contents}
-                  isInline
+                  inline
                   url={`/#${TERMS_OF_STORAGE_PATH}`}
                 />
               )
@@ -91,7 +98,7 @@ const TermsOfUsePane = ({
     </div>
   )
 }
-const mapStateToProps = (state) => {
+const mapStateToProps = (state: any) => {
   return {
     termsOfStorageSet: state.otp.config.persistence?.terms_of_storage
   }
diff --git a/lib/components/util/externalLink.tsx b/lib/components/util/externalLink.tsx
index 4b27e8cca..ce7a8d422 100644
--- a/lib/components/util/externalLink.tsx
+++ b/lib/components/util/externalLink.tsx
@@ -5,7 +5,7 @@ import React, { HTMLAttributes } from 'react'
 interface LinkProps extends HTMLAttributes<HTMLElement> {
   contents: JSX.Element | string
   gap?: number
-  isInline?: boolean
+  inline?: boolean
   size?: number
   style?: React.CSSProperties
   url: string
@@ -36,7 +36,7 @@ export const NewWindowIconA11y = ({
 export const LinkOpensNewWindow = ({
   contents,
   gap = 6,
-  isInline,
+  inline,
   size = 14,
   style,
   url
@@ -47,10 +47,9 @@ export const LinkOpensNewWindow = ({
       rel="noreferrer"
       style={{
         alignItems: 'center',
-        display: `${isInline ? 'inline-flex' : 'flex'}`,
+        display: `${inline ? 'inline-flex' : 'flex'}`,
         flexDirection: 'row',
-        gap: `${gap}px`,
-        textDecoration: 'underline',
+        gap,
         whiteSpace: 'nowrap',
         ...style
       }}

From 6c6a2c7f64344a19b193f414a91bd3c4e3226bc3 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Mon, 1 May 2023 14:12:53 -0500
Subject: [PATCH 5/6] refactor: small react, typescript, and import adjustments

---
 lib/components/admin/field-trip-details.js | 6 +++---
 lib/components/user/new-account-wizard.js  | 2 +-
 lib/components/user/terms-of-use-pane.tsx  | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/components/admin/field-trip-details.js b/lib/components/admin/field-trip-details.js
index 50501d1e2..63ca823a9 100644
--- a/lib/components/admin/field-trip-details.js
+++ b/lib/components/admin/field-trip-details.js
@@ -116,15 +116,15 @@ class FieldTripDetails extends Component {
             target="_blank"
           >
             <IconWithText Icon={CommentDots}>Feedback link</IconWithText>
-            {StyledNewWindowIcon}
+            <StyledNewWindowIcon />
           </MenuItem>
           <MenuItem href={this._getRequestLink('receipt')} target="_blank">
             <IconWithText Icon={FileAlt}>Receipt link</IconWithText>
-            {StyledNewWindowIcon}
+            <StyledNewWindowIcon />
           </MenuItem>
           <MenuItem href={printFieldTripLink} target="_blank">
             <IconWithText Icon={Print}>Printable trip plan</IconWithText>
-            {StyledNewWindowIcon}
+            <StyledNewWindowIcon />
           </MenuItem>
         </DropdownButton>
         <Button
diff --git a/lib/components/user/new-account-wizard.js b/lib/components/user/new-account-wizard.js
index 9c9b666e0..d54df2561 100644
--- a/lib/components/user/new-account-wizard.js
+++ b/lib/components/user/new-account-wizard.js
@@ -6,7 +6,7 @@ import AccountSetupFinishPane from './account-setup-finish-pane'
 import FavoritePlaceList from './places/favorite-place-list'
 import NotificationPrefsPane from './notification-prefs-pane'
 import SequentialPaneDisplay from './sequential-pane-display'
-import TermsOfUsePane from './terms-of-use-pane.tsx'
+import TermsOfUsePane from './terms-of-use-pane'
 import VerifyEmailPane from './verify-email-pane'
 
 /**
diff --git a/lib/components/user/terms-of-use-pane.tsx b/lib/components/user/terms-of-use-pane.tsx
index f0ed42c65..1eded6e95 100644
--- a/lib/components/user/terms-of-use-pane.tsx
+++ b/lib/components/user/terms-of-use-pane.tsx
@@ -46,7 +46,7 @@ const TermsOfUsePane = ({
           <FormattedMessage
             id="components.TermsOfUsePane.termsOfServiceStatement"
             values={{
-              termsOfUseLink: (contents: any) => (
+              termsOfUseLink: (contents: JSX.Element) => (
                 <LinkOpensNewWindow
                   contents={contents}
                   inline
@@ -84,7 +84,7 @@ const TermsOfUsePane = ({
           <FormattedMessage
             id="components.TermsOfUsePane.termsOfStorageStatement"
             values={{
-              termsOfStorageLink: (contents: any) => (
+              termsOfStorageLink: (contents: JSX.Element) => (
                 <LinkOpensNewWindow
                   contents={contents}
                   inline

From 12d3812bc4b0a96c44caa15e66fa8b942a349dc9 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Tue, 2 May 2023 08:58:46 -0500
Subject: [PATCH 6/6] refactor: remove unneeded comment

---
 lib/components/user/terms-of-use-pane.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/components/user/terms-of-use-pane.tsx b/lib/components/user/terms-of-use-pane.tsx
index 1eded6e95..6462ab191 100644
--- a/lib/components/user/terms-of-use-pane.tsx
+++ b/lib/components/user/terms-of-use-pane.tsx
@@ -12,7 +12,6 @@ import {
 /**
  * User terms of use pane.
  */
-/* TODO: Prop Types */
 const TermsOfUsePane = ({
   disableCheckTerms,
   handleBlur,