Make the feeds UI a bit more consistent with the rest of settings

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>
@@ -96,35 +113,17 @@ export default function AddRssFeed(): JSX.Element {
               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 +131,13 @@ export default function AddRssFeed(): JSX.Element {
             >
               Back
             </Button>
+            <Button
+              style="ctaDarkYellow"
+              css={{ marginRight: '10px' }}
+              onClick={subscribe}
+            >
+              Add
+            </Button>
           </HStack>
         </VStack>
       </SettingsLayout>