From 1700e2425fea1e3f4b53a41b9fa9b4bf7b884a33 Mon Sep 17 00:00:00 2001
From: Hussain Omer <m.hussainomer03@gmail.com>
Date: Mon, 30 Dec 2024 15:16:09 -0500
Subject: [PATCH] Fixes #200: collaborative projects

---
 client/src/App.js                             |  2 +
 client/src/components/Landing/Landing.js      |  1 -
 .../Modal Management/SupportReminder.js       | 83 +++++++++++++++++++
 client/src/services/task/TaskManager.js       |  2 -
 client/tailwind.config.js                     |  7 +-
 5 files changed, 91 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/Modal Management/SupportReminder.js

diff --git a/client/src/App.js b/client/src/App.js
index 6d77e25..90c0965 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -33,6 +33,7 @@ import StreakManager from './services/streak/StreakManager';
 import ViewManager from './services/view/ViewManager';
 import BadgeManager from './services/badge/BadgeManager';
 import CollaborationManager from './services/collaboration/CollaborationManager';
+import SupportReminder from './components/Modal Management/SupportReminder';
 
 const AppContent = () => {
   const [isDark, setIsDark] = useState(false);
@@ -391,6 +392,7 @@ const AppContent = () => {
                   onConfirm={handleConfirmClear}
                   onCancel={() => setShowClearDataModal(false)}
                 />
+                <SupportReminder />
                 <Analytics />
               </div>
             ) : (
diff --git a/client/src/components/Landing/Landing.js b/client/src/components/Landing/Landing.js
index d8781f9..a056734 100644
--- a/client/src/components/Landing/Landing.js
+++ b/client/src/components/Landing/Landing.js
@@ -3,7 +3,6 @@ import {
   Sun,
   Moon,
   Brain,
-  Rocket,
   Trophy,
   Sparkles,
   ChartLine,
diff --git a/client/src/components/Modal Management/SupportReminder.js b/client/src/components/Modal Management/SupportReminder.js
new file mode 100644
index 0000000..a346341
--- /dev/null
+++ b/client/src/components/Modal Management/SupportReminder.js	
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import { Heart, Star} from 'lucide-react';
+
+const REMINDER_INTERVAL = 5 * 24 * 60 * 60 * 1000; // 5 days
+
+const SupportReminder = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const checkAndShowReminder = () => {
+      const lastReminder = localStorage.getItem('lastSupportReminder');
+      const now = Date.now();
+
+      if (!lastReminder || (now - parseInt(lastReminder)) > REMINDER_INTERVAL) {
+        setIsVisible(true);
+        localStorage.setItem('lastSupportReminder', now.toString());
+      }
+    };
+
+    const timer = setTimeout(checkAndShowReminder, 5000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="fixed inset-0 bg-black/50 backdrop-blur-sm" onClick={handleClose} />
+      <div className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 max-w-sm w-[calc(100%-2rem)] animate-slideUp">
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4">
+          <div className="flex items-start justify-between">
+            <div className="flex-1">
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+                Enjoying QuestLog?
+              </h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                Help us grow by showing your support! Every little bit helps us continue improving.
+              </p>
+              <div className="flex flex-wrap gap-2">
+                <a
+                  href="https://github.com/hussaino03/QuestLog"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg
+                           bg-gray-100 dark:bg-gray-700 text-sm font-medium
+                           text-gray-900 dark:text-gray-100 hover:bg-gray-200 
+                           dark:hover:bg-gray-600 transition-colors"
+                >
+                  <Star className="w-4 h-4" />
+                  Star on GitHub
+                </a>
+                <a
+                  href="https://paypal.me/hussaino03"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg
+                           bg-blue-50 dark:bg-blue-900/30 text-sm font-medium
+                           text-blue-600 dark:text-blue-400 hover:bg-blue-100 
+                           dark:hover:bg-blue-900/50 transition-colors"
+                >
+                  <Heart className="w-4 h-4" />
+                  Support Development
+                </a>
+              </div>
+            </div>
+            <button
+              onClick={handleClose}
+              className="w-8 h-8 rounded-lg flex items-center justify-center bg-red-500/10 hover:bg-red-500/20 transition-colors"
+            >
+              <span className="text-red-600 dark:text-red-400 text-lg">×</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SupportReminder;
diff --git a/client/src/services/task/TaskManager.js b/client/src/services/task/TaskManager.js
index 0f8012f..8b359b5 100644
--- a/client/src/services/task/TaskManager.js
+++ b/client/src/services/task/TaskManager.js
@@ -100,8 +100,6 @@ class TaskManager {
           console.error('[UPDATE-TASK] Server error:', errorText);
           throw new Error(`Failed to sync project update: ${response.status}`);
         }
-
-        const result = await response.json();
       }
 
       // Update local state after successful sync (or if not shared)
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index ede33ab..0d69aaf 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -38,6 +38,10 @@ module.exports = {
         expandWidth: {
           '0%': { width: '0%', opacity: '0' },
           '100%': { width: '100%', opacity: '1' }
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(100%)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' }
         }
       },
       animation: {
@@ -47,7 +51,8 @@ module.exports = {
         float: 'float 6s ease-in-out infinite',
         scale: 'scale 0.5s ease-out',
         shimmer: 'shimmer 2s infinite linear',
-        expandWidth: 'expandWidth 0.8s ease-out forwards'
+        expandWidth: 'expandWidth 0.8s ease-out forwards',
+        slideUp: 'slideUp 0.3s ease-out forwards'
       }
     }
   },