feature(airdrops): Improve visuals on mobile and cleanup (#15572)

* improve spacing on mobile

* update util comments

* update campaign detail ui

* remove unused dependency

* update yarn lock

airdrops/components/CampaignDetailContent.tsx

@@ -147,14 +147,16 @@ export default function CampaignDetailContent({
 
       {/* Full-width title and description */}
       <div className="max-w-6xl space-y-4 mb-8">
-        <h1 className="text-4xl font-bold">{airdrop.name}</h1>
-        <p className="text-xl text-gray-600">{airdrop.description}</p>
+        <h1 className="text-3xl lg:text-4xl font-bold">{airdrop.name}</h1>
+        <p className="text-lg lg:text-xl text-gray-600">
+          {airdrop.description}
+        </p>
       </div>
 
       {/* Two-column layout for remaining content */}
       <div className="grid max-w-6xl grid-cols-1 gap-8 pb-12 md:grid-cols-2 md:grid-rows-[auto]">
         {/* Left Column */}
-        <div className="p-6 py-2 border rounded-lg bg-gray-50 h-[500px] md:h-[600px] lg:h-[650px] overflow-y-auto">
+        <div className="relative p-6 py-2 border rounded-lg bg-gray-50 h-[500px] md:h-[600px] lg:h-[650px] overflow-y-auto">
           <div className="prose prose-sm max-w-none prose-headings:font-bold prose-headings:mb-3 prose-headings:text-gray-800 prose-p:mb-2 prose-p:text-gray-700 prose-li:mb-1 prose-li:text-gray-700 prose-a:text-blue-600 prose-a:font-medium prose-strong:font-semibold">
             <ReactMarkdown
               components={{
@@ -179,7 +181,7 @@ export default function CampaignDetailContent({
 
         {/* Right Column - Claim Section */}
         <div className="p-6 border rounded-xl space-y-6 h-auto self-start">
-          <h2 className="text-2xl font-semibold">Claim Your Rewards</h2>
+          <h2 className="text-xl lg:text-2xl font-bold">Claim Your Rewards</h2>
 
           {authenticated ? (
             <div className="space-y-6">

airdrops/components/layout/Container.tsx

@@ -4,5 +4,5 @@ interface Props {
 }
 
 export const Container = ({ children }: Props) => {
-  return <div className="px-4 mx-auto lg:container">{children}</div>
+  return <div className="mx-auto lg:px-4 lg:container">{children}</div>
 }

airdrops/package.json

@@ -27,7 +27,6 @@
     "eslint": "9.11.1",
     "ethers": "6.13.5",
     "next": "14.2.21",
-    "react-hot-toast": "2.4.1",
     "react-markdown": "10.0.0",
     "tailwind-merge": "3.0.1",
     "typescript": "5.6.3"

airdrops/src/utils/eligibility.ts

@@ -3,8 +3,7 @@ import { AirdropData } from '../../components/Campaigns'
 
 /**
  * Checks if an address is eligible for an airdrop and returns the token amount
- * This is a temporary implementation that randomly determines eligibility
- * To be replaced with actual implementation that checks against the recipients file
+ * Fetches the recipients file and checks if the address exists in it
  */
 export const isEligible = async (
   address: string,

yarn.lock

@@ -18641,7 +18641,6 @@ __metadata:
     jsdom: "npm:26.0.0"
     next: "npm:14.2.21"
     postcss: "npm:8.4.49"
-    react-hot-toast: "npm:2.4.1"
     react-markdown: "npm:10.0.0"
     tailwind-merge: "npm:3.0.1"
     tailwindcss: "npm:3.4.17"
@@ -31620,7 +31619,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"goober@npm:^2.1.10, goober@npm:^2.1.16":
+"goober@npm:^2.1.16":
   version: 2.1.16
   resolution: "goober@npm:2.1.16"
   peerDependencies:
@@ -44457,18 +44456,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-hot-toast@npm:2.4.1":
-  version: 2.4.1
-  resolution: "react-hot-toast@npm:2.4.1"
-  dependencies:
-    goober: "npm:^2.1.10"
-  peerDependencies:
-    react: ">=16"
-    react-dom: ">=16"
-  checksum: 10/9af91efdb98837e39a126aff084b54db0336c5f88a7dad7c42daf7ee873d06a79d6e59f398412cc250a35ddf1a73c25700fe90b3c3a2a0c394fd17d99b2bcf8b
-  languageName: node
-  linkType: hard
-
 "react-hot-toast@npm:2.5.2":
   version: 2.5.2
   resolution: "react-hot-toast@npm:2.5.2"