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

style: standardize gap sizes across multiple components for improved visual consistency

Browse Source
This commit is contained in:
Usman Baig
2026-02-21 23:48:03 +01:00
parent aada06c207
commit 4dead4b399
8 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/sites/[id]/uptime/page.tsx
View File

@@ -473,7 +473,7 @@ function MonitorCard({
<div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1"> <div className="text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-1">
Status Status
</div> </div>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-2">
<div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.last_status)}`} /> <div className={`w-2 h-2 rounded-full ${getStatusDotColor(monitor.last_status)}`} />
<span className="text-sm font-medium text-neutral-900 dark:text-white"> <span className="text-sm font-medium text-neutral-900 dark:text-white">
{getStatusLabel(monitor.last_status)} {getStatusLabel(monitor.last_status)}

8
app/welcome/page.tsx
View File

@@ -338,7 +338,7 @@ function WelcomeContent() {
<div className="flex-1 flex flex-col items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-4 py-12"> <div className="flex-1 flex flex-col items-center justify-center bg-neutral-50 dark:bg-neutral-950 px-4 py-12">
<div className="w-full max-w-lg"> <div className="w-full max-w-lg">
<div <div
className="flex justify-center gap-1.5 mb-8" className="flex justify-center gap-2 mb-8"
role="progressbar" role="progressbar"
aria-valuenow={step} aria-valuenow={step}
aria-valuemin={1} aria-valuemin={1}
@@ -475,7 +475,7 @@ function WelcomeContent() {
<button <button
type="button" type="button"
onClick={() => setStep(1)} onClick={() => setStep(1)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded" className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
aria-label="Back to welcome" aria-label="Back to welcome"
> >
<ArrowLeftIcon className="h-4 w-4" /> <ArrowLeftIcon className="h-4 w-4" />
@@ -546,7 +546,7 @@ function WelcomeContent() {
<button <button
type="button" type="button"
onClick={() => setStep(2)} onClick={() => setStep(2)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded" className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
aria-label="Back to organization" aria-label="Back to organization"
> >
<ArrowLeftIcon className="h-4 w-4" /> <ArrowLeftIcon className="h-4 w-4" />
@@ -631,7 +631,7 @@ function WelcomeContent() {
<button <button
type="button" type="button"
onClick={() => setStep(3)} onClick={() => setStep(3)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded" className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-300 mb-6 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded"
aria-label="Back to plan" aria-label="Back to plan"
> >
<ArrowLeftIcon className="h-4 w-4" /> <ArrowLeftIcon className="h-4 w-4" />

2
components/Footer.tsx
View File

@@ -95,7 +95,7 @@ export function Footer({ LinkComponent = Link, appName = 'Pulse', isAuthenticate
<p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed"> <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-4 leading-relaxed">
Simple analytics for privacy-conscious apps. Simple analytics for privacy-conscious apps.
</p> </p>
<div className="inline-flex items-center gap-2.5 text-sm text-neutral-600 dark:text-neutral-400 mb-4"> <div className="inline-flex items-center gap-3 text-sm text-neutral-600 dark:text-neutral-400 mb-4">
<span className="flex items-center justify-center w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-800 shrink-0 overflow-hidden ring-1 ring-neutral-200 dark:ring-neutral-700" aria-hidden> <span className="flex items-center justify-center w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-800 shrink-0 overflow-hidden ring-1 ring-neutral-200 dark:ring-neutral-700" aria-hidden>
<SwissFlagIcon className="w-5 h-5" /> <SwissFlagIcon className="w-5 h-5" />
</span> </span>

8
components/dashboard/Campaigns.tsx
View File

@@ -146,7 +146,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
<button <button
type="button" type="button"
onClick={() => handleSort(colKey)} onClick={() => handleSort(colKey)}
className={`inline-flex items-center gap-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset rounded ${className}`} className={`inline-flex items-center gap-1 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-inset rounded ${className}`}
aria-label={`Sort by ${label}`} aria-label={`Sort by ${label}`}
> >
{label} {label}
@@ -170,7 +170,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
<Button <Button
variant="ghost" variant="ghost"
onClick={handleExportCampaigns} onClick={handleExportCampaigns}
className="h-8 px-3 text-xs gap-1.5" className="h-8 px-3 text-xs gap-2"
> >
<DownloadIcon className="w-3.5 h-3.5" /> <DownloadIcon className="w-3.5 h-3.5" />
Export Export
@@ -179,7 +179,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
<Button <Button
variant="ghost" variant="ghost"
onClick={() => setIsBuilderOpen(true)} onClick={() => setIsBuilderOpen(true)}
className="h-8 px-3 text-xs gap-1.5" className="h-8 px-3 text-xs gap-2"
> >
<PlusIcon className="w-3.5 h-3.5" /> <PlusIcon className="w-3.5 h-3.5" />
Build URL Build URL
@@ -276,7 +276,7 @@ export default function Campaigns({ siteId, dateRange }: CampaignsProps) {
</p> </p>
<Link <Link
href="/installation" href="/installation"
className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded" className="inline-flex items-center gap-2 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
> >
Read documentation Read documentation
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />

8
components/dashboard/Chart.tsx
View File

@@ -145,7 +145,7 @@ function ChartTooltip({
</span> </span>
</div> </div>
{hasPrev && ( {hasPrev && (
<div className="mt-1.5 flex items-center gap-1.5 text-xs" style={{ color: colors.textMuted }}> <div className="mt-1.5 flex items-center gap-2 text-xs" style={{ color: colors.textMuted }}>
<span>vs {formatValue(prev as number)} {prevPeriodLabel ? `(${prevPeriodLabel})` : 'prev'}</span> <span>vs {formatValue(prev as number)} {prevPeriodLabel ? `(${prevPeriodLabel})` : 'prev'}</span>
{delta !== null && ( {delta !== null && (
<span <span
@@ -416,7 +416,7 @@ export default function Chart({
{/* * Subtle live/updated indicator in bottom-right corner */} {/* * Subtle live/updated indicator in bottom-right corner */}
{lastUpdatedAt != null && ( {lastUpdatedAt != null && (
<div <div
className="absolute bottom-3 right-6 flex items-center gap-1.5 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none" className="absolute bottom-3 right-6 flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400 pointer-events-none"
title="Data refreshes every 30 seconds" title="Data refreshes every 30 seconds"
> >
<span className="relative flex h-1.5 w-1.5"> <span className="relative flex h-1.5 w-1.5">
@@ -540,7 +540,7 @@ export default function Chart({
</div> </div>
{prevData?.length ? ( {prevData?.length ? (
<div className="flex flex-col gap-0.5"> <div className="flex flex-col gap-1">
<Checkbox <Checkbox
checked={showComparison} checked={showComparison}
onCheckedChange={setShowComparison} onCheckedChange={setShowComparison}
@@ -558,7 +558,7 @@ export default function Chart({
variant="ghost" variant="ghost"
onClick={handleExportChart} onClick={handleExportChart}
disabled={!hasData} disabled={!hasData}
className="gap-1.5 py-1.5 px-3 text-sm text-neutral-600 dark:text-neutral-400" className="gap-2 py-1.5 px-3 text-sm text-neutral-600 dark:text-neutral-400"
> >
<DownloadIcon className="w-4 h-4" /> <DownloadIcon className="w-4 h-4" />
Export chart Export chart

2
components/dashboard/GoalStats.tsx
View File

@@ -52,7 +52,7 @@ export default function GoalStats({ goalCounts }: GoalStatsProps) {
</p> </p>
<Link <Link
href="/installation" href="/installation"
className="inline-flex items-center gap-1.5 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded" className="inline-flex items-center gap-2 text-sm font-medium text-brand-orange hover:text-brand-orange/90 hover:underline focus:outline-none focus:ring-2 focus:ring-brand-orange/20 rounded"
> >
Read documentation Read documentation
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />

2
components/notifications/NotificationCenter.tsx
View File

@@ -235,7 +235,7 @@ export default function NotificationCenter() {
<Link <Link
href="/org-settings?tab=notifications" href="/org-settings?tab=notifications"
onClick={() => setOpen(false)} onClick={() => setOpen(false)}
className="flex items-center gap-1.5 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors" className="flex items-center gap-2 text-sm text-neutral-500 dark:text-neutral-400 hover:text-brand-orange dark:hover:text-brand-orange transition-colors"
> >
<SettingsIcon className="w-4 h-4" /> <SettingsIcon className="w-4 h-4" />
Manage settings Manage settings

8
components/settings/OrganizationSettings.tsx
View File

@@ -1024,7 +1024,7 @@ export default function OrganizationSettings() {
type="button" type="button"
onClick={handleManageSubscription} onClick={handleManageSubscription}
disabled={isRedirectingToPortal} disabled={isRedirectingToPortal}
className="inline-flex items-center gap-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded" className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
> >
<ExternalLinkIcon className="w-4 h-4" /> <ExternalLinkIcon className="w-4 h-4" />
Payment method & invoices Payment method & invoices
@@ -1034,7 +1034,7 @@ export default function OrganizationSettings() {
<button <button
type="button" type="button"
onClick={() => setShowCancelPrompt(true)} onClick={() => setShowCancelPrompt(true)}
className="inline-flex items-center gap-1.5 rounded-xl border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
> >
Cancel subscription Cancel subscription
</button> </button>
@@ -1077,14 +1077,14 @@ export default function OrganizationSettings() {
</span> </span>
{invoice.invoice_pdf && ( {invoice.invoice_pdf && (
<a href={invoice.invoice_pdf} target="_blank" rel="noopener noreferrer" <a href={invoice.invoice_pdf} target="_blank" rel="noopener noreferrer"
className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange" title="Download PDF"> className="inline-flex items-center gap-2 px-2.5 py-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange" title="Download PDF">
<DownloadIcon className="w-3.5 h-3.5" /> <DownloadIcon className="w-3.5 h-3.5" />
Download PDF Download PDF
</a> </a>
)} )}
{invoice.hosted_invoice_url && ( {invoice.hosted_invoice_url && (
<a href={invoice.hosted_invoice_url} target="_blank" rel="noopener noreferrer" <a href={invoice.hosted_invoice_url} target="_blank" rel="noopener noreferrer"
className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${ className={`inline-flex items-center gap-2 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
invoice.status === 'open' invoice.status === 'open'
? 'bg-brand-orange text-white hover:bg-brand-orange-hover' ? 'bg-brand-orange text-white hover:bg-brand-orange-hover'
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800' : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'