From d574a29bf97e670296fd0f8f301a0710474f75ca Mon Sep 17 00:00:00 2001
From: Pablo Alayeto <55535804+Pabl0cks@users.noreply.github.com>
Date: Sat, 2 Mar 2024 20:07:26 +0100
Subject: [PATCH] Completed grants cards new design and section bg color (#57)

---
 .../app/_components/CompletedGrants.tsx       |  51 ++++++++++--------
 .../public/assets/eth-completed-grant.png     | Bin 0 -> 682 bytes
 packages/nextjs/tailwind.config.js            |   3 ++
 3 files changed, 31 insertions(+), 23 deletions(-)
 create mode 100644 packages/nextjs/public/assets/eth-completed-grant.png

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index 751976b..56fced9 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -5,29 +5,34 @@ import { GrantData } from "~~/services/database/schema";
 
 const CompletedGrantCard = ({ title, description, askAmount, builder, link, completedAt }: GrantData) => {
   return (
-    <div className="w-72 md:w-[300px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg p-4 space-y-4">
-      <div className="h-44 w-full bg-secondary rounded-xl relative">
-        <a
-          href={link}
-          className="badge bg-base-200 absolute top-4 right-4 rounded-2xl py-3 px-3 hover:opacity-80"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          Learn more
-        </a>
-        {completedAt && (
-          <p className="badge bg-base-200 absolute top-4 left-4 rounded-2xl m-0">
-            {new Date(completedAt).toLocaleDateString()}
-          </p>
-        )}
-        <p className="m-0 absolute bottom-4 left-4 text-lg">{title}</p>
+    <div className="w-72 md:w-[300px] bg-primary min-h-full rounded-2xl overflow-hidden shadow-lg">
+      <div className="flex justify-between items-center bg-white p-2 text-sm">
+        <div className="flex items-center px-1">
+          <Image src="/assets/eth-completed-grant.png" alt="ETH Icon" width={10} height={10} />
+          <span className="ml-1 font-bold">{askAmount} ETH</span>
+        </div>
+        <span>{completedAt ? new Date(completedAt).toLocaleDateString() : ""}</span>
+      </div>
+      <div className="bg-base-300 p-4 flex items-center justify-start h-[6rem]">
+        <p className="text-2xl m-0 line-clamp-2">{title}</p>
       </div>
-      <div className="flex flex-col gap-2 px-3">
-        <Address address={builder} link={`https://app.buidlguidl.com/builders/${builder}`} />
-        <p className="text-base m-0 mt-2">
-          <span className="font-medium">{askAmount} ETH</span>
-        </p>
-        <p className="text-base m-0 line-clamp-3">{description}</p>
+      <div className="flex flex-col p-4 gap-4 bg-white">
+        <div className="text-left">
+          <Address address={builder} link={`https://app.buidlguidl.com/builders/${builder}`} />
+        </div>
+        <div className="text-left flex-1">
+          <p className="m-0 line-clamp-3">{description}</p>
+        </div>
+        <div className="text-left mt-auto">
+          <a
+            href={link}
+            className="badge bg-primary rounded-2xl py-4 px-5 hover:opacity-80 mt-2"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Learn more
+          </a>
+        </div>
       </div>
     </div>
   );
@@ -37,7 +42,7 @@ export const CompletedGrants = async ({ limit }: { limit?: number }) => {
   const completedGrants = await getAllCompletedGrants(limit);
 
   return (
-    <div className="bg-base-100">
+    <div className="bg-customBlue">
       <div className="container flex flex-col justify-center max-w-[95%] lg:max-w-7xl mx-auto py-12 gap-4">
         <div className="self-center lg:self-start w-fit relative">
           <h2 className="text-4xl lg:text-6xl text-center lg:text-left font-ppEditorial">Completed grants</h2>
diff --git a/packages/nextjs/public/assets/eth-completed-grant.png b/packages/nextjs/public/assets/eth-completed-grant.png
new file mode 100644
index 0000000000000000000000000000000000000000..1be90dd90375796ffd480a8c2e16362cc0a33f4b
GIT binary patch
literal 682
zcmV;b0#*HqP)<h;3K|Lk000e1NJLTq000#L001Kh1^@s6do)2N00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0zXMaK~#7F#a7XA
z(?Ae?E5ncZaR-PFpaZ9a_=g0T!M+M`Du`S`><W~81@c1+rh=pcR6@Ss2kY29OU~(Z
zce;3(;mz0@-R(Z@?%O>H_+Kb*^`iWyuTt%^M5{~wUo!bL&3phHVZoQ&+>8wQASg<B
zt8;$r&(7iw7wRLeV}8*{$rl-~m8G8G7*Y{OYb-ol6O7|!$Ray2$Eavt(vCPGL`3Te
z<rOD{fM~r)S)Al14~dpJQHnUHNQYOnL;B{4W87n?mOj)tQ6FfFUZi6zk0KN}qM1ma
zB~A#IXeQEUi4%e)T6TmuAx!XUA6%AYc#VIB8o5M!s3~Q*(l|QeYD8FkeosH-rZZ7e
zie~2XBr3uqG}icqjZ*aZwCn-Tz7Q8tLX9o|6!&L!@Z;2loXlx6!kk-T)iIEg5H2<K
zj=xT-2m7yj$*rX4=d__FGEwc67mN8B-E@rGk`SxQsj4$tIr~%I7yk+Gz3HT1-syXG
zdMlCO4`%8UJ#?I#)a*<k{VnY%wcX)en<+U)LcBk92-j{&T5>begfFcvXSlF4B)2ZS
zVo#S4-f&ulm1+sQJ2bA<IVqc`e@Nfy@90lh#iCU_c~f`2IiV_hvHv=G359)xHgXRk
zqzha^FR7Zb7&R1zQMhf@BKR@UwAnJSUA67wL+};NP8a;h2TvH1$q6Eee@pE!GbA=@
z6uvqplN#q5PZP9npA7~u_|?ZGYmRmc=?IM#67V9$h}&$2-<a|{s7f*a3znwnt0kf+
QrvLx|07*qoM6N<$f^2mvu>b%7

literal 0
HcmV?d00001

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index e62eb35..ebe53d0 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -71,6 +71,9 @@ module.exports = {
   },
   theme: {
     extend: {
+      colors: {
+        customBlue: '#D5DAFF',
+      },
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
       },