Merge pull request #338 from zkLinkProtocol/feat/mysterybox-v3

add mystery box III
zkLinkProtocol · Jul 23, 2024 · 15a4758 · 15a4758
2 parents e683062 + 7e1059b
commit 15a4758
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 22 deletions.
diff --git a/src/components/Dashboard/MysteryBoxIII.tsx b/src/components/Dashboard/MysteryBoxIII.tsx
@@ -41,10 +41,38 @@ const Container = styled.div`
     z-index: -1;
     margin: -1px;
     border-radius: inherit; /*important*/
-    background: linear-gradient(90deg, #48ecae 0%, #3e52fc 52.9%, #49cdd7 100%);
+    background: linear-gradient(
+      175deg,
+      #fb2450,
+      #fbc82e,
+      #6eee3f,
+      #5889f3,
+      #5095f1,
+      #b10af4 60%
+    );
   }
 `;
 
+const CustomButton = styled(GradientButton)`
+  border-radius: 8px;
+  background: var(
+    --Button-Rainbow,
+    linear-gradient(
+      90deg,
+      #4ba790 0%,
+      rgba(251, 251, 251, 0.6) 50.31%,
+      #9747ff 100%
+    )
+  );
+  color: #fff;
+  text-align: center;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px; /* 144.444% */
+  letter-spacing: 1px;
+`;
+
 const TRADEMARK_TOKEN_ID_MAP: Record<number, string> = {
   1: "Oak Tree Roots",
   2: "Magnifying Glass",
@@ -234,25 +262,27 @@ export default function MysteryBoxIII() {
   return (
     <>
       {remainDrawCount > 0 && (
-        <Container className="my-[32px] px-[24px] py-[16px] flex justify-between items-center">
-          <img
-            src="/img/img-mystery-box-v2.png"
-            alt=""
-            width={56}
-            height={56}
-            className="rounded-[12px]"
-          />
-          <div className="text-[18px] font-[700] leading-[26px]">
-            <p>Mystery Box III</p>
-            <p className="mt-[4px]">x{remainDrawCount}</p>
+        <Container className="my-[32px] px-[20px] py-[16px] flex justify-between items-center">
+          <div className="flex items-center gap-[12px]">
+            <img
+              src="/img/img-mystery-box-v2.png"
+              alt=""
+              width={56}
+              height={56}
+              className="rounded-[12px]"
+            />
+            <div className="text-[18px] font-[700] leading-[26px]">
+              <p>Mystery Box III</p>
+              <p className="mt-[4px]">x{remainDrawCount}</p>
+            </div>
           </div>
           <div>
-            <GradientButton
-              className="px-[56px] py-[15px]"
+            <CustomButton
+              className="px-[32px] py-[15px]"
               onClick={() => drawModal.onOpen()}
             >
               Open
-            </GradientButton>
+            </CustomButton>
           </div>
         </Container>
       )}

diff --git a/src/components/DashboardS2/ZKLClaimAd.tsx b/src/components/DashboardS2/ZKLClaimAd.tsx
@@ -4,17 +4,13 @@ import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 const Container = styled.div`
-  position: fixed;
-  top: 120px;
-  right: 32px;
   background: #181d20;
   color: #fff;
   font-family: Satoshi;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-  z-index: 999;
   transition: all 0.3s;
 
   .progress-bar {

diff --git a/src/pages/DashboardS2/index2.tsx b/src/pages/DashboardS2/index2.tsx
@@ -27,6 +27,7 @@ import { Tooltip } from "@nextui-org/react";
 import { epochList } from "@/constants/epoch";
 import PremiusAd from "@/components/DashboardS2/PremiusAd";
 import ZKLClaimAd from "@/components/DashboardS2/ZKLClaimAd";
+import MysteryBoxIII from "@/components/Dashboard/MysteryBoxIII";
 export type TotalTvlItem = {
   symbol: string;
   tokenAddress: string;
@@ -597,8 +598,10 @@ export default function Dashboard() {
 
   return (
     <Container>
-      {/* <PremiusAd /> */}
-      <ZKLClaimAd />
+      <div className="side fixed right-[32px] top-[120px] z-[999] max-w-[400px]">
+        <ZKLClaimAd />
+        <MysteryBoxIII />
+      </div>
       <div className="mt-[29.6px] mx-auto max-w-[1246px] ">
         <CardBox2 className="flex justify-between">
           <div className="px-[16px] py-[10px]">

diff --git a/src/styles/common.ts b/src/styles/common.ts
@@ -8,7 +8,6 @@ export const GradientButton = styled.span`
   font-style: normal;
   font-weight: 900;
   letter-spacing: 0.125rem;
-  text-transform: uppercase;
   border-radius: 0.5rem;
   display: inline-block;
   user-select: none;