From 73364e7e3ba64f6e25741ebbb2dec303bb2a962a Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 00:07:57 +0200 Subject: [PATCH 01/14] set up for the queue pages --- frontend/package-lock.json | 2 +- frontend/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 472e430..51d3d71 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "react": "^19.2.6", "react-dom": "^19.2.6", - "react-router-dom": "^7.15.0" + "react-router-dom": "^7.15.1" }, "devDependencies": { "@eslint/js": "^10.0.1", diff --git a/frontend/package.json b/frontend/package.json index ddc12dc..f27921c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,7 +15,7 @@ "dependencies": { "react": "^19.2.6", "react-dom": "^19.2.6", - "react-router-dom": "^7.15.0" + "react-router-dom": "^7.15.1" }, "devDependencies": { "@eslint/js": "^10.0.1", From 557bd336d2baac0c072a11d049775e70b646bfcf Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:04:36 +0200 Subject: [PATCH 02/14] base for searching page --- frontend/src/main.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index d53eb22..12e405b 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -3,11 +3,12 @@ import ReactDOM from 'react-dom/client' import { BrowserRouter } from 'react-router-dom' import App from './App' import './styles/global.css' +import Searching from './pages/queuePages/searching' ReactDOM.createRoot(document.getElementById('root')!).render( - + - , + ) \ No newline at end of file From d369af81a5d3ed0881ce56b062bba4e1076bfab4 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:06:46 +0200 Subject: [PATCH 03/14] circle for user --- frontend/src/assets/timer.png | Bin 0 -> 2910 bytes frontend/src/pages/queuePages/found.css | 0 frontend/src/pages/queuePages/found.tsx | 0 frontend/src/pages/queuePages/searching.css | 51 ++++++++++++++++++++ frontend/src/pages/queuePages/searching.tsx | 19 ++++++++ 5 files changed, 70 insertions(+) create mode 100644 frontend/src/assets/timer.png create mode 100644 frontend/src/pages/queuePages/found.css create mode 100644 frontend/src/pages/queuePages/found.tsx create mode 100644 frontend/src/pages/queuePages/searching.css create mode 100644 frontend/src/pages/queuePages/searching.tsx diff --git a/frontend/src/assets/timer.png b/frontend/src/assets/timer.png new file mode 100644 index 0000000000000000000000000000000000000000..01b2e7197c47eea14aaa899a5c435f507aa3b126 GIT binary patch literal 2910 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 IM6N<$f)x&owEzGB literal 0 HcmV?d00001 diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/pages/queuePages/searching.css b/frontend/src/pages/queuePages/searching.css new file mode 100644 index 0000000..edb9e44 --- /dev/null +++ b/frontend/src/pages/queuePages/searching.css @@ -0,0 +1,51 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;600;700;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap'); + +.page-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + min-width: 100vw; + color: #F8FAFC; + +} + +.searching-section { + width: min(90%, 900px); + height: auto; + min-height: 600px; + border: 5px solid #A78BFA; + border-radius: 30px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + + /*for circle and timer and writing stuff to be centered, maybe adjust? */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + padding: 40px 20px; + transition: all 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + + +.purple-circle { + width: 300px; + height: 300px; + border-radius: 50%; + background: linear-gradient(180deg, #A78BFA,#737373); + border: 10px solid #A78BFA; + margin: 0 auto 30px auto; + position: relative; + animation: pulse 2s infinite; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + padding: 40px 20px; +} + diff --git a/frontend/src/pages/queuePages/searching.tsx b/frontend/src/pages/queuePages/searching.tsx new file mode 100644 index 0000000..2adca62 --- /dev/null +++ b/frontend/src/pages/queuePages/searching.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import './searching.css'; + + + +//create in searching page, when found immediately go to found, that is what can be in interface for searching + + +const Searching = () => { + return ( +
+
+
+
+
+ ); +}; + +export default Searching; \ No newline at end of file From 2e7d3013137fcf7e5713355fdeb44393984105e8 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:07:28 +0200 Subject: [PATCH 04/14] implemented pulse for circle --- frontend/src/pages/queuePages/searching.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/frontend/src/pages/queuePages/searching.css b/frontend/src/pages/queuePages/searching.css index edb9e44..3a3c0fb 100644 --- a/frontend/src/pages/queuePages/searching.css +++ b/frontend/src/pages/queuePages/searching.css @@ -49,3 +49,18 @@ padding: 40px 20px; } +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.05); + opacity: 0.9; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + From e89c784e7d13c16732e9fe6d7d826e50fe60be85 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:09:16 +0200 Subject: [PATCH 05/14] timer part --- frontend/src/pages/queuePages/searching.css | 25 +++++++++++++++++++++ frontend/src/pages/queuePages/searching.tsx | 6 +++++ 2 files changed, 31 insertions(+) diff --git a/frontend/src/pages/queuePages/searching.css b/frontend/src/pages/queuePages/searching.css index 3a3c0fb..e173e47 100644 --- a/frontend/src/pages/queuePages/searching.css +++ b/frontend/src/pages/queuePages/searching.css @@ -64,3 +64,28 @@ } } +.timer-section { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-bottom: 30px; +} + +.timer-icon { + width: 80px; + height: 80px; + background-image: url('../../assets/timer.png'); + background-size: cover; + background-position: center; +} + +.timer-text { + font-size: 80px; + font-family: "Gloock", serif; + font-weight: 400; + font-style: normal; + color: #0F172A; +} + + diff --git a/frontend/src/pages/queuePages/searching.tsx b/frontend/src/pages/queuePages/searching.tsx index 2adca62..d95e54a 100644 --- a/frontend/src/pages/queuePages/searching.tsx +++ b/frontend/src/pages/queuePages/searching.tsx @@ -11,6 +11,12 @@ const Searching = () => {
+ +
+
+ 0:04 +
+
); From 46de41a1df3694acacee2d84d2ac1c86fb5f0b39 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:11:01 +0200 Subject: [PATCH 06/14] added text --- frontend/src/pages/queuePages/searching.css | 18 ++++++++++++++++++ frontend/src/pages/queuePages/searching.tsx | 8 +++++++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/queuePages/searching.css b/frontend/src/pages/queuePages/searching.css index e173e47..98fa3a0 100644 --- a/frontend/src/pages/queuePages/searching.css +++ b/frontend/src/pages/queuePages/searching.css @@ -88,4 +88,22 @@ color: #0F172A; } +.searching-text { + font-family: 'Baloo Bhai 2', cursive; + font-size: 48px; + color: #0F172A; + margin-bottom: 10px; + font-weight: 700; + font-style: bold; +} + +.under-searching-text { + font-family: 'Baloo Bhai 2', cursive; + font-size: 32px; + font-style: normal; + font-weight: 400; + color: #0F172A; + margin-bottom: 30px; +} + diff --git a/frontend/src/pages/queuePages/searching.tsx b/frontend/src/pages/queuePages/searching.tsx index d95e54a..155d1f3 100644 --- a/frontend/src/pages/queuePages/searching.tsx +++ b/frontend/src/pages/queuePages/searching.tsx @@ -10,13 +10,19 @@ const Searching = () => { return (
-
+
+
User 1
+
0:04
+
Searching for Opponent...
+
Finding a player with similar Elo
+ +
); From 6eee0cac1abdcde3006ce4dcccf0693bb957b6a5 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:12:22 +0200 Subject: [PATCH 07/14] added cancel button --- frontend/src/pages/queuePages/searching.css | 23 +++++++++++++++++++++ frontend/src/pages/queuePages/searching.tsx | 3 ++- 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/queuePages/searching.css b/frontend/src/pages/queuePages/searching.css index 98fa3a0..d8cb864 100644 --- a/frontend/src/pages/queuePages/searching.css +++ b/frontend/src/pages/queuePages/searching.css @@ -106,4 +106,27 @@ margin-bottom: 30px; } +.cancel-button { + background: #EF4444; + width: 323px; + height: 69px; + border: 1px solid #0F172A; + font-family: 'Baloo Bhai 2', cursive; + font-size: 32px; + font-style: normal; + font-weight: 400; + color: #0F172A; + padding: 10px 30px; + border-radius: 30px; + cursor: pointer; + transition: transform 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + +} + +.cancel-button:hover { + background: rgba(180, 23, 23, 0.842); + transform: scale(1.1); +} + diff --git a/frontend/src/pages/queuePages/searching.tsx b/frontend/src/pages/queuePages/searching.tsx index 155d1f3..060db58 100644 --- a/frontend/src/pages/queuePages/searching.tsx +++ b/frontend/src/pages/queuePages/searching.tsx @@ -16,12 +16,13 @@ const Searching = () => {
- 0:04 + 0:00
Searching for Opponent...
Finding a player with similar Elo
+ From eed9ddc1dad77076de06f237cb5cf88df0a89ff8 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:25:37 +0200 Subject: [PATCH 08/14] adding text and figuring out how to keep everything on a row --- frontend/src/main.tsx | 3 +- frontend/src/pages/queuePages/found.css | 148 ++++++++++++++++++++ frontend/src/pages/queuePages/found.tsx | 33 +++++ frontend/src/pages/queuePages/searching.tsx | 1 - 4 files changed, 183 insertions(+), 2 deletions(-) diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index 12e405b..40dbbd1 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -4,11 +4,12 @@ import { BrowserRouter } from 'react-router-dom' import App from './App' import './styles/global.css' import Searching from './pages/queuePages/searching' +import Found from './pages/queuePages/found' ReactDOM.createRoot(document.getElementById('root')!).render( - + ) \ No newline at end of file diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index e69de29..088381f 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -0,0 +1,148 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;600;700;800&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap'); + +.page-container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + min-width: 100vw; + color: #F8FAFC; + +} + +.searching-section { + width: min(90%, 1000px); + height: auto; + min-height: 900px; + border: 5px solid #A78BFA; + border-radius: 30px; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + + /*for circle and timer and writing stuff to be centered, maybe adjust? */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 20px; + padding: 40px 20px; + transition: all 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); +} + +.row-circles { + display: flex; + flex-direction: row; + gap: 100px; /*i dont know exact measurement of distance between circles, please correct if necessary*/ + align-items: center; +} + + +.purple-circle { + width: 300px; + height: 300px; + border-radius: 50%; + background: linear-gradient(180deg, #A78BFA,#737373); + border: 10px solid #A78BFA; + margin: 0 auto 30px auto; + position: relative; + animation: pulse 2s infinite; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 20px; + padding: 40px 20px; +} + +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.05); + opacity: 0.9; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +.timer-section { + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + margin-bottom: 30px; +} + +.timer-icon { + width: 80px; + height: 80px; + background-image: url('../../assets/timer.png'); + background-size: cover; + background-position: center; +} + +.timer-text { + font-size: 80px; + font-family: "Gloock", serif; + font-weight: 400; + font-style: normal; + color: #0F172A; +} + +.searching-text { + font-family: 'Baloo Bhai 2', cursive; + font-size: 48px; + color: #0F172A; + margin-bottom: 10px; + font-weight: 700; + font-style: bold; +} + +.vs-text { + font-family: 'Baloo Bhai 2', cursive; + font-size: 64px; + color: #0F172A; + margin-bottom: 10px; + font-weight: 700; + font-style: bold; +} + +.under-searching-text { + font-family: 'Baloo Bhai 2', cursive; + font-size: 32px; + font-style: normal; + font-weight: 400; + color: #0F172A; + margin-bottom: 30px; +} + +.cancel-button { + background: #EF4444; + width: 323px; + height: 69px; + border: 1px solid #0F172A; + font-family: 'Baloo Bhai 2', cursive; + font-size: 32px; + font-style: normal; + font-weight: 400; + color: #0F172A; + padding: 10px 30px; + border-radius: 30px; + cursor: pointer; + transition: transform 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + +} + +.cancel-button:hover { + background: rgba(180, 23, 23, 0.842); + transform: scale(1.1); +} + + diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx index e69de29..dab0985 100644 --- a/frontend/src/pages/queuePages/found.tsx +++ b/frontend/src/pages/queuePages/found.tsx @@ -0,0 +1,33 @@ +import './found.css'; + +const Found = () => { + return ( +
+
+
Opponent Found!
+
+
+
User 1
+
+
vs
+
+
User 2
+
+
+ +
+
+ 0:00 +
+ +
Searching for Opponent...
+
Finding a player with similar Elo
+ + + +
+
+ ); +}; + +export default Found; \ No newline at end of file diff --git a/frontend/src/pages/queuePages/searching.tsx b/frontend/src/pages/queuePages/searching.tsx index 060db58..fec8925 100644 --- a/frontend/src/pages/queuePages/searching.tsx +++ b/frontend/src/pages/queuePages/searching.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import './searching.css'; From e84302d6a5423a31a2785cb31913b6171102e789 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:28:11 +0200 Subject: [PATCH 09/14] changed colour of user 2 to blue --- frontend/src/pages/queuePages/found.css | 17 +++++++++++++++++ frontend/src/pages/queuePages/found.tsx | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index 088381f..8c53eed 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -56,6 +56,23 @@ padding: 40px 20px; } +.blue-circle { + width: 300px; + height: 300px; + border-radius: 50%; + background: linear-gradient(180deg, #3B82F6,#737373); + border: 10px solid #3B82F6; + margin: 0 auto 30px auto; + position: relative; + animation: pulse 2s infinite; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 20px; + padding: 40px 20px; +} + @keyframes pulse { 0% { transform: scale(1); diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx index dab0985..7d456e6 100644 --- a/frontend/src/pages/queuePages/found.tsx +++ b/frontend/src/pages/queuePages/found.tsx @@ -10,7 +10,7 @@ const Found = () => {
User 1
vs
-
+
User 2
From 67538e13498c3889ba4a6080f52027ceb81dc39c Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 19:42:03 +0200 Subject: [PATCH 10/14] created elo button --- frontend/src/pages/queuePages/found.css | 31 ++++++++++++++++--------- frontend/src/pages/queuePages/found.tsx | 2 +- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index 8c53eed..369f0a1 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -34,7 +34,7 @@ .row-circles { display: flex; flex-direction: row; - gap: 100px; /*i dont know exact measurement of distance between circles, please correct if necessary*/ + gap: 50px; /*i dont know exact measurement of distance between circles, please correct if necessary*/ align-items: center; } @@ -140,26 +140,35 @@ } .cancel-button { - background: #EF4444; - width: 323px; - height: 69px; - border: 1px solid #0F172A; - font-family: 'Baloo Bhai 2', cursive; + background: #D9D9D9; + width: 200px; + height: 42px; + /* border: 1px solid #0F172A; */ + /* font-family: 'Baloo Bhai 2', cursive; font-size: 32px; font-style: normal; font-weight: 400; color: #0F172A; padding: 10px 30px; - border-radius: 30px; cursor: pointer; transition: transform 0.3s ease; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */ } -.cancel-button:hover { - background: rgba(180, 23, 23, 0.842); - transform: scale(1.1); +.elo-button { + background: #D9D9D9; + width: 200px; + height: 42px; + border: 1px solid #0F172A; + font-family: 'Baloo Bhai 2', cursive; + font-size: 20px; + font-style: normal; + font-weight: 400; + + } + + diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx index 7d456e6..e396e5c 100644 --- a/frontend/src/pages/queuePages/found.tsx +++ b/frontend/src/pages/queuePages/found.tsx @@ -23,7 +23,7 @@ const Found = () => {
Searching for Opponent...
Finding a player with similar Elo
- + From ed7e92c8980dfb8b0c200d8bd9ecedfd658b2fba Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 20:54:16 +0200 Subject: [PATCH 11/14] box for match details --- frontend/src/pages/queuePages/found.css | 119 ++++++++++++++++++++---- frontend/src/pages/queuePages/found.tsx | 45 +++++++-- 2 files changed, 138 insertions(+), 26 deletions(-) diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index 369f0a1..908d797 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -1,5 +1,6 @@ @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400;600;700;800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap'); .page-container { display: flex; @@ -38,6 +39,30 @@ align-items: center; } +.row-elo { + display: flex; + flex-direction: row; + gap: 275px; + align-items: center; + margin-bottom: 30px; +} + +.row-info { + display: flex; + flex-direction: row; + gap: 140px; + align-items: center; + margin-bottom: 30px; + margin-top: 20px; +} + +.big-row-info { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 10px; +} + .purple-circle { width: 300px; @@ -52,8 +77,7 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 20px; - padding: 40px 20px; + padding: 20px 20px; } .blue-circle { @@ -69,8 +93,7 @@ flex-direction: row; justify-content: center; align-items: center; - gap: 20px; - padding: 40px 20px; + padding: 20px 20px; } @keyframes pulse { @@ -139,36 +162,92 @@ margin-bottom: 30px; } -.cancel-button { + +.elo-button { background: #D9D9D9; width: 200px; height: 42px; - /* border: 1px solid #0F172A; */ - /* font-family: 'Baloo Bhai 2', cursive; - font-size: 32px; + border: 1px solid #0F172A; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + + +.elo-button-text{ + font-family: 'Baloo Bhai 2', cursive; + font-size: 20px; font-style: normal; font-weight: 400; color: #0F172A; - padding: 10px 30px; - cursor: pointer; - transition: transform 0.3s ease; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); */ - + justify-content: center; + align-items: center; } -.elo-button { +.info-button { background: #D9D9D9; - width: 200px; - height: 42px; + width: 907px; + height: 161px; border: 1px solid #0F172A; - font-family: 'Baloo Bhai 2', cursive; - font-size: 20px; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.info-button-text-grey{ + font-family: "Baskervville", serif; + font-size: 24px; font-style: normal; font-weight: 400; - - + color: #64748B; + justify-content: center; + align-items: center; +} + +.info-button-text-black{ + font-family: "Baskervville", serif; + font-size: 24px; + font-style: normal; + font-weight: 400; + color: #0F172A; + justify-content: center; + align-items: center; +} + +.match-details-grid { + border-radius: 8px; + padding: 20px; + margin: 20px 0; + width: 100%; } +.grid-row { + display: grid; + grid-template-columns: 150px 0.5fr 150px 0.5fr; + gap: 100px; + margin-bottom: 15px; + margin-top: 15px; + align-items: center; +} + +.grid-row:last-child { + margin-bottom: 0; +} + +/* below is for it to work on mobile but i will clean it up when we get there*/ +@media (max-width: 600px) { + .grid-row { + grid-template-columns: 1fr; + gap: 5px; + margin-bottom: 20px; + } + + .grid-label { + margin-top: 10px; + } +} diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx index e396e5c..d345517 100644 --- a/frontend/src/pages/queuePages/found.tsx +++ b/frontend/src/pages/queuePages/found.tsx @@ -15,15 +15,48 @@ const Found = () => { -
-
- 0:00 +
+
+
570 ELO
+
+
500 ELO
+
+
-
Searching for Opponent...
-
Finding a player with similar Elo
+
+ {/*
+
+
Match Type
+
Ranked
+
Time Limit
+
15 minutes
+
+
+
Difficulty
+
Medium
+
Number of Questions
+
5
+
*/} +
+
+
Match Type
+
Ranked
+
Time Limit
+
15 minutes
+
+
+
Difficulty
+
Medium
+
Number of Questions
+
5
+
+
+ + + +
-
From 7d7194494ca99c286c05135c1b0ffc9657a224c4 Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 21:15:48 +0200 Subject: [PATCH 12/14] decline match button --- frontend/src/pages/queuePages/found.css | 28 +++++++++++++++++++++++++ frontend/src/pages/queuePages/found.tsx | 19 ++++------------- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index 908d797..c794872 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -63,6 +63,14 @@ margin-top: 10px; } +.row-button { + display: flex; + flex-direction: row; + gap: 100px; + align-items: center; + margin-bottom: 30px; +} + .purple-circle { width: 300px; @@ -249,5 +257,25 @@ } } +.cancel-button { + background: #EF4444; + width: 512px; + height: 71px; + border: 1px solid #0F172A; + font-family: 'Baloo Bhai 2', cursive; + font-size: 32px; + font-style: normal; + font-weight: 400; + color: #0F172A; + padding: 10px 30px; + border-radius: 30px; + +} + +.cancel-button:hover { + background: rgba(180, 23, 23, 0.842); + transform: scale(1.1); +} + diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx index d345517..d692101 100644 --- a/frontend/src/pages/queuePages/found.tsx +++ b/frontend/src/pages/queuePages/found.tsx @@ -25,19 +25,6 @@ const Found = () => {
- {/*
-
-
Match Type
-
Ranked
-
Time Limit
-
15 minutes
-
-
-
Difficulty
-
Medium
-
Number of Questions
-
5
-
*/}
Match Type
@@ -53,10 +40,12 @@ const Found = () => {
- -
+
+ +
+
From 786e007fc6c614a99fabb934095528ecf75110ba Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 21:19:17 +0200 Subject: [PATCH 13/14] accept match button --- frontend/src/pages/queuePages/found.css | 24 ++++++++++++++++++++++-- frontend/src/pages/queuePages/found.tsx | 1 + 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index c794872..b421671 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -69,6 +69,7 @@ gap: 100px; align-items: center; margin-bottom: 30px; + margin-top: 30px; } @@ -259,8 +260,8 @@ .cancel-button { background: #EF4444; - width: 512px; - height: 71px; + width: 323px; + height: 72px; border: 1px solid #0F172A; font-family: 'Baloo Bhai 2', cursive; font-size: 32px; @@ -277,5 +278,24 @@ transform: scale(1.1); } +.approve-button { + background: #22C55E; + width: 323px; + height: 72px; + border: 1px solid #0F172A; + font-family: 'Baloo Bhai 2', cursive; + font-size: 32px; + font-style: normal; + font-weight: 400; + color: #0F172A; + padding: 10px 30px; + border-radius: 30px; + +} + +.approve-button:hover { + background: rgba(6, 116, 20, 0.842); + transform: scale(1.1); +} diff --git a/frontend/src/pages/queuePages/found.tsx b/frontend/src/pages/queuePages/found.tsx index d692101..da9fa9d 100644 --- a/frontend/src/pages/queuePages/found.tsx +++ b/frontend/src/pages/queuePages/found.tsx @@ -44,6 +44,7 @@ const Found = () => {
+
From 96598ac697f0879972c7011593da5102c063d61c Mon Sep 17 00:00:00 2001 From: morganthegirlboss Date: Sun, 17 May 2026 21:21:58 +0200 Subject: [PATCH 14/14] accept match button changes --- frontend/src/pages/queuePages/found.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/frontend/src/pages/queuePages/found.css b/frontend/src/pages/queuePages/found.css index b421671..4bde8e3 100644 --- a/frontend/src/pages/queuePages/found.css +++ b/frontend/src/pages/queuePages/found.css @@ -270,6 +270,9 @@ color: #0F172A; padding: 10px 30px; border-radius: 30px; + cursor: pointer; + transition: transform 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } @@ -290,11 +293,14 @@ color: #0F172A; padding: 10px 30px; border-radius: 30px; + cursor: pointer; + transition: transform 0.3s ease; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .approve-button:hover { - background: rgba(6, 116, 20, 0.842); + background: rgba(15, 95, 46, 0.842); transform: scale(1.1); }