chore: add banner animation

Magickbase · Sep 25, 2023 · 7843754 · 7843754
1 parent b3efc60
commit 7843754
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/src/assets/halving_success_ani.gif b/src/assets/halving_success_ani.gif
diff --git a/src/components/BannerFallback/HalvingBanner.tsx b/src/components/BannerFallback/HalvingBanner.tsx
@@ -2,6 +2,7 @@ import classnames from 'classnames'
 import styles from './index.module.scss'
 import halvingBanner from '../../assets/halving_banner.png'
 import halvingBannerSuccess from '../../assets/halving_banner_success.png'
+import halvingSuccessAni from '../../assets/halving_success_ani.gif'
 import SimpleButton from '../SimpleButton'
 import { useCountdown, useHalving } from '../../utils/hook'
 import i18n from '../../utils/i18n'
@@ -61,14 +62,19 @@ export const HalvingBanner = () => {
     >
       <div className={styles.halvingBannerShadow}>
         <div className={classnames(styles.halvingBanner, 'container')}>
+          {unreadLastedHaving && (
+            <img className={styles.halvingBannerAnimation} src={halvingSuccessAni} alt="animation" />
+          )}
           {unreadLastedHaving ? (
-            <div className={styles.halvingBannerText}>
-              {i18n.t('halving.banner_congratulation', {
-                times: i18n.t(`ordinal.${numberToOrdinal(nextHalvingCount - 1)}`),
-              })}
+            <div className={classnames(styles.halvingBannerText, styles.success)}>
+              {i18n
+                .t('halving.banner_congratulation', {
+                  times: i18n.t(`ordinal.${numberToOrdinal(nextHalvingCount - 1)}`),
+                })
+                .toUpperCase()}
             </div>
           ) : (
-            <div className={styles.halvingBannerText}>
+            <div className={classnames(styles.halvingBannerText, styles.linear)}>
               Nervos CKB Layer 1 {capitalizeFirstLetter(i18n.t('halving.halving'))}
             </div>
           )}

diff --git a/src/components/BannerFallback/index.module.scss b/src/components/BannerFallback/index.module.scss
@@ -15,10 +15,12 @@ $backgroudColor: #232323;
 }
 
 .halvingBannerSuccess {
-  @media (max-width: 750px) {
-    background-size: 200% !important;
-  }
+  background-size: cover;
   background-position: center !important;
+
+  @media (min-width: 750px) {
+    background-size: 250% !important;
+  }
 }
 
 .halvingBannerWrapper {
@@ -29,6 +31,10 @@ $backgroudColor: #232323;
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: cover;
+
+  @media (min-width: 750px) {
+    height: 300px;
+  }
 }
 
 .halvingBannerShadow {
@@ -43,18 +49,45 @@ $backgroudColor: #232323;
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  gap: 24px;
+  gap: 8px;
+
+  @media (min-width: 750px) {
+    gap: 16px;
+  }
+}
+
+.halvingBannerAnimation {
+  margin-top: -16px;
+  height: 64px;
+
+  @media (min-width: 750px) {
+    height: 100px;
+  }
 }
 
 .halvingBannerText {
   align-items: baseline;
   display: flex;
   font-size: 24px;
   font-weight: bold;
+  text-align: center;
+
+  &.linear {
+    background: linear-gradient(45deg, rgb(183, 129, 219), rgba(133, 69, 178, 1), rgb(183, 129, 219));
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  &.success {
+    transform: rotate(-2deg);
+    text-shadow: 1px 1px 1px rgba(172, 54, 244, 1), -0.5px -0.5px 1px white;
+    color: rgb(28, 28, 28);
+    margin-top: -12px;
 
-  background: linear-gradient(45deg, rgb(183, 129, 219), rgba(133, 69, 178, 1), rgb(183, 129, 219));
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
+    @media (min-width: 750px) {
+      text-shadow: 1px 1px 1px rgba(172, 54, 244, 1), -1px -1px 1px white;
+    }
+  }
 
   @media (min-width: 750px) {
     font-size: 40px;
@@ -73,4 +106,8 @@ $backgroudColor: #232323;
   padding: 8px 16px;
   user-select: none;
   background: linear-gradient(180deg, rgba(172, 54, 244, 1), rgba(138, 25, 207, 1));
+
+  @media (min-width: 750px) {
+    padding: 16px 24px;
+  }
 }
diff --git a/src/pages/Home/Banner/index.tsx b/src/pages/Home/Banner/index.tsx
@@ -77,10 +77,11 @@ const _Banner: FC<{ latestBlock?: State.Block }> = ({ latestBlock }) => {
   )
 }
 
+export const Banner = HalvingBanner as FC<{ latestBlock?: State.Block }>
 /*
  * FIXME: this is a fallback for https://github.com/Magickbase/ckb-explorer-public-issues/issues/218 and should be restored once performance issue is fixed
  */
 const isMainnet = isMainnetFunc()
-export const Banner = isMainnet
+export const Other = isMainnet
   ? HalvingBanner
   : memo(_Banner, (a, b) => a.latestBlock?.number === b.latestBlock?.number)