diff --git a/frontend/src/App.js b/frontend/src/App.js index bf0bb53..7afe556 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -25,6 +25,7 @@ function App() { location: "Basel", department: "LunchHeroes", groupSize: 2, + timeSlot: "12:00", interests: ["Coding", "Traveling", "Reading"], isScheduled: true }; @@ -103,6 +104,11 @@ function App() { )} +
+
+
+
+
); } diff --git a/frontend/src/Components/Scheduling.js b/frontend/src/Components/Scheduling.js index 350924e..c2bc794 100644 --- a/frontend/src/Components/Scheduling.js +++ b/frontend/src/Components/Scheduling.js @@ -31,7 +31,7 @@ const Scheduling = (props) => { const timer = setTimeout(() => { setMatchRequestResult(true); clearTimeout(timer); // Clear the timer after execution - }, 1000); // 10 seconds or 10,000 milliseconds + }, 4789); // 10 seconds or 10,000 milliseconds }; const sendSchedulingData = () => { @@ -42,7 +42,9 @@ const Scheduling = (props) => {
Fancy having lunch together with interesting people?
- {matchRequest && } diff --git a/frontend/src/Components/Status.js b/frontend/src/Components/Status.js index 8384726..fe50303 100644 --- a/frontend/src/Components/Status.js +++ b/frontend/src/Components/Status.js @@ -8,13 +8,18 @@ function Status(props) { <>

Lunch meeting was successfully scheduled!

-

Time 12:00

-

Table Number 12

-

Guests: 4

+

Time {props.timeSlot}

+

Table Number {Math.floor(Math.random() * 4) + 1}

+

Guests: {Math.floor(Math.random() * 4) + 2}

) : ( -

Request for the Lunch meeting is pending...

+ <> +

Request for the Lunch meeting is pending...

+
+
+
+ )} ); diff --git a/frontend/src/SCSS/Status.css b/frontend/src/SCSS/Status.css index 8b43195..0a73686 100644 --- a/frontend/src/SCSS/Status.css +++ b/frontend/src/SCSS/Status.css @@ -1,7 +1,7 @@ .status-container { margin-top: 20px; padding: 20px; - border: 2px solid #8f2a2c; + border: 2px solid #3498db; background-color: #e6ecf0; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); @@ -19,7 +19,7 @@ } .scheduled { - color: #a8005c; + color: #3498db; font-weight: 600; margin-bottom: 10px; /* Added margin to space out from the details */ } @@ -41,10 +41,38 @@ } .detail-item strong { - color: #2a2a8f; + color: #3498db; font-size: 1.1em; } .status-container:hover .detail-item strong { color: #a8005c; } + + + +.loading-bar-container { + width: 100%; + height: 20px; + background-color: #e0e0e0; /* Light gray */ + border-radius: 10px; + overflow: hidden; /* Makes sure the inner bar doesn't overflow */ + position: relative; /* Allows for absolute positioning of inner elements */ +} + +.loading-bar-fill { + height: 100%; + width: 0%; /* Starts off empty */ + background-color: #3498db; /* Blue */ + border-radius: 10px; + position: absolute; + top: 0; + left: 0; + animation: loadingAnimation 10s infinite; /* 2 seconds duration for a simple animation */ +} + +@keyframes loadingAnimation { + 0% { width: 0%; } + 50% { width: 100%; } + 100% { width: 0%; } +} \ No newline at end of file