Fix styles general

apps/cowswap-frontend/src/common/pure/Icon/index.tsx

@@ -63,7 +63,7 @@ const Wrapper = styled.div<Omit<IconProps, 'image'>>`
 
 export function Icon({
   image,
-  size = 16,
+  size = 24,
   bgColor,
   color,
   description,

apps/cowswap-frontend/src/common/pure/InlineBanner/banners.tsx

@@ -15,7 +15,7 @@ export enum BannerOrientation {
 
 export function BundleTxApprovalBanner() {
   return (
-    <InlineBanner bannerType="information">
+    <InlineBanner bannerType="information" iconSize={32}>
       <strong>Token approval bundling</strong>
       <p>
         For your convenience, token approval and order placement will be bundled into a single transaction, streamlining
@@ -32,7 +32,7 @@ export type BundleTxWrapBannerProps = {
 
 export function BundleTxWrapBanner({ nativeCurrencySymbol, wrappedCurrencySymbol }: BundleTxWrapBannerProps) {
   return (
-    <InlineBanner bannerType="information">
+    <InlineBanner bannerType="information" iconSize={32}>
       <strong>Token wrapping bundling</strong>
       <p>
         For your convenience, CoW Swap will bundle all the necessary actions for this trade into a single transaction.
@@ -54,7 +54,7 @@ export function BundleTxSafeWcBanner({ nativeCurrencySymbol, supportsWrapping }:
   const supportsWrappingText = supportsWrapping ? `${nativeCurrencySymbol} wrapping, ` : ''
 
   return (
-    <InlineBanner bannerType="information">
+    <InlineBanner bannerType="information" iconSize={32}>
       <strong>Use Safe web app</strong>
       <p>
         Use the Safe web app for streamlined trading: {supportsWrappingText}token approval and orders bundled in one go!
@@ -71,7 +71,7 @@ export type SmallVolumeWarningBannerProps = {
 
 export function SmallVolumeWarningBanner({ feePercentage, feeAmount }: SmallVolumeWarningBannerProps) {
   return (
-    <InlineBanner>
+    <InlineBanner iconSize={32}>
       <strong>Small orders are unlikely to be executed</strong>
       <p>
         For this order, network fees would be{' '}

apps/cowswap-frontend/src/common/pure/InlineBanner/index.tsx

@@ -19,31 +19,31 @@ interface ColorEnums {
 const colorEnumsMap: Record<BannerType, ColorEnums> = {
   alert: {
     icon: IconType.ALERT,
-    color: UI.COLOR_ALERT,
+    color: UI.COLOR_ALERT_TEXT,
     bg: UI.COLOR_ALERT_BG,
     text: UI.COLOR_ALERT_TEXT,
   },
   information: {
     icon: IconType.INFORMATION,
-    color: UI.COLOR_INFORMATION,
+    color: UI.COLOR_INFORMATION_TEXT,
     bg: UI.COLOR_INFORMATION_BG,
     text: UI.COLOR_INFORMATION_TEXT,
   },
   success: {
     icon: IconType.SUCCESS,
-    color: UI.COLOR_SUCCESS,
+    color: UI.COLOR_SUCCESS_TEXT,
     bg: UI.COLOR_SUCCESS_BG,
     text: UI.COLOR_SUCCESS_TEXT,
   },
   danger: {
     icon: IconType.DANGER,
-    color: UI.COLOR_DANGER,
+    color: UI.COLOR_DANGER_TEXT,
     bg: UI.COLOR_DANGER_BG,
     text: UI.COLOR_DANGER_TEXT,
   },
   savings: {
     iconText: '💸',
-    color: UI.COLOR_SUCCESS,
+    color: UI.COLOR_SUCCESS_TEXT,
     bg: UI.COLOR_SUCCESS_BG,
     text: UI.COLOR_SUCCESS_TEXT,
   },
@@ -128,14 +128,15 @@ export function InlineBanner({
   children,
   className,
   hideIcon,
-  bannerType = 'alert',
+  bannerType,
   borderRadius,
   orientation,
   iconSize,
   iconPadding,
   padding,
 }: InlineBannerProps) {
-  const colorEnums = getColorEnums(bannerType)
+  const effectiveBannerType = bannerType || 'alert'
+  const colorEnums = getColorEnums(effectiveBannerType)
 
   return (
     <Wrapper
@@ -148,7 +149,7 @@ export function InlineBanner({
       <span>
         {!hideIcon && colorEnums.icon && (
           <Icon
-            image={IconType.ALERT}
+            image={colorEnums.icon}
             size={iconSize}
             color={colorEnums.color}
             description={bannerType}

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

@@ -146,7 +146,7 @@ const MenuItem = ({
   <styledEl.MenuItem isActive={isActive} onClick={onClick} isDropdownVisible={isDropdownVisible}>
     <styledEl.Link to={routePath}>
       <Trans>{item.label}</Trans>
-      {badgeText && (
+      {!isActive && badgeText && (
         <styledEl.Badge type={badgeType}>
           <Trans>{badgeText}</Trans>
         </styledEl.Badge>

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

@@ -34,7 +34,7 @@ export const Badge = styled.div<{ type?: BadgeType }>`
   letter-spacing: 0.2px;
   font-weight: 600;
   transition: color 0.15s ease-in-out;
