From 0856fb8a8ea4b292fe2bf358cd55a4893948a6a9 Mon Sep 17 00:00:00 2001
From: Calum Murphy <calumthemurphy@gmail.com>
Date: Thu, 27 Aug 2026 15:34:53 +0100
Subject: [PATCH 1/2] Fixing editing cluster instructions. Ordering now works
 and GOOD - BAD no longer swap on patch request.

---
 frontend/app/components/ClusterSettings.jsx   | 114 ++++++++++--------
 frontend/app/components/Overview.jsx          |   2 +-
 frontend/app/components/PersonalSchedule.jsx  |   2 +-
 frontend/app/components/PoolSettingsPage.jsx  |   4 +-
 frontend/app/components/TeamsSettingsPage.jsx |   4 +-
 frontend/app/globals.css                      |   7 +-
 6 files changed, 76 insertions(+), 57 deletions(-)

diff --git a/frontend/app/components/ClusterSettings.jsx b/frontend/app/components/ClusterSettings.jsx
index f3ad435..b78f5b8 100644
--- a/frontend/app/components/ClusterSettings.jsx
+++ b/frontend/app/components/ClusterSettings.jsx
@@ -269,7 +269,7 @@ export default function ClusterSettingsPage() {
                expectedTime,
                bad,
                good,
-               position
+               position: Number(position)
             })
          });
 
@@ -370,7 +370,7 @@ export default function ClusterSettingsPage() {
                   <div className="mt-6 space-y-3">
                      {!hasChecks ? (
                         <div className="flex flex-wrap justify-start gap-3">
-                           <span className="rounded-full border border-blue-400/30 bg-blue-500/20 px-4 py-2 text-sm font-semibold text-blue-200">
+                           <span className="rounded-full border border-blue-400/30 tracking-wider bg-blue-500/20 px-4 py-2 text-sm font-medium text-blue-300">
                               No checks have been performed for this cluster
                            </span>
                         </div>
@@ -395,13 +395,18 @@ export default function ClusterSettingsPage() {
                      )}
 
                      <div className="flex flex-wrap justify-start gap-3 pt-3">
-                        <span className="rounded-full border border-white/10 bg-white/5 px-4 py-2 font-mono text-sm text-slate-300">
+                        <span className="rounded-full border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
                            id: {clusterId}
                         </span>
 
-                        <span className="rounded-full border border-white/10 bg-white/5 px-4 py-2 font-mono text-sm text-slate-300">
-                           pool: {cluster.pool.name}
-                        </span>
+                        {cluster.pool.name && (
+
+                           <span className="rounded-full border border-sky/10 bg-sky/5 px-4 py-2 font-mono text-sm text-sky-300">
+                              pool: {cluster.pool.name}
+                           </span>
+
+                        )}
+
                      </div>
                   </div>
                </div>
@@ -558,6 +563,7 @@ export default function ClusterSettingsPage() {
                                     <div className="min-w-0 flex-1">
                                        {editingInstructionId === step.id ? (
                                           <div className="space-y-3">
+                                             <label className='font-semibold text-slate-300  ml-1'>Title</label>
                                              <input
                                                 value={editedInstructionTitle}
                                                 onChange={(e) =>
@@ -565,7 +571,7 @@ export default function ClusterSettingsPage() {
                                                 }
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-
+                                             <label className='font-semibold text-slate-300 ml-1'>Instruction</label>
                                              <textarea
                                                 rows={4}
                                                 value={editedInstructionDescription}
@@ -574,7 +580,7 @@ export default function ClusterSettingsPage() {
                                                 }
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-
+                                             <label className='font-semibold text-slate-300  ml-1'>Expected time</label>
                                              <input
                                                 value={editedInstructionExpectedTime}
                                                 onChange={(e) =>
@@ -583,7 +589,7 @@ export default function ClusterSettingsPage() {
                                                 placeholder="Expected time (e.g. 5 mins)"
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-
+                                             <label className='font-semibold text-slate-300  ml-1'>Good outcome</label>
                                              <input
                                                 value={editedInstructionGood}
                                                 onChange={(e) =>
@@ -592,6 +598,7 @@ export default function ClusterSettingsPage() {
                                                 placeholder="Everything worked"
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
+                                             <label className='font-semibold text-slate-300  ml-1'>Bad outcome</label>
                                              <input
                                                 value={editedInstructionBad}
                                                 onChange={(e) =>
@@ -600,14 +607,15 @@ export default function ClusterSettingsPage() {
                                                 placeholder="Everything is on fire"
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-
+                                             <label className='font-semibold text-slate-300  ml-1'>Position</label>
                                              <div className="relative">
+
                                                 <select
                                                    value={editedInstructionPosition}
                                                    onChange={(e) =>
                                                       setEditedInstructionPosition(e.target.value)
                                                    }
-                                                   className="w-full appearance-none rounded-xl border border-slate-700 bg-slate-900 p-4 pr-12 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
+                                                   className="w-full cursor-pointer appearance-none rounded-xl border border-slate-700 bg-slate-900 p-4 pr-12 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                                 >
                                                    {Array.from({ length: steps.length }, (_, i) => (
                                                       <option key={i + 1} value={i + 1}>
@@ -656,8 +664,10 @@ export default function ClusterSettingsPage() {
                                                          editedInstructionTitle.trim(),
                                                          editedInstructionDescription.trim(),
                                                          editedInstructionExpectedTime.trim(),
-                                                         editedInstructionGood.trim(),
                                                          editedInstructionBad.trim(),
+
+                                                         editedInstructionGood.trim(),
+
                                                          editedInstructionPosition
                                                       )
                                                    }
@@ -685,47 +695,49 @@ export default function ClusterSettingsPage() {
                                              </div>
 
                                              <p className="text-slate-300">{step.description}</p>
+
+                                             <div className="flex w-full mt-3 justify-end flex-col gap-3 md:w-auto md:flex-row md:items-start">
+                                                <button
+                                                   type="button"
+                                                   onClick={() => {
+                                                      setEditingInstructionId(step.id);
+                                                      setEditedInstructionTitle(step.title || '');
+                                                      setEditedInstructionDescription(
+                                                         step.description || ''
+                                                      );
+                                                      setEditedInstructionExpectedTime(
+                                                         step.expectedTime || ''
+                                                      );
+                                                      setEditedInstructionGood(step.good || '');
+                                                      setEditedInstructionBad(step.bad || '');
+                                                      setEditedInstructionPosition(step.position || 1);
+                                                   }}
+                                                   className="w-full cursor-pointer rounded-xl border border-blue-300/25 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-blue-300/45 hover:bg-blue-500/20 hover:text-white cursor-pointer md:w-auto"
+                                                >
+                                                   Edit Instruction
+                                                </button>
+
+                                                <button
+                                                   type="button"
+                                                   onClick={() => {
+                                                      const confirmed = window.confirm(
+                                                         'Delete this instruction? This will remove all methods too.'
+                                                      );
+
+                                                      if (confirmed) {
+                                                         deleteInstruction(step.id);
+                                                      }
+                                                   }}
+                                                   className="w-full cursor-pointer rounded-xl border border-red-300/25 bg-red-500/10 px-4 py-2 text-sm font-semibold text-red-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-red-300/45 hover:bg-red-500/20 hover:text-white cursor-pointer md:w-auto"
+                                                >
+                                                   Delete Instruction
+                                                </button>
+                                             </div>
                                           </>
                                        )}
                                     </div>
 
-                                    <div className="flex w-full flex-col gap-3 md:w-auto md:flex-row md:items-start">
-                                       <button
-                                          type="button"
-                                          onClick={() => {
-                                             setEditingInstructionId(step.id);
-                                             setEditedInstructionTitle(step.title || '');
-                                             setEditedInstructionDescription(
-                                                step.description || ''
-                                             );
-                                             setEditedInstructionExpectedTime(
-                                                step.expectedTime || ''
-                                             );
-                                             setEditedInstructionGood(step.good || '');
-                                             setEditedInstructionBad(step.bad || '');
-                                             setEditedInstructionPosition(step.position || 1);
-                                          }}
-                                          className="w-full cursor-pointer rounded-xl border border-blue-300/25 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-blue-300/45 hover:bg-blue-500/20 hover:text-white cursor-pointer md:w-auto"
-                                       >
-                                          Edit Instruction
-                                       </button>
 
-                                       <button
-                                          type="button"
-                                          onClick={() => {
-                                             const confirmed = window.confirm(
-                                                'Delete this instruction? This will remove all methods too.'
-                                             );
-
-                                             if (confirmed) {
-                                                deleteInstruction(step.id);
-                                             }
-                                          }}
-                                          className="w-full cursor-pointer rounded-xl border border-red-300/25 bg-red-500/10 px-4 py-2 text-sm font-semibold text-red-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-red-300/45 hover:bg-red-500/20 hover:text-white cursor-pointer md:w-auto"
-                                       >
-                                          Delete Instruction
-                                       </button>
-                                    </div>
                                  </div>
 
                                  <details className="mb-4 rounded-xl border border-white/10 bg-slate-900/40 p-3 md:p-4">
@@ -788,12 +800,12 @@ export default function ClusterSettingsPage() {
                                                    </div>
                                                 </div>
                                              ) : (
-                                                <div className="flex gap-3">
-                                                   <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-500/20 text-xs font-semibold text-blue-300">
+                                                <div className="flex gap-3 items-center">
+                                                   <span className=" flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-blue-500/20 text-md p-2 font-semibold text-blue-300">
                                                       {methodIndex + 1}
                                                    </span>
 
-                                                   <div className="prose prose-invert max-w-none text-sm leading-relaxed overflow-x-auto">
+                                                   <div className="prose prose-invert max-w-none text-md leading-relaxed overflow-x-auto">
                                                       <ReactMarkdown>
                                                          {method.content}
                                                       </ReactMarkdown>
diff --git a/frontend/app/components/Overview.jsx b/frontend/app/components/Overview.jsx
index 0944ee1..27468a4 100644
--- a/frontend/app/components/Overview.jsx
+++ b/frontend/app/components/Overview.jsx
@@ -138,7 +138,7 @@ export default function Overview() {
                {/* Body */}
                <div className="mb-6 overflow-hidden mt-6">
                   {!report.id ? (
-                     <p className="flex items-center justify-center text-white">
+                     <p className="flex items-center justify-center text-slate-400">
                         No overview available
                      </p>
                   ) : (
diff --git a/frontend/app/components/PersonalSchedule.jsx b/frontend/app/components/PersonalSchedule.jsx
index 12e4ec1..8e0f565 100644
--- a/frontend/app/components/PersonalSchedule.jsx
+++ b/frontend/app/components/PersonalSchedule.jsx
@@ -219,7 +219,7 @@ export default function PersonalSchedule() {
                         Checks are not open yet. Please come back during the allocated time window.
                      </strong>
                   ) : !canComplete ? (
-                     <strong className="mt-2 block text-lg text-red-500">
+                     <strong className="mt-2 block text-lg font-mono text-red-500">
                         You are outside of the allocated time window for checks. Speak to your
                         manager or system administrator.
                      </strong>
diff --git a/frontend/app/components/PoolSettingsPage.jsx b/frontend/app/components/PoolSettingsPage.jsx
index e0a5028..a9df1cb 100644
--- a/frontend/app/components/PoolSettingsPage.jsx
+++ b/frontend/app/components/PoolSettingsPage.jsx
@@ -146,7 +146,9 @@ export default function PoolClustersPage() {
                      Manage clusters assigned to this pool.
                   </p>
 
-                  <p className="mt-2 text-sm text-amber-300">id: {pool.id}</p>
+                     <p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
+                           id: {pool.id}
+                        </p>
                </div>
 
                {statusMessage && (
diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 283544b..4113e9f 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -399,7 +399,9 @@ export default function TeamSettingsPage() {
                      Manage users and pools assigned to this team.
                   </p>
 
-                  <p className="mt-2 text-sm text-amber-300">id: {team.id}</p>
+                  <p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
+                           id: {team.id}
+                        </p>
                </div>
 
                {statusMessage && (
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index c256eec..498c6fb 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -30,7 +30,7 @@ body {
 @keyframes fadeUp {
    0% {
       opacity: 0;
-      transform: translateY(16px) scale(0.98);
+      transform: translateY(22px) scale(0.96);
       filter: blur(6px);
    }
 
@@ -42,9 +42,12 @@ body {
 }
 
 .animate-fade-up {
-   animation: fadeUp 1000ms ease-out both;
+   animation: fadeUp 1945ms ease-out both;
 }
 
+
+
+
 .results-datepicker {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;

From 777c7821a4314400489efee687e5309994a00288 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 27 Aug 2026 14:42:56 +0000
Subject: [PATCH 2/2] chore: apply formatting

---
 frontend/app/components/ClusterSettings.jsx   | 34 ++++++++++++-------
 frontend/app/components/PoolSettingsPage.jsx  |  6 ++--
 frontend/app/components/TeamsSettingsPage.jsx |  4 +--
 frontend/app/globals.css                      |  3 --
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/app/components/ClusterSettings.jsx b/frontend/app/components/ClusterSettings.jsx
index b78f5b8..605719d 100644
--- a/frontend/app/components/ClusterSettings.jsx
+++ b/frontend/app/components/ClusterSettings.jsx
@@ -400,13 +400,10 @@ export default function ClusterSettingsPage() {
                         </span>
 
                         {cluster.pool.name && (
-
                            <span className="rounded-full border border-sky/10 bg-sky/5 px-4 py-2 font-mono text-sm text-sky-300">
                               pool: {cluster.pool.name}
                            </span>
-
                         )}
-
                      </div>
                   </div>
                </div>
@@ -563,7 +560,9 @@ export default function ClusterSettingsPage() {
                                     <div className="min-w-0 flex-1">
                                        {editingInstructionId === step.id ? (
                                           <div className="space-y-3">
-                                             <label className='font-semibold text-slate-300  ml-1'>Title</label>
+                                             <label className="font-semibold text-slate-300  ml-1">
+                                                Title
+                                             </label>
                                              <input
                                                 value={editedInstructionTitle}
                                                 onChange={(e) =>
@@ -571,7 +570,9 @@ export default function ClusterSettingsPage() {
                                                 }
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-                                             <label className='font-semibold text-slate-300 ml-1'>Instruction</label>
+                                             <label className="font-semibold text-slate-300 ml-1">
+                                                Instruction
+                                             </label>
                                              <textarea
                                                 rows={4}
                                                 value={editedInstructionDescription}
@@ -580,7 +581,9 @@ export default function ClusterSettingsPage() {
                                                 }
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-                                             <label className='font-semibold text-slate-300  ml-1'>Expected time</label>
+                                             <label className="font-semibold text-slate-300  ml-1">
+                                                Expected time
+                                             </label>
                                              <input
                                                 value={editedInstructionExpectedTime}
                                                 onChange={(e) =>
@@ -589,7 +592,9 @@ export default function ClusterSettingsPage() {
                                                 placeholder="Expected time (e.g. 5 mins)"
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-                                             <label className='font-semibold text-slate-300  ml-1'>Good outcome</label>
+                                             <label className="font-semibold text-slate-300  ml-1">
+                                                Good outcome
+                                             </label>
                                              <input
                                                 value={editedInstructionGood}
                                                 onChange={(e) =>
@@ -598,7 +603,9 @@ export default function ClusterSettingsPage() {
                                                 placeholder="Everything worked"
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-                                             <label className='font-semibold text-slate-300  ml-1'>Bad outcome</label>
+                                             <label className="font-semibold text-slate-300  ml-1">
+                                                Bad outcome
+                                             </label>
                                              <input
                                                 value={editedInstructionBad}
                                                 onChange={(e) =>
@@ -607,9 +614,10 @@ export default function ClusterSettingsPage() {
                                                 placeholder="Everything is on fire"
                                                 className="w-full rounded-xl border border-slate-700 bg-slate-900 p-4 text-white outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30"
                                              />
-                                             <label className='font-semibold text-slate-300  ml-1'>Position</label>
+                                             <label className="font-semibold text-slate-300  ml-1">
+                                                Position
+                                             </label>
                                              <div className="relative">
-
                                                 <select
                                                    value={editedInstructionPosition}
                                                    onChange={(e) =>
@@ -710,7 +718,9 @@ export default function ClusterSettingsPage() {
                                                       );
                                                       setEditedInstructionGood(step.good || '');
                                                       setEditedInstructionBad(step.bad || '');
-                                                      setEditedInstructionPosition(step.position || 1);
+                                                      setEditedInstructionPosition(
+                                                         step.position || 1
+                                                      );
                                                    }}
                                                    className="w-full cursor-pointer rounded-xl border border-blue-300/25 bg-blue-500/10 px-4 py-2 text-sm font-semibold text-blue-100 shadow-md shadow-black/20 transition duration-200 hover:-translate-y-0.5 hover:border-blue-300/45 hover:bg-blue-500/20 hover:text-white cursor-pointer md:w-auto"
                                                 >
@@ -736,8 +746,6 @@ export default function ClusterSettingsPage() {
                                           </>
                                        )}
                                     </div>
-
-
                                  </div>
 
                                  <details className="mb-4 rounded-xl border border-white/10 bg-slate-900/40 p-3 md:p-4">
diff --git a/frontend/app/components/PoolSettingsPage.jsx b/frontend/app/components/PoolSettingsPage.jsx
index a9df1cb..31464d9 100644
--- a/frontend/app/components/PoolSettingsPage.jsx
+++ b/frontend/app/components/PoolSettingsPage.jsx
@@ -146,9 +146,9 @@ export default function PoolClustersPage() {
                      Manage clusters assigned to this pool.
                   </p>
 
-                     <p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
-                           id: {pool.id}
-                        </p>
+                  <p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
+                     id: {pool.id}
+                  </p>
                </div>
 
                {statusMessage && (
diff --git a/frontend/app/components/TeamsSettingsPage.jsx b/frontend/app/components/TeamsSettingsPage.jsx
index 4113e9f..b9413ac 100644
--- a/frontend/app/components/TeamsSettingsPage.jsx
+++ b/frontend/app/components/TeamsSettingsPage.jsx
@@ -400,8 +400,8 @@ export default function TeamSettingsPage() {
                   </p>
 
                   <p className="rounded-full w-fit mt-3 border border-amber/10 bg-amber/5 px-4 py-2 font-mono text-sm text-amber-300/80">
-                           id: {team.id}
-                        </p>
+                     id: {team.id}
+                  </p>
                </div>
 
                {statusMessage && (
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 498c6fb..024418e 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -45,9 +45,6 @@ body {
    animation: fadeUp 1945ms ease-out both;
 }
 
-
-
-
 .results-datepicker {
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;