Redesign database error page with improved UI

[Bloxion]

• redesign db-error page
• Add a refresh button

Summary by CodeRabbit

• New Features

  • Added a Reload Page button to the database error screen.
  • Displays a labeled DATABASE_URL code snippet for clearer troubleshooting.

• Style

  • Redesigned the error UI into a centered card/modal with improved hierarchy.
  • Added fade-in animation, light/dark mode colors, reduced-motion support, responsive layout, and refined button states.

• Chores

  • Updated copyright notices to append "GNU GPL-3.0."

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds useRouter() and a router instance, retains Router.replace for the existing redirect-on-configured logic, and replaces the full-screen DB error page with a centered card UI containing a titled message, a code-styled DATABASE_URL label, and a "Reload Page" button that calls router.reload(). Inline CSS-in-JSX implements fade-in, light/dark tokens, button states, responsive tweaks, and reduced-motion handling.

Changes

Cohort / File(s)	Summary
Database Error Page UI Redesign pages/db-error.tsx	Replaced full-screen wrapper with a centered card (db-container / db-card) showing title, message, labeled DATABASE_URL code block, and a "Reload Page" button. Added useRouter() and a router instance; redirect-on-configured logic remains (code still calls Router.replace for that redirect) and the button triggers router.reload(). Added inline CSS-in-JSX: fade-in animation, light/dark color tokens, borders/shadows, button states, responsive tweaks, and reduced-motion handling.
Copyright Text Update pages/login.tsx	Updated two copyright notice strings in the Copyright Notices dialog to append "GNU GPL-3.0." replacing "All rights reserved." — textual changes only.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

• Verify consistent usage between Router.replace and the newly-introduced router (ensure no conflicting imports/usages).
• Confirm router.reload() is wired correctly to the button and behaves as expected.
• Check CSS-in-JSX scoping, animation timing, reduced-motion handling, and color contrast/accessibility.
• Validate the textual updates in pages/login.tsx render as intended.

Poem

🐇 I hopped through pixels, stitched a tiny card so bright,
A glowing code snippet tucked in soft moonlight,
Press my button, watch the page spin free,
A rabbit's nudge to refresh and see,
Soft fade, kind colors — hop, click, delight! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Redesign database error page with improved UI' directly and clearly reflects the main change in the changeset—redesigning pages/db-error.tsx with updated UI components and styling.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e1f8d81 and efeae7c.

📒 Files selected for processing (1)

• pages/login.tsx (2 hunks)

✅ Files skipped from review due to trivial changes (1)

• pages/login.tsx

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

pages/db-error.tsx (2)

1-11: Consider using the useRouter hook for modern Next.js patterns.

The current implementation uses the legacy Router import. While functional, Next.js recommends using the useRouter() hook for better compatibility with React's rules of hooks and future Next.js versions.

Apply this diff to modernize the routing approach:

-import { useEffect } from "react";
-import Router from "next/router";
+import { useEffect } from "react";
+import { useRouter } from "next/router";

 export default function DatabaseErrorPage() {
+  const router = useRouter();
   const isDbConfigured = process.env.NEXT_PUBLIC_DATABASE_CHECK === "true";

   useEffect(() => {
     if (isDbConfigured) {
-      Router.replace("/");
+      router.replace("/");
     }
-  }, [isDbConfigured]);
+  }, [isDbConfigured, router]);

---

31-132: Consider using CSS custom properties for better maintainability.

The styling uses hardcoded color values throughout. Using CSS custom properties would make it easier to maintain color consistency and adjust the theme in the future.

Example refactor with CSS variables:

       <style jsx>{`
+        .db-container {
+          --color-bg-gradient-start: #18181b;
+          --color-bg-gradient-mid: #09090b;
+          --color-bg-gradient-end: #18181b;
+          --color-card-bg: rgba(24, 24, 27, 0.55);
+          --color-card-border: rgba(63, 63, 70, 0.8);
+          --color-title: #ff2b55;
+          --color-text: #d4d4d8;
+          --color-code-bg: rgba(63, 63, 70, 0.7);
+          --color-code-border: rgba(82, 82, 91, 0.7);
+          --color-code-text: #e4e4e7;
+          --color-btn-bg: #ff2b55;
+        }
+
         .db-container {
           height: 100vh;
           display: flex;
           justify-content: center;
           align-items: center;
           padding: 24px;
           font-family: system-ui, sans-serif;
-          background: linear-gradient(to bottom, #18181b, #09090b, #18181b);
+          background: linear-gradient(to bottom, var(--color-bg-gradient-start), var(--color-bg-gradient-mid), var(--color-bg-gradient-end));
         }

         .db-card {
           width: 100%;
           max-width: 480px;
           padding: 40px 36px;
           text-align: center;
           border-radius: 20px;
-          background: rgba(24, 24, 27, 0.55);
-          border: 1px solid rgba(63, 63, 70, 0.8);
+          background: var(--color-card-bg);
+          border: 1px solid var(--color-card-border);
           backdrop-filter: blur(12px);
           box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
         }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 234febb and fc6721c.

📒 Files selected for processing (1)

• pages/db-error.tsx (1 hunks)