Skip to content

Commit

Permalink
improved attestation frame made it more dynamic-minimal
Browse files Browse the repository at this point in the history
  • Loading branch information
@nijoe1
nijoe1 committed Oct 11, 2024
1 parent 810fcfe commit 7bee55f
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 57 deletions.
87 changes: 37 additions & 50 deletions packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,14 @@ export const AttestationFrame = ({
ensName: string | null | undefined;
}) => {
const { attestationFrameLogo } = useColorAndBackground();
const projectsLength = projects.length;
const padding =
projectsLength === 3
? "threeProjectsPadding"
: projectsLength === 2
? "py-11"
: "py-28";

return (
<div className="flex flex-col items-center">
<div
Expand All @@ -59,58 +67,39 @@ export const AttestationFrame = ({
style={{ maxWidth: "80%" }}
>
{ensName ? (
<div
className="font-mono font-medium text-black text-[19px] truncate"
style={{ maxWidth: "100%" }}
>
<div className="font-mono font-medium text-black text-[19px] truncate">
{ensName}
</div>
) : (
<div
className="font-mono font-medium text-black text-sm truncate"
style={{ maxWidth: "100%" }}
>
<div className="font-mono font-medium text-black text-sm truncate">
{address}
</div>
)}
</div>
<img
className="h-6 w-auto"
className="h-6 w-auto "
alt="Logo"
src={attestationFrameLogo}
style={{ flexShrink: 0 }}
/>
</div>

{/* Main Body */}
<div
className="flex flex-1 w-full bg-white bg-opacity-10 border-x border-b border-black rounded-b-lg overflow-x-auto"
style={{
scrollbarWidth: "none" /* Firefox */,
msOverflowStyle: "none" /* Internet Explorer 10+ */,
}}
>
<div className="flex flex-1 w-full bg-white bg-opacity-10 border-x border-b border-black rounded-b-lg truncate">
{/* Left Section (Top Projects and Top Round) */}
<div className="flex flex-col flex-1 h-full p-5 w-[350px]">
<div className="flex flex-col h-full w-[60%] ">
{/* Top Projects Header */}
<div className="w-full pb-4 border-b border-black">
<h2 className="font-mono font-medium text-black text-[18px]">
Top Projects
</h2>
</div>
<div className="h-[70%] ">
<div className="p-4 border-b border-black">
<h2 className="font-mono font-medium text-black text-[18px]">
Top Projects
</h2>
</div>

{/* Project List (3/4 of the height) */}
<div
className="flex-[2] overflow-x-auto"
style={{
scrollbarWidth: "none" /* Firefox */,
msOverflowStyle: "none" /* Internet Explorer 10+ */,
}}
>
{/* Project List */}
{projects.map((project, index) => (
<div
key={index}
className="flex items-center gap-3 py-4 border-b border-black"
className={`truncate flex items-center gap-3 ${padding} border-b border-black px-2`}
>
<div className="font-mono font-medium text-black text-[16px]">
{project.rank}
Expand All @@ -120,49 +109,47 @@ export const AttestationFrame = ({
alt="Project"
src={project.image}
/>
<div className="flex flex-col flex-1">

<div className="truncate ">
<p className="text-black text-[14px] font-medium truncate">
{project.name}
</p>
<p className="text-gray-600 text-[12px] break-words truncate">
<p className="text-gray-600 text-[12px] truncate">
{project.round}
</p>
</div>
</div>
))}
</div>

{/* Top Round Section (1/4 of the height) */}
<div className="flex-[1] w-full mt-4 items-center justify-center">
<div
className={`flex flex-col ${
projects.length < 3 && "border-t border-black py-4"
}`}
>
<p className="text-black text-[18px] font-medium font-mono">
{/* Top Round Section */}

<div className="h-[5%] pl-5 float-left ">
<div className="h-[10%] flex flex-col justify-start">
<div className="text-black text-[18px] font-medium font-mono ">
Top Round
</p>
</div>
</div>
<div className="flex flex-col flex-1 items-left text-left relative top-5">
<p className="text-black text-[25px] font-medium break-words leading-tight overflow-hidden">
{topRound}
</p>
</div>
<div className="h-[25%] px-5 pb-2 float-left flex flex-col justify-end ">
<div className="text-black text-[20px] font-medium truncate ">
{topRound}
</div>
</div>
</div>

{/* Right Section (Stats) */}
<div className="flex flex-col w-[250px] my-2 p-5 border-l border-black">
<div className="flex flex-col h-fit pl-5 w-[40%] border-l border-black">
{[
{ value: projectsFunded, label: "Projects Funded" },
{ value: roundsSupported, label: "Rounds Supported" },
{ value: checkedOutChains, label: "Chains" },
].map((stat, index) => (
<div key={index} className="flex flex-col py-5">
<div key={index} className="flex flex-col py-8 ">
<div className="text-[48px] font-medium font-mono text-black">
{stat.value}
</div>
<div className="text-[16px] mt-3 font-medium font-mono text-black">
<div className="text-[16px] font-medium font-mono text-black">
{stat.label}
</div>
</div>
Expand Down
29 changes: 22 additions & 7 deletions packages/grant-explorer/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}

.font-modern-era-bold {
font-family: 'Modern Era Bold', serif;
font-family: "Modern Era Bold", serif;
}

.blurred::before {
Expand Down Expand Up @@ -101,21 +101,36 @@

.rainbow-button {
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.20);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.60) 0%, rgba(255, 255, 255, 0.60) 100%), linear-gradient(124deg, #FF9776 17.77%, #5F94BC 35.47%, #25BDCE 59.3%, #DEAB0C 91.61%);
border: 1px solid rgba(0, 0, 0, 0.2);
background: linear-gradient(
0deg,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 100%
),
linear-gradient(
124deg,
#ff9776 17.77%,
#5f94bc 35.47%,
#25bdce 59.3%,
#deab0c 91.61%
);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.chakra-accordion .chakra-accordion__item{
.chakra-accordion .chakra-accordion__item {
border: 0;
}


@keyframes reverse-spin {
to {
transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
.animate-reverse-spin {
animation: reverse-spin 1s linear infinite;
}
}

.threeProjectsPadding {
padding-top: 1.33rem;
padding-bottom: 1.33rem;
}

0 comments on commit 7bee55f

Please sign in to comment.