added a legend of the colors

MuNuChapterHKN · Nov 17, 2024 · 55bd29a · 55bd29a
1 parent e1142d6
commit 55bd29a
Showing 1 changed file with 55 additions and 0 deletions.
diff --git a/frontend/src/pages/AvailabilitiesPage.jsx b/frontend/src/pages/AvailabilitiesPage.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useAuth0 } from "@auth0/auth0-react";
 import AvailabilitiesTable from "../components/AvailabilitiesTable";
 import PageHeader from "../components/PageHeader";
+import { Container, Row, Col } from "react-bootstrap";
 
 function AvailabilitiesPage() {
   const { isAuthenticated, user, getAccessTokenSilently } = useAuth0();
@@ -24,6 +25,60 @@ function AvailabilitiesPage() {
       <PageHeader>Availabilities</PageHeader>
       <p>This page will be used by members to manage their availabilities.</p>
 
+      {/* Legend */}
+      <Container fluid className="mb-4">
+        <Row>
+          <Col>
+            <h5>Legend:</h5>
+            <ul>
+              <li>
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: "15px",
+                    height: "15px",
+                    backgroundColor: "#d1e7dd", // Green
+                    border: "1px solid black",
+                    marginRight: "10px",
+                  }}
+                ></span>
+                <strong>Green slots:</strong> Both expert and board have given
+                their availability. The slot is visible to the applicants but it
+                is not taken yet.
+              </li>
+              <li>
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: "15px",
+                    height: "15px",
+                    backgroundColor: "#fff3cd", // Yellow
+                    border: "1px solid black",
+                    marginRight: "10px",
+                  }}
+                ></span>
+                <strong>Yellow slots:</strong> Or an expert or a board is
+                missing. The slot is a draft and is not visible to the
+                applicants.
+              </li>
+              <li>
+                <span
+                  style={{
+                    display: "inline-block",
+                    width: "15px",
+                    height: "15px",
+                    backgroundColor: "#f8d7da", // Red
+                    border: "1px solid black",
+                    marginRight: "10px",
+                  }}
+                ></span>
+                <strong>Red slots:</strong> The slot is taken by an applicant.
+              </li>
+            </ul>
+          </Col>
+        </Row>
+      </Container>
+
       <AvailabilitiesTable authUser={user} />
     </>
   );