shi.gg / mellow-web
The weeb for the next gen discord boat - Wamellow wamellow.com
bot discord
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

improve premium page design

Luna 6103d7a9 673b35d6

+36 -32
+14 -12
app/(home)/premium/page.tsx
··· 81 81 </span> 82 82 </div> 83 83 84 - {topGuilds && 85 - <ImageGrid images={topGuilds 86 - .sort((a, b) => b.memberCount - a.memberCount) 87 - .map((guild) => ({ 88 - id: guild.id, 89 - url: guild.icon || "/discord.webp", 90 - link: getCanonicalUrl("leaderboard", guild.id) 91 - }))} 84 + {topGuilds && ( 85 + <ImageGrid 86 + images={topGuilds 87 + .sort((a, b) => b.memberCount - a.memberCount) 88 + .map((guild) => ({ 89 + id: guild.id, 90 + url: (guild.icon || "/discord.webp").replace("gif", "webp"), 91 + link: getCanonicalUrl("leaderboard", guild.id) 92 + }))} 92 93 /> 93 - } 94 + ) } 94 95 95 96 <div className="dark:bg-wamellow bg-wamellow-100 dark:text-neutral-300 text-neutral-700 mt-10 w-full p-4 rounded-xl text-xl divide-y divide-wamellow"> 96 97 ··· 115 116 ))} 116 117 117 118 <div className="hidden md:flex items-center pt-4"> 118 - <div className="w-1/2 text-sm text-neutral-400"> 119 - support the project {"<3"} 119 + <div className="w-1/2 text-sm text-neutral-400 flex justify-between pr-4"> 120 + <div /> 121 + extra monthly donation 120 122 </div> 121 123 <div className="flex w-1/2 gap-4"> 122 124 <Subscribe /> ··· 159 161 /> 160 162 161 163 <div className="p-2 fixed z-10 bottom-0 left-0 w-full md:hidden"> 162 - <div className="dark:bg-wamellow bg-wamellow-100 backdrop-blur-xl backdrop-brightness-50 rounded-lg shadow-md w-full flex flex-col gap-2 items-center justify-center p-3"> 164 + <div className="dark:bg-wamellow bg-wamellow-100 backdrop-blur-lg backdrop-brightness-50 rounded-lg shadow-md w-full flex flex-col gap-2 items-center justify-center p-3"> 163 165 164 166 <div className="flex gap-2 items-center"> 165 167 <span className="dark:text-neutral-200 text-neutral-800 font-medium text-sm">Upgrade your experience further!</span>
+20 -18
app/(home)/premium/subscribe.component.tsx
··· 7 7 import { Button } from "@/components/ui/button"; 8 8 import { InputBase, InputBaseAdornment, InputBaseAdornmentButton, InputBaseControl, InputBaseInput } from "@/components/ui/input-base"; 9 9 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; 10 + import { cn } from "@/utils/cn"; 10 11 11 12 export function Subscribe() { 12 13 const premium = userStore((u) => u?.premium || false); ··· 20 21 > 21 22 <Link 22 23 className="w-full" 23 - prefetch={false} 24 24 href="/profile/billing" 25 25 > 26 26 <HiLightningBolt /> ··· 31 31 } 32 32 33 33 return ( 34 - <div className="w-full flex gap-4"> 34 + <div className="w-full flex gap-2"> 35 35 <DonationSelect 36 - className="w-56" 36 + className="w-[164px] md:w-40 shrink-0" 37 37 donation={donation} 38 38 setDonation={setDonation} 39 39 /> 40 40 41 - <Button 42 - asChild 43 - variant="secondary" 44 - > 45 - <Link 46 - className="w-full" 47 - prefetch={false} 48 - href={`/premium/checkout?donation=${donation}`} 41 + <div className="w-full relative overflow-hidden rounded-lg border border-border group p-px"> 42 + <span className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite_reverse] bg-[conic-gradient(from_90deg_at_0%_50%,#8b5cf6_50%,hsl(var(--input)/30)_7%)]" /> 43 + <Button 44 + asChild 45 + className='w-full px-2 backdrop-blur-sm backdrop-brightness-50 md:backdrop-brightness-[25%] bg-none rounded-[6px] hover:bg-[#8b5cf6]/50' 49 46 > 50 - <HiLightningBolt /> 51 - Subscribe 52 - </Link> 53 - </Button> 47 + <Link 48 + prefetch={false} 49 + href={`/premium/checkout?donation=${donation}`} 50 + > 51 + <HiLightningBolt /> 52 + Subscribe 53 + </Link> 54 + </Button> 55 + </div> 54 56 </div> 55 57 ); 56 58 } ··· 64 66 return ( 65 67 <InputBase {...props}> 66 68 <InputBaseAdornment className="flex"> 67 - <div className="relative right-1 flex gap-1"> 69 + <div className="relative right-1.5 flex gap-1"> 68 70 <Button 69 - className="h-7" 71 + className={cn("h-7", donation === 0 && "animate-bounce transition-all duration-800")} 70 72 size="icon" 71 73 onClick={() => setDonation(Math.min(donation + 1, 100))} 72 74 disabled={donation >= 100} 73 75 > 74 - <HiArrowUp className="!size-3" /> 76 + <HiArrowUp className="!size-3 " /> 75 77 </Button> 76 78 <Button 77 79 className="h-7"
+2 -2
components/ui/button.tsx
··· 24 24 }, 25 25 size: { 26 26 default: "h-10 px-4 py-2", 27 - sm: "h-9 rounded-lg px-4", 28 - lg: "h-12 rounded-lg px-8", 27 + sm: "h-9 px-4", 28 + lg: "h-12 px-8", 29 29 icon: "h-7 w-7 p-1.5" 30 30 } 31 31 },