ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: update button styles and enhance layout consistency across Funnels pages, including improved accessibility with aria-labels

Browse Source
This commit is contained in:
Usman Baig
2026-02-04 22:27:55 +01:00
parent 5a8fe883dd
commit c98286c4e3
3 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/sites/[id]/funnels/[funnelId]/page.tsx
View File

@@ -68,7 +68,7 @@ export default function FunnelReportPage() {
if (!funnel || !stats) { if (!funnel || !stats) {
return ( return (
<div className="container mx-auto px-4 py-8"> <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
<p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p> <p className="text-neutral-600 dark:text-neutral-400">Funnel not found</p>
</div> </div>
) )
@@ -88,7 +88,7 @@ export default function FunnelReportPage() {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link <Link
href={`/sites/${siteId}/funnels`} href={`/sites/${siteId}/funnels`}
className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors" className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
> >
<ChevronLeftIcon className="w-5 h-5" /> <ChevronLeftIcon className="w-5 h-5" />
</Link> </Link>
@@ -127,7 +127,8 @@ export default function FunnelReportPage() {
<button <button
onClick={handleDelete} onClick={handleDelete}
className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors" className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
aria-label="Delete funnel"
> >
<TrashIcon className="w-5 h-5" /> <TrashIcon className="w-5 h-5" />
</button> </button>
@@ -136,7 +137,7 @@ export default function FunnelReportPage() {
{/* Chart */} {/* Chart */}
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-8"> <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 mb-8">
<h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-6"> <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-6">
Funnel Visualization Funnel Visualization
</h3> </h3>
<div className="h-[400px] w-full"> <div className="h-[400px] w-full">
@@ -162,7 +163,7 @@ export default function FunnelReportPage() {
if (active && payload && payload.length) { if (active && payload && payload.length) {
const data = payload[0].payload; const data = payload[0].payload;
return ( return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-3 rounded-lg shadow-lg"> <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 p-3 rounded-xl shadow-lg">
<p className="font-medium text-neutral-900 dark:text-white mb-1">{label}</p> <p className="font-medium text-neutral-900 dark:text-white mb-1">{label}</p>
<p className="text-brand-orange font-bold text-lg"> <p className="text-brand-orange font-bold text-lg">
{data.visitors.toLocaleString()} visitors {data.visitors.toLocaleString()} visitors

13
app/sites/[id]/funnels/new/page.tsx
View File

@@ -76,7 +76,7 @@ export default function CreateFunnelPage() {
<div className="mb-8"> <div className="mb-8">
<Link <Link
href={`/sites/${siteId}/funnels`} href={`/sites/${siteId}/funnels`}
className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 transition-colors" className="inline-flex items-center gap-2 text-sm text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white mb-6 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 px-2 py-1.5 -ml-2 transition-colors"
> >
<ChevronLeftIcon className="w-4 h-4" /> <ChevronLeftIcon className="w-4 h-4" />
Back to Funnels Back to Funnels
@@ -119,7 +119,7 @@ export default function CreateFunnelPage() {
<div className="space-y-4 mb-8"> <div className="space-y-4 mb-8">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-lg font-medium text-neutral-900 dark:text-white"> <h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
Funnel Steps Funnel Steps
</h3> </h3>
</div> </div>
@@ -152,7 +152,7 @@ export default function CreateFunnelPage() {
<select <select
value={step.type} value={step.type}
onChange={(e) => handleUpdateStep(index, 'type', e.target.value)} onChange={(e) => handleUpdateStep(index, 'type', e.target.value)}
className="w-24 px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none" className="w-24 px-2 py-2 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl text-sm focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange outline-none"
> >
<option value="exact">Exact</option> <option value="exact">Exact</option>
<option value="contains">Contains</option> <option value="contains">Contains</option>
@@ -172,7 +172,8 @@ export default function CreateFunnelPage() {
type="button" type="button"
onClick={() => handleRemoveStep(index)} onClick={() => handleRemoveStep(index)}
disabled={steps.length <= 1} disabled={steps.length <= 1}
className={`mt-3 p-2 rounded-lg transition-colors ${ aria-label="Remove step"
className={`mt-3 p-2 rounded-xl transition-colors ${
steps.length <= 1 steps.length <= 1
? 'text-neutral-300 cursor-not-allowed' ? 'text-neutral-300 cursor-not-allowed'
: 'text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20' : 'text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20'
@@ -197,14 +198,14 @@ export default function CreateFunnelPage() {
<div className="flex justify-end gap-4"> <div className="flex justify-end gap-4">
<Link <Link
href={`/sites/${siteId}/funnels`} href={`/sites/${siteId}/funnels`}
className="px-4 py-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white font-medium" className="btn-secondary"
> >
Cancel Cancel
</Link> </Link>
<Button <Button
type="submit" type="submit"
disabled={saving} disabled={saving}
className="bg-brand-orange hover:bg-brand-orange/90 text-white" className="btn-primary"
> >
{saving ? 'Creating...' : 'Create Funnel'} {saving ? 'Creating...' : 'Create Funnel'}
</Button> </Button>

11
app/sites/[id]/funnels/page.tsx
View File

@@ -55,7 +55,7 @@ export default function FunnelsPage() {
<div className="flex items-center gap-4 mb-6"> <div className="flex items-center gap-4 mb-6">
<Link <Link
href={`/sites/${siteId}`} href={`/sites/${siteId}`}
className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors" className="p-2 -ml-2 text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
> >
<ChevronLeftIcon className="w-5 h-5" /> <ChevronLeftIcon className="w-5 h-5" />
</Link> </Link>
@@ -70,7 +70,7 @@ export default function FunnelsPage() {
<div className="ml-auto"> <div className="ml-auto">
<Link <Link
href={`/sites/${siteId}/funnels/new`} href={`/sites/${siteId}/funnels/new`}
className="flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors font-medium" className="btn-primary inline-flex items-center gap-2"
> >
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
<span>Create Funnel</span> <span>Create Funnel</span>
@@ -83,7 +83,7 @@ export default function FunnelsPage() {
<div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center"> <div className="w-16 h-16 mx-auto mb-4 bg-neutral-100 dark:bg-neutral-800 rounded-full flex items-center justify-center">
<ArrowRightIcon className="w-8 h-8 text-neutral-400" /> <ArrowRightIcon className="w-8 h-8 text-neutral-400" />
</div> </div>
<h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2"> <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
No funnels yet No funnels yet
</h3> </h3>
<p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto"> <p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
@@ -91,7 +91,7 @@ export default function FunnelsPage() {
</p> </p>
<Link <Link
href={`/sites/${siteId}/funnels/new`} href={`/sites/${siteId}/funnels/new`}
className="inline-flex items-center gap-2 px-4 py-2 bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors font-medium" className="btn-primary inline-flex items-center gap-2"
> >
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
<span>Create Funnel</span> <span>Create Funnel</span>
@@ -132,7 +132,8 @@ export default function FunnelsPage() {
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button <button
onClick={(e) => handleDelete(e, funnel.id)} onClick={(e) => handleDelete(e, funnel.id)}
className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors" className="p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-colors"
aria-label="Delete funnel"
> >
<TrashIcon className="w-5 h-5" /> <TrashIcon className="w-5 h-5" />
</button> </button>