From dd2b7e22b8d3feaeff16153f60989ae062bf7135 Mon Sep 17 00:00:00 2001
From: Calum Murphy <calumthemurphy@gmail.com>
Date: Tue, 25 Aug 2026 10:23:26 +0100
Subject: [PATCH 1/2] Small styling changes

---
 backend/example.env                           |  5 ----
 frontend/app/components/ClusterSettings.jsx   |  6 ++--
 frontend/app/components/PoolSettingsPage.jsx  |  2 +-
 .../components/{Options.jsx => Settings.jsx}  | 28 +++++++++++--------
 frontend/app/components/TeamsSettingsPage.jsx |  8 +++---
 frontend/app/layout.tsx                       |  2 +-
 frontend/app/options/page.tsx                 |  2 +-
 frontend/example.env                          |  1 -
 frontend/setup.sh                             |  6 ++--
 9 files changed, 30 insertions(+), 30 deletions(-)
 delete mode 100644 backend/example.env
 rename frontend/app/components/{Options.jsx => Settings.jsx} (96%)
 delete mode 100644 frontend/example.env

diff --git a/backend/example.env b/backend/example.env
deleted file mode 100644
index 0109561..0000000
--- a/backend/example.env
+++ /dev/null
@@ -1,5 +0,0 @@
-MONGO_URI=
-MONGO_DATABASE=daily
-PORT=3000
-CLUSTERS_PER_PERSON=1
-PEOPLE_PER_DAY=1
\ No newline at end of file
diff --git a/frontend/app/components/ClusterSettings.jsx b/frontend/app/components/ClusterSettings.jsx
index 833db7b..2c762e3 100644
--- a/frontend/app/components/ClusterSettings.jsx
+++ b/frontend/app/components/ClusterSettings.jsx
@@ -434,7 +434,7 @@ export default function ClusterSettingsPage() {
                </div>
 
                {activeTab === 'instructions' && (
-                  <div className="rounded-2xl border border-white/10 p-4 backdrop-blur-sm md:p-6">
+                  <div className="rounded-2xl border border-white/10 bg-slate-400/5 p-4 backdrop-blur-sm md:p-6">
                      <div className="mb-6 flex items-start justify-between gap-4">
                         <div>
                            <h2 className="text-3xl font-bold text-white">Instructions</h2>
@@ -948,9 +948,9 @@ export default function ClusterSettingsPage() {
                )}
 
                {activeTab === 'results' && (
-                  <div className="rounded-2xl border border-white/10 p-6 backdrop-blur-sm">
+                  <div className="rounded-2xl border border-white/10 bg-slate-400/5 p-6 backdrop-blur-sm">
                      <div className="mb-6">
-                        <h2 className="text-3xl font-bold text-white">Recent Results</h2>
+                        <h2 className="text-3xl font-bold text-white ">Recent Results</h2>
 
                         <p className="mt-3 text-slate-300">
                            Reports from the last 7 days for this cluster.
diff --git a/frontend/app/components/PoolSettingsPage.jsx b/frontend/app/components/PoolSettingsPage.jsx
index e9c03c7..b98ab7e 100644
--- a/frontend/app/components/PoolSettingsPage.jsx
+++ b/frontend/app/components/PoolSettingsPage.jsx
@@ -135,7 +135,7 @@ export default function PoolClustersPage() {
    );
 
    return (
-      <main className="flex min-h-screen items-center justify-center">
+      <main className="flex space-y-8 justify-center">
          <div className="relative z-10 w-full">
             <div className="p-10">
                <div className="text-center md:text-left">
diff --git a/frontend/app/components/Options.jsx b/frontend/app/components/Settings.jsx
similarity index 96%
rename from frontend/app/components/Options.jsx
rename to frontend/app/components/Settings.jsx
index f34c11f..4e2452d 100644
--- a/frontend/app/components/Options.jsx
+++ b/frontend/app/components/Settings.jsx
@@ -400,18 +400,17 @@ export default function Options() {
                {portalEl &&
                   confirmPrompt &&
                   createPortal(
-                     <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
-                        <div className="mb-6 rounded-2xl border border-yellow-400/20 bg-yellow-500/10 p-5 text-slate-100 shadow-2xl backdrop-blur-xl">
-                           <p className="mb-3 text-sm font-medium">{confirmPrompt.message}</p>
+            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm">
+  <div className="w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl">
+    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300">
+                     !
+                  </div>
+                                    <h3 className="text-xl font-semibold text-white">Confirmation required</h3>
 
-                           <div className="flex flex-wrap gap-3">
-                              <button
-                                 type="button"
-                                 onClick={confirmPendingAction}
-                                 className="rounded-xl bg-yellow-500 px-4 py-2 font-semibold text-slate-950 transition hover:bg-yellow-400 cursor-pointer"
-                              >
-                                 Confirm
-                              </button>
+                           <p className="mt-2 text-slate-300 text-md font-medium">{confirmPrompt.message}</p>
+
+                           <div className="mt-6 flex flex-wrap justify-end gap-3">
+                           
 
                               <button
                                  type="button"
@@ -420,6 +419,13 @@ export default function Options() {
                               >
                                  Cancel
                               </button>
+                                 <button
+                                 type="button"
+                                 onClick={confirmPendingAction}
+                                 className="rounded-xl bg-red-800 text-white px-4 py-2 font-semibold text-slate-950 transition hover:bg-red-900 cursor-pointer"
+                              >
+                                 Confirm
+                              </button>
                            </div>
                         </div>
                      </div>,
diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 1fe9ef6..2d8aaf9 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -679,7 +679,7 @@ export default function TeamSettingsPage() {
 
                   <h3 className="text-xl font-semibold text-white">Remove pool from team?</h3>
 
-                  <p className="mt-2 text-sm text-slate-300">
+                  <p className="mt-2 text-md text-slate-300 font-medium">
                      This will remove{' '}
                      <span className="font-semibold text-white">{pendingRemovalPool.name}</span>{' '}
                      from this team.
@@ -689,7 +689,7 @@ export default function TeamSettingsPage() {
                      <button
                         type="button"
                         onClick={() => setPendingRemovalPool(null)}
-                        className="rounded-xl border border-slate-600 px-4 py-2 text-sm font-medium text-slate-200 transition hover:bg-slate-800"
+    className="rounded-xl border border-white/10 bg-slate-900/80 px-4 py-2 text-white transition hover:bg-slate-800 cursor-pointer"
                      >
                         Cancel
                      </button>
@@ -697,8 +697,8 @@ export default function TeamSettingsPage() {
                      <button
                         type="button"
                         onClick={confirmRemovePool}
-                        className="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500"
-                     >
+                         className="rounded-xl bg-red-800 text-white px-4 py-2 font-semibold text-slate-950 transition hover:bg-red-900 cursor-pointer"
+                         >
                         Remove Pool
                      </button>
                   </div>
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index b1f919e..ce63d02 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             <Header />
 
             <main className="flex-1 flex justify-center px-4 py-10 sm:px-6">
-               <div className="w-full">{children}</div>
+               <div className=" max-w-7xl mx-auto w-full">{children}</div>
             </main>
          </body>
       </html>
diff --git a/frontend/app/options/page.tsx b/frontend/app/options/page.tsx
index 3c22cfd..465c9f3 100644
--- a/frontend/app/options/page.tsx
+++ b/frontend/app/options/page.tsx
@@ -1,4 +1,4 @@
-import Options from '../components/Options';
+import Options from '../components/Settings';
 
 export const metadata = {
    title: 'Options'
diff --git a/frontend/example.env b/frontend/example.env
deleted file mode 100644
index 4b73e25..0000000
--- a/frontend/example.env
+++ /dev/null
@@ -1 +0,0 @@
-NEXT_PUBLIC_API_URL=
\ No newline at end of file
diff --git a/frontend/setup.sh b/frontend/setup.sh
index 55cc8c7..98a4a9f 100755
--- a/frontend/setup.sh
+++ b/frontend/setup.sh
@@ -2,7 +2,7 @@
 
 npm i
 
-npm run build
-npm run start
+# npm run build
+# npm run start
 
-#npm run dev
\ No newline at end of file
+npm run dev
\ No newline at end of file

From d2da897fccf8404f5ee6f7c042fea4f07421b4ee Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 25 Aug 2026 09:34:49 +0000
Subject: [PATCH 2/2] chore: apply formatting

---
 frontend/app/components/Settings.jsx          | 22 ++++++++++---------
 frontend/app/components/TeamsSettingsPage.jsx |  6 ++---
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/Settings.jsx b/frontend/app/components/Settings.jsx
index 4e2452d..f5a534d 100644
--- a/frontend/app/components/Settings.jsx
+++ b/frontend/app/components/Settings.jsx
@@ -400,18 +400,20 @@ export default function Options() {
                {portalEl &&
                   confirmPrompt &&
                   createPortal(
-            <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm">
-  <div className="w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl">
-    <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300">
-                     !
-                  </div>
-                                    <h3 className="text-xl font-semibold text-white">Confirmation required</h3>
+                     <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-950/70 px-4 backdrop-blur-sm">
+                        <div className="w-full max-w-md rounded-3xl border border-red-400/20 bg-slate-900/95 p-6 shadow-2xl">
+                           <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/10 text-2xl text-red-300">
+                              !
+                           </div>
+                           <h3 className="text-xl font-semibold text-white">
+                              Confirmation required
+                           </h3>
 
-                           <p className="mt-2 text-slate-300 text-md font-medium">{confirmPrompt.message}</p>
+                           <p className="mt-2 text-slate-300 text-md font-medium">
+                              {confirmPrompt.message}
+                           </p>
 
                            <div className="mt-6 flex flex-wrap justify-end gap-3">
-                           
-
                               <button
                                  type="button"
                                  onClick={cancelConfirmation}
@@ -419,7 +421,7 @@ export default function Options() {
                               >
                                  Cancel
                               </button>
-                                 <button
+                              <button
                                  type="button"
                                  onClick={confirmPendingAction}
                                  className="rounded-xl bg-red-800 text-white px-4 py-2 font-semibold text-slate-950 transition hover:bg-red-900 cursor-pointer"
diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 2d8aaf9..6e2ae25 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -689,7 +689,7 @@ export default function TeamSettingsPage() {
                      <button
                         type="button"
                         onClick={() => setPendingRemovalPool(null)}
-    className="rounded-xl border border-white/10 bg-slate-900/80 px-4 py-2 text-white transition hover:bg-slate-800 cursor-pointer"
+                        className="rounded-xl border border-white/10 bg-slate-900/80 px-4 py-2 text-white transition hover:bg-slate-800 cursor-pointer"
                      >
                         Cancel
                      </button>
@@ -697,8 +697,8 @@ export default function TeamSettingsPage() {
                      <button
                         type="button"
                         onClick={confirmRemovePool}
-                         className="rounded-xl bg-red-800 text-white px-4 py-2 font-semibold text-slate-950 transition hover:bg-red-900 cursor-pointer"
-                         >
+                        className="rounded-xl bg-red-800 text-white px-4 py-2 font-semibold text-slate-950 transition hover:bg-red-900 cursor-pointer"
+                     >
                         Remove Pool
                      </button>
                   </div>