Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Completed grants cards new design and section bg color #57

Merged
merged 11 commits into from
Mar 2, 2024
+31 −23
Merged

Completed grants cards new design and section bg color #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
313ed48
Add parameter to load full grants or reduced view (max-8)
Pabl0cks Feb 29, 2024
350f874
New page for all completed cards and load reduced on home
Pabl0cks Feb 29, 2024
6ec7e46
Manually force to show only 2 rows of cards on every rwd breakdown
Pabl0cks Feb 29, 2024
407fd8e
Fix completed grants section title
Pabl0cks Feb 29, 2024
0ee0251
More intuitive classname
Pabl0cks Feb 29, 2024
48320f5
Change view mode prop as string for a boolean
Pabl0cks Feb 29, 2024
bb6dc6f
Reduced view for completed grants at Homepage + completed-grants page…
Pabl0cks Mar 1, 2024
8277eeb
Merge branch 'main' into completed-grants-newdesign
Pabl0cks Mar 1, 2024
e5758d0
Set new completed grant card styles and section bg color
Pabl0cks Mar 1, 2024
276e41a
Upload eth granted icon
Pabl0cks Mar 1, 2024
245aaaf
Merge branch 'main' into completed-grants-newdesign
technophile-04 Mar 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 28 additions & 23 deletions packages/nextjs/app/_components/CompletedGrants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand All @@ -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>
Expand Down
Binary file added packages/nextjs/public/assets/eth-completed-grant.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions packages/nextjs/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ module.exports = {
},
theme: {
extend: {
colors: {
customBlue: '#D5DAFF',
technophile-04 marked this conversation as resolved.
Show resolved Hide resolved
},
boxShadow: {
center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
},
Expand Down
Loading