diff --git a/apps/bridge/pages/transactions.tsx b/apps/bridge/pages/transactions.tsx index fc1e6205b0..a15889064a 100644 --- a/apps/bridge/pages/transactions.tsx +++ b/apps/bridge/pages/transactions.tsx @@ -1,5 +1,6 @@ import { memo, useMemo, useState } from 'react'; import { AccountContainer } from 'apps/bridge/src/components/AccountContainer/AccountContainer'; +import { WarningBanner } from 'apps/bridge/src/components/WarningBanner/WarningBanner'; import { FaqSidebar } from 'apps/bridge/src/components/Faq/FaqSidebar'; import { Table } from 'apps/bridge/src/components/system/layout/Table/Table'; import { DepositRow } from 'apps/bridge/src/components/Transactions/DepositRow/DepositRow'; @@ -162,6 +163,7 @@ export default memo(function Transactions() { Base + <>
{content}
diff --git a/apps/bridge/src/components/WarningBanner/WarningBanner.tsx b/apps/bridge/src/components/WarningBanner/WarningBanner.tsx new file mode 100644 index 0000000000..876d747395 --- /dev/null +++ b/apps/bridge/src/components/WarningBanner/WarningBanner.tsx @@ -0,0 +1,16 @@ +import Image from 'next/image'; + +type BannerContainerProps = { + content: string; +}; + +export function WarningBanner({ content }: BannerContainerProps) { + return ( +
+
+ tooltip + {content} +
+
+ ); +} diff --git a/apps/bridge/tailwind.config.js b/apps/bridge/tailwind.config.js index 3a2bfc18fc..1de09d82c1 100644 --- a/apps/bridge/tailwind.config.js +++ b/apps/bridge/tailwind.config.js @@ -20,6 +20,7 @@ module.exports = { 'cds-background-green-60': 'rgba(39, 173, 117, 1)', 'cds-background-red-60': 'rgba(240, 97, 109, 1)', 'cds-background-wash': 'rgba(0, 16, 51, 1)', + 'warning-banner-red': 'rgba(47, 5, 5, 1)', gray: '#1E2025', modal: '#464B55', },