feature/lisasiliu/notification-page-ui (#91)

* created file to put ui code in

* finished hardcoded notification table

* updated backend to match main

frontend/src/components/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,33 @@
+type UserInfo = {
+  name: string;
+  email: string;
+  account_type: string;
+};
+
+export default function NotificationCard({ name, email, account_type }: UserInfo) {
+  return (
+    <>
+      <div
+        className={
+          "flex items-center justify-between px-[40px] py-[60px] font-['Poppins'] text-[18px] "
+        }
+      >
+        <div id="person_info" className="">
+          <div className="font-['Poppins-Bold']">Name: {name}</div>
+          Email: {email}
+          <br></br>
+          Account Type: {account_type}
+        </div>
+
+        <div id="buttons" className="flex items-center space-x-[30px]">
+          <button className="h-[48px] w-[116px] rounded-full border border-pia_dark_green bg-pia_primary_white text-pia_dark_green">
+            Deny
+          </button>
+          <button className="h-[48px] w-[116px] rounded-full border bg-pia_dark_green text-pia_primary_white">
+            Approve
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/NotificationCard/NotificationTable.tsx

@@ -0,0 +1,23 @@
+import NotificationCard from "./NotificationCard";
+
+export default function NotificationTable() {
+  return (
+    <div className="m-auto max-w-full border-collapse border-separate rounded-[15px] border-[1px] border-pia_neutral_gray bg-pia_primary_white">
+      <div>
+        <NotificationCard
+          name="Alice Anderson"
+          email="[email protected]"
+          account_type="Team"
+        />
+      </div>
+      <div className="border-[1px] border-pia_neutral_gray" />
+      <div>
+        <NotificationCard name="Chloe Cai" email="[email protected]" account_type="Admin" />
+      </div>
+      <div className="border-[1px] border-pia_neutral_gray" />
+      <div>
+        <NotificationCard name="Henry Harris" email="[email protected]" account_type="Team" />
+      </div>
+    </div>
+  );
+}

frontend/src/components/NotificationCard/types.ts

@@ -0,0 +1,4 @@
+import { User } from "../../api/user";
+
+// export type Columns = ColumnDef<Student, string | Contact>[];
+export type StudentMap = User;

frontend/src/pages/notifications.tsx

@@ -1,11 +1,18 @@
+import NotificationTable from "@/components/NotificationCard/NotificationTable";
 import { useRedirectTo404IfNotAdmin, useRedirectToLoginIfNotSignedIn } from "@/hooks/redirect";
 
 export default function Notifications() {
   useRedirectToLoginIfNotSignedIn();
   useRedirectTo404IfNotAdmin();
   return (
     <main>
-      <h1>PIA Notifications Page!</h1>
+      <div className="my-[30px] ml-[20px] mr-[80px] space-y-[20px]">
+        <div className="font-[alternate-gothic] text-4xl uppercase">Notifications</div>
+        <div className="font-[Poppins] text-[16px]">
+          Review information of new account creations below to approve or deny them.{" "}
+        </div>
+        <NotificationTable />
+      </div>
     </main>
   );
 }

frontend/src/styles/global.css

@@ -10,6 +10,19 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: "poppins";
+  src: url("./Poppins-Regular.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "poppins-bold";
+  src: url("./Poppins-Bold.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+}
+
 @layer base {
   :root {
     --background: 0 0% 100%;