From 313ed48e41c5d9a5746c40a6f2e10dae02bcb12a Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 11:15:10 +0100
Subject: [PATCH 1/8] Add parameter to load full grants or reduced view (max-8)

---
 .../app/_components/CompletedGrants.tsx       | 29 ++++++++++++++-----
 packages/nextjs/tailwind.config.js            |  2 +-
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index c961fe8..cf9ed5b 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -32,21 +32,36 @@ const CompletedGrantCard = ({ title, description, askAmount, builder, link, comp
     </div>
   );
 };
-export const CompletedGrants = async () => {
+
+export const CompletedGrants = async ({ view = "full" }) => {
   const completedGrants = await getAllCompletedGrants();
+  const grantsToShow = view === "reduced" ? completedGrants.slice(0, 8) : completedGrants;
 
   return (
     <div className="bg-base-100">
-      <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>
-          <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
+      <div className="container max-w-[95%] lg:max-w-7xl mx-auto py-12 px-4 lg:px-0">
+        <div className="flex flex-col items-center lg:items-start">
+          <div className="text-4xl lg:text-6xl font-ppEditorial mb-6 text-center lg:text-left">
+            Completed grants
+            <Image src="/assets/sparkle.png" alt="sparkle" width={32} height={32} className="inline-block ml-4" />
+          </div>
         </div>
-        <div className="flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6">
-          {completedGrants.map(grant => (
+        <div
+          className={`${
+            view === "reduced" ? "grant-container" : ""
+          } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
+        >
+          {grantsToShow.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}
         </div>
+        {view === "reduced" && (
+          <div className="link w-full text-center mt-8 text-lg lg:text-xl">
+            <a href="/completed-grants" className="">
+              See all completed grants ({completedGrants.length})
+            </a>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
index ac22557..e62eb35 100644
--- a/packages/nextjs/tailwind.config.js
+++ b/packages/nextjs/tailwind.config.js
@@ -29,7 +29,7 @@ module.exports = {
             "--tooltip-tail": "6px",
           },
           ".link": {
-            textUnderlineOffset: "2px",
+            textUnderlineOffset: "6px",
           },
           ".link:hover": {
             opacity: "80%",

From 350f874a92054f55c4a906573914f0431587a0eb Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 11:17:14 +0100
Subject: [PATCH 2/8] New page for all completed cards and load reduced on home

---
 packages/nextjs/app/completed-grants/page.tsx | 8 ++++++++
 packages/nextjs/app/page.tsx                  | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 packages/nextjs/app/completed-grants/page.tsx

diff --git a/packages/nextjs/app/completed-grants/page.tsx b/packages/nextjs/app/completed-grants/page.tsx
new file mode 100644
index 0000000..79ca808
--- /dev/null
+++ b/packages/nextjs/app/completed-grants/page.tsx
@@ -0,0 +1,8 @@
+import { CompletedGrants } from "../_components/CompletedGrants";
+import { NextPage } from "next";
+
+const SubmitGrant: NextPage = () => {
+  return <CompletedGrants />;
+};
+
+export default SubmitGrant;
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 9835252..936e65d 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -12,7 +12,7 @@ const Home = () => {
       <GrantsStats />
       <EcosystemGrants />
       <CommunityGrant />
-      <CompletedGrants />
+      <CompletedGrants view="reduced" />
       <ActiveGrants />
     </>
   );

From 6ec7e46c44611de5d33892967bf28bf6f2f290aa Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 11:18:26 +0100
Subject: [PATCH 3/8] Manually force to show only 2 rows of cards on every rwd
 breakdown

---
 packages/nextjs/styles/globals.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 3fb55ae..3754910 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -30,3 +30,24 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+
+/* Hide elements past the 3rd on screens smaller than 768px */
+@media (max-width: 767px) {
+  .grant-container > :nth-child(n + 4) {
+    display: none;
+  }
+}
+
+/* Hide elements past the 4th on screens between 768px and 1024px */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .grant-container > :nth-child(n + 5) {
+    display: none;
+  }
+}
+
+/* Hide elements past the 6th on screens between 1024px and 1284px */
+@media (min-width: 1024px) and (max-width: 1284px) {
+  .grant-container > :nth-child(n + 7) {
+    display: none;
+  }
+}

From 407fd8e70219e1021c0ddfb0ce35aa4ec57e52a2 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 13:25:50 +0100
Subject: [PATCH 4/8] Fix completed grants section title

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index cf9ed5b..b4ca445 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -39,12 +39,10 @@ export const CompletedGrants = async ({ view = "full" }) => {
 
   return (
     <div className="bg-base-100">
-      <div className="container max-w-[95%] lg:max-w-7xl mx-auto py-12 px-4 lg:px-0">
-        <div className="flex flex-col items-center lg:items-start">
-          <div className="text-4xl lg:text-6xl font-ppEditorial mb-6 text-center lg:text-left">
-            Completed grants
-            <Image src="/assets/sparkle.png" alt="sparkle" width={32} height={32} className="inline-block ml-4" />
-          </div>
+      <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>
+          <Image className="absolute -top-3 -right-7" src="/assets/sparkle.png" alt="sparkle" width={32} height={32} />
         </div>
         <div
           className={`${

From 0ee0251594468b6f403da6039d58a8fc50bd5a01 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 13:33:09 +0100
Subject: [PATCH 5/8] More intuitive classname

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 2 +-
 packages/nextjs/styles/globals.css                  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index b4ca445..aeb8084 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -46,7 +46,7 @@ export const CompletedGrants = async ({ view = "full" }) => {
         </div>
         <div
           className={`${
-            view === "reduced" ? "grant-container" : ""
+            view === "reduced" ? "grant-container-rwd" : ""
           } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
         >
           {grantsToShow.map(grant => (
diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
index 3754910..5d9e736 100644
--- a/packages/nextjs/styles/globals.css
+++ b/packages/nextjs/styles/globals.css
@@ -33,21 +33,21 @@ p {
 
 /* Hide elements past the 3rd on screens smaller than 768px */
 @media (max-width: 767px) {
-  .grant-container > :nth-child(n + 4) {
+  .grant-container-rwd > :nth-child(n + 4) {
     display: none;
   }
 }
 
 /* Hide elements past the 4th on screens between 768px and 1024px */
 @media (min-width: 768px) and (max-width: 1023px) {
-  .grant-container > :nth-child(n + 5) {
+  .grant-container-rwd > :nth-child(n + 5) {
     display: none;
   }
 }
 
 /* Hide elements past the 6th on screens between 1024px and 1284px */
 @media (min-width: 1024px) and (max-width: 1284px) {
-  .grant-container > :nth-child(n + 7) {
+  .grant-container-rwd > :nth-child(n + 7) {
     display: none;
   }
 }

From 48320f5e1e8cd2e4e0a8e97911690e8a8385a5e0 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Thu, 29 Feb 2024 22:58:25 +0100
Subject: [PATCH 6/8] Change view mode prop as string for a boolean

---
 packages/nextjs/app/_components/CompletedGrants.tsx | 8 ++++----
 packages/nextjs/app/page.tsx                        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/_components/CompletedGrants.tsx b/packages/nextjs/app/_components/CompletedGrants.tsx
index aeb8084..e13bfd2 100644
--- a/packages/nextjs/app/_components/CompletedGrants.tsx
+++ b/packages/nextjs/app/_components/CompletedGrants.tsx
@@ -33,9 +33,9 @@ const CompletedGrantCard = ({ title, description, askAmount, builder, link, comp
   );
 };
 
-export const CompletedGrants = async ({ view = "full" }) => {
+export const CompletedGrants = async ({ reducedView = false }) => {
   const completedGrants = await getAllCompletedGrants();
-  const grantsToShow = view === "reduced" ? completedGrants.slice(0, 8) : completedGrants;
+  const grantsToShow = reducedView ? completedGrants.slice(0, 8) : completedGrants;
 
   return (
     <div className="bg-base-100">
@@ -46,14 +46,14 @@ export const CompletedGrants = async ({ view = "full" }) => {
         </div>
         <div
           className={`${
-            view === "reduced" ? "grant-container-rwd" : ""
+            reducedView ? "grant-container-rwd" : ""
           } flex flex-col items-center justify-center md:flex-row md:flex-wrap md:items-start gap-6`}
         >
           {grantsToShow.map(grant => (
             <CompletedGrantCard key={grant.id} {...grant} />
           ))}
         </div>
-        {view === "reduced" && (
+        {reducedView && (
           <div className="link w-full text-center mt-8 text-lg lg:text-xl">
             <a href="/completed-grants" className="">
               See all completed grants ({completedGrants.length})
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 936e65d..4d45e5d 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -12,7 +12,7 @@ const Home = () => {
       <GrantsStats />
       <EcosystemGrants />
       <CommunityGrant />
-      <CompletedGrants view="reduced" />
+      <CompletedGrants reducedView={true} />
       <ActiveGrants />
     </>
   );

From e5758d0a67a0678ab2f5d4a53e2960426644135e Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Fri, 1 Mar 2024 23:54:09 +0100
Subject: [PATCH 7/8] Set new completed grant card styles and section bg color

---
 .../app/_components/CompletedGrants.tsx       | 51 ++++++++++---------
 packages/nextjs/tailwind.config.js            |  3 ++
 2 files changed, 31 insertions(+), 23 deletions(-)

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/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)",
       },

From 276e41aa85c45fd3d90043a29802092bb1c45fae Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Sat, 2 Mar 2024 00:06:45 +0100
Subject: [PATCH 8/8] Upload eth granted icon

---
 .../nextjs/public/assets/eth-completed-grant.png  | Bin 0 -> 682 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/nextjs/public/assets/eth-completed-grant.png

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