Refactor FloatingToolbar and models modal to use theme variables, replacing hardcoded hex styles to ensure premium theme compatibility

README.md

@@ -27,6 +27,8 @@
 
 > 🎨 **[Explore 50+ more open-source AI apps →](https://github.com/Anil-matcha/awesome-generative-ai-apps)**
 
+https://github.com/user-attachments/assets/eb7d4b61-af97-4a06-9afb-bd56a99de8fb
+
 ## 🌐 Live Demo & Deploy
 
 **Live Demo:** [open-ai-ugc.vercel.app](https://open-ai-ugc.vercel.app/)

src/app/api/checkout/stripe/route.js

@@ -36,7 +36,7 @@ export async function POST(req) {
         },
       ],
       mode: "payment",
-      success_url: `${process.env.NEXTAUTH_URL}/dashboard?status=success`,
+      success_url: `${process.env.NEXTAUTH_URL}/gallery?status=success`,
       cancel_url: `${process.env.NEXTAUTH_URL}/pricing?status=cancelled`,
       metadata: {
         userId: session.user.id,

src/app/dashboard/page.js → src/app/gallery/page.js

@@ -66,7 +66,7 @@ export default function Dashboard() {
           <Button 
             onClick={() => router.push("/")} 
             size="lg" 
-            className="!rounded-full !bg-primary-500 !text-white hover:!bg-primary-600 px-6 py-4 font-bold text-sm shadow-xl shadow-primary-500/20"
+            className="!rounded-full !bg-primary !text-white hover:!bg-primary-hover px-6 py-4 font-bold text-sm shadow-xl shadow-primary/20"
           >
             <FiPlus className="mr-2" /> New Creation
           </Button>
@@ -76,7 +76,7 @@ export default function Dashboard() {
       <div className="max-w-7xl mx-auto">
         {isLoading ? (
           <div className="py-32 flex flex-col items-center justify-center gap-4">
-            <FiClock className="text-4xl text-primary-200 animate-spin" />
+            <FiClock className="text-4xl text-primary animate-spin" />
             <span className="text-xs font-medium text-muted animate-pulse">Syncing Archive...</span>
           </div>
         ) : creations.length === 0 ? (
@@ -119,7 +119,7 @@ export default function Dashboard() {
                     </div>
                   ) : (
                     <div className="w-full h-full flex flex-col items-center justify-center bg-glass-hover gap-4">
-                      <FiClock className="text-2xl text-primary-300 animate-spin" />
+                      <FiClock className="text-2xl text-primary animate-spin" />
                       <span className="text-xs font-medium text-muted animate-pulse">Processing...</span>
                     </div>
                   )}
@@ -183,7 +183,7 @@ export default function Dashboard() {
                   </div>
                 ) : (
                   <div className="w-full h-full flex flex-col items-center justify-center gap-6">
-                    <FiClock className="text-6xl text-primary-200 animate-spin" />
+                    <FiClock className="text-6xl text-primary animate-spin" />
                     <span className="text-xs font-medium text-muted animate-pulse">Syncing manifesting...</span>
                   </div>
                 )}
@@ -242,7 +242,7 @@ export default function Dashboard() {
                       download
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="w-full py-4 bg-primary-500 text-white rounded-full font-bold text-xs flex items-center justify-center gap-3 transition-all hover:bg-primary-600 active:scale-[0.98] shadow-xl shadow-primary-500/20"
+                      className="w-full py-4 bg-primary text-white rounded-full font-bold text-xs flex items-center justify-center gap-3 transition-all hover:bg-primary-hover active:scale-[0.98] shadow-xl shadow-primary/20"
                     >
                       <FiDownload size={14} /> Download Asset
                     </a>

src/app/globals.css

@@ -4,16 +4,37 @@
   --font-sans: var(--font-inter), sans-serif;
   --font-outfit: var(--font-inter), sans-serif;
 
-  --color-bg-page: var(--bg-page, #09090b);
-  --color-bg-card: var(--bg-card, #18181b);
-  --color-bg-card-hover: var(--bg-card-hover, #27272a);
-  --color-bg-elevated: var(--bg-elevated, #202024);
-  --color-divider: var(--divider, #3f3f46);
+  --color-bg-page: var(--bg-page, #f9fafb);
+  --color-bg-card: var(--bg-card, #ffffff);
+  --color-bg-card-hover: var(--bg-card-hover, #f3f4f6);
+  --color-bg-elevated: var(--bg-elevated, #ffffff);
+  --color-divider: var(--divider, #e5e7eb);
   --color-primary: var(--primary, #8b5cf6);
   --color-primary-hover: var(--primary-hover, #7c3aed);
-  --color-primary-text: var(--primary-text, #f4f4f5);
-  --color-secondary-text: var(--secondary-text, #a1a1aa);
+  --color-primary-text: var(--primary-text, #111827);
+  --color-secondary-text: var(--secondary-text, #4b5563);
   --color-primary-btn-text: var(--primary-btn-text, #ffffff);
+
+  --color-glass-bg: var(--glass-bg, rgba(255, 255, 255, 0.7));
+  --color-glass-border: var(--glass-border, rgba(0, 0, 0, 0.08));
+  --color-glass-hover: var(--glass-hover, rgba(0, 0, 0, 0.03));
+}
+
+:root {
+  --bg-page: #f9fafb;
+  --bg-card: #ffffff;
+  --bg-card-hover: #f3f4f6;
+  --bg-elevated: #ffffff;
+  --divider: #e5e7eb;
+  --primary: #8b5cf6;
+  --primary-hover: #7c3aed;
+  --primary-text: #111827;
+  --secondary-text: #4b5563;
+  --primary-btn-text: #ffffff;
+
+  --glass-bg: rgba(255, 255, 255, 0.7);
+  --glass-border: rgba(0, 0, 0, 0.08);
+  --glass-hover: rgba(0, 0, 0, 0.03);
 }
 
 /* Premium Visual Themes Override Definitions */
@@ -28,6 +49,10 @@
   --primary-text: #fff1f2;
   --secondary-text: #06b6d4;
   --primary-btn-text: #ffffff;
+
+  --glass-bg: rgba(14, 5, 28, 0.7);
+  --glass-border: rgba(236, 72, 153, 0.2);
+  --glass-hover: rgba(236, 72, 153, 0.1);
 }
 
 [data-theme="emerald"] {
@@ -41,6 +66,10 @@
   --primary-text: #ecfdf5;
   --secondary-text: #34d399;
   --primary-btn-text: #ffffff;
+
+  --glass-bg: rgba(6, 78, 59, 0.7);
+  --glass-border: rgba(17, 94, 89, 0.2);
+  --glass-hover: rgba(17, 94, 89, 0.1);
 }
 
 [data-theme="sunset"] {
@@ -54,6 +83,10 @@
   --primary-text: #fff7ed;
   --secondary-text: #fb923c;
   --primary-btn-text: #ffffff;
+
+  --glass-bg: rgba(45, 21, 0, 0.7);
+  --glass-border: rgba(234, 88, 12, 0.2);
+  --glass-hover: rgba(234, 88, 12, 0.1);
 }
 
 [data-theme="midnight"] {
@@ -67,6 +100,10 @@
   --primary-text: #f4f4f5;
   --secondary-text: #a1a1aa;
   --primary-btn-text: #000000;
+
+  --glass-bg: rgba(12, 12, 14, 0.7);
+  --glass-border: rgba(45, 45, 52, 0.4);
+  --glass-hover: rgba(45, 45, 52, 0.2);
 }
 
 .bg-primary {
@@ -75,8 +112,8 @@
 
 @layer base {
   html, body {
-    background-color: var(--color-bg-page);
-    color: var(--color-primary-text);
+    background-color: var(--bg-page);
+    color: var(--primary-text);
     font-family: var(--font-sans);
     height: 100%;
     margin: 0;
@@ -86,17 +123,17 @@
 
 /* Glassmorphism Utilities */
 .glass-panel {
-  background: rgba(24, 24, 27, 0.7);
+  background: var(--glass-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border: 1px solid rgba(63, 63, 70, 0.5);
+  border: 1px solid var(--glass-border);
 }
 
 .glass-dropdown {
-  background: rgba(15, 15, 18, 0.95);
+  background: var(--glass-bg);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
-  border: 1px solid rgba(63, 63, 70, 0.6);
+  border: 1px solid var(--glass-border);
 }
 
 /* Premium Scrollbars */
@@ -110,12 +147,12 @@
 }
 
 .scrollbar-subtle::-webkit-scrollbar-thumb {
-  background: var(--color-divider);
+  background: var(--divider);
   border-radius: 10px;
 }
 
 .scrollbar-subtle::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary);
+  background: var(--primary);
 }
 
 /* Animations */

src/app/page.js

@@ -397,7 +397,7 @@ export default function Home() {
               >
                 {['processing', 'pending', 'starting', 'queued'].includes(lastGeneration.status) ? (
                   <div className="flex flex-col items-center gap-4">
-                    <div className="w-12 h-12 border-4 border-primary-200 border-t-primary-500 rounded-full animate-spin" />
+                    <div className="w-12 h-12 border-4 border-primary border-t-primary rounded-full animate-spin" />
                     <span className="text-[10px] font-black text-muted uppercase tracking-[0.3em] animate-pulse">
                       Manifesting ({lastGeneration.status})...
                     </span>
@@ -467,7 +467,7 @@ export default function Home() {
                       />
                       {img.status === 'uploading' && (
                         <div className="absolute inset-0 flex items-center justify-center">
-                          <FiLoader className="text-primary-500 animate-spin text-sm" />
+                          <FiLoader className="text-primary animate-spin text-sm" />
                         </div>
                       )}
                       <button 
@@ -482,7 +482,7 @@ export default function Home() {
                   {uploadedImages.length < 7 && (
                     <button 
                       onClick={() => fileInputRef.current?.click()}
-                      className="w-8 h-8 rounded border-2 border-dashed border-glass-border flex flex-col items-center justify-center text-muted hover:text-foreground hover:border-primary-500/50 transition-all group"
+                      className="w-8 h-8 rounded border-2 border-dashed border-glass-border flex flex-col items-center justify-center text-muted hover:text-foreground hover:border-primary/50 transition-all group"
                     >
                       <FiPlus className="text-lg group-hover:scale-110 transition-transform" />
                     </button>
@@ -586,17 +586,17 @@ export default function Home() {
               </div>
 
               {/* Show credit cost */}
-              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-[#f9f9f9] border border-[#ececec] rounded-full mr-2">
+              <div className="flex items-center gap-1.5 px-3 py-1.5 bg-glass-bg border border-glass-border rounded-full mr-2">
                 <FaCoins className="text-yellow-600 text-xs" />
-                <span className="text-[10px] font-bold text-slate-700">
+                <span className="text-[10px] font-bold text-secondary-text">
                   Cost: {getRequiredCredits()}
                 </span>
               </div>
 
               <button 
                 onClick={handleGenerate}
                 disabled={isGenerating || !prompt.trim()}
-                className="w-10 h-10 rounded-full bg-primary-500 text-white flex items-center justify-center shadow-lg shadow-primary-500/20 hover:bg-primary-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed group relative overflow-hidden"
+                className="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center shadow-lg shadow-primary/20 hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed group relative overflow-hidden"
               >
                 {isGenerating ? (
                   <FiLoader className="text-lg animate-spin" />
@@ -623,22 +623,22 @@ export default function Home() {
                 initial={{ opacity: 0, scale: 0.95, y: 20 }}
                 animate={{ opacity: 1, scale: 1, y: 0 }}
                 exit={{ opacity: 0, scale: 0.95, y: 20 }}
-                className="relative w-full max-w-5xl h-[80vh] bg-white rounded shadow-2xl flex flex-col overflow-y-auto"
+                className="relative w-full max-w-5xl h-[80vh] bg-bg-card rounded shadow-2xl flex flex-col overflow-y-auto"
               >
-                <div className="p-6 border-b border-[#f5f5f5] flex items-center gap-6">
+                <div className="p-6 border-b border-divider/50 flex items-center gap-6">
                   <div className="relative flex-1">
-                    <FiSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" />
+                    <FiSearch className="absolute left-4 top-1/2 -translate-y-1/2 text-secondary-text" />
                     <input
                       type="text"
                       placeholder="Search models..."
-                      className="w-full pl-12 pr-4 py-2 bg-[#f9f9f9] border border-[#ececec] rounded text-xs font-bold outline-none focus:bg-white focus:border-slate-300 transition-all"
+                      className="w-full pl-12 pr-4 py-2 bg-glass-bg border border-glass-border rounded text-xs font-bold outline-none focus:bg-bg-card focus:border-divider transition-all"
                     />
                   </div>
                   <button
                     onClick={() => setIsModelsModalOpen(false)}
-                    className="p-2 hover:bg-slate-100 rounded-full transition-colors"
+                    className="p-2 hover:bg-glass-hover rounded-full transition-colors"
                   >
-                    <FiX className="text-xl text-slate-400" />
+                    <FiX className="text-xl text-secondary-text" />
                   </button>
                 </div>
 
@@ -648,11 +648,11 @@ export default function Home() {
                       <div
                         key={model.id}
                         onClick={() => handleModelSelect(model)}
-                        className={`p-5 rounded border transition-all cursor-pointer space-y-4 group ${selectedModel.id === model.id ? "border-slate-900 ring-1 ring-slate-900 bg-slate-50" : "border-[#ececec] bg-white hover:border-slate-300 hover:shadow-md"}`}
+                        className={`p-5 rounded border transition-all cursor-pointer space-y-4 group ${selectedModel.id === model.id ? "border-primary ring-1 ring-primary bg-bg-card-hover" : "border-divider/50 bg-bg-card hover:border-divider hover:shadow-md"}`}
                       >
                         <div className="flex items-center justify-between">
                           <div
-                            className={`w-10 h-10 rounded flex items-center justify-center border border-[#f0f0f0] transition-all ${selectedModel.id === model.id ? "bg-[#1a1a1a] text-white" : "bg-slate-50 text-slate-600 group-hover:bg-[#1a1a1a] group-hover:text-white"}`}
+                            className={`w-10 h-10 rounded flex items-center justify-center border border-divider/50 transition-all ${selectedModel.id === model.id ? "bg-primary text-white" : "bg-bg-card-hover text-secondary-text group-hover:bg-primary group-hover:text-white"}`}
                           >
                             <model.icon className="text-lg" />
                           </div>

src/app/pricing/page.js

@@ -2,7 +2,6 @@
 
 import { useSession } from "next-auth/react";
 import { useState } from "react";
-import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import { FaCheck, FaInfoCircle } from "react-icons/fa";
 import axios from "axios";
@@ -44,7 +43,6 @@ export default function Pricing() {
   return (
     <div className="flex min-h-dvh flex-col bg-bg-page select-none text-primary-text overflow-hidden">
       <Toaster position="top-right" />
-      <Navbar />
 
       <main className="flex-1 max-w-7xl w-full mx-auto px-4 py-12 sm:px-6 lg:px-8 flex flex-col gap-10 overflow-y-auto scrollbar-subtle items-center">
         <div className="text-center space-y-4">

src/components/FloatingToolbar.jsx

@@ -4,22 +4,22 @@ import { FiVideo, FiImage, FiSearch, FiUser } from "react-icons/fi";
 
 export function FloatingToolbar({ onSeeMore }) {
   return (
-    <div className="flex items-center gap-1 p-1 rounded bg-white border border-[#ececec] shadow-sm">
-      <button className="flex items-center gap-2 px-4 py-1.5 rounded bg-[#1a1a1a] text-white text-[11px] font-bold">
+    <div className="flex items-center gap-1 p-1 rounded bg-glass-bg border border-glass-border shadow-sm">
+      <button className="flex items-center gap-2 px-4 py-1.5 rounded bg-primary text-white hover:bg-primary-hover text-[11px] font-bold transition-colors">
         <FiUser className="text-xs" />
         <span>Talking Actors</span>
       </button>
-      <button className="flex items-center gap-2 px-4 py-1.5 rounded hover:bg-[#f5f5f5] text-[11px] font-bold text-[#666] transition-colors border border-transparent hover:border-[#ececec]">
+      <button className="flex items-center gap-2 px-4 py-1.5 rounded hover:bg-glass-hover text-[11px] font-bold text-secondary-text transition-colors border border-transparent hover:border-glass-border">
         <FiVideo className="text-xs" />
         <span>Video</span>
       </button>
-      <button className="flex items-center gap-2 px-4 py-1.5 rounded hover:bg-[#f5f5f5] text-[11px] font-bold text-[#666] transition-colors border border-transparent hover:border-[#ececec]">
+      <button className="flex items-center gap-2 px-4 py-1.5 rounded hover:bg-glass-hover text-[11px] font-bold text-secondary-text transition-colors border border-transparent hover:border-glass-border">
         <FiImage className="text-xs" />
         <span>Image</span>
       </button>
       <button 
         onClick={onSeeMore}
-        className="flex items-center gap-2 px-4 py-1.5 rounded hover:bg-[#f5f5f5] text-[11px] font-bold text-[#666] transition-colors border border-transparent hover:border-[#ececec]"
+        className="flex items-center gap-2 px-4 py-1.5 rounded hover:bg-glass-hover text-[11px] font-bold text-secondary-text transition-colors border border-transparent hover:border-glass-border"
       >
         <FiSearch className="text-xs" />
         <span>See more</span>

src/components/Navbar.js

@@ -83,7 +83,7 @@ export default function Navbar() {
             rel="noopener noreferrer"
             className="flex items-center gap-2 rounded-full border border-divider px-4 py-1.5 text-xs font-bold text-secondary-text hover:text-primary-text hover:bg-bg-card transition-colors shadow-sm"
           >
-            <SiVercel className="text-xs text-white" />
+            <SiVercel className="text-xs text-current" />
             <span>Deploy</span>
           </a>
 
@@ -194,7 +194,7 @@ export default function Navbar() {
               rel="noopener noreferrer"
               className="flex w-full items-center justify-center gap-2 rounded-full border border-divider py-3 text-xs font-bold text-secondary-text hover:text-primary-text hover:bg-bg-card transition-all"
             >
-              <SiVercel className="text-xs text-white" />
+              <SiVercel className="text-xs text-current" />
               <span>Clone & Deploy Template</span>
             </a>
 

src/components/ui/Button.jsx

@@ -12,14 +12,14 @@ export function Button({
   isLoading = false,
   ...props 
 }) {
-  const baseStyles = "inline-flex items-center justify-center rounded-full font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-primary-500/50 disabled:opacity-50 disabled:pointer-events-none active:scale-95";
+  const baseStyles = "inline-flex items-center justify-center rounded-full font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:pointer-events-none active:scale-95";
 
   const variants = {
-    primary: "bg-primary-500 text-white shadow-lg shadow-primary-500/25 hover:bg-primary-600",
+    primary: "bg-primary text-white shadow-lg shadow-primary/25 hover:bg-primary-hover",
     secondary: "bg-secondary-500 text-white shadow-lg shadow-secondary-500/25 hover:bg-secondary-600",
-    outline: "border-2 border-primary-500 text-primary-500 hover:bg-primary-500/10",
+    outline: "border-2 border-primary text-primary hover:bg-primary/10",
     glass: "glass-card hover:bg-glass-hover text-foreground",
-    ghost: "hover:bg-primary-500/10 text-primary-500",
+    ghost: "hover:bg-primary/10 text-primary",
   };
 
   const sizes = {

src/components/ui/Card.jsx

@@ -18,7 +18,7 @@ export function Card({ children, className, hover = true, ...props }) {
       {...props}
     >
       {/* Subtle background glow */}
-      <div className="absolute -top-24 -right-24 w-48 h-48 bg-primary-500/5 rounded-full blur-3xl pointer-events-none" />
+      <div className="absolute -top-24 -right-24 w-48 h-48 bg-primary/5 rounded-full blur-3xl pointer-events-none" />
       <div className="relative z-10">
         {children}
       </div>