From d107bce92e1d6ad3c30431ab5a600793f381938e Mon Sep 17 00:00:00 2001
From: Arnaud <anelissen@solem.fr>
Date: Mon, 13 Jul 2026 07:13:39 +0200
Subject: [PATCH] fix: recipe-ideas banner buttons clashed with the violet
 gradient background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Get ideas" used variant="secondary" (flat grey) and "Surprise me" was
variant="ghost" (no background at all) — both sat awkwardly on the
violet/indigo gradient section. Restyled to match: solid violet for the
primary action, violet-outlined for the secondary.

(Also answering the "what's the difference" question inline: "Get ideas"
generates from whatever you typed in the box; "Surprise me" ignores the
box and picks a random prompt from a fixed list, filling the box and
generating immediately.)
---
 apps/web/components/search/explore-page-content.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/apps/web/components/search/explore-page-content.tsx b/apps/web/components/search/explore-page-content.tsx
index 92a6d6f..8f8099a 100644
--- a/apps/web/components/search/explore-page-content.tsx
+++ b/apps/web/components/search/explore-page-content.tsx
@@ -349,7 +349,11 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
                 placeholder={t("aiSearchPlaceholder")}
                 className="bg-background"
               />
-              <Button type="submit" disabled={ideasLoading} variant="secondary" className="shrink-0">
+              <Button
+                type="submit"
+                disabled={ideasLoading}
+                className="shrink-0 bg-violet-600 text-white hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-400"
+              >
                 {ideasLoading ? (
                   <span className="flex items-center gap-2"><Wand2 className="h-4 w-4 animate-pulse" /> {t("generating")}</span>
                 ) : (
@@ -358,7 +362,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
               </Button>
               <Button
                 type="button"
-                variant="ghost"
+                variant="outline"
                 disabled={ideasLoading}
                 onClick={() => {
                   const idx = Math.floor(Math.random() * SURPRISE_IDEA_PROMPTS.length);
@@ -366,7 +370,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, initialTab
                   setIdeasPrompt(surprisePrompt);
                   fetchIdeas(surprisePrompt);
                 }}
-                className="shrink-0"
+                className="shrink-0 bg-background/80 border-violet-300 text-violet-700 hover:bg-background hover:text-violet-800 dark:border-violet-700 dark:text-violet-300 dark:hover:text-violet-200"
               >
                 <span className="flex items-center gap-2"><Shuffle className="h-4 w-4" /> {t("surpriseMe")}</span>
               </Button>