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

fix(analytics-ui): standardize branding, colors, and border radii

Browse Source
This commit is contained in:
Usman Baig
2026-01-18 19:37:36 +01:00
parent 4d015e5828
commit e7a123cea2
5 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/page.tsx
View File

@@ -57,7 +57,7 @@ export default function HomePage() {
{/* Features Grid */}
<div className="grid md:grid-cols-3 gap-8 pt-16 text-left">
<div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
<LockClosedIcon className="w-6 h-6" />
</div>
@@ -66,7 +66,7 @@ export default function HomePage() {
We don't track personal data. No IP addresses, no fingerprints, no cookies.
</p>
</div>
<div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
<BarChartIcon className="w-6 h-6" />
</div>
@@ -75,7 +75,7 @@ export default function HomePage() {
Get the metrics that matter without the clutter. Page views, visitors, and sources.
</p>
</div>
<div className="p-6 rounded-2xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="p-6 rounded-xl bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mb-4 text-brand-orange">
<LightningBoltIcon className="w-6 h-6" />
</div>

32
components/dashboard/Chart.tsx
View File

@@ -5,6 +5,16 @@ import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
import { formatNumber, formatDuration } from '@/lib/utils/format'
import { ArrowTopRightIcon, ArrowBottomRightIcon, DownloadIcon } from '@radix-ui/react-icons'
const COLORS = {
brand: '#FD5E0F',
success: '#10B981', // Emerald-500
danger: '#EF4444', // Red-500
border: '#E5E5E5', // Neutral-200
text: '#171717', // Neutral-900
textMuted: '#737373', // Neutral-500
axis: '#A3A3A3', // Neutral-400
}
interface DailyStat {
date: string
pageviews: number
@@ -74,7 +84,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
label: 'Unique Visitors',
value: formatNumber(stats.visitors),
trend: calculateTrend(stats.visitors, prevStats?.visitors),
color: '#FD5E0F', // Brand Orange
color: COLORS.brand,
invertTrend: false,
},
{
@@ -82,7 +92,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
label: 'Total Pageviews',
value: formatNumber(stats.pageviews),
trend: calculateTrend(stats.pageviews, prevStats?.pageviews),
color: '#FD5E0F', // Orange
color: COLORS.brand,
invertTrend: false,
},
{
@@ -90,7 +100,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
label: 'Bounce Rate',
value: `${Math.round(stats.bounce_rate)}%`,
trend: calculateTrend(stats.bounce_rate, prevStats?.bounce_rate),
color: '#EF4444', // Red
color: COLORS.danger,
invertTrend: true, // Lower bounce rate is better
},
{
@@ -98,7 +108,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
label: 'Visit Duration',
value: formatDuration(stats.avg_duration),
trend: calculateTrend(stats.avg_duration, prevStats?.avg_duration),
color: '#10B981', // Emerald
color: COLORS.success,
invertTrend: false,
},
] as const
@@ -175,17 +185,17 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
<stop offset="95%" stopColor={activeMetric.color} stopOpacity={0}/>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E5E5E5" />
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke={COLORS.border} />
<XAxis
dataKey="date"
stroke="#A3A3A3"
stroke={COLORS.axis}
fontSize={12}
tickLine={false}
axisLine={false}
minTickGap={30}
/>
<YAxis
stroke="#A3A3A3"
stroke={COLORS.axis}
fontSize={12}
tickLine={false}
axisLine={false}
@@ -194,13 +204,13 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
<Tooltip
contentStyle={{
backgroundColor: 'rgba(255, 255, 255, 0.95)',
border: '1px solid #E5E5E5',
border: `1px solid ${COLORS.border}`,
borderRadius: '8px',
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
padding: '12px'
}}
itemStyle={{ color: '#171717', fontWeight: 600, fontSize: '14px' }}
labelStyle={{ color: '#737373', marginBottom: '8px', fontSize: '12px' }}
itemStyle={{ color: COLORS.text, fontWeight: 600, fontSize: '14px' }}
labelStyle={{ color: COLORS.textMuted, marginBottom: '8px', fontSize: '12px' }}
cursor={{ stroke: activeMetric.color, strokeDasharray: '4 4' }}
/>
@@ -209,7 +219,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
<Area
type="monotone"
dataKey={metric === 'visitors' ? 'prevVisitors' : 'prevPageviews'}
stroke="#A3A3A3"
stroke={COLORS.axis}
strokeWidth={2}
strokeDasharray="4 4"
fill="none"

4
components/dashboard/WorldMap.tsx
View File

@@ -35,8 +35,8 @@ const WorldMap = ({ data }: WorldMapProps) => {
// Plausible-like colors based on provided SVG snippet
const isDark = resolvedTheme === 'dark'
const defaultFill = isDark ? "#2d2d2d" : "#F2F2F2" // Approx gray-750 / gray-150
const defaultStroke = isDark ? "#171717" : "#FFFFFF" // gray-900 / white
const defaultFill = isDark ? "#262626" : "#f5f5f5" // neutral-800 / neutral-100
const defaultStroke = isDark ? "#171717" : "#ffffff" // neutral-900 / white
const brandOrange = "#FD5E0F"
return (

2
components/ui/DatePicker.tsx
View File

@@ -171,7 +171,7 @@ export default function DatePicker({ isOpen, onClose, onApply, initialRange }: D
</button>
<button
onClick={() => onApply({ start: formatDate(startDate), end: formatDate(endDate) })}
className="px-4 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg shadow-sm hover:bg-orange-600 transition-colors"
className="px-4 py-2 text-sm font-medium bg-brand-orange text-white rounded-xl shadow-sm hover:bg-orange-600 transition-colors"
>
Apply
</button>

10
styles/globals.css
View File

@@ -36,6 +36,16 @@
body {
@apply bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50 transition-colors duration-300 ease-in-out;
font-family: var(--font-plus-jakarta-sans), system-ui, sans-serif;
background-image:
radial-gradient(at 0% 0%, hsla(20, 98%, 52%, 0.03) 0px, transparent 50%),
radial-gradient(at 100% 100%, hsla(20, 98%, 52%, 0.03) 0px, transparent 50%);
background-attachment: fixed;
}
.dark body {
background-image:
radial-gradient(at 0% 0%, hsla(20, 98%, 52%, 0.05) 0px, transparent 50%),
radial-gradient(at 100% 100%, hsla(20, 98%, 52%, 0.05) 0px, transparent 50%);
}
}