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 on the database error screen.
  • Shows a labeled DATABASE_URL code snippet for clearer troubleshooting.

• Style

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

• Chores

  • Updated copyright notices to append "GNU GPL-3.0."
  • Build now runs Prisma generation before the app build.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Replaces the full-screen DB error page with a centered card UI, adds useRouter() and a router instance, keeps existing Router.replace redirect logic, adds a "Reload Page" button that calls router.reload(), and inlines CSS-in-JSX for card styling, animation, and reduced-motion support.

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, code-styled DATABASE_URL label, and a "Reload Page" button. Added useRouter() and router instance; existing redirect-on-configured still calls Router.replace. Inlined CSS-in-JSX for fade-in, light/dark tokens, borders/shadows, button states, responsive tweaks, and reduced-motion handling.
Copyright Text Update pages/login.tsx	Two textual changes in the Copyright Notices dialog: replaced "All rights reserved." with "GNU GPL-3.0." in two places.
Build Script Change package.json	Modified build script to run prisma generate && next build; removed the standalone prisma:generate script entry.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 I hopped through bytes and stitched a tiny card so bright,
A little code snippet glowing in the night,
Tap my button — the page will spin anew,
Soft fade, kind colors, a fresh view to pursue,
Hop, click, delight — a rabbit's joyful cue! 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ 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 reflects the main change in the changeset—the db-error.tsx component has been redesigned with a new card-based UI, styling, and a Reload Page button.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{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)