From 425bd42253cfd2a40f7ac43583b126d2b1d23611 Mon Sep 17 00:00:00 2001
From: painterpuppets <painterpuppets@gmail.com>
Date: Tue, 25 Jun 2024 16:44:12 +0800
Subject: [PATCH 1/4] feat: add "NEW" tag for new frature

---
 .../Header/MenusComp/index.module.scss          | 17 +++++++++++++++++
 src/components/Header/MenusComp/index.tsx       |  5 +++++
 src/components/Header/MenusComp/new.svg         |  4 ++++
 3 files changed, 26 insertions(+)
 create mode 100644 src/components/Header/MenusComp/new.svg

diff --git a/src/components/Header/MenusComp/index.module.scss b/src/components/Header/MenusComp/index.module.scss
index ff4a3a407..f0f7cdca3 100644
--- a/src/components/Header/MenusComp/index.module.scss
+++ b/src/components/Header/MenusComp/index.module.scss
@@ -19,6 +19,7 @@
 
 .submenuTrigger {
   gap: 4px;
+  position: relative;
 
   .icon {
     transform: rotate(180deg);
@@ -32,6 +33,13 @@
     transition: all 0.2s;
   }
 
+  .newIcon {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    right: -24px;
+  }
+
   &:hover {
     .moreIcon {
       color: var(--primary-color);
@@ -111,3 +119,12 @@
     color: var(--primary-color);
   }
 }
+
+.newTag {
+  font-size: 10px;
+  font-weight: bold;
+  font-style: italic;
+  background-color: #fff500;
+  padding: 4px 8px;
+  border-radius: 32px;
+}
diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
index b9e3def97..ff5e31df8 100644
--- a/src/components/Header/MenusComp/index.tsx
+++ b/src/components/Header/MenusComp/index.tsx
@@ -11,6 +11,7 @@ import { CKBNodeModal } from '../CKBNodeComp/CKBNodeModal'
 import { ReactComponent as ArrowIcon } from './arrow.svg'
 import { IS_MAINNET } from '../../../constants/common'
 import { ReactComponent as MenuIcon } from './menu.svg'
+import { ReactComponent as NewIcon } from './new.svg'
 import { useCKBNode } from '../../../hooks/useCKBNode'
 
 export enum LinkType {
@@ -137,6 +138,9 @@ export const MoreMenu = ({ isMobile = false }: { isMobile?: boolean }) => {
           <div className={styles.submenu}>
             <Link className={styles.link} to="/tools/address-conversion">
               {t('footer.tools')}
+              <span className={styles.newTag} style={{ marginLeft: 4 }}>
+                NEW
+              </span>
             </Link>
             <span
               className={classNames(styles.link, styles.clickable)}
@@ -173,6 +177,7 @@ export const MoreMenu = ({ isMobile = false }: { isMobile?: boolean }) => {
             className={classNames(styles.clickable, styles.headerMenusItem, styles.submenuTrigger, styles.moreMenus)}
           >
             <MenuIcon className={styles.moreIcon} />
+            <NewIcon className={styles.newIcon} />
           </span>
         )}
       </Dropdown>
diff --git a/src/components/Header/MenusComp/new.svg b/src/components/Header/MenusComp/new.svg
new file mode 100644
index 000000000..7ac195383
--- /dev/null
+++ b/src/components/Header/MenusComp/new.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 2.31896L12.0154 7.76545L12.0746 7.92542L12.2346 7.98462L17.681 10L12.2346 12.0154L12.0746 12.0746L12.0154 12.2346L10 17.681L7.98462 12.2346L7.92542 12.0746L7.76545 12.0154L2.31896 10L7.76545 7.98462L7.92542 7.92542L7.98462 7.76545L10 2.31896Z" fill="#FFF500" stroke="#FFF500" stroke-width="0.741939"/>
+<path d="M15.625 2.31896L16.1211 3.65971L16.1803 3.81968L16.3403 3.87888L17.681 4.375L16.3403 4.87112L16.1803 4.93032L16.1211 5.09029L15.625 6.43104L15.1289 5.09029L15.0697 4.93032L14.9097 4.87112L13.569 4.375L14.9097 3.87888L15.0697 3.81968L15.1289 3.65971L15.625 2.31896Z" fill="#FFF500" stroke="#FFF500" stroke-width="0.741939"/>
+</svg>

From 330323c77def8e5eada7d6c1355940e3a707eb6e Mon Sep 17 00:00:00 2001
From: painterpuppets <painterpuppets@gmail.com>
Date: Mon, 1 Jul 2024 14:34:32 +0800
Subject: [PATCH 2/4] chore: add new tag display duration

---
 src/components/Header/MenusComp/index.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
index ff5e31df8..a49a53bb3 100644
--- a/src/components/Header/MenusComp/index.tsx
+++ b/src/components/Header/MenusComp/index.tsx
@@ -3,6 +3,7 @@ import { FC, memo, PropsWithChildren, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dropdown, DropdownProps } from 'antd'
 import classNames from 'classnames'
+import dayjs from 'dayjs'
 import { Link } from '../../Link'
 import { MobileMenuItem, MobileMenuOuterLink, HeaderMenuPanel, MobileMenuInnerLink } from './styled'
 import styles from './index.module.scss'
@@ -138,9 +139,11 @@ export const MoreMenu = ({ isMobile = false }: { isMobile?: boolean }) => {
           <div className={styles.submenu}>
             <Link className={styles.link} to="/tools/address-conversion">
               {t('footer.tools')}
-              <span className={styles.newTag} style={{ marginLeft: 4 }}>
-                NEW
-              </span>
+              {dayjs().isBefore(dayjs('2024-08-01')) && (
+                <span className={styles.newTag} style={{ marginLeft: 4 }}>
+                  NEW
+                </span>
+              )}
             </Link>
             <span
               className={classNames(styles.link, styles.clickable)}

From a8404d11a17631958eb74625656892f007fc3a05 Mon Sep 17 00:00:00 2001
From: painterpuppets <painterpuppets@gmail.com>
Date: Mon, 1 Jul 2024 14:46:21 +0800
Subject: [PATCH 3/4] chore: add todo comment

---
 src/components/Header/MenusComp/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
index a49a53bb3..9aadf6bb1 100644
--- a/src/components/Header/MenusComp/index.tsx
+++ b/src/components/Header/MenusComp/index.tsx
@@ -139,6 +139,7 @@ export const MoreMenu = ({ isMobile = false }: { isMobile?: boolean }) => {
           <div className={styles.submenu}>
             <Link className={styles.link} to="/tools/address-conversion">
               {t('footer.tools')}
+              {/* TODO: remove this tag after 2024-08-01 */}
               {dayjs().isBefore(dayjs('2024-08-01')) && (
                 <span className={styles.newTag} style={{ marginLeft: 4 }}>
                   NEW

From 6387e52b00e9f11cf232d46cc4105856de81d2e3 Mon Sep 17 00:00:00 2001
From: painterpuppets <painterpuppets@gmail.com>
Date: Mon, 1 Jul 2024 14:50:52 +0800
Subject: [PATCH 4/4] chore: add icon duration

---
 src/components/Header/MenusComp/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Header/MenusComp/index.tsx b/src/components/Header/MenusComp/index.tsx
index 9aadf6bb1..fd6443958 100644
--- a/src/components/Header/MenusComp/index.tsx
+++ b/src/components/Header/MenusComp/index.tsx
@@ -181,7 +181,8 @@ export const MoreMenu = ({ isMobile = false }: { isMobile?: boolean }) => {
             className={classNames(styles.clickable, styles.headerMenusItem, styles.submenuTrigger, styles.moreMenus)}
           >
             <MenuIcon className={styles.moreIcon} />
-            <NewIcon className={styles.newIcon} />
+            {/* TODO: remove this after 2024-08-01 */}
+            {dayjs().isBefore(dayjs('2024-08-01')) && <NewIcon className={styles.newIcon} />}
           </span>
         )}
       </Dropdown>