From 03a6b2fd523652d36aaa0ffb6e297869ef097f30 Mon Sep 17 00:00:00 2001
From: user <alex@iometelabs.io>
Date: Wed, 6 Mar 2024 20:12:40 +0800
Subject: [PATCH] Flip around the div id to the underlying

---
 .../$network/dashboard/airdrop/common.tsx     | 26 +++---
 .../app/styles/dashboard/airdrop.css          | 79 +++----------------
 2 files changed, 26 insertions(+), 79 deletions(-)

diff --git a/web/app.fluidity.money/app/routes/$network/dashboard/airdrop/common.tsx b/web/app.fluidity.money/app/routes/$network/dashboard/airdrop/common.tsx
index 31205eafe..0f3dd9d61 100644
--- a/web/app.fluidity.money/app/routes/$network/dashboard/airdrop/common.tsx
+++ b/web/app.fluidity.money/app/routes/$network/dashboard/airdrop/common.tsx
@@ -2425,20 +2425,20 @@ const RecapModal = ({
         )}
 
         {/*TGE details display*/}
-        <div id="claim">
-          <motion.div
-            className={"recap-fly-count-container"}
-            initial={{ opacity: 0, y: 50 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.1, delay: 0.1 }}
-            viewport={{
-              amount: "all",
-              once: true,
-            }}
-          >
+        <motion.div
+          className={"recap-fly-count-container"}
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.1, delay: 0.1 }}
+          viewport={{
+            amount: "all",
+            once: true,
+          }}
+        >
+          <div id="claim">
             {showPageContent && <TGEDisplay />}
-          </motion.div>
-        </div>
+          </div>
+        </motion.div>
 
         <Modal id="connect-wallet" visible={walletModalVisibility}>
           <div className="cover">
diff --git a/web/app.fluidity.money/app/styles/dashboard/airdrop.css b/web/app.fluidity.money/app/styles/dashboard/airdrop.css
index 04c086229..784a551a7 100644
--- a/web/app.fluidity.money/app/styles/dashboard/airdrop.css
+++ b/web/app.fluidity.money/app/styles/dashboard/airdrop.css
@@ -273,19 +273,7 @@
 }
 .transaction-table > thead > tr.highlighted-row,
 .transaction-table > tbody > tr.airdrop-row.highlighted-row {
-  background: linear-gradient(
-    90deg,
-    #f3b8d8 0%,
-    #b793e9 15.1%,
-    #9fd4f3 26.04%,
-    #ffd2c4 36.46%,
-    #fbf3f3 46.88%,
-    #d9abdf 57.29%,
-    #af9ce3 72.4%,
-    #aae4e1 85.42%,
-    #c6ead0 93.23%,
-    #fdb5e4 100%
-  );
+  background: linear-gradient(90deg, #f3b8d8 0%, #b793e9 15.1%, #9fd4f3 26.04%, #ffd2c4 36.46%, #fbf3f3 46.88%, #d9abdf 57.29%, #af9ce3 72.4%, #aae4e1 85.42%, #c6ead0 93.23%, #fdb5e4 100%);
 }
 .transaction-table > thead > tr.highlighted-row td,
 .transaction-table > tbody > tr.airdrop-row.highlighted-row td {
@@ -314,30 +302,14 @@
 }
 .airdrop-leaderboard-mobile .transaction-table > thead > tr td:first-child,
 .airdrop-leaderboard-mobile .transaction-table > thead > tr th:first-child,
-.airdrop-leaderboard-mobile
-  .transaction-table
-  > tbody
-  > tr.airdrop-row
-  td:first-child,
-.airdrop-leaderboard-mobile
-  .transaction-table
-  > tbody
-  > tr.airdrop-row
-  th:first-child {
+.airdrop-leaderboard-mobile .transaction-table > tbody > tr.airdrop-row td:first-child,
+.airdrop-leaderboard-mobile .transaction-table > tbody > tr.airdrop-row th:first-child {
   padding-left: 1em;
 }
 .airdrop-leaderboard-mobile .transaction-table > thead > tr td:last-child,
 .airdrop-leaderboard-mobile .transaction-table > thead > tr th:last-child,
-.airdrop-leaderboard-mobile
-  .transaction-table
-  > tbody
-  > tr.airdrop-row
-  td:last-child,
-.airdrop-leaderboard-mobile
-  .transaction-table
-  > tbody
-  > tr.airdrop-row
-  th:last-child {
+.airdrop-leaderboard-mobile .transaction-table > tbody > tr.airdrop-row td:last-child,
+.airdrop-leaderboard-mobile .transaction-table > tbody > tr.airdrop-row th:last-child {
   padding-right: 1em;
 }
 .airdrop-leaderboard-mobile .transaction-table > thead > tr td,
@@ -708,10 +680,7 @@
   align-items: flex-start;
   gap: 0.5em;
 }
-.staking-stats-container
-  .staking-stats-stakes-container
-  .stake
-  .stake-multiplier {
+.staking-stats-container .staking-stats-stakes-container .stake .stake-multiplier {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
@@ -784,31 +753,18 @@
   width: 150px;
   height: 150px;
 }
-.recap-container
-  .recap-hero
-  .recap-hero-text
-  .recap-circle-scroll
-  .recap-circle-scroll-arrow {
+.recap-container .recap-hero .recap-hero-text .recap-circle-scroll .recap-circle-scroll-arrow {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
-.recap-container
-  .recap-hero
-  .recap-hero-text
-  .recap-circle-scroll
-  .recap-circle-scroll-arrow
-  svg {
+.recap-container .recap-hero .recap-hero-text .recap-circle-scroll .recap-circle-scroll-arrow svg {
   fill: none;
   stroke: white;
   transform: scale(3);
 }
-.recap-container
-  .recap-hero
-  .recap-hero-text
-  .recap-circle-scroll
-  .recap-circle-scroll-text {
+.recap-container .recap-hero .recap-hero-text .recap-circle-scroll .recap-circle-scroll-text {
   font-size: 10px;
   fill: grey;
   letter-spacing: 0.4em;
@@ -900,28 +856,19 @@
   /* Track */
   /* Handle */
 }
-.recap-container
-  .recap-stats
-  .recap-bottle-distribution-container::-webkit-scrollbar {
+.recap-container .recap-stats .recap-bottle-distribution-container::-webkit-scrollbar {
   height: 10px;
 }
-.recap-container
-  .recap-stats
-  .recap-bottle-distribution-container::-webkit-scrollbar-track {
+.recap-container .recap-stats .recap-bottle-distribution-container::-webkit-scrollbar-track {
   background: transparent;
   border: 1px solid white;
   border-radius: 5px;
 }
-.recap-container
-  .recap-stats
-  .recap-bottle-distribution-container::-webkit-scrollbar-thumb {
+.recap-container .recap-stats .recap-bottle-distribution-container::-webkit-scrollbar-thumb {
   background: white;
   border-radius: 5px;
 }
-.recap-container
-  .recap-stats
-  .recap-bottle-distribution-container
-  .bottle-container {
+.recap-container .recap-stats .recap-bottle-distribution-container .bottle-container {
   gap: 1em;
   display: flex;
   flex-direction: column;