Merge pull request #2826 from omnivore-app/fix/web-add-contribute-button

Add the contribute button to the left menu

packages/web/components/templates/SettingsMenu.tsx

@@ -42,6 +42,42 @@ const StyledLink = styled(SpanBox, {
   whiteSpace: 'nowrap',
 })
 
+type ExternalLinkProps = {
+  title: string
+  destination: string
+}
+
+function ExternalLink(props: ExternalLinkProps): JSX.Element {
+  return (
+    <StyledLink
+      css={{
+        '> a': {
+          backgroundColor: 'transparent',
+          textDecoration: 'none',
+        },
+      }}
+      title={props.title}
+    >
+      <a href={props.destination} target="_blank" rel="noreferrer">
+        <HStack
+          distribution="start"
+          alignment="center"
+          css={{
+            gap: '5px',
+            color: '$thLibraryMenuUnselected',
+            '&:hover': {
+              textDecoration: 'underline',
+            },
+          }}
+        >
+          {props.title}
+          <ArrowSquareUpRight size={12} />
+        </HStack>
+      </a>
+    </StyledLink>
+  )
+}
+
 export function SettingsMenu(): JSX.Element {
   const section1 = [
     { name: 'Account', destination: '/settings/account' },
@@ -112,7 +148,14 @@ export function SettingsMenu(): JSX.Element {
               style="link"
               onClick={(event) => {
                 if (window.Intercom) {
-                  window.Intercom('show')
+                  try {
+                    window.Intercom('show')
+                  } catch (error) {
+                    console.log(error)
+                    alert('error opening system feedback')
+                  }
+                } else {
+                  alert('error opening system feedback')
                 }
                 event.preventDefault()
               }}
@@ -120,35 +163,14 @@ export function SettingsMenu(): JSX.Element {
               Feedback
             </Button>
           </StyledLink>
-          <StyledLink
-            css={{
-              '> a': {
-                backgroundColor: 'transparent',
-                textDecoration: 'none',
-              },
-            }}
-          >
-            <a
-              href="https://docs.omnivore.app"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <HStack
-                distribution="start"
-                alignment="center"
-                css={{
-                  gap: '5px',
-                  color: '$thLibraryMenuUnselected',
-                  '&:hover': {
-                    textDecoration: 'underline',
-                  },
-                }}
-              >
-                Documentation
-                <ArrowSquareUpRight size={12} />
-              </HStack>
-            </a>
-          </StyledLink>
+          <ExternalLink
+            destination="https://blog.omnivore.app/p/contributing-to-omnivore"
+            title="Contribute"
+          />
+          <ExternalLink
+            destination="https://docs.omnivore.app"
+            title="Documentation"
+          />
         </VStack>
       </Box>
       {/* This spacer pushes library content to the right of 

packages/web/pages/settings/feeds/add.tsx

@@ -2,7 +2,6 @@ import { styled } from '@stitches/react'
 import { useRouter } from 'next/router'
 import { useCallback, useState } from 'react'
 import { Button } from '../../../components/elements/Button'
-import { FormInput } from '../../../components/elements/FormElements'
 import {
   Box,
   HStack,
@@ -20,7 +19,25 @@ import { formatMessage } from '../../../locales/en/messages'
 const Header = styled(Box, {
   color: '$utilityTextDefault',
   fontSize: 'x-large',
-  margin: '20px',
+})
+
+const FormInput = styled('input', {
+  border: '1px solid $textNonessential',
+  width: '100%',
+  bg: 'transparent',
+  fontSize: '16px',
+  fontFamily: 'inter',
+  fontWeight: 'normal',
+  lineHeight: '1.35',
+  borderRadius: '5px',
+  textIndent: '8px',
+  marginBottom: '2px',
+  height: '38px',
+  color: '$grayTextContrast',
+  '&:focus': {
+    border: '1px solid transparent',
+    outline: '2px solid $omnivoreCtaYellow',
+  },
 })
 
 export default function AddRssFeed(): JSX.Element {
@@ -67,21 +84,21 @@ export default function AddRssFeed(): JSX.Element {
       <SettingsLayout>
         <VStack
           distribution={'start'}
-          alignment={'start'}
+          alignment={'center'}
           css={{
             margin: '0 auto',
             width: '80%',
+            padding: '24px',
+            maxWidth: '865px',
             height: '100%',
+            gap: '20px',
           }}
         >
           <HStack
             alignment={'start'}
             distribution={'start'}
             css={{
-              width: '80%',
-              pb: '$2',
-              borderBottom: '1px solid $utilityTextDefault',
-              pr: '$1',
+              width: '100%',
             }}
           >
             <Header>Add new Feed</Header>
@@ -90,41 +107,25 @@ export default function AddRssFeed(): JSX.Element {
           <FormInput
             type="url"
             key="feedUrl"
+            tabIndex={1}
+            autoFocus={true}
             value={feedUrl}
             placeholder={'Enter the feed URL here'}
             onChange={(e) => {
               setErrorMessage(undefined)
               setFeedUrl(e.target.value)
             }}
-            css={{
-              border: '1px solid $textNonessential',
-              borderRadius: '8px',
-              width: '80%',
-              bg: 'transparent',
-              fontSize: '16px',
-              textIndent: '8px',
-              my: '20px',
-              height: '38px',
-              color: '$grayTextContrast',
-              '&:focus': {
-                outline: 'none',
-                boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
-              },
-            }}
           />
           {errorMessage && (
             <StyledText style="error">{errorMessage}</StyledText>
           )}
-          <HStack>
+          <HStack
+            css={{ width: '100%', gap: '10px' }}
+            alignment="center"
+            distribution="end"
+          >
             <Button
-              style="ctaDarkYellow"
-              css={{ marginRight: '10px' }}
-              onClick={subscribe}
-            >
-              Add
-            </Button>
-            <Button
-              style="ctaGray"
+              style="cancelGeneric"
               css={{}}
               onClick={async () => {
                 router.push('/settings/feeds')
@@ -132,6 +133,14 @@ export default function AddRssFeed(): JSX.Element {
             >
               Back
             </Button>
+            <Button
+              tabIndex={1}
+              style="ctaDarkYellow"
+              css={{ marginRight: '10px' }}
+              onClick={subscribe}
+            >
+              Add
+            </Button>
           </HStack>
         </VStack>
       </SettingsLayout>