From a8b8c390e2f37c2248e14a1815a6c2b2ca2bef25 Mon Sep 17 00:00:00 2001
From: Hassan El Mghari <hassan4709@gmail.com>
Date: Sun, 5 Mar 2023 12:37:31 -0500
Subject: [PATCH] improved error message for too many generations

---
 pages/api/generate.ts |  2 +-
 pages/dream.tsx       | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/pages/api/generate.ts b/pages/api/generate.ts
index cf691b0e..354d0295 100644
--- a/pages/api/generate.ts
+++ b/pages/api/generate.ts
@@ -41,7 +41,7 @@ export default async function handler(
       res
         .status(429)
         .json(
-          "We're temporarily limiting generations to 1 per day because of high traffic. Please try again in 24 hours. For any questions, email hassan@hey.com"
+          "We're temporarily limiting generations to 1 per day because of high traffic. For any questions, email hassan@hey.com"
         );
       return;
     }
diff --git a/pages/dream.tsx b/pages/dream.tsx
index 549ca61f..d55de06a 100644
--- a/pages/dream.tsx
+++ b/pages/dream.tsx
@@ -15,7 +15,6 @@ import appendNewToName from "../utils/appendNewToName";
 import downloadPhoto from "../utils/downloadPhoto";
 import DropDown from "../components/DropDown";
 import { roomType, rooms, themeType, themes } from "../utils/dropdownTypes";
-import CountUp from "react-countup";
 import { GenerateResponseData } from "./api/generate";
 
 // Configuration for the uploader
@@ -257,14 +256,19 @@ const Home: NextPage = () => {
               )}
               {error && (
                 <div
-                  className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl mt-8"
+                  className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-xl mt-8 max-w-[575px]"
                   role="alert"
                 >
-                  <span className="block sm:inline">{error}</span>
+                  <div className="bg-red-500 text-white font-bold rounded-t px-4 py-2">
+                    Please try again in 24 hours
+                  </div>
+                  <div className="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
+                    {error}
+                  </div>
                 </div>
               )}
               <div className="flex space-x-2 justify-center">
-                {originalPhoto && !loading && (
+                {originalPhoto && !loading && !error && (
                   <button
                     onClick={() => {
                       setOriginalPhoto(null);