From e58aa60b35c28aed5cee74d6efedae6ec3af3349 Mon Sep 17 00:00:00 2001
From: Chen-Yuan Chu <83015577+cychu42@users.noreply.github.com>
Date: Fri, 25 Nov 2022 15:11:22 -0500
Subject: [PATCH] Add clarification to between the blog URL and the RSS for
 sign-up (#3763)

---
 .../src/components/SignUp/Forms/BlogFeeds.tsx    |  6 +++++-
 .../app/src/components/SignUp/Forms/RSSFeeds.tsx | 16 ++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx b/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
index e1402dd49a..11446819c5 100644
--- a/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
+++ b/src/web/app/src/components/SignUp/Forms/BlogFeeds.tsx
@@ -7,7 +7,11 @@ const BlogFeeds = () => {
   return (
     <RSSFeeds
       title="Blog and RSS"
-      prompt="Enter your blog URL and select the RSS you want to use in Telescope"
+      prompt="Enter your blog root URL (HTML) and select the blog's RSS feed URL (XML) you want to use in Telescope, such as:"
+      promptExamples={[
+        'Blog root URL: https://dev.to/user',
+        'RSS feed URL: https://dev.to/feed/user',
+      ]}
       buttonText="Validate"
       helperText="Validate your Blog URL"
       noFeedsSelected="Please validate your blog URL"
diff --git a/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx b/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
index 8a1bf85085..b52a29bf9d 100644
--- a/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
+++ b/src/web/app/src/components/SignUp/Forms/RSSFeeds.tsx
@@ -136,6 +136,10 @@ const useStyles = makeStyles((theme: Theme) =>
       height: '10px',
       color: '#474747',
     },
+    helpTextExample: {
+      fontSize: '.9em',
+      fontWeight: 'normal',
+    },
   })
 );
 
@@ -144,7 +148,8 @@ type RSSFeedsFormProps = {
     selected: 'blogs' | 'channels';
     discovered: 'allBlogs' | 'allChannels';
   };
-  prompt: string;
+  prompt?: string;
+  promptExamples?: Array<string>;
   title: string;
   buttonText: string;
   helperText: string;
@@ -163,6 +168,7 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
   ({
     feeds: { selected, discovered },
     prompt,
+    promptExamples,
     title,
     buttonText,
     helperText,
@@ -247,7 +253,13 @@ const RSSFeeds = connect<RSSFeedsFormProps, SignUpForm>(
       <div className={classes.root}>
         <div className={classes.container}>
           <h1 className={classes.blogPageTitle}>{title}</h1>
-          <h2 className={classes.helpText}>{prompt}</h2>
+          <h2 className={classes.helpText}>
+            {prompt}
+            {promptExamples?.map((example) => (
+              <div className={classes.helpTextExample}>{example}</div>
+            ))}
+          </h2>
+
           <div className={classes.infoContainer}>
             <div className={classes.inputsContainer}>
               <TextInput