polish donor card

components/ranking/BackButton/index.module.css

@@ -1,6 +1,5 @@
 .backButton {
   display: flex;
-  position: relative;
   align-items: center;
   justify-content: center;
   color: rgb(29, 29, 29);

components/ranking/Donate/index.module.css

@@ -17,19 +17,20 @@ color: rgb(29, 118, 145);
 }
 
 .donationButton {
-display: flex;
-align-items: center;
-justify-content: center;
-background-color: rgb(29, 118, 145);
-color: rgb(255, 255, 255);
-border: none;
-border-radius: 100px;
-cursor: pointer;
-padding: 10px 30px;
-font-weight: 700;
-font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(29, 118, 145);
+    color: rgb(255, 255, 255);
+    border: none;
+    border-radius: 100px;
+    cursor: pointer;
+    padding: 10px 30px;
+    font-weight: 700;
+    font-size: 16px;
 }
 
 .donationButton:hover {
-background-color: rgb(14, 88, 111);
+    background-color: rgb(14, 88, 111);
+    transform: scale(1.02);
 }

components/ranking/Header/index.module.css

@@ -36,4 +36,8 @@
     transform: scale(1.1) translateY(10px);
     z-index: 1;
   }
-
+
+
+  .tagButton:hover {
+    transform: scale(1.13) translateY(10px);
+  }

pages/api/ranking/degrees/[degree]/[class]/index.ts

@@ -40,20 +40,20 @@ async function getData(
   const maxYear = minYear + 5;
 
   const result: {
-    period: number;
-    degree: string;
-    amount: number;
-    donors: number;
+    id: number;
     first_name: string;
-    last_name: string;
+    last_name: number;
     url: string;
+    amount: number;
+    year: number;
   }[] = await prisma.$queryRaw`
     SELECT 
         u."id",
         u."first_name",
         u."last_name",
         u."url",
-        SUM(c."amount_in_cents")/100 AS "amount"
+        SUM(c."amount_in_cents")/100 AS "amount",
+        u."admission_year" AS "year"
     FROM "users" u
     LEFT JOIN "contributions" c ON u."id" = c."userId"
     WHERE 
@@ -71,6 +71,7 @@ async function getData(
     return {
       name: `${row.first_name} ${row.last_name}`,
       url: row.url,
+      year: row.year,
     };
   });
 

pages/api/ranking/types.ts

@@ -17,5 +17,6 @@ export type GetClassData = {
   donors: {
     name: string;
     url?: string;
+    year: number;
   }[];
 };

pages/ranking/degrees/[degree]/[year]/index.module.css

@@ -40,7 +40,7 @@
   width: 100%;
   background-color: #f8f8f8;
   padding: 20px;
-  border-radius: 10px;
+  border-radius: 5px;
 }
 
 .hideDonors {
@@ -54,23 +54,29 @@
   width: 100%;
   background-color: #f8f8f8;
   padding: 20px;
-  border-radius: 10px;
+  border-radius: 5px;
   filter: blur(3px);
 }
 
 
 .donor {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  flex-direction: column; 
   gap: 10px;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  width: 200px; 
+  height: 100px;
   background-color: #ffffff;
-  padding: 20px 40px;
-  border-radius: 10px;
+  border-radius: 3px;
   border: 1px solid #d8d8d8;
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
-  cursor: pointer;
+}
+
+.donor h3, .donor p {
+  margin: 0;
+  padding: 0;
 }
 
 .donor:hover {

pages/ranking/degrees/[degree]/[year]/index.tsx

@@ -14,18 +14,18 @@ const getClassData = async (degree: string, year: string) => {
 };
 
 export default function ClassPage() {
-  const [data, setData] = useState<GetClassData>({
-    amount: 0,
-    numberOfDonors: 0,
-    donors: [],
-  });
-
   const donated = true;
 
   const router = useRouter();
   const degree = router.query.degree as string;
   const year = router.query.year as string;
 
+  const [data, setData] = useState<GetClassData>({
+    amount: 0,
+    numberOfDonors: 0,
+    donors: [],
+  });
+
   useEffect(() => {
     getClassData(degree, year).then(setData);
   });
@@ -63,20 +63,32 @@ const Donors = ({
   donors,
 }: {
   userDonated: boolean;
-  donors: { name: string; url?: string }[];
+  donors: { name: string; url?: string; year: number }[];
 }) => {
   return (
     <div className={userDonated ? styles.donors : styles.hideDonors}>
-      {donors.map((donor) => (
-        <button
-          className={styles.donor}
-          onClick={() => {
-            if (userDonated && donor.url) window.open(donor.url, "_blank");
-          }}
-        >
-          <p>{donor.name}</p>
-        </button>
+      {donors.map((donor, i) => (
+        <Donor userDonated={userDonated} donor={donor} key={i} />
       ))}
     </div>
   );
 };
+
+const Donor = ({
+  donor,
+  userDonated,
+}: {
+  userDonated: boolean;
+  donor: { name: string; url?: string; year: number };
+}) => {
+  return (
+    <div className={styles.donor}>
+      <h3>
+        <a href={donor.url} target="_blank">
+          {donor.name}
+        </a>
+      </h3>
+      <p>{donor.year}</p>
+    </div>
+  );
+};