chore: style enhancements for badge (#4999)

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

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useState, useCallback } from 'react'
 
 import { Command } from '@cowprotocol/types'
 import { Badge } from '@cowprotocol/ui'
@@ -43,10 +43,9 @@ export function TradeWidgetLinks({ isDropdown = false }: TradeWidgetLinksProps)
   const { enabledTradeTypes } = useInjectedWidgetParams()
   const menuItems = useMenuItems()
 
-  const handleMenuItemClick = (_item?: MenuItemConfig) => {
-    if (menuItemsElements.length === 1) return
+  const handleMenuItemClick = useCallback((_item?: MenuItemConfig): void => {
     setDropdownVisible(false)
-  }
+  }, [])
 
   const enabledItems = useMemo(() => {
     return menuItems.filter((item) => {
@@ -56,7 +55,7 @@ export function TradeWidgetLinks({ isDropdown = false }: TradeWidgetLinksProps)
     })
   }, [menuItems, enabledTradeTypes])
 
-  const menuItemsElements = useMemo(() => {
+  const menuItemsElements: JSX.Element[] = useMemo(() => {
     return enabledItems.map((item) => {
       const routePath = parameterizeTradeRoute(tradeContext, item.route, true)
       const isActive = !!matchPath(location.pathname, routePath.split('?')[0])
@@ -119,7 +118,7 @@ const MenuItem = ({
     <styledEl.Link to={routePath}>
       <Trans>{item.label}</Trans>
       {!isActive && item.badge && (
-        <Badge type="information">
+        <Badge type="alert">
           <Trans>{item.badge}</Trans>
         </Badge>
       )}

libs/ui/src/pure/Badge/index.tsx

@@ -5,15 +5,15 @@ import { BadgeType } from '../../types'
 
 const badgeBackgrounds: Record<BadgeType, string> = {
   information: `var(${UI.COLOR_INFO_BG})`,
-  alert: `var(${UI.COLOR_BADGE_YELLOW_BG})`,
+  alert: `var(${UI.COLOR_ALERT_BG})`,
   alert2: `var(${UI.COLOR_BADGE_YELLOW_BG})`,
   success: `var(${UI.COLOR_SUCCESS_BG})`,
   default: 'transparent', // text only
 }
 
 const badgeColors: Record<BadgeType, string> = {
   information: `var(${UI.COLOR_INFO_TEXT})`,
-  alert: `var(${UI.COLOR_BADGE_YELLOW_TEXT})`,
+  alert: `var(${UI.COLOR_ALERT_TEXT})`,
   alert2: `var(${UI.COLOR_BADGE_YELLOW_TEXT})`,
   success: `var(${UI.COLOR_SUCCESS_TEXT})`,
   default: `var(${UI.COLOR_DISABLED_TEXT})`, // text only
@@ -25,7 +25,7 @@ export const Badge = styled.div<{ type?: BadgeType }>`
   border: 0;
   cursor: pointer;
   border-radius: 16px;
-  font-size: 9px;
+  font-size: 10px;
   font-weight: inherit;
   text-transform: uppercase;
   padding: ${({ type }) => (!type || type === 'default' ? '0' : '4px 6px')};

libs/ui/src/pure/MenuBar/index.tsx

@@ -412,7 +412,7 @@ const GenericDropdown: React.FC<DropdownProps> = ({
     <DropdownMenu {...interactionProps} mobileMode={mobileMode}>
       <RootNavItem as="button" aria-haspopup="true" aria-expanded={isOpen} isOpen={isOpen} mobileMode={mobileMode}>
         <span>{item.label}</span>
-        {item.badge && <Badge type="information">{item.badge}</Badge>}
+        {item.badge && <Badge type="alert">{item.badge}</Badge>}
         {item.children && <SVG src={IMG_ICON_CARRET_DOWN} />}
       </RootNavItem>
       {isOpen && (
@@ -483,7 +483,7 @@ const DropdownContentWrapper: React.FC<DropdownContentWrapperProps> = ({
             <DropdownContentItemText>
               <DropdownContentItemTitle>
                 <span>{item.label}</span>
-                {item.badge && <Badge type="information">{item.badge}</Badge>}
+                {item.badge && <Badge type="alert">{item.badge}</Badge>}
               </DropdownContentItemTitle>
               {item.description && <DropdownContentItemDescription>{item.description}</DropdownContentItemDescription>}
             </DropdownContentItemText>