Merge pull request #7 from DaRichardX/feat/registration-page-routing-and-ux

[FEATURE] Registration page routing & UX polish

Author: DaRichardX

package-lock.json

@@ -43,7 +43,7 @@
     "@react-pdf/renderer": "3.4.4",
     "@supabase/ssr": "0.5.0",
     "@supabase/supabase-js": "2.45.1",
-    "@tanstack/react-query": "^5.66.9",
+    "@tanstack/react-query": "^5.74.4",
     "@testing-library/dom": "10.4.0",
     "@tiptap/extension-link": "2.6.4",
     "@tiptap/extension-placeholder": "2.6.4",

package.json

@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import Registration from "@/components/registration/registration";
+import { useParams } from "next/navigation";
+
+export default function Page() {
+  const { id } = useParams();
+
+  return <Registration id={id} />;
+}

src/app/capstone-registration/[id]/page.js

@@ -4,5 +4,5 @@ import * as React from "react";
 import Registration from "@/components/registration/registration";
 
 export default function Page() {
-  return <Registration />;
+  return <Registration id={"demo"} />;
 }

src/app/registration/page.js src/app/capstone-registration/page.jssrc/app/registration/page.js renamed to src/app/capstone-registration/page.js

@@ -346,15 +346,14 @@ button:active {
   transition: background-color 0.2s ease-in-out;
 }
 
-
 .register-btn.disabled {
-  background-color: #B0C4DE; /* Grey-blue when disabled */
+  background-color: #b0c4de; /* Grey-blue when disabled */
   color: #ffffff;
   cursor: not-allowed;
 }
 
 .register-btn.registered {
-  background-color: #6FA3EF; /* Slightly blue when registered */
+  background-color: #6fa3ef; /* Slightly blue when registered */
   color: white;
   cursor: default;
 }
@@ -474,61 +473,46 @@ h2 {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(0px);
+  background-color: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(2px);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 50px 20px; /* Adds top/bottom padding with some left/right */
   box-sizing: border-box;
-
-  transition:
-    opacity 0.3s ease-in-out,
-    visibility 0.3s ease-in-out;
-  /*overflow-y: scroll;*/
 }
-.register-content{
+
+.register-content {
   position: sticky;
   bottom: 0;
-  background-color: white; /* Ensures visibility */
+  background-color: white;
   padding: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-top: 1px solid #ddd; /* Optional: separator */
+  border-top: 1px solid #ddd;
   margin-top: 30px;
 }
+
 .modal-content {
-  height: 55%;
+  max-height: 55%;
   background-color: white;
-  padding: 30px 40px; /* More padding inside the modal */
-  border-radius: 10px;
+  border-radius: 20px;
   max-width: 1000px; /* Increase max width to make it wider */
   width: 90%; /* Ensures it takes up most of the screen width */
   max-height: calc(100% - 100px); /* Adds more top/bottom spacing */
   overflow-y: auto;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   position: relative;
+  z-index: 1200;
 }
 
 .modal-overlay.show {
   visibility: visible;
   opacity: 1;
+  z-index: 1200;
 }
 
-/*.modal-content {*/
-/*  background-color: white;*/
-/*  padding: 20px;*/
-/*  border-radius: 8px;*/
-/*  max-width: 800px;*/
-/*  width: 80vw;*/
-/*  min-height: 500px;*/
-/*  text-align: left;*/
-/*  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);*/
-/*  animation: fadeIn 0.2s ease-in-out;*/
-/*}*/
-
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -539,7 +523,7 @@ h2 {
     transform: translateY(0);
   }
 }
-.random-btn{
+.random-btn {
   background: whitesmoke;
   color: black;
   border: none;
@@ -554,28 +538,17 @@ h2 {
 }
 
 .close-btn {
-  background: #d9d9d9;
   color: white;
   border: none;
-  padding: 8px 12px;
-  border-radius: 5px;
   cursor: pointer;
-  margin-top: 10px;
-  transition: background-color 0.2s ease-in-out;
 }
 
-.close-btn:hover {
-  background: #d6d6d6;
-}
 .modal-close-button {
-  position: absolute;
-  top: 15px;
-  right: 15px;
+  position: sticky;
+  top: 0;
+
   background: none;
   border: none;
   font-size: 24px;
-  cursor: pointer;
-  color: #333;
-  z-index: 10;
+  color: #252525;
 }
-