From e40afb7706cdc1f06347b01e6d0d41a5128d496c Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Wed, 12 Jul 2023 15:42:41 +0800
Subject: [PATCH] update add feed css

---
 packages/web/pages/settings/rss/add.tsx   | 101 +++++++++++++++-------
 packages/web/pages/settings/rss/index.tsx |   3 +-
 2 files changed, 69 insertions(+), 35 deletions(-)

diff --git a/packages/web/pages/settings/rss/add.tsx b/packages/web/pages/settings/rss/add.tsx
index 6a6e6f526..cdfac24de 100644
--- a/packages/web/pages/settings/rss/add.tsx
+++ b/packages/web/pages/settings/rss/add.tsx
@@ -1,7 +1,13 @@
+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,
+  VStack,
+} from '../../../components/elements/LayoutPrimitives'
 import { StyledText } from '../../../components/elements/StyledText'
 import { PageMetaData } from '../../../components/patterns/PageMetaData'
 import { SettingsLayout } from '../../../components/templates/SettingsLayout'
@@ -9,6 +15,13 @@ import { subscribeMutation } from '../../../lib/networking/mutations/subscribeMu
 import { SubscriptionType } from '../../../lib/networking/queries/useGetSubscriptionsQuery'
 import { showSuccessToast } from '../../../lib/toastHelpers'
 
+// Styles
+const Header = styled(Box, {
+  color: '$utilityTextDefault',
+  fontSize: 'x-large',
+  margin: '20px',
+})
+
 export default function AddRssFeed(): JSX.Element {
   const router = useRouter()
   const [errorMessage, setErrorMessage] = useState<string | undefined>(
@@ -35,43 +48,65 @@ export default function AddRssFeed(): JSX.Element {
 
   return (
     <>
-      <PageMetaData
-        title="Subscribe to new RSS Feed"
-        path="/settings/rss/new"
-      />
+      <PageMetaData title="Add new RSS Feed" path="/settings/rss/add" />
       <SettingsLayout>
-        <FormInput
-          type="url"
-          key="feedUrl"
-          value={feedUrl}
-          placeholder={'Enter the RSS feed URL here'}
-          onChange={(e) => {
-            e.preventDefault()
-            setFeedUrl(e.target.value)
-          }}
-          disabled={false}
-          hidden={false}
-          required={true}
+        <VStack
+          distribution={'start'}
+          alignment={'start'}
           css={{
-            border: '1px solid $textNonessential',
-            borderRadius: '8px',
+            margin: '0 auto',
             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)',
-            },
+            height: '100%',
           }}
-        />
-        {errorMessage && <StyledText style="error">{errorMessage}</StyledText>}
-        <Button style="ctaDarkYellow" css={{}} onClick={subscribe}>
-          Add
-        </Button>
+        >
+          <HStack
+            alignment={'start'}
+            distribution={'start'}
+            css={{
+              width: '80%',
+              pb: '$2',
+              borderBottom: '1px solid $utilityTextDefault',
+              pr: '$1',
+            }}
+          >
+            <Header>Add new RSS Feed</Header>
+          </HStack>
+
+          <FormInput
+            type="url"
+            key="feedUrl"
+            value={feedUrl}
+            placeholder={'Enter the RSS feed URL here'}
+            onChange={(e) => {
+              e.preventDefault()
+              setFeedUrl(e.target.value)
+            }}
+            disabled={false}
+            hidden={false}
+            required={true}
+            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>
+          )}
+          <Button style="ctaDarkYellow" css={{}} onClick={subscribe}>
+            Add
+          </Button>
+        </VStack>
       </SettingsLayout>
       <div data-testid="settings-rss-subscribe-page-tag" />
     </>
diff --git a/packages/web/pages/settings/rss/index.tsx b/packages/web/pages/settings/rss/index.tsx
index b33925f73..a08903a6f 100644
--- a/packages/web/pages/settings/rss/index.tsx
+++ b/packages/web/pages/settings/rss/index.tsx
@@ -75,8 +75,7 @@ export default function Rss(): JSX.Element {
                     subscription.lastFetchedAt
                       ? formattedShortDate(subscription.lastFetchedAt)
                       : 'Never'
-                  }, `}
-                  {`Updated: ${formattedShortDate(subscription.updatedAt)}, `}
+                  }`}
                 </StyledText>
               }
             />