From 363e4cfb113caf93bc09a75c02a73244fe93bac7 Mon Sep 17 00:00:00 2001
From: Woody <109973128+Woody810@users.noreply.github.com>
Date: Fri, 1 Dec 2023 17:31:01 +0800
Subject: [PATCH] chore(Menu): Display NewTag in the externalLink (#8491)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!--
copilot:all
-->
### <samp>🤖[[deprecated]](https://githubnext.com/copilot-for-prs-sunset)
Generated by Copilot at 9bc4021</samp>

### Summary
🎨🐛🚀

<!--
1. 🎨 - This emoji is often used to indicate code style or formatting
improvements, such as refactoring, renaming, or reorganizing code. In
this case, the `DropdownMenu` component was refactored to improve code
readability and consistency, which could be considered a style
improvement.
2. 🐛 - This emoji is often used to indicate bug fixes or error handling,
such as fixing a missing closing tag, a typo, or a logic error. In this
case, the `DropdownMenu` component had a missing closing tag for the
`ul` element, which could cause rendering issues or invalid HTML, so
fixing it could be considered a bug fix.
3. 🚀 - This emoji is often used to indicate performance improvements or
new features, such as adding a new component, a new functionality, or a
new optimization. In this case, the `DropdownMenu` component added a
`Flex` component to align the menu items, which could be considered a
new feature or a UI enhancement.
-->
Refactored the `DropdownMenu` component and fixed a bug in
`packages/uikit`.

> _The `DropdownMenu` was a mess_
> _With a tag that it failed to address_
> _So it got a refactor_
> _And a `Flex` benefactor_
> _Now it looks and behaves with finesse_

### Walkthrough
* Reorder imports alphabetically and move `LinkStatus` component up to
match styles file
([link](https://github.com/pancakeswap/pancake-frontend/pull/8491/files?diff=unified&w=0#diff-d5748bbba35280005dd7f9dae278f09e2205045d50e8230a00c8f9fd24d73225L2-R4),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8491/files?diff=unified&w=0#diff-d5748bbba35280005dd7f9dae278f09e2205045d50e8230a00c8f9fd24d73225L12-R13))
* Wrap `MenuItemContent` in `Flex` component to align label and status
horizontally and add closing tag
([link](https://github.com/pancakeswap/pancake-frontend/pull/8491/files?diff=unified&w=0#diff-d5748bbba35280005dd7f9dae278f09e2205045d50e8230a00c8f9fd24d73225L108-R108),
[link](https://github.com/pancakeswap/pancake-frontend/pull/8491/files?diff=unified&w=0#diff-d5748bbba35280005dd7f9dae278f09e2205045d50e8230a00c8f9fd24d73225L115-R115))
* Replace `label` prop with `MenuItemContent` variable to reuse
rendering logic
([link](https://github.com/pancakeswap/pancake-frontend/pull/8491/files?diff=unified&w=0#diff-d5748bbba35280005dd7f9dae278f09e2205045d50e8230a00c8f9fd24d73225L157-R157))



Before:

![image](https://github.com/pancakeswap/pancake-frontend/assets/109973128/9b459dfc-d83a-4440-ac26-c75f320b54d1)


After:

![image](https://github.com/pancakeswap/pancake-frontend/assets/109973128/f1c1ef6a-721e-4e36-975b-1558a1726659)

---------

Co-authored-by: Woody <woody.wu@stantec.com>
---
 .../widgets/__snapshots__/menu.test.tsx.snap  | 225 +++++++++++++-----
 .../components/DropdownMenu/DropdownMenu.tsx  |  12 +-
 2 files changed, 177 insertions(+), 60 deletions(-)

diff --git a/packages/uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap b/packages/uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap
index 545582bce9f80..df74992cfd750 100644
--- a/packages/uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap
+++ b/packages/uikit/src/__tests__/widgets/__snapshots__/menu.test.tsx.snap
@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders correctly 1`] = `
 <DocumentFragment>
@@ -889,7 +889,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/swap"
                     >
-                      Exchange
+                      <div
+                        class="c4"
+                      >
+                        Exchange
+                      </div>
                     </a>
                   </div>
                   <div
@@ -899,7 +903,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/liquidity"
                     >
-                      Liquidity
+                      <div
+                        class="c4"
+                      >
+                        Liquidity
+                      </div>
                     </a>
                   </div>
                 </div>
@@ -932,7 +940,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/earn"
                     >
-                      Earn
+                      <div
+                        class="c4"
+                      >
+                        Earn
+                      </div>
                     </a>
                   </div>
                   <div
@@ -942,7 +954,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/farms"
                     >
-                      Yield Farms
+                      <div
+                        class="c4"
+                      >
+                        Yield Farms
+                      </div>
                     </a>
                   </div>
                   <div
@@ -952,7 +968,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/pools"
                     >
-                      Syrup pools
+                      <div
+                        class="c4"
+                      >
+                        Syrup pools
+                      </div>
                     </a>
                   </div>
                 </div>
@@ -985,7 +1005,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      Win
+                      <div
+                        class="c4"
+                      >
+                        Win
+                      </div>
                     </a>
                   </div>
                   <div
@@ -995,11 +1019,15 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      Predictions
                       <div
-                        class="c16 c17"
+                        class="c4"
                       >
-                        LIVE
+                        Predictions
+                        <div
+                          class="c16 c17"
+                        >
+                          LIVE
+                        </div>
                       </div>
                     </a>
                   </div>
@@ -1010,7 +1038,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      Lottery
+                      <div
+                        class="c4"
+                      >
+                        Lottery
+                      </div>
                     </a>
                   </div>
                 </div>
@@ -1053,7 +1085,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      Info & Analytics
+                      <div
+                        class="c4"
+                      >
+                        Info & Analytics
+                      </div>
                     </a>
                   </div>
                   <div
@@ -1063,11 +1099,15 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      IFO Token Sales
                       <div
-                        class="c20 c21"
+                        class="c4"
                       >
-                        SOON
+                        IFO Token Sales
+                        <div
+                          class="c20 c21"
+                        >
+                          SOON
+                        </div>
                       </div>
                     </a>
                   </div>
@@ -1085,7 +1125,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      NFT Collectibles
+                      <div
+                        class="c4"
+                      >
+                        NFT Collectibles
+                      </div>
                     </a>
                   </div>
                   <div
@@ -1095,7 +1139,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      Team Leaderboard
+                      <div
+                        class="c4"
+                      >
+                        Team Leaderboard
+                      </div>
                     </a>
                   </div>
                   <div
@@ -1112,7 +1160,11 @@ exports[`renders correctly 1`] = `
                       class="c13 c14"
                       href="/"
                     >
-                      Blog
+                      <div
+                        class="c4"
+                      >
+                        Blog
+                      </div>
                     </a>
                   </div>
                   <div
@@ -1126,7 +1178,11 @@ exports[`renders correctly 1`] = `
                       <div
                         class="c23 c24"
                       >
-                        Docs & Guides
+                        <div
+                          class="c4"
+                        >
+                          Docs & Guides
+                        </div>
                         <svg
                           class="c19"
                           color="textSubtle"
@@ -3255,7 +3311,7 @@ exports[`renders correctly 1`] = `
   flex-shrink: 0;
 }
 
-.c18 {
+.c19 {
   color: var(--colors-failure);
   font-weight: 400;
   line-height: 1.5;
@@ -3263,7 +3319,7 @@ exports[`renders correctly 1`] = `
   font-size: 14px;
 }
 
-.c22 {
+.c23 {
   color: var(--colors-warning);
   font-weight: 400;
   line-height: 1.5;
@@ -3279,7 +3335,7 @@ exports[`renders correctly 1`] = `
   font-size: 10px;
 }
 
-.c25 {
+.c26 {
   width: 100%;
 }
 
@@ -3287,7 +3343,12 @@ exports[`renders correctly 1`] = `
   height: 100%;
 }
 
-.c26 {
+.c17 {
+  display: flex;
+  align-items: center;
+}
+
+.c27 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3335,13 +3396,13 @@ exports[`renders correctly 1`] = `
   transition: height 0.25s ease;
 }
 
-.c20 {
+.c21 {
   position: relative;
   height: 22px;
   width: 21px;
 }
 
-.c20 div:first-child {
+.c21 div:first-child {
   height: 22px;
   width: 21px;
   z-index: 0;
@@ -3431,7 +3492,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
   border-bottom-right-radius: 8px;
 }
 
-.c24 {
+.c25 {
   border-color: var(--colors-cardBorder);
   border-style: solid;
   border-width: 1px 0 0;
@@ -3453,7 +3514,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
   visibility: hidden;
 }
 
-.c19 {
+.c20 {
   border-radius: var(--radii-default);
   padding: 0 8px;
   border: 2px solid;
@@ -3463,7 +3524,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
   margin-left: 8px;
 }
 
-.c23 {
+.c24 {
   border-radius: var(--radii-default);
   padding: 0 8px;
   border: 2px solid;
@@ -3492,7 +3553,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
   background-color: var(--colors-failure);
 }
 
-.c17 {
+.c18 {
   display: inline-flex;
   position: absolute;
   top: 0;
@@ -3505,7 +3566,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
   background-color: var(--colors-failure);
 }
 
-.c21 {
+.c22 {
   display: inline-flex;
   position: absolute;
   top: 0;
@@ -3768,7 +3829,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/swap"
             >
-              Exchange
+              <div
+                class="c17"
+              >
+                Exchange
+              </div>
             </a>
           </div>
           <div
@@ -3778,7 +3843,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/liquidity"
             >
-              Liquidity
+              <div
+                class="c17"
+              >
+                Liquidity
+              </div>
             </a>
           </div>
         </div>
@@ -3883,7 +3952,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/earn"
             >
-              Earn
+              <div
+                class="c17"
+              >
+                Earn
+              </div>
             </a>
           </div>
           <div
@@ -3893,7 +3966,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/farms"
             >
-              Yield Farms
+              <div
+                class="c17"
+              >
+                Yield Farms
+              </div>
             </a>
           </div>
           <div
@@ -3903,7 +3980,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/pools"
             >
-              Syrup pools
+              <div
+                class="c17"
+              >
+                Syrup pools
+              </div>
             </a>
           </div>
         </div>
@@ -3974,7 +4055,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
                 </div>
               </button>
               <span
-                class="c17"
+                class="c18"
                 color="failure"
               />
             </span>
@@ -3991,7 +4072,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              Win
+              <div
+                class="c17"
+              >
+                Win
+              </div>
             </a>
           </div>
           <div
@@ -4001,11 +4086,15 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              Predictions
               <div
-                class="c18 c19"
+                class="c17"
               >
-                LIVE
+                Predictions
+                <div
+                  class="c19 c20"
+                >
+                  LIVE
+                </div>
               </div>
             </a>
           </div>
@@ -4016,7 +4105,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              Lottery
+              <div
+                class="c17"
+              >
+                Lottery
+              </div>
             </a>
           </div>
         </div>
@@ -4042,7 +4135,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
                   class="c4 c5"
                 >
                   <div
-                    class="c20"
+                    class="c21"
                     height="22px"
                     width="21px"
                   >
@@ -4068,7 +4161,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
                 </div>
               </button>
               <span
-                class="c21"
+                class="c22"
                 color="warning"
               />
             </span>
@@ -4085,7 +4178,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              Info & Analytics
+              <div
+                class="c17"
+              >
+                Info & Analytics
+              </div>
             </a>
           </div>
           <div
@@ -4095,11 +4192,15 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              IFO Token Sales
               <div
-                class="c22 c23"
+                class="c17"
               >
-                SOON
+                IFO Token Sales
+                <div
+                  class="c23 c24"
+                >
+                  SOON
+                </div>
               </div>
             </a>
           </div>
@@ -4107,7 +4208,7 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
             class="c14"
           >
             <hr
-              class="c24"
+              class="c25"
             />
           </div>
           <div
@@ -4117,7 +4218,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              NFT Collectibles
+              <div
+                class="c17"
+              >
+                NFT Collectibles
+              </div>
             </a>
           </div>
           <div
@@ -4127,14 +4232,18 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              Team Leaderboard
+              <div
+                class="c17"
+              >
+                Team Leaderboard
+              </div>
             </a>
           </div>
           <div
             class="c14"
           >
             <hr
-              class="c24"
+              class="c25"
             />
           </div>
           <div
@@ -4144,7 +4253,11 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               class="c15 c16"
               href="/"
             >
-              Blog
+              <div
+                class="c17"
+              >
+                Blog
+              </div>
             </a>
           </div>
           <div
@@ -4156,9 +4269,13 @@ html[data-useragent*="TokenPocket_iOS"] .c1 {
               target="_blank"
             >
               <div
-                class="c25 c26"
+                class="c26 c27"
               >
-                Docs & Guides
+                <div
+                  class="c17"
+                >
+                  Docs & Guides
+                </div>
                 <svg
                   class="c8"
                   color="textSubtle"
diff --git a/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx b/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
index 37b26b5d69f22..cb966c3b2cd8b 100644
--- a/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-array-index-key */
-import React, { useContext, useEffect, useState, useCallback } from "react";
-import { usePopper } from "react-popper";
 import debounce from "lodash/debounce";
+import React, { useCallback, useContext, useEffect, useState } from "react";
+import { usePopper } from "react-popper";
 import { useOnClickOutside } from "../../hooks";
 import { MenuContext } from "../../widgets/Menu/context";
 import { Box, Flex } from "../Box";
@@ -9,8 +9,8 @@ import { LogoutIcon } from "../Svg";
 import {
   DropdownMenuDivider,
   DropdownMenuItem,
-  StyledDropdownMenu,
   LinkStatus,
+  StyledDropdownMenu,
   StyledDropdownMenuItemContainer,
 } from "./styles";
 import { DropdownMenuItemType, DropdownMenuProps } from "./types";
@@ -105,14 +105,14 @@ const DropdownMenu: React.FC<React.PropsWithChildren<DropdownMenuProps>> = ({
                 itemItem
               ) => {
                 const MenuItemContent = (
-                  <>
+                  <Flex alignItems="center">
                     {label}
                     {status && (
                       <LinkStatus textTransform="uppercase" color={status.color} fontSize="14px">
                         {status.text}
                       </LinkStatus>
                     )}
-                  </>
+                  </Flex>
                 );
                 const isActive = href === activeItem;
                 return (
@@ -154,7 +154,7 @@ const DropdownMenu: React.FC<React.PropsWithChildren<DropdownMenuProps>> = ({
                         {...itemProps}
                       >
                         <Flex alignItems="center" justifyContent="space-between" width="100%">
-                          {label}
+                          {MenuItemContent}
                           <LogoutIcon color={disabled ? "textDisabled" : "textSubtle"} />
                         </Flex>
                       </DropdownMenuItem>