From c2b821ee9bcba5207d0270b093feda64f34d15c2 Mon Sep 17 00:00:00 2001
From: Minh Vu <minh@biocommons.org.au>
Date: Wed, 22 Jul 2026 14:12:47 +1000
Subject: [PATCH 1/2] style: make stepper on registration page smaller

---
 src/app/pages/register/register.component.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/register/register.component.html b/src/app/pages/register/register.component.html
index f0204c23..5ddaa0d4 100644
--- a/src/app/pages/register/register.component.html
+++ b/src/app/pages/register/register.component.html
@@ -71,7 +71,7 @@
                       (click)="scrollToSection($event, section.id)"
                     >
                       <div
-                        class="relative z-10 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full border-2 transition-all"
+                        class="relative z-10 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border-2 transition-all"
                         [ngClass]="{
                           'border-gray-300': !visited,
                           'border-biocommons-primary group-hover:border-sky-900':
@@ -93,7 +93,8 @@
                         } @else if (last && active && valid) {
                           <ng-icon
                             name="heroCheck"
-                            size="20"
+                            size="16"
+                            strokeWidth="2"
                             class="z-10 text-white"
                           ></ng-icon>
                         } @else if (active) {
@@ -103,7 +104,8 @@
                         } @else if (completed && valid) {
                           <ng-icon
                             name="heroCheck"
-                            size="20"
+                            size="16"
+                            strokeWidth="2"
                             class="z-10 text-white"
                           ></ng-icon>
                         } @else if (completed && !valid) {
@@ -111,7 +113,8 @@
                         } @else if (visited && valid) {
                           <ng-icon
                             name="heroCheck"
-                            size="20"
+                            size="16"
+                            strokeWidth="2"
                             class="text-biocommons-primary"
                           ></ng-icon>
                         } @else if (visited && !valid) {
@@ -124,7 +127,7 @@
                   <!-- Connecting line -->
                   @if (index < sections.length - 1) {
                     <div
-                      class="absolute left-1/2 top-4 h-0.5 w-full transition-all"
+                      class="absolute left-1/2 top-3 h-0.5 w-full transition-all"
                       [class]="
                         completed ? 'bg-biocommons-primary' : 'bg-gray-300'
                       "

From c4fd7981b20d90e2cf50bdc6e284fb775dce8316 Mon Sep 17 00:00:00 2001
From: Minh Vu <minh@biocommons.org.au>
Date: Wed, 22 Jul 2026 16:31:04 +1000
Subject: [PATCH 2/2] style: adjust stepper icon size and font for improved
 aesthetics

---
 src/app/pages/register/register.component.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/register/register.component.html b/src/app/pages/register/register.component.html
index 5ddaa0d4..ab8377ce 100644
--- a/src/app/pages/register/register.component.html
+++ b/src/app/pages/register/register.component.html
@@ -71,7 +71,7 @@
                       (click)="scrollToSection($event, section.id)"
                     >
                       <div
-                        class="relative z-10 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border-2 transition-all"
+                        class="relative z-10 flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full border-2 text-sm font-medium transition-all"
                         [ngClass]="{
                           'border-gray-300': !visited,
                           'border-biocommons-primary group-hover:border-sky-900':
@@ -93,8 +93,8 @@
                         } @else if (last && active && valid) {
                           <ng-icon
                             name="heroCheck"
-                            size="16"
-                            strokeWidth="2"
+                            size="14"
+                            strokeWidth="2.5"
                             class="z-10 text-white"
                           ></ng-icon>
                         } @else if (active) {
@@ -104,8 +104,8 @@
                         } @else if (completed && valid) {
                           <ng-icon
                             name="heroCheck"
-                            size="16"
-                            strokeWidth="2"
+                            size="14"
+                            strokeWidth="2.5"
                             class="z-10 text-white"
                           ></ng-icon>
                         } @else if (completed && !valid) {
@@ -113,8 +113,8 @@
                         } @else if (visited && valid) {
                           <ng-icon
                             name="heroCheck"
-                            size="16"
-                            strokeWidth="2"
+                            size="14"
+                            strokeWidth="2.5"
                             class="text-biocommons-primary"
                           ></ng-icon>
                         } @else if (visited && !valid) {