From 578f4cb78242e85b7123ed3935eca4d3b033fda9 Mon Sep 17 00:00:00 2001 From: Lien Jabujab Date: Tue, 24 Mar 2026 20:40:53 -0700 Subject: [PATCH 1/3] Update DataPage.jsx - Will allow page to remember last updated date - Will allow page to see if data has been deleted or not. --- frontend/src/pages/DataPage.jsx | 44 ++++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/DataPage.jsx b/frontend/src/pages/DataPage.jsx index 30a92f6..5d408bc 100644 --- a/frontend/src/pages/DataPage.jsx +++ b/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 (
Back Home -

Our Privacy Policy

+ +

Your Data

+

- Last updated: + Last updated:

-

- 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. -

+
+

+ 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. +

+ + {} + {hasData ? ( + + ) : ( +

Your data has been cleared.

+ )} +
); From ce2d96affa77dcfb624e7c3ec41d11a515ca85d3 Mon Sep 17 00:00:00 2001 From: Lien Jabujab Date: Tue, 24 Mar 2026 20:43:54 -0700 Subject: [PATCH 2/3] Update data-page.css - Allows for the data page to adapt to theme. - Clicking the red button will now trigger the browser's built-in confirmation box. --- frontend/src/styles/data-page.css | 71 +++++++++++++++++++++++++------ 1 file changed, 57 insertions(+), 14 deletions(-) diff --git a/frontend/src/styles/data-page.css b/frontend/src/styles/data-page.css index e84280b..78491a9 100644 --- a/frontend/src/styles/data-page.css +++ b/frontend/src/styles/data-page.css @@ -2,41 +2,84 @@ display: flex; flex-direction: column; align-items: center; + width: 100%; + min-height: 100vh; + padding: 2rem 1rem; } #data-content { 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 0; + font-size: 2.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; +.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; +} + +/* 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; } \ No newline at end of file From fb01771a842e9eedf3c78b4af08fcd8be5234239 Mon Sep 17 00:00:00 2001 From: Sean San Date: Wed, 1 Apr 2026 23:26:49 -0700 Subject: [PATCH 3/3] fix: Adjust CSS so it passes linting checks --- frontend/src/styles/data-page.css | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/frontend/src/styles/data-page.css b/frontend/src/styles/data-page.css index 78491a9..de2c79b 100644 --- a/frontend/src/styles/data-page.css +++ b/frontend/src/styles/data-page.css @@ -2,9 +2,6 @@ display: flex; flex-direction: column; align-items: center; - width: 100%; - min-height: 100vh; - padding: 2rem 1rem; } #data-content { @@ -34,16 +31,10 @@ #data-content h1 { color: var(--text-color); - margin: 0 0 0.5rem 0; + margin: 0 0 0.5rem; font-size: 2.5rem; } -#data-content p { - color: var(--text-color); - margin: 0.25rem 0 1.5rem; - font-size: 1.1rem; -} - .data-info-card { background-color: var(--card-bg); border: 2px solid var(--box-border-color); @@ -57,6 +48,12 @@ margin-bottom: 1.5rem; } +#data-content p { + color: var(--text-color); + margin: 0.25rem 0 1.5rem; + font-size: 1.1rem; +} + /* Styling the destructive "Delete" button */ .delete-data-btn { background-color: #ef4444; /* A universal red for 'delete' actions */