-  margin: -8px 0 0 0;
+  margin: 0;
 
   a & {
     color: ${({ type }) => badgeColors[type || 'default']};

apps/cowswap-frontend/src/modules/swap/pure/banners/TwapSuggestionBanner.tsx

@@ -54,7 +54,7 @@ export function TwapSuggestionBanner({
     parameterizeTradeRoute(tradeUrlParams, Routes.ADVANCED_ORDERS) + `?${TRADE_URL_SELL_AMOUNT_KEY}=${sellAmount}`
 
   return (
-    <InlineBanner bannerType="alert">
+    <InlineBanner bannerType="alert" iconSize={32}>
       <strong>Minimize price impact with TWAP</strong>
       <p>
         The price impact is <b>{+priceImpact.toFixed(2)}%</b>. Consider breaking up your order using a{' '}

apps/cowswap-frontend/src/modules/twap/containers/TwapFormWarnings/warnings/UnsupportedWalletWarning.tsx

@@ -19,7 +19,7 @@ export function UnsupportedWalletWarning({ isSafeViaWc }: { isSafeViaWc: boolean
   }
 
   return (
-    <InlineBanner bannerType="alert">
+    <InlineBanner bannerType="alert" iconSize={32}>
       <strong>Unsupported wallet detected</strong>
       <p>
         TWAP orders currently require a Safe with a special fallback handler. Have one? Switch to it! Need setup?{' '}

libs/tokens/src/pure/TokenLogo/index.tsx

@@ -13,15 +13,19 @@ import { getTokenLogoUrls } from '../../utils/getTokenLogoUrls'
 
 const invalidUrlsAtom = atom<{ [url: string]: boolean }>({})
 
-const TokenLogoWrapper = styled.div`
+const TokenLogoWrapper = styled.div<{ size?: number }>`
   display: inline-block;
   background: var(--cow-container-bg-01);
-  border-radius: 50%;
+  border-radius: ${({ size }) => size}px;
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
   overflow: hidden;
 
   img {
-    width: 100%;
-    height: 100%;
+    width: ${({ size }) => size}px;
+    height: ${({ size }) => size}px;
+    border-radius: ${({ size }) => size}px;
+    object-fit: contain;
   }
 `
 
@@ -57,7 +61,7 @@ export function TokenLogo({ logoURI, token, className, size = 36 }: TokenLogoPro
   }
 
   return (
-    <TokenLogoWrapper className={className} style={{ width: size, height: size }}>
+    <TokenLogoWrapper className={className} size={size}>
       {!currentUrl ? <Slash size={size} /> : <img alt="" src={currentUrl} onError={onError} />}
     </TokenLogoWrapper>
   )