Merge pull request #2482 from cowprotocol/release/1.37.0

Release 1.37.0 banner style

src/cow-react/common/pure/WarningBanner/banners.tsx → src/cow-react/common/pure/InlineBanner/banners.tsx

@@ -1,13 +1,12 @@
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
-import Important from 'assets/cow-swap/important.svg'
-import { WarningBanner } from '@cow/common/pure/WarningBanner'
+import { InlineBanner } from '@cow/common/pure/InlineBanner'
 import { TokenAmount } from '@cow/common/pure/TokenAmount'
 import { Nullish } from '@cow/types'
 
 export function BundleTxApprovalBanner() {
   return (
-    <WarningBanner
-      icon={Important}
+    <InlineBanner
+      type={'information'}
       content={
         <>
           <strong>Token approval</strong>: For your convenience, token approval and order placement will be bundled into
@@ -25,7 +24,7 @@ export type SmallVolumeWarningBannerProps = {
 
 export function SmallVolumeWarningBanner({ feePercentage, feeAmount }: SmallVolumeWarningBannerProps) {
   return (
-    <WarningBanner
+    <InlineBanner
       content={
         <>
           Small orders are unlikely to be executed. For this order, network fees would be{' '}

src/cow-react/common/pure/InlineBanner/index.tsx

@@ -0,0 +1,76 @@
+import { ReactNode } from 'react'
+import styled, { useTheme } from 'styled-components/macro' // import useTheme
+import { lighten, darken, transparentize } from 'polished'
+import SVG from 'react-inlinesvg'
+import iconAlert from '@src/assets/cow-swap/alert.svg'
+import iconInformation from '@src/assets/cow-swap/alert-circle.svg'
+import iconSuccess from '@src/assets/cow-swap/check.svg'
+import iconDanger from '@src/assets/cow-swap/alert.svg'
+
+type BannerType = 'alert' | 'information' | 'success' | 'danger'
+
+interface BannerConfig {
+  icon: string
+  colorKey: BannerType
+}
+
+const BANNER_CONFIG: Record<BannerType, BannerConfig> = {
+  alert: {
+    icon: iconAlert,
+    colorKey: 'alert',
+  },
+  information: {
+    icon: iconInformation,
+    colorKey: 'information',
+  },
+  success: {
+    icon: iconSuccess,
+    colorKey: 'success',
+  },
+  danger: {
+    icon: iconDanger,
+    colorKey: 'danger',
+  },
+}
+
+const Wrapper = styled.span<{ color: string }>`
+  display: flex;
+  align-items: center;
+  background: ${({ theme, color }) => (theme.darkMode ? transparentize(0.9, color) : transparentize(0.85, color))};
+  color: ${({ theme, color }) => (theme.darkMode ? lighten(0.2, color) : darken(0.15, color))};
+  gap: 10px;
+  border-radius: 10px;
+  margin: 8px auto 0;
+  padding: 16px 12px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+
+  > svg {
+    display: block;
+    width: 75px;
+  }
+
+  > svg > path {
+    fill: ${({ color }) => color};
+  }
+`
+
+export type InlineBannerProps = {
+  content: ReactNode
+  className?: string
+  type?: BannerType
+}
+
+export function InlineBanner({ content, className, type = 'alert' }: InlineBannerProps) {
+  const theme = useTheme()
+  const config = BANNER_CONFIG[type]
+  const color = theme[config.colorKey]
+
+  return (
+    <Wrapper className={className} color={color}>
+      <SVG src={config.icon} description={type} />
+      <span>{content}</span>
+    </Wrapper>
+  )
+}

src/cow-react/modules/limitOrders/containers/LimitOrdersWarnings/index.tsx

@@ -20,7 +20,7 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { calculatePercentageInRelationToReference } from '@cow/modules/limitOrders/utils/calculatePercentageInRelationToReference'
 import { Nullish } from '@cow/types'
 import { HIGH_FEE_WARNING_PERCENTAGE } from '@cow/modules/limitOrders/pure/Orders/OrderRow/EstimatedExecutionPrice'
-import { BundleTxApprovalBanner, SmallVolumeWarningBanner } from '@cow/common/pure/WarningBanner/banners'
+import { BundleTxApprovalBanner, SmallVolumeWarningBanner } from '@cow/common/pure/InlineBanner/banners'
 
 const FORM_STATES_TO_SHOW_BUNDLE_BANNER = [
   LimitOrdersFormState.ExpertApproveAndSwap,

src/cow-react/modules/swap/pure/warnings.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 import { genericPropsChecker } from '@cow/utils/genericPropsChecker'
 import { NoImpactWarning } from '@cow/modules/trade/pure/NoImpactWarning'
 import styled from 'styled-components/macro'
-import { BundleTxApprovalBanner } from '@cow/common/pure/WarningBanner/banners'
+import { BundleTxApprovalBanner } from '@cow/common/pure/InlineBanner/banners'
 
 export interface SwapWarningsTopProps {
   trade: TradeGp | undefined

src/theme/baseTheme.tsx

@@ -35,6 +35,7 @@ export function colors(darkMode: boolean): Colors {
     danger: darkMode ? '#EB3030' : '#D41300',
     warning: darkMode ? '#ED6237' : '#D94719',
     alert: darkMode ? '#DB971E' : '#DB971E',
+    information: darkMode ? '#428dff' : '#0d5ed9',
     success: darkMode ? '#00D897' : '#007B28',
     pending: '#43758C', // deprecate
     attention: '#ff5722', // deprecate

src/theme/styled.d.ts

@@ -86,6 +86,7 @@ export interface Colors extends ColorsUniswap {
   tableHeadBG: Color
   tableRowBG: Color
   info: Color
+  information: Color
   warning: Color
   alert: Color
   danger: Color