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