From 46d245ed78a3f3aa975eeb2ca5bedddea11a163f Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Fri, 5 Dec 2025 09:10:42 +0200
Subject: [PATCH] Fix light/dark mode toggle position when add new recipe and
 style the scroll

---
 frontend/src/App.css                    | 65 +++++++++++++++++++++----
 frontend/src/App.jsx                    |  2 +-
 frontend/src/components/ThemeToggle.jsx |  3 +-
 3 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 8dcbcd5..fbe0e70 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -598,9 +598,9 @@ body {
 }
 
 [data-theme="light"] {
-  --bg: #f9fafb7a;
-  --bg-elevated: #ffffff7c;
-  --card: #ffffff54;
+  --bg: #f9fafbef;
+  --bg-elevated: #ffffffd7;
+  --card: #ffffffd5;
   --card-soft: #f3f4f6;
   --border-subtle: rgba(107, 114, 128, 0.25);
   --accent: #059669;
@@ -640,20 +640,20 @@ body {
 [data-theme="light"] .btn.ghost {
   background: transparent;
   color: var(--text-main);
-  border: 1px solid rgba(107, 114, 128, 0.3);
+  border: 1px solid rgba(214, 210, 208, 0.3);
 }
 
 [data-theme="light"] .btn.ghost:hover {
-  background: rgba(107, 114, 128, 0.1);
+  background: rgba(149, 151, 156, 0.1);
 }
 
 [data-theme="light"] .btn.danger {
-  background: rgba(220, 38, 38, 0.12);
-  color: #991b1b;
+  background: rgba(218, 32, 32, 0.486);
+  color: #881f1f;
 }
 
 [data-theme="light"] .btn.danger:hover {
-  background: rgba(220, 38, 38, 0.2);
+  background: rgba(189, 15, 15, 0.644);
 }
 
 [data-theme="light"] input,
@@ -686,7 +686,7 @@ body {
 }
 
 [data-theme="light"] .drawer {
-  background: #ffffff;
+  background: #d1b29b;
   border-left: 1px solid rgba(107, 114, 128, 0.2);
   box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08);
 }
@@ -708,3 +708,50 @@ body {
   border: 1px solid rgba(107, 114, 128, 0.3);
   color: var(--text-main);
 }
+
+[data-theme="light"] .toast.success {
+  background: rgba(5, 150, 105, 0.1);
+  border-color: rgba(5, 150, 105, 0.5);
+  color: #047857;
+}
+
+[data-theme="light"] .recipe-list-item:hover {
+  background: rgba(229, 231, 235, 0.6);
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(148, 163, 184, 0.7);
+}
+
+/* Light mode scrollbar */
+[data-theme="light"] ::-webkit-scrollbar-thumb {
+  background: rgba(107, 114, 128, 0.4);
+}
+
+[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(107, 114, 128, 0.6);
+}
+
+/* Firefox scrollbar */
+html {
+  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
+  scrollbar-width: thin;
+}
+
+[data-theme="light"] html {
+  scrollbar-color: rgba(107, 114, 128, 0.4) transparent;
+}
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fbf8eed..f3784b3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -162,7 +162,7 @@ function App() {
 
   return (
     <div className="app-root">
-      <ThemeToggle theme={theme} onToggleTheme={() => setTheme((t) => (t === "dark" ? "light" : "dark"))} />
+      <ThemeToggle theme={theme} onToggleTheme={() => setTheme((t) => (t === "dark" ? "light" : "dark"))} hidden={drawerOpen} />
       <TopBar onAddClick={() => setDrawerOpen(true)} />
 
       <main className="layout">
diff --git a/frontend/src/components/ThemeToggle.jsx b/frontend/src/components/ThemeToggle.jsx
index ce9a37e..5ad15d4 100644
--- a/frontend/src/components/ThemeToggle.jsx
+++ b/frontend/src/components/ThemeToggle.jsx
@@ -1,10 +1,11 @@
-function ThemeToggle({ theme, onToggleTheme }) {
+function ThemeToggle({ theme, onToggleTheme, hidden = false }) {
   return (
     <button
       className="theme-toggle"
       title={theme === "dark" ? "הפעל מצב בהיר" : "הפעל מצב חשוך"}
       onClick={onToggleTheme}
       aria-label="Toggle theme"
+      style={{ display: hidden ? "none" : "flex" }}
     >
       {theme === "dark" ? "🌤" : "🌙"}
     </button>