diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index 025433041f..a0022fa257 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/frontend/src/component/demo/demo-topics.tsx
@@ -395,8 +395,9 @@ export const TOPICS: ITutorialTopic[] = [
target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4"]`,
content: (
- First, let's open the feature toggle configuration for{' '}
- demoApp.step4
+ First, open the feature toggle configuration for{' '}
+ demoApp.step4 by using this
+ link.
),
preventDefault: true,
@@ -404,16 +405,22 @@ export const TOPICS: ITutorialTopic[] = [
{
href: `/projects/${PROJECT}/features/demoApp.step4`,
target: 'button[data-testid="TAB-Variants"]',
- content: Select the variants tab.,
+ content: Select the "Variants" tab.,
},
{
target: 'button[data-testid="EDIT_VARIANTS_BUTTON"]',
- content: Edit the existing variants.,
+ content: (
+
+ Edit the existing variants by using this button.
+
+ ),
},
{
target: 'button[data-testid="MODAL_ADD_VARIANT_BUTTON"]',
content: (
- Add a new variant to the list.
+
+ Add a new variant to the list by using this button.
+
),
backCloseModal: true,
},
@@ -421,19 +428,12 @@ export const TOPICS: ITutorialTopic[] = [
target: 'div[data-testid="VARIANT"]:last-of-type div[data-testid="VARIANT_NAME_INPUT"]',
content: (
<>
- Enter a new variant name.
-
- We recommend choosing a{' '}
-
- color
-
- .
-
- Example: aqua
+ Enter a unique name for your variant.
+
+
+ When you're done, use the "Next" button in the
+ dialog.
),
@@ -444,16 +444,29 @@ export const TOPICS: ITutorialTopic[] = [
{
target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value',
content: (
-
- Enter the{' '}
-
- color
- {' '}
- you chose on the previous step as the payload.
-
+ <>
+
+ Enter a{' '}
+
+ color
+ {' '}
+ as the payload. It will be passed along and used in
+ the demo website.
+
+
+ It can be any color. For example, you can use one of
+ these: teal,{' '}
+ orange or{' '}
+ purple
+
+
+ When you're done, use the "Next" button in the
+ dialog.
+
+
),
nextButton: true,
focus: true,
@@ -461,14 +474,25 @@ export const TOPICS: ITutorialTopic[] = [
{
target: 'div[data-testid="VARIANT"]:last-of-type button[data-testid="VARIANT_ADD_OVERRIDE_BUTTON"]',
content: (
-
- Let's also add an override for our user.
-
+ <>
+
+ By adding an override, we can specify that your user
+ will always get this variant.
+
+
+ Let's add an override for your user by using this
+ button.
+
+
),
},
{
target: 'div[data-testid="VARIANT"]:last-of-type #override-context-name',
- content: Choose a context field.,
+ content: (
+
+ Select the context field by using this dropdown.
+
+ ),
anyClick: true,
backCloseModal: true,
},
@@ -496,6 +520,10 @@ export const TOPICS: ITutorialTopic[] = [
>
You can find your userId on the demo page.
+
+ When you're done, use the "Next" button in the
+ dialog.
+
),
nextButton: true,
@@ -504,7 +532,11 @@ export const TOPICS: ITutorialTopic[] = [
},
{
target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
- content: Save your variants.,
+ content: (
+
+ Save your variants by using this button.
+
+ ),
},
{
href: `/projects/${PROJECT}?sort=name`,
@@ -512,13 +544,10 @@ export const TOPICS: ITutorialTopic[] = [
content: (
<>
- Finally, toggle{' '}
- demoApp.step4
+ Finally, enable or disable the feature with the new
+ variant by toggling the highlighted switch.
- }
- >
+ }>
Look at the demo page to see your changes!