diff --git a/web/src/components/dashboard/PrizeTable.tsx b/web/src/components/dashboard/PrizeTable.tsx index dd7de9d..10ccf4e 100644 --- a/web/src/components/dashboard/PrizeTable.tsx +++ b/web/src/components/dashboard/PrizeTable.tsx @@ -1,5 +1,6 @@ import { useEffect, useState, useCallback } from "react"; import DataTable, { TableColumn } from "react-data-table-component"; +import "../../styles/component styles/prizetable.css" type PrizeData = { _id: string; @@ -98,15 +99,16 @@ function PrizeTable() { ]; return ( -
+
+
!prize.redeemed)} pagination highlightOnHover />
+
); } diff --git a/web/src/components/spinner.tsx b/web/src/components/spinner.tsx new file mode 100644 index 0000000..a0032bc --- /dev/null +++ b/web/src/components/spinner.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import "../styles/component styles/spinner.css"; + +const Spinner = () => { + return ( +
+
+
+ ); +}; + +export default Spinner; diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx index a811800..951b4f8 100644 --- a/web/src/pages/Events.tsx +++ b/web/src/pages/Events.tsx @@ -5,6 +5,7 @@ import logo from "../assets/primary_logo.svg"; import HamburgerMenu from "@components/HamburgerMenuAdmin"; import SearchBar from "@components/SearchBar"; import ErrorPage from "@pages/MobileErrorPage"; +import Spinner from "@components/spinner"; interface Event { _id: string; @@ -152,7 +153,7 @@ export default function Events() { ))} ) : ( -

Loading

+ )} )} diff --git a/web/src/styles/component styles/prizetable.css b/web/src/styles/component styles/prizetable.css new file mode 100644 index 0000000..6e8d773 --- /dev/null +++ b/web/src/styles/component styles/prizetable.css @@ -0,0 +1,61 @@ +/* Ensure html and body take up full height */ +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + height: auto; + background-color: #e1ebff; /* Matches your background */ + font-family: "Open Sans", sans-serif; +} + +.dashboard-container-prize { + width: 100vw; + display: flex; + flex-direction: column; +} + +.dashboard-prize { + background-color: white; + padding: 20px; + border-radius: 10px; + width: 90%; + margin: auto; + position: relative; + flex-grow: 1; +} + + +.prize-table { + flex-grow: 1; + width: 100%; +} + +.prize-table .rdt_Table { + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.prize-table .rdt_TableHead { + background-color: #f2f2f2; + font-weight: 600; +} + +.prize-table .rdt_TableRow { + border-bottom: 1px solid #e0e0e0; +} + +.prize-table .rdt_TableRow:hover { + background-color: #e1ebff; +} + +.prize-table .rdt_Pagination { + margin-top: 20px; + display: flex; + justify-content: center; +} + +.prize-table input[type="checkbox"] { + transform: scale(1.2); +} diff --git a/web/src/styles/component styles/spinner.css b/web/src/styles/component styles/spinner.css new file mode 100644 index 0000000..2e559c8 --- /dev/null +++ b/web/src/styles/component styles/spinner.css @@ -0,0 +1,24 @@ +.spinner-container { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + margin: 30px; +} + +.spinner { + width: 56px; + height: 56px; + border-radius: 50%; + background: radial-gradient(farthest-side, #03045e 94%, #0000) top/9px 9px no-repeat, + conic-gradient(#0000 30%, #03045e); + -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 9px), #000 0); + animation: spinner-c7wet2 1s infinite linear; + } + + @keyframes spinner-c7wet2 { + 100% { + transform: rotate(1turn); + } + } + \ No newline at end of file diff --git a/web/src/styles/page styles/event.css b/web/src/styles/page styles/event.css index da80006..3910a1c 100644 --- a/web/src/styles/page styles/event.css +++ b/web/src/styles/page styles/event.css @@ -5,6 +5,7 @@ body { min-height: 100vh; margin: 0; padding: 0; + height: auto; font-family: "Open Sans", sans-serif; } @@ -28,6 +29,8 @@ body { margin: auto; position: relative; flex-grow: 1; + + } .create-event-button {