Merge pull request #24 from OpenUpSA/feature/testing-banner

Notice banner
OpenUpSA · Nov 20, 2024 · 69c2a6d · 69c2a6d
2 parents 030d5d8 + ae85e71
commit 69c2a6d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 18 deletions.
diff --git a/src/app.scss b/src/app.scss
@@ -75,6 +75,7 @@ h1 {
       display: none;
     }
   }
+
   &.size-sm {
     button {
       padding: 0.25em 0.65em;
@@ -151,3 +152,20 @@ h1 {
     text-align: left;
   }
 }
+
+.testing-notice {
+  background-color: #E03C31;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  line-height: 16.94px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: #FFFFFF;
+  padding: 1.4rem;
+  padding-top: 1.5rem;
+
+  strong {
+    color: #fff;
+  }
+}
diff --git a/src/components/attendance/index.js b/src/components/attendance/index.js
@@ -531,7 +531,7 @@ function Attendance() {
       <PMHeader />
 
       <PMTabs active="attendance-tracker" />
-      <Container fluid className="py-5">
+      <Container fluid className="py-4">
         <div className="bill-tracker-container">
           <Row>
             <Col>

diff --git a/src/components/billtracker/index.js b/src/components/billtracker/index.js
@@ -692,7 +692,7 @@ function BillTracker() {
     <Fragment>
       <PMHeader />
       <PMTabs active="bill-tracker" />
-      <Container fluid className="py-5">
+      <Container fluid className="py-4">
         <div className="bill-tracker-container">
           <Row>
             <Col>

diff --git a/src/components/pmtabs/index.js b/src/components/pmtabs/index.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 
 import Container from "react-bootstrap/Container";
 
@@ -7,22 +7,29 @@ import "./style.scss";
 function PMTabs(props) {
   const { active } = props;
   return (
-    <div className="tabs">
-      <Container fluid>
-        <a
-          className={`tab ${active === "bill-tracker" ? "active" : ""}`}
-          href="/"
-        >
-          Bill Tracker
-        </a>
-        <a
-          className={`tab ${active === "attendance-tracker" ? "active" : ""}`}
-          href="/attendance"
-        >
-          Attendance Tracker
-        </a>
+    <Fragment>
+      <div className="tabs">
+        <Container fluid>
+          <a
+            className={`tab ${active === "bill-tracker" ? "active" : ""}`}
+            href="/"
+          >
+            Bill Tracker
+          </a>
+          <a
+            className={`tab ${active === "attendance-tracker" ? "active" : ""}`}
+            href="/attendance"
+          >
+            Attendance Tracker
+          </a>
+        </Container>
+      </div>
+      <Container fluid className="pt-3">
+        <div className="testing-notice">
+          <strong>Notice:</strong> The data on this dashboard is for testing purposes only and is not accurate.
+        </div>
       </Container>
-    </div>
+    </Fragment>
   );
 }