e2e fixin, frontend + home page work

src/components/Dashboard.tsx

@@ -15,7 +15,7 @@ export const Dashboard: React.FC = () => {
           <RecipeSuggester />
 
           {/* Other Dashboard Widgets */}
-          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/80">
             <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-4">Your Flyers</h2>
             <FlyerCountDisplay />
           </div>

src/components/Header.tsx

@@ -31,7 +31,7 @@ export const Header: React.FC<HeaderProps> = ({
   // The state and handlers for the old AuthModal and SignUpModal have been removed.
   return (
     <>
-      <header className="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-20">
+      <header className="bg-white dark:bg-gray-900 shadow-md sticky top-0 z-20 border-b-2 border-brand-primary dark:border-brand-secondary">
         <div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
             <div className="flex items-center">

src/components/Leaderboard.tsx

@@ -43,7 +43,7 @@ export const Leaderboard: React.FC = () => {
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
+    <div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/80">
       <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center">
         <Award className="w-6 h-6 mr-2 text-blue-500" />
         Top Users
@@ -57,7 +57,7 @@ export const Leaderboard: React.FC = () => {
           {leaderboard.map((user) => (
             <li
               key={user.user_id}
-              className="flex items-center space-x-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg transition hover:bg-gray-100 dark:hover:bg-gray-600"
+              className="flex items-center space-x-4 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg transition-colors hover:bg-brand-light/30 dark:hover:bg-brand-dark/20"
             >
               <div className="shrink-0 w-8 text-center">{getRankIcon(user.rank)}</div>
               <img

src/components/RecipeSuggester.tsx

@@ -48,7 +48,7 @@ export const RecipeSuggester: React.FC = () => {
   );
 
   return (
-    <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
+    <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-6 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/80">
       <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
         Get a Recipe Suggestion
       </h2>