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.

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

Website: Fundraiser Badges #981

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Prettified Code!
ssandino authored and actions-user committed Dec 11, 2024

Verified

This commit was signed with the committer’s verified signature.
commit f720ebdc6157ee54c0df4f31131d6b946d4d43a8
Original file line number Diff line number Diff line change
@@ -15,13 +15,20 @@ export async function ActiveFundraisers({ lang }: DefaultParams) {
return (
<div className="mx-auto mb-8 mt-12 flex flex-col items-center justify-center space-y-4">
{/* Badge Temporary */}
<div className="w-full flex justify-center">
<div className="flex w-full justify-center">
<Link
href={`/${lang}/fundraisers`}
className="border-text-popover-foreground-muted text-primary relative flex items-center rounded-full border-2 px-6 py-2 transition-all duration-300"
>
{/* Loading Dots Animation */}
<svg width="48" height="12" viewBox="0 0 48 12" fill="none" xmlns="http://www.w3.org/2000/svg" className="pr-2">
<svg
width="48"
height="12"
viewBox="0 0 48 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="pr-2"
>
<circle cx="6" cy="6" r="6" fill="currentColor">
<animate
attributeName="opacity"
@@ -65,10 +72,10 @@ export async function ActiveFundraisers({ lang }: DefaultParams) {
</div>

{/* Badge */}
<div className="w-full flex justify-center gap-3">
<div className="flex w-full justify-center gap-3">
<Link
href={`https://socialincome.org`}
className="border-text-popover-foreground-muted hover:bg-primary group relative flex w-[270px] items-center rounded-full border-2 px-6 py-2 transition-all duration-300 hover:w-[300px] hover:text-white hover:border-primary"
className="border-text-popover-foreground-muted hover:bg-primary hover:border-primary group relative flex w-[270px] items-center rounded-full border-2 px-6 py-2 transition-all duration-300 hover:w-[300px] hover:text-white"
>
{/* Avatar */}
<div className="-ml-2 mr-2 h-10 w-10 overflow-hidden rounded-full transition-transform duration-300 group-hover:scale-125">
@@ -78,14 +85,14 @@ export async function ActiveFundraisers({ lang }: DefaultParams) {
{/* Text Content */}
<div className="flex flex-col pl-2">
{/* Default Text */}
<div className="w-[150px] text-popover-foreground-muted flex items-center space-x-1 group-hover:hidden">
<div className="text-popover-foreground-muted flex w-[150px] items-center space-x-1 group-hover:hidden">
<Typography size="lg">{translator.t('badges.by')}</Typography>
<Typography size="lg" className="truncate overflow-hidden whitespace-nowrap">
<Typography size="lg" className="overflow-hidden truncate whitespace-nowrap">
Ismatu Banjura
</Typography>
</div>
<div className="w-[150px] text-primary group-hover:hidden">
<Typography size="lg" weight="medium" className="truncate overflow-hidden whitespace-nowrap">
<div className="text-primary w-[150px] group-hover:hidden">
<Typography size="lg" weight="medium" className="overflow-hidden truncate whitespace-nowrap">
Rebuilding Lives
</Typography>
</div>
@@ -116,7 +123,7 @@ export async function ActiveFundraisers({ lang }: DefaultParams) {
</Link>
<Link
href={`https://socialincome.org`}
className="border-text-popover-foreground-muted hover:bg-primary group relative flex w-[270px] items-center rounded-full border-2 px-6 py-2 transition-all duration-300 hover:w-[300px] hover:text-white hover:border-primary"
className="border-text-popover-foreground-muted hover:bg-primary hover:border-primary group relative flex w-[270px] items-center rounded-full border-2 px-6 py-2 transition-all duration-300 hover:w-[300px] hover:text-white"
>
{/* Avatar */}
<div className="-ml-2 mr-2 h-10 w-10 overflow-hidden rounded-full transition-transform duration-300 group-hover:scale-125">
@@ -126,14 +133,14 @@ export async function ActiveFundraisers({ lang }: DefaultParams) {
{/* Text Content */}
<div className="flex flex-col pl-2">
{/* Default Text */}
<div className="w-[150px] text-popover-foreground-muted flex items-center space-x-1 group-hover:hidden">
<div className="text-popover-foreground-muted flex w-[150px] items-center space-x-1 group-hover:hidden">
<Typography size="lg">{translator.t('badges.by')}</Typography>
<Typography size="lg" className="truncate overflow-hidden whitespace-nowrap">
<Typography size="lg" className="overflow-hidden truncate whitespace-nowrap">
Ismatu Banjura
</Typography>
</div>
<div className="w-[150px] text-primary group-hover:hidden">
<Typography size="lg" weight="medium" className="truncate overflow-hidden whitespace-nowrap">
<div className="text-primary w-[150px] group-hover:hidden">
<Typography size="lg" weight="medium" className="overflow-hidden truncate whitespace-nowrap">
Rebuilding Lives
</Typography>
</div>