Merge pull request #141 from brainstormforce/uat_final_fixes

SUR-310 - UAT fixes

src/components/badge/badge.jsx

@@ -53,15 +53,6 @@ const BadgeComponent = ( props, ref ) => {
 			'bg-badge-background-disabled hover:bg-badge-hover-disabled text-badge-color-disabled border-badge-border-disabled disabled cursor-not-allowed',
 	};
 
-	// Gap classes between icon, label, and X
-	const gapClasses = {
-		xxs: 'gap-1', // 4px
-		xs: 'gap-1.5', // 6px
-		sm: 'gap-1.5', // 6px
-		md: 'gap-1.5', // 6px
-		lg: 'gap-1.5', // 6px
-	};
-
 	let filteredClasses = '';
 	let buttonClasses =
 		'group relative justify-center flex items-center cursor-pointer';
@@ -91,7 +82,7 @@ const BadgeComponent = ( props, ref ) => {
 				baseClasses,
 				sizeClasses[ size ],
 				typeClasses[ type ],
-				gapClasses[ size ], // Apply the gap class based on size
+				'gap-0.5',
 				filteredClasses,
 				className
 			) }

src/components/button/button.jsx

@@ -18,7 +18,7 @@ const Button = forwardRef( ( props, ref ) => {
 	} = props;
 
 	const commonClass =
-		'border border-solid cursor-not-allowed transition-colors duration-300 ease-in-out text-xs font-semibold focus:ring-2 focus:ring-toggle-on focus:ring-offset-2 disabled:text-text-disabled';
+		'border border-solid cursor-pointer transition-colors duration-300 ease-in-out text-xs font-semibold focus:ring-2 focus:ring-toggle-on focus:ring-offset-2 disabled:text-text-disabled';
 
 	const loadingClass = loading
 		? 'opacity-50 disabled:cursor-not-allowed'
@@ -48,17 +48,17 @@ const Button = forwardRef( ( props, ref ) => {
 			: '';
 
 	const sizeClassNames = {
-		xs: 'p-1 rounded [&>svg]:size-4 h-6 gap-1',
-		sm: 'p-2 rounded [&>svg]:size-4 h-8 gap-1.5',
-		md: 'p-2.5 rounded-md text-sm [&>svg]:size-5 h-10 gap-2',
-		lg: 'p-3 rounded-lg text-base [&>svg]:size-6 h-12 gap-2',
+		xs: 'p-1 rounded [&>svg]:size-4 h-6',
+		sm: 'p-2 rounded [&>svg]:size-4 h-8 gap-0.5',
+		md: 'p-2.5 rounded-md text-sm [&>svg]:size-5 h-10 gap-1',
+		lg: 'p-3 rounded-lg text-base [&>svg]:size-6 h-12 gap-1',
 	}?.[ size ];
 
 	let iconLeft,
 		iconRight = null;
 	let iconClass = '';
 	if ( icon ) {
-		iconClass = 'flex items-center justify-center gap-1';
+		iconClass = 'flex items-center justify-center';
 		if ( iconPosition === 'left' ) {
 			iconLeft = icon;
 		} else {
@@ -84,7 +84,7 @@ const Button = forwardRef( ( props, ref ) => {
 			{ ...rest }
 		>
 			{ iconLeft }
-			{ children }
+			<span className="px-1">{ children }</span>
 			{ iconRight }
 		</Tag>
 	);

src/components/cards/list-blocks.stories.jsx

@@ -4,7 +4,6 @@ import RadioButton from '../radio-button';
 import Container from '../container';
 import Label from '../label';
 import Badge from '../badge';
-import Button from '../button';
 
 import { Headset, MessageSquare, HelpCircle, Star } from 'lucide-react';
 
@@ -93,12 +92,11 @@ const Template3 = () => {
 						>
 							<Container.Item>{ button.icon }</Container.Item>
 							<Container.Item>
-								<Button
-									variant="ghost"
-									className="py-0 font-normal"
-								>
-									{ button.label }
-								</Button>
+								<a href="#" className="no-underline">
+									<Label className="py-0 font-normal cursor-pointer">
+										{ button.label }
+									</Label>
+								</a>
 							</Container.Item>
 							<Container.Item>{ button.bagde }</Container.Item>
 						</Container>

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">
+				<Container
+					className="p-1"
+					justify="between"
+					gap="xs"
+					align="center"
+				>
 					<Container.Item>
 						<Label className="font-semibold">
 							Extend Your Website

src/components/cards/widget-blocks.stories.jsx

@@ -234,7 +234,7 @@ const Template1 = () => {
 			gap="xs"
 		>
 			<Container.Item className="md:w-full p-1 lg:w-full">
-				<Container justify="between" gap="xs">
+				<Container justify="between" gap="xs" align="center">
 					<Container.Item className="">
 						<Label className="font-semibold">Blocks</Label>
 					</Container.Item>

src/components/dropdown-menu/dropdown-menu.jsx

@@ -164,7 +164,11 @@ const DropdownMenuItem = ( { children, as: Tag = Menu.Item, ...props } ) => {
 	}
 
 	return (
-		<Tag { ...props } onClick={ callAll( props.onClick, handleClose ) }>
+		<Tag
+			{ ...props }
+			className="px-2"
+			onClick={ callAll( props.onClick, handleClose ) }
+		>
 			{ children }
 		</Tag>
 	);

src/components/editor-input/editor-input-style.js

@@ -8,10 +8,10 @@ export const editorDisabledClassNames =
 	'bg-field-secondary-background border-field-border-disabled hover:border-field-border-disabled [&_p]:text-badge-color-disabled cursor-not-allowed';
 
 export const editorInputClassNames = {
-	xs: 'py-1 px-1.5 pr-2 rounded [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-normal [&_.editor-content>p]:leading-[1.5rem]',
-	sm: 'py-1.5 px-1.5 pr-2 rounded [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem]',
-	md: 'py-2 px-2.5 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem]',
-	lg: 'py-2.5 px-3 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.6875rem]',
+	xs: 'py-1 px-2 pr-2 rounded [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-normal [&_.editor-content>p]:leading-[1.5rem]  [&_.pointer-events-none]:text-xs [&_.pointer-events-none]:font-normal [&_.pointer-events-none]:leading-[1.5rem]',
+	sm: 'px-3 py-2 rounded [&_.editor-content>p]:text-xs [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem] [&_.pointer-events-none]:text-xs [&_.pointer-events-none]:font-medium [&_.pointer-events-none]:leading-[1.625rem]',
+	md: 'px-3.5 py-2.5 rounded-md [&_.editor-content>p]:text-sm [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.625rem] [&_.pointer-events-none]:text-sm [&_.pointer-events-none]:font-medium [&_.pointer-events-none]:leading-[1.625rem]',
+	lg: 'px-4 py-3 rounded-md [&_.editor-content>p]:text-base [&_.editor-content>p]:font-medium [&_.editor-content>p]:leading-[1.6875rem] [&_.pointer-events-none]:text-base [&_.pointer-events-none]:font-medium [&_.pointer-events-none]:leading-[1.6875rem]',
 };
 
 export const comboboxDropdownCommonClassNames =

src/components/input/input.jsx

@@ -72,17 +72,19 @@ const InputComponent = (
 	const baseClasses =
 		'border border-solid border-border-subtle box-border bg-field-secondary-background font-normal placeholder-text-tertiary text-text-primary w-full focus:outline-none';
 	const sizeClasses = {
-		xs: 'p-2 rounded max-h-7',
+		xs: 'px-2 py-1 rounded max-h-6',
 		sm: 'p-3 py-2 rounded max-h-8',
 		md: 'p-3.5 py-2.5 rounded-md max-h-10',
 		lg: 'p-4 py-3 rounded-lg max-h-12',
 	};
 	const labelClasses = {
+		xs: 'text-xs font-medium',
 		sm: 'text-sm font-medium',
 		md: 'text-sm font-medium',
 		lg: 'text-base font-medium',
 	};
 	const textClasses = {
+		xs: 'text-xs',
 		sm: 'text-xs',
 		md: 'text-sm',
 		lg: 'text-base',

src/components/sidebar/sidebar.stories.js

@@ -125,7 +125,8 @@ const Template = ( args ) => {
 					className={ sidebarCollapsed && 'flex justify-center' }
 				>
 					<img
-						width={ sidebarCollapsed ? '40px' : '180px' }
+						width={ sidebarCollapsed ? 'auto' : '180px' }
+						height={ sidebarCollapsed ? '24px' : 'auto' }
 						alt="Logo"
 						src={
 							sidebarCollapsed
@@ -137,19 +138,19 @@ const Template = ( args ) => {
 			</Sidebar.Header>
 			<Sidebar.Body>
 				<Sidebar.Item>
-					<div className="flex flex-col gap-2">
+					<div className="flex flex-col gap-6">
 						{ menuData.map( ( section, sectionIndex ) => (
 							<div key={ sectionIndex }>
-								<p className="text-slate-500">
+								<p className="text-text-tertiary p-1 m-0">
 									{ ! sidebarCollapsed && section.heading }
 								</p>
-								<div>
+								<div className="gap-0.5">
 									{ section.items.map( ( item, itemIndex ) => (
 										<div
 											key={ itemIndex }
-											className={ `px-2 py-1 flex items-center gap-2 cursor-pointer rounded-md hover:bg-slate-100 ${ sidebarCollapsed && 'justify-center' }` }
+											className={ `p-1 flex items-center gap-1 cursor-pointer rounded-md hover:bg-slate-100  text-text-secondary ${ sidebarCollapsed && 'justify-center' }` }
 										>
-											<span className="mt-[4px]">
+											<span className="[&>svg]:size-5 [&>svg]:m-1.5 [&>*:not(svg)]:m-1 h-8">
 												{ item.icon }
 											</span>
 											{ ! sidebarCollapsed && (

src/components/textarea/textarea.jsx

@@ -56,7 +56,7 @@ const TextAreaComponent = (
 	const focusClasses =
 		'focus:border-focus-border focus:ring-2 focus:ring-toggle-on focus:ring-offset-2';
 	const errorClasses = error
-		? 'focus:border-focus-error-border focus:ring-field-color-error bg-field-background-error'
+		? 'focus:border-focus-error-border focus:ring-field-color-error border-focus-error-border'
 		: '';
 	const disabledClasses = disabled
 		? 'border-border-disabled bg-field-background-disabled cursor-not-allowed text-text-disabled'

src/templates/dashboard-astra/dashboard-astra.stories.js

@@ -475,7 +475,7 @@ export const AstraDashboard = () => {
 										( option ) => (
 											<RadioButton.Button
 												key={ `option-${ option.id }` }
-												borderOn={ true }
+												borderOn={ false }
 												value={ option.value }
 												icon={ option.icon }
 												hideSelection={
@@ -489,7 +489,7 @@ export const AstraDashboard = () => {
 												className="px-2"
 												badgeItem={ option.badge }
 												disabled={ option.disabled }
-												buttonWrapperClasses="bg-background-primary"
+												buttonWrapperClasses="bg-background-primary rounded-md shadow-sm"
 											/>
 										)
 									) }
@@ -531,6 +531,7 @@ export const AstraDashboard = () => {
 								<Container
 									className="p-1"
 									justify="between"
+									align="center"
 									gap="xs"
 								>
 									<Container.Item>

src/templates/dashboard-spectra/dashboard-spectra.stories.js

@@ -647,6 +647,7 @@ export const SpectraDashboard = () => {
 									className="p-1"
 									justify="between"
 									gap="xs"
+									align="center"
 								>
 									<Container.Item>
 										<Label className="font-semibold text-text-primary">

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>

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

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>

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>

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>

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>