Merge pull request #3449 from cowprotocol/hotfix/1.50.1

fix: adds NEW! tag to MORE menu item (#3448)

apps/cowswap-frontend/src/legacy/components/Header/styled.tsx

@@ -336,6 +336,12 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
         height: 10px;
       }
     `};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      > button > svg {
+        order: 3;
+      }
+    `};
   }
 
   ${MenuContent} {

apps/cowswap-frontend/src/legacy/components/MenuDropdown/index.tsx

@@ -7,14 +7,17 @@ import SVG from 'react-inlinesvg'
 
 import { useMediaQuery, LargeAndUp } from 'legacy/hooks/useMediaQuery'
 
+import { MenuBadge } from 'modules/mainMenu/pure/MenuTree/styled'
+
 import { MenuFlyout, Content } from './styled'
 
 interface MenuProps {
   title: string
+  badge?: string
   children: React.ReactNode
 }
 
-export function Menu({ title, children }: MenuProps) {
+export function Menu({ title, badge, children }: MenuProps) {
   const isLargeAndUp = useMediaQuery(LargeAndUp)
   const node = useRef<HTMLOListElement>()
   const [showMenu, setShowMenu] = useState(false)
@@ -29,6 +32,7 @@ export function Menu({ title, children }: MenuProps) {
     <MenuFlyout ref={node as any}>
       <button onClick={handleOnClick} className={showMenu ? 'expanded' : ''}>
         {title} <SVG src={IMAGE_CARRET_DOWN} description="dropdown icon" className={showMenu ? 'expanded' : ''} />
+        {badge && <MenuBadge>{badge}</MenuBadge>}
       </button>
       {showMenu && <Content onClick={handleOnClick}>{children}</Content>}
     </MenuFlyout>

apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.cosmos.tsx

@@ -1,10 +1,12 @@
+import { BadgeType } from '@cowprotocol/ui'
+
 import { Widget } from 'modules/application/pure/Widget'
 
-import { TradeWidgetLinks, BadgeType } from '.';
+import { TradeWidgetLinks } from '.'
 
 type BadgeInfo = {
-  text: string;
-  type: BadgeType;
+  text: string
+  type: BadgeType
 }
 
 const BADGES: BadgeInfo[] = [
@@ -13,24 +15,21 @@ const BADGES: BadgeInfo[] = [
   { text: 'ALPHA', type: 'alert' },
   { text: 'NEW!', type: 'alert2' },
   { text: 'RELEASE', type: 'information' },
-];
+]
 
 type Fixtures = {
-  [key: string]: React.FunctionComponent;
-};
+  [key: string]: React.FunctionComponent
+}
 
 const BadgeFixtures = BADGES.reduce<Fixtures>((fixtures, badge) => {
   const Fixture = () => (
     <Widget>
-      <TradeWidgetLinks
-        highlightedBadgeText={badge.text}
-        highlightedBadgeType={badge.type}
-      />
+      <TradeWidgetLinks highlightedBadgeText={badge.text} highlightedBadgeType={badge.type} />
     </Widget>
-  );
+  )
 
-  fixtures[`Badge - ${badge.text} (${badge.type})`] = Fixture;
-  return fixtures;
-}, {});
+  fixtures[`Badge - ${badge.text} (${badge.type})`] = Fixture
+  return fixtures
+}, {})
 
-export default BadgeFixtures;
+export default BadgeFixtures

apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { BadgeType } from '@cowprotocol/ui'
 import type { TradeType } from '@cowprotocol/widget-lib'
 
 import { Trans } from '@lingui/macro'
@@ -26,17 +27,10 @@ interface MenuItemConfig {
   badgeType?: BadgeType
 }
 
-export type BadgeType = 'information' | 'success' | 'alert' | 'alert2' | 'default'
-
 const MENU_ITEMS: MenuItemConfig[] = [
   { route: Routes.SWAP, label: 'Swap' },
   { route: Routes.LIMIT_ORDER, label: 'Limit' },
-  {
-    route: Routes.ADVANCED_ORDERS,
-    label: 'TWAP',
-    badgeText: 'NEW!',
-    badgeType: 'alert2',
-  },
+  { route: Routes.ADVANCED_ORDERS, label: 'TWAP' },
 ]
 
 const TRADE_TYPE_TO_ROUTE: Record<TradeType, string> = {

apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts

@@ -1,10 +1,10 @@
+import { BadgeType } from '@cowprotocol/ui'
+
 import { NavLink } from 'react-router-dom'
 import styled, { css } from 'styled-components/macro'
 
 import { UI } from 'common/constants/theme'
 
-import { BadgeType } from '.'
-
 const badgeBackgrounds: Record<BadgeType, string> = {
   information: `var(${UI.COLOR_INFORMATION_BG})`,
   alert: `var(${UI.COLOR_ALERT_BG})`,

apps/cowswap-frontend/src/modules/mainMenu/constants/mainMenu.tsx

@@ -98,6 +98,7 @@ export const MAIN_MENU: MenuTreeItem[] = [
   {
     kind: MenuItemKind.DROP_DOWN,
     title: 'More',
+    badge: 'New!',
     items: [
       {
         sectionTitle: 'Overview',

apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx

@@ -127,10 +127,10 @@ interface DropdownProps {
 }
 
 const DropDown = ({ item, context }: DropdownProps) => {
-  const { title, items } = item
+  const { title, items, badge } = item
 
   return (
-    <MenuDropdown title={title}>
+    <MenuDropdown title={title} badge={badge}>
       {items?.map((item, index) => {
         const { sectionTitle, links } = item
         return (

apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts

@@ -5,8 +5,8 @@ import { UI } from 'common/constants/theme'
 export const MenuBadge = styled.div`
   display: flex;
   align-items: center;
-  padding: 0 5px;
-  margin-left: 5px;
+  padding: 3px 5px;
+  margin: 0 0 0 5px;
   background: var(${UI.COLOR_ALERT2_BG});
   color: var(${UI.COLOR_ALERT2_TEXT});
   border: 0;

apps/cowswap-frontend/src/modules/mainMenu/types.ts

@@ -76,6 +76,7 @@ export interface DropDownItem {
   kind: MenuItemKind.DROP_DOWN
   title: string
   items: DropDownSubItem[]
+  badge?: string
 }
 
 export type MenuTreeItem = InternalLink | ExternalLink | DropDownItem | ParametrizedLink | CustomItem

libs/ui/src/index.ts

@@ -10,3 +10,4 @@ export * from './pure/Tooltip'
 export * from './pure/Popover'
 export * from './pure/ExternalLink'
 export * from './enum'
+export * from './types'

libs/ui/src/types.ts

@@ -12,3 +12,5 @@ export type ComposableCowInfo = {
   isVirtualPart?: boolean
   isTheLastPart?: boolean
 }
+
+export type BadgeType = 'information' | 'success' | 'alert' | 'alert2' | 'default'