From 008bbd9569047c1e21d8dafbb75986253dbecf60 Mon Sep 17 00:00:00 2001
From: Calum Murphy <calumthemurphy@gmail.com>
Date: Fri, 2 Oct 2026 09:21:49 +0100
Subject: [PATCH 1/2] Updating animation on team and name select

---
 frontend/app/components/Name.jsx | 20 +++++++++++---------
 frontend/app/globals.css         | 10 +++++-----
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/app/components/Name.jsx b/frontend/app/components/Name.jsx
index 5b7fc20..7419554 100644
--- a/frontend/app/components/Name.jsx
+++ b/frontend/app/components/Name.jsx
@@ -47,7 +47,6 @@ export default function Name() {
 
       const teamId = e.currentTarget.value;
       const matches = people.filter((p) => p.teamId === teamId);
-
       setSelectedTeamId(teamId);
       setPeopleInTeam(matches);
 
@@ -74,7 +73,7 @@ export default function Name() {
                {/* Header */}
 
                {!selectedTeamId ? (
-                  <div key="select-team" className="animate-fade-up">
+                  <div key="select-team" className="">
                      <div className="text-center">
                         <h1 className="text-4xl sm:text-5xl font-bold text-white">
                            Select your team.
@@ -84,14 +83,15 @@ export default function Name() {
                      </div>
 
                      <div className="flex flex-wrap justify-center mt-14 gap-6">
-                        {teams.map((t) => {
-                           const colour = colours[Math.floor(Math.random() * colours.length)];
+                        {teams.map((t, index) => {
+                           const colour = colours[index > colours.length - 1 ? index - colours.length : index];
 
                            return (
                               <button
                                  key={t.id}
                                  type="button"
-                                 className="group cursor-pointer flex flex-col items-center gap-3"
+                                 className="group cursor-pointer flex flex-col items-center gap-3 animate-fade-up transition hover:scale-110"
+                                 style={{ animationDelay: `${index * 75}ms` }}
                                  onClick={handleTeamSelect}
                                  value={t.id}
                               >
@@ -110,7 +110,7 @@ export default function Name() {
                      </div>
                   </div>
                ) : (
-                  <div key="select-name" className="relative min-h-[420px] animate-fade-up pb-16">
+                  <div key="select-name" className="relative min-h-[420px]  pb-16">
                      <div className="text-center">
                         <h1 className="text-4xl sm:text-5xl font-bold text-white">
                            Select your name.
@@ -120,16 +120,18 @@ export default function Name() {
                      </div>
 
                      <div className="flex flex-wrap justify-center mt-14 gap-6">
-                        {peopleInTeam.map((p) => {
-                           const colour = colours[Math.floor(Math.random() * colours.length)];
+                        {peopleInTeam.map((p, index) => {
+                           const colour = colours[index > colours.length - 1 ? index - colours.length : index];
 
                            return (
                               <button
                                  key={p.id}
                                  type="button"
-                                 className="group cursor-pointer flex flex-col items-center gap-3"
+                                 className={`group flex flex-col items-center gap-3 animate-fade-up transition hover:scale-110 ${p.isDemo ? 'cursor-default' : 'cursor-pointer'}`}
+                                 style={{ animationDelay: `${index * 75}ms` }}
                                  onClick={handleSubmit}
                                  value={p.id}
+                                 disabled={p.isDemo}
                               >
                                  <span
                                     className={`flex h-32 w-32 items-center justify-center rounded-full bg-gradient-to-br ${colour} text-3xl font-bold text-white shadow-xl`}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 024418e..4e5dcd4 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -29,20 +29,20 @@ body {
 
 @keyframes fadeUp {
    0% {
-      opacity: 0;
-      transform: translateY(22px) scale(0.96);
-      filter: blur(6px);
+      opacity: 0.1;
+      transform: translateY(80px) scale(0.85);
+      
    }
 
    100% {
       opacity: 1;
       transform: translateY(0) scale(1);
-      filter: blur(0);
+  
    }
 }
 
 .animate-fade-up {
-   animation: fadeUp 1945ms ease-out both;
+   animation: fadeUp 1005ms ease-out both;
 }
 
 .results-datepicker {

From 33d5603469cef8c419f885b5a781289be64239ab Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 2 Oct 2026 08:39:47 +0000
Subject: [PATCH 2/2] chore: apply formatting

---
 frontend/app/components/Name.jsx | 6 ++++--
 frontend/app/globals.css         | 2 --
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Name.jsx b/frontend/app/components/Name.jsx
index 7419554..33db91a 100644
--- a/frontend/app/components/Name.jsx
+++ b/frontend/app/components/Name.jsx
@@ -84,7 +84,8 @@ export default function Name() {
 
                      <div className="flex flex-wrap justify-center mt-14 gap-6">
                         {teams.map((t, index) => {
-                           const colour = colours[index > colours.length - 1 ? index - colours.length : index];
+                           const colour =
+                              colours[index > colours.length - 1 ? index - colours.length : index];
 
                            return (
                               <button
@@ -121,7 +122,8 @@ export default function Name() {
 
                      <div className="flex flex-wrap justify-center mt-14 gap-6">
                         {peopleInTeam.map((p, index) => {
-                           const colour = colours[index > colours.length - 1 ? index - colours.length : index];
+                           const colour =
+                              colours[index > colours.length - 1 ? index - colours.length : index];
 
                            return (
                               <button
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 4e5dcd4..8bb1f8f 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -31,13 +31,11 @@ body {
    0% {
       opacity: 0.1;
       transform: translateY(80px) scale(0.85);
-      
    }
 
    100% {
       opacity: 1;
       transform: translateY(0) scale(1);
-  
    }
 }