Onboarding template fixes

brainstormforce · Oct 15, 2024 · 683d526 · 683d526
1 parent 652933d
commit 683d526
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 35 deletions.
diff --git a/src/components/cards/plugin-blocks.stories.jsx b/src/components/cards/plugin-blocks.stories.jsx
@@ -74,7 +74,12 @@ const Template2 = () => {
 			className="w-120 border border-solid rounded-md border-border-subtle p-4"
 		>
 			<Container.Item className="md:w-full lg:w-full">
-				<Container className="p-1" justify="between" gap="xs" align="center">
+				<Container
+					className="p-1"
+					justify="between"
+					gap="xs"
+					align="center"
+				>
 					<Container.Item>
 						<Label className="font-semibold">
 							Extend Your Website

diff --git a/src/components/editor-input/editor-input.stories.jsx b/src/components/editor-input/editor-input.stories.jsx
@@ -130,7 +130,8 @@ export default {
 		},
 		wrapperClassName: {
 			name: 'wrapperClassName',
-			description: 'Custom class name to be added to the editor input wrapper.',
+			description:
+				'Custom class name to be added to the editor input wrapper.',
 			control: 'text',
 			table: {
 				type: { summary: 'string' },

diff --git a/src/templates/onboarding-backup/onboarding-backup.stories.js b/src/templates/onboarding-backup/onboarding-backup.stories.js
@@ -63,7 +63,7 @@ const Template = ( args ) => {
 							tag="h4"
 							title="Want to Add a Backup Email Service?"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm max-w-[41rem]">
+						<Label className="text-text-secondary mt-1 text-sm max-w-[41rem] font-normal">
 							This is an optional step, but it can be really
 							helpful. By adding a backup email service, your
 							emails will still be sent if your main service stops
@@ -297,14 +297,18 @@ const Template = ( args ) => {
 						<Button
 							variant="outline"
 							className="flex items-center gap-2"
+							icon={ <ChevronLeft /> }
 						>
-							<ChevronLeft />
 							Back
 						</Button>
 						<div className="flex justify-end items-center gap-3">
 							<Button variant="ghost"> Skip</Button>
-							<Button className="flex items-center gap-2">
-								Continue Setup <ChevronRight />
+							<Button
+								className="flex items-center gap-2"
+								icon={ <ChevronRight /> }
+								iconPosition="right"
+							>
+								Continue Setup
 							</Button>
 						</div>
 					</div>

diff --git a/src/templates/onboarding-connect/onboarding-connect.stories.js b/src/templates/onboarding-connect/onboarding-connect.stories.js
@@ -46,7 +46,7 @@ const Template = ( args ) => {
 					>
 						Connect Your Site with SureRank
 					</Label>
-					<Label className="text-text-secondary text-sm mt-2">
+					<Label className="text-text-secondary text-sm mt-2 font-normal">
 						When you connect your free account with SureRank you
 						will get keyword suggestions from Google when entering
 						the keywords. Not only that, you will access to our AI

diff --git a/src/templates/onboarding-done/onboarding-done.stories.js b/src/templates/onboarding-done/onboarding-done.stories.js
@@ -46,7 +46,7 @@ const Template = ( args ) => {
 					>
 						Congratulations!
 					</Label>
-					<Label className="text-text-secondary mt-2 text-sm">
+					<Label className="text-text-secondary mt-2 text-sm font-normal">
 						You&#39;ve taken the first step to SEO success. Now,
 						let&#39;s optimize your website for search engines.
 						<br />
@@ -71,8 +71,10 @@ const Template = ( args ) => {
 						<Button
 							variant="link"
 							className="px-4 flex items-center gap-2"
+							icon={ <ExternalLink /> }
+							iconPosition="right"
 						>
-							Documentation <ExternalLink />
+							Documentation
 						</Button>
 					</div>
 				</div>

diff --git a/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.js b/src/templates/onboarding-email-smtp/onboarding-smtp-connect.stories.js
@@ -64,7 +64,7 @@ const Template = ( args ) => {
 							tag="h4"
 							title="Now, Let's Connect With [Selected SMTP Provider Name]"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem]">
+						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem] font-normal">
 							Enter the details below to connect with your
 							[Provider Name] account.
 						</Label>
@@ -177,8 +177,8 @@ const Template = ( args ) => {
 						<Button
 							variant="outline"
 							className="flex items-center gap-2"
+							icon={ <ChevronLeft /> }
 						>
-							<ChevronLeft />
 							Back
 						</Button>
 
@@ -189,8 +189,12 @@ const Template = ( args ) => {
 							>
 								Skip
 							</Button>
-							<Button className="flex items-center gap-2">
-								Continue Setup <ChevronRight />
+							<Button
+								className="flex items-center gap-2"
+								icon={ <ChevronRight /> }
+								iconPosition="right"
+							>
+								Continue Setup
 							</Button>
 						</div>
 					</div>

diff --git a/src/templates/onboarding-import/onboarding-import.stories.js b/src/templates/onboarding-import/onboarding-import.stories.js
@@ -53,7 +53,7 @@ const Template = ( args ) => {
 						tag="h4"
 						title="Import Data From Your Current Plugins"
 					/>
-					<Label className="text-text-secondary mt-1 text-sm max-w-[35rem]">
+					<Label className="text-text-secondary mt-1 text-sm max-w-[35rem] font-normal">
 						We have deducted few SEO plugins installed on your
 						website. Select the plugin from which you want to import
 					</Label>
@@ -87,8 +87,12 @@ const Template = ( args ) => {
 					<Button variant="ghost" className="text-text-tertiary">
 						Skip
 					</Button>
-					<Button className="flex items-center gap-2">
-						Next <ChevronRight />
+					<Button
+						className="flex items-center gap-2"
+						icon={ <ChevronRight /> }
+						iconPosition="right"
+					>
+						Next
 					</Button>
 				</div>
 			</div>

diff --git a/src/templates/onboarding-profile/onboarding-profile.stories.js b/src/templates/onboarding-profile/onboarding-profile.stories.js
@@ -55,7 +55,7 @@ const Template = ( args ) => {
 							className="text-text-primary"
 							title="Your Website Basic Details"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem]">
+						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem] font-normal">
 							Let&#39;s get started with the basic details of this
 							website.
 						</Label>
@@ -204,8 +204,8 @@ const Template = ( args ) => {
 						<Button
 							variant="outline"
 							className="flex items-center gap-2"
+							icon={ <ChevronLeft /> }
 						>
-							<ChevronLeft />
 							Back
 						</Button>
 						<div className="flex justify-end items-center gap-3">
@@ -215,8 +215,12 @@ const Template = ( args ) => {
 							>
 								Skip
 							</Button>
-							<Button className="flex items-center gap-2">
-								Next <ChevronRight />
+							<Button
+								className="flex items-center gap-2"
+								icon={ <ChevronRight /> }
+								iconPosition="right"
+							>
+								Next
 							</Button>
 						</div>
 					</div>

diff --git a/src/templates/onboarding-setup-done/onboarding-setup-done.stories.js b/src/templates/onboarding-setup-done/onboarding-setup-done.stories.js
@@ -55,7 +55,7 @@ const Template = ( args ) => {
 							className="text-text-primary"
 							title="You're Good to Go! 🚀"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm">
+						<Label className="text-text-secondary mt-1 text-sm font-normal">
 							You&#39;ve successfully set up SureEmails, and your
 							site is ready to send emails without a hitch! Now
 							you can focus on your business and let us handle the
@@ -96,12 +96,14 @@ const Template = ( args ) => {
 					<hr className="my-6 w-full border-b-0 border-x-0 border-t border-solid border-t-border-subtle" />
 				</div>
 				<div className="flex items-center gap-3">
-					<Button className="px-4 w-max">Go to Dashboard</Button>
+					<Button className="px-4 w-auto">Go to Dashboard</Button>
 					<Button
 						variant="link"
 						className="px-4 flex items-center gap-2"
+						icon={ <ExternalLink /> }
+						iconPosition="right"
 					>
-						Documentation <ExternalLink />
+						Documentation
 					</Button>
 				</div>
 			</div>

diff --git a/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js b/src/templates/onboarding-setup-tools/onboarding-setup-tools.stories.js
@@ -63,7 +63,7 @@ const Template = ( args ) => {
 							className="text-text-primary"
 							title="Add More Power to Your Website"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm max-w-[41rem]">
+						<Label className="text-text-secondary mt-1 text-sm max-w-[41rem] font-normal">
 							These tools can help you build your website faster
 							and easier. Try them out and see how they can help
 							your website grow.
@@ -215,14 +215,18 @@ const Template = ( args ) => {
 						<Button
 							variant="outline"
 							className="flex items-center gap-2"
+							icon={ <ChevronLeft /> }
 						>
-							<ChevronLeft />
 							Back
 						</Button>
 						<div className="flex justify-end items-center gap-3">
 							<Button variant="ghost"> Skip</Button>
-							<Button className="flex items-center gap-2">
-								Continue Setup <ChevronRight />
+							<Button
+								className="flex items-center gap-2"
+								icon={ <ChevronRight /> }
+								iconPosition="right"
+							>
+								Continue Setup
 							</Button>
 						</div>
 					</div>

diff --git a/src/templates/onboarding-social/onboarding-social.stories.js b/src/templates/onboarding-social/onboarding-social.stories.js
@@ -54,7 +54,7 @@ const Template = ( args ) => {
 							className="text-text-primary"
 							title="Social Profiles"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem]">
+						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem] font-normal">
 							Please enter all your possible social media
 							profiles. These links can appear in the knowledge
 							panel of the search results for your website.
@@ -139,8 +139,8 @@ const Template = ( args ) => {
 						<Button
 							variant="outline"
 							className="flex items-center gap-2"
+							icon={ <ChevronLeft /> }
 						>
-							<ChevronLeft />
 							Back
 						</Button>
 						<div className="flex justify-end items-center gap-3">
@@ -150,8 +150,12 @@ const Template = ( args ) => {
 							>
 								Skip
 							</Button>
-							<Button className="flex items-center gap-2">
-								Next <ChevronRight />
+							<Button
+								className="flex items-center gap-2"
+								icon={ <ChevronRight /> }
+								iconPosition="right"
+							>
+								Next
 							</Button>
 						</div>
 					</div>

diff --git a/src/templates/onboarding-spam/onboarding-spam.stories.js b/src/templates/onboarding-spam/onboarding-spam.stories.js
@@ -63,7 +63,7 @@ const Template = ( args ) => {
 							className="text-text-primary"
 							title="Say Goodbye to Spam Folders"
 						/>
-						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem]">
+						<Label className="text-text-secondary mt-1 text-sm max-w-[35rem] font-normal">
 							Enter your email address to receive a step-by-step
 							guide that will help you ensure your emails always
 							make it to the inbox.
@@ -101,8 +101,8 @@ const Template = ( args ) => {
 						<Button
 							variant="outline"
 							className="flex items-center gap-2"
+							icon={ <ChevronLeft /> }
 						>
-							<ChevronLeft />
 							Back
 						</Button>
 
@@ -113,8 +113,12 @@ const Template = ( args ) => {
 							>
 								Skip
 							</Button>
-							<Button className="flex items-center gap-2">
-								Continue Setup <ChevronRight />
+							<Button
+								className="flex items-center gap-2"
+								icon={ <ChevronRight /> }
+								iconPosition="right"
+							>
+								Continue Setup
 							</Button>
 						</div>
 					</div>