Standardize info link

packages/web/components/elements/InfoLink.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import { Info } from 'phosphor-react'
+import { Box } from '../elements/LayoutPrimitives'
+import { theme } from '../tokens/stitches.config'
+import { TooltipWrapped } from './Tooltip'
+
+type InfoLinkProps = {
+  href: string
+}
+
+const TooltipStyle = {
+  backgroundColor: '#F9D354',
+  color: '#0A0806',
+}
+
+export function InfoLink(props: InfoLinkProps): JSX.Element {
+  return (
+    <Box style={{ flex: '1', marginLeft: '9px' }}>
+    <Link passHref href={props.href}>
+      <a style={{ textDecoration: 'none' }}>
+        <TooltipWrapped
+          tooltipContent="Learn More"
+          tooltipSide={'top'}
+          style={TooltipStyle}
+          arrowStyles={{ fill: '#F9D354' }}
+        >
+          <Info size={24} color={theme.colors.grayText.toString()} />
+        </TooltipWrapped>
+      </a>
+    </Link>
+  </Box>
+  )
+}

packages/web/pages/settings/emails.tsx

@@ -24,6 +24,7 @@ import { StyledText } from '../../components/elements/StyledText'
 import { applyStoredTheme } from '../../lib/themeUpdater'
 import { showSuccessToast } from '../../lib/toastHelpers'
 import Link from 'next/link'
+import { InfoLink } from '../../components/elements/InfoLink'
 
 enum TextType {
   EmailAddress,
@@ -215,20 +216,7 @@ export default function EmailsPage(): JSX.Element {
                 Email Addresses{' '}
               </StyledText>
             </Box>
-            <Box style={{ flex: '1', marginLeft: '9px' }}>
-              <Link passHref href="/help/newsletters">
-                <a style={{ textDecoration: 'none' }}>
-                  <TooltipWrapped
-                    tooltipContent="Learn More"
-                    tooltipSide={'top'}
-                    style={TooltipStyle}
-                    arrowStyles={{ fill: '#F9D354' }}
-                  >
-                    <InfoIcon size={24} css={{ color: '$grayText' }} />
-                  </TooltipWrapped>
-                </a>
-              </Link>
-            </Box>
+            <InfoLink href="/help/newsletters" />
             <Button
               onClick={createEmail}
               style="ctaDarkYellow"

packages/web/pages/settings/labels.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { PrimaryLayout } from '../../components/templates/PrimaryLayout'
 import { Button } from '../../components/elements/Button'
-import { styled } from '../../components/tokens/stitches.config'
+import { styled, theme } from '../../components/tokens/stitches.config'
 import {
   Box,
   SpanBox,
@@ -41,6 +41,7 @@ import {
 } from '../../components/elements/DropdownElements'
 import { LabelChip } from '../../components/elements/LabelChip'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
+import { InfoLink } from '../../components/elements/InfoLink'
 
 const HeaderWrapper = styled(Box, {
   width: '100%',
@@ -276,9 +277,14 @@ export default function LabelsPage(): JSX.Element {
         ) : null}
         <HeaderWrapper>
           <Box style={{ display: 'flex', alignItems: 'center' }}>
-            <Box style={{ flex: '1' }}>
-              <StyledText style="fixedHeadline">Labels</StyledText>
+            <Box>
+              <StyledText
+                style="fixedHeadline"
+              >
+                Labels{' '}
+              </StyledText>
             </Box>
+            <InfoLink href="/help/labels" />
             <Box css={{display: 'flex', justifyContent: 'flex-end' }}>
               {isCreateMode ? null : (
                 <>