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

style: add transition effects to shadow properties across multiple components for improved visual feedback

Browse Source
This commit is contained in:
Usman Baig
2026-02-21 23:42:12 +01:00
parent 0b68db58be
commit d08c8f00a0
5 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/share/[id]/page.tsx
View File

@@ -199,7 +199,7 @@ export default function PublicDashboardPage() {
if (isPasswordProtected && !data) {
return (
<div className="min-h-screen flex items-center justify-center px-4">
<div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 shadow-lg">
<div className="max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6 shadow-lg transition-shadow duration-300">
<div className="text-center mb-6">
<div className="w-12 h-12 bg-brand-orange/10 rounded-xl flex items-center justify-center mx-auto mb-4 text-brand-orange">
<ZapIcon className="w-6 h-6" />

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

@@ -225,7 +225,7 @@ export default function FunnelReportPage() {
const data = payload[0].payload;
return (
<div
className="p-3 rounded-xl shadow-lg border"
className="p-3 rounded-xl shadow-lg border transition-shadow duration-300"
style={{
backgroundColor: chartColors.tooltipBg,
borderColor: chartColors.tooltipBorder,

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

@@ -189,7 +189,7 @@ function StatusBarTooltip({
className="fixed z-50 pointer-events-none"
style={{ left: position.x, top: position.y - 10, transform: 'translate(-50%, -100%)' }}
>
<div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg px-3 py-2.5 text-xs min-w-40">
<div className="bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-lg transition-shadow duration-300 px-3 py-2.5 text-xs min-w-40">
<div className="font-semibold text-neutral-900 dark:text-white mb-1.5">{formattedDate}</div>
{stat && stat.total_checks > 0 ? (
<div className="space-y-1">
@@ -305,7 +305,7 @@ function ResponseTimeChart({ checks }: { checks: UptimeCheck[] }) {
if (!active || !payload?.length) return null
return (
<div
className="rounded-xl px-3 py-2 text-xs shadow-lg border"
className="rounded-xl px-3 py-2 text-xs shadow-lg border transition-shadow duration-300"
style={{
background: colors.tooltipBg,
borderColor: colors.tooltipBorder,
@@ -955,7 +955,7 @@ function MonitorForm({
</svg>
</button>
{showProtocolDropdown && (
<div className="absolute top-full left-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg z-10 min-w-[100px]">
<div className="absolute top-full left-0 mt-1 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg transition-shadow duration-300 z-10 min-w-[100px]">
<button
type="button"
onClick={() => handleProtocolChange('https://')}

2
components/OfflineBanner.tsx
View File

@@ -6,7 +6,7 @@ export function OfflineBanner({ isOnline }: { isOnline: boolean }) {
if (isOnline) return null;
return (
<div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md">
<div className="fixed top-0 left-0 right-0 z-[100] rounded-b-xl bg-yellow-500/15 dark:bg-yellow-500/25 border-b border-yellow-500/30 dark:border-yellow-500/40 text-yellow-700 dark:text-yellow-300 px-4 sm:px-8 py-2.5 text-sm flex items-center justify-center gap-2 font-medium shadow-md transition-shadow duration-300">
<FiWifiOff className="w-4 h-4 shrink-0" />
<span>You are currently offline. Changes may not be saved.</span>
</div>

2
components/dashboard/Chart.tsx
View File

@@ -127,7 +127,7 @@ function ChartTooltip({
return (
<div
className="rounded-lg border px-4 py-3 shadow-lg"
className="rounded-lg border px-4 py-3 shadow-lg transition-shadow duration-300"
style={{
backgroundColor: colors.tooltipBg,
borderColor: colors.tooltipBorder,