Add clarification to between the blog URL and the RSS for sign-up

* Turn examples into an array * Fix Eslint error * Shorten the prompt and resize URLs
Seneca-CDOT · Nov 25, 2022 · aed0ec9 · aed0ec9
1 parent ccc02f9
commit aed0ec9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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