Data Page Update

frontend/src/pages/DataPage.jsx

@@ -1,24 +1,50 @@
+import { useState } from "react";
 import { Link } from "react-router-dom";
 
 function Data() {
+    const [lastUpdated, setLastUpdated] = useState("March 22, 2026");
+    const [hasData, setHasData] = useState(true);
+
+    const handleDeleteData = () => {
+        const confirmDelete = window.confirm("Are you sure you want to delete all your data? This action cannot be undone.");
+
+        if (confirmDelete) {
+            setHasData(false);
+            setLastUpdated("N/A"); 
+            alert("Your data has been successfully deleted.");
+
+        }
+    };
+
     return  (
         <div id="data-page">
             <div id="data-content">
                 <Link to="/" className="back-home-link">
                     Back Home
                 </Link>
-                <h1>Our Privacy Policy</h1>
+
+                <h1>Your Data</h1>
+
                 <p>
-                    Last updated: <time dateTime="2026-03-22">March 22, 2026</time>
+                    Last updated: <time>{lastUpdated}</time>
                 </p>
 
-                <p>
-                    We are commited to protecting your data and maintaining your privacy. That is why 
-                    we allow you to control your information at all times. Users who create an account 
-                    with us can always view, edit, and delete their data. We will never sell your data 
-                    to third parties, and we will always be transparent about how we use your data to 
-                    improve our services.
-                </p>
+                <div className="data-info-card">
+                    <p>
+                        We are committed to protecting your data and maintaining your privacy. 
+                        You have full control over your information. Click the button below to 
+                        permanently delete all your data from our servers.
+                    </p>
+
+                    {}
+                    {hasData ? (
+                        <button className="delete-data-btn" onClick={handleDeleteData}>
+                            Delete All My Data
+                        </button>
+                    ) : (
+                        <p className="data-deleted-msg">Your data has been cleared.</p>
+                    )}
+                </div>
             </div>
         </div>
     );

frontend/src/styles/data-page.css

@@ -8,35 +8,75 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    width: 35%;
+    width: 100%;
+    max-width: 600px;
     margin-top: 16px;
 }
 
-#data-content .back-home-link {
+.back-home-link {
     background-color: var(--card-bg);
     padding: 0.5rem 0.9rem;
     border-radius: 0.5rem;
     color: var(--text-color);
     text-decoration: none;
-    margin-bottom: 0.5rem;
+    margin-bottom: 1.5rem;
+    border: 1px solid var(--box-border-color);
+    transition: transform 0.2s ease, background-color 0.2s ease;
 }
 
-    #data-content .back-home-link:hover {
-        background-color: var(--card-bg-hover);
-        transform: scale(0.975);
-    }
+.back-home-link:hover {
+    background-color: var(--card-bg-hover);
+    transform: scale(0.975);
+}
 
 #data-content h1 {
-    color: var(--text-color);
-    margin: 0;
+    color: var(--text-color); 
+    margin: 0 0 0.5rem;
+    font-size: 2.5rem;
+}
+
+.data-info-card {
+    background-color: var(--card-bg);
+    border: 2px solid var(--box-border-color);
+    border-radius: 10px;
+    padding: 1.5rem;
+    width: 100%;
+}
+
+.data-info-card p {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
 }
 
 #data-content p {
-    color: var(--text-color);
-    margin: 0.25rem 0 0.5rem;
+    color: var(--text-color); 
+    margin: 0.25rem 0 1.5rem;
+    font-size: 1.1rem;
 }
 
-#data-content ol {
-    color: var(--text-color);
-    margin: 0.5rem 0 0.75rem;
+/* Styling the destructive "Delete" button */
+.delete-data-btn {
+    background-color: #ef4444; /* A universal red for 'delete' actions */
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 8px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s, transform 0.1s;
+}
+
+.delete-data-btn:hover {
+    background-color: #dc2626;
+}
+
+.delete-data-btn:active {
+    transform: scale(0.95);
+}
+
+/* Message that appears after clicking delete */
+.data-deleted-msg {
+    color: var(--main-accent-color) !important;
+    font-weight: bold;
 }