From 07a6f54eb657e92193fb039ea480f4c1ee2319c3 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:06:18 +0000
Subject: [PATCH] feat: style TWAP warning banner

---
 .../SetupFallbackHandlerWarning/index.tsx     | 67 +++++++++++++++----
 .../src/pages/AdvancedOrders/index.tsx        |  5 +-
 2 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx b/apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx
index ed6b5f25a3..7fd33c9632 100644
--- a/apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx
+++ b/apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx
@@ -2,7 +2,7 @@ import { useSetAtom } from 'jotai/index'
 import { useEffect, useState } from 'react'
 
 import { usePrevious } from '@cowprotocol/common-hooks'
-import { ButtonPrimary, InlineBanner, Loader } from '@cowprotocol/ui'
+import { ButtonPrimary, InlineBanner, Loader, BannerOrientation, UI } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import styled from 'styled-components/macro'
@@ -15,13 +15,47 @@ import { verifyExtensibleFallback } from '../../services/verifyExtensibleFallbac
 import { updateFallbackHandlerVerificationAtom } from '../../state/fallbackHandlerVerificationAtom'
 
 const Banner = styled(InlineBanner)`
-  margin-bottom: 20px;
+  /* TODO: Make all these part of the InlineBanner props */
+  position: relative;
+  font-size: 15px;
+
+  > span {
+    gap: 20px;
+  }
+
+  > span > span {
+    gap: 20px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(${UI.COLOR_PAPER});
+    z-index: -1;
+    border-radius: inherit;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: inherit;
+    z-index: -1;
+    border-radius: inherit;
+  }
 `
 
 const ActionButton = styled(ButtonPrimary)`
   display: inline-block;
-  width: auto;
-  font-size: 15px;
+  width: 100%;
+  font-size: 16px;
   padding: 16px 24px;
   min-height: auto;
 `
@@ -58,14 +92,23 @@ export function SetupFallbackHandlerWarning() {
   }, [txWasMined, account, extensibleFallbackContext, updateFallbackHandlerVerification])
 
   return (
-    <Banner bannerType="danger">
-      <p>
-        Your Safe fallback handler was changed after TWAP orders ware placed. All open TWAP orders are not getting
-        created because of that. Please, update the fallback handler in order to make the orders work again.
-      </p>
-      <ActionButton disabled={isTransactionPending} onClick={handleUpdateClick}>
-        {isTransactionPending ? <Loader /> : 'Update fallback handler'}
-      </ActionButton>
+    <Banner
+      bannerType="danger"
+      backDropBlur
+      orientation={BannerOrientation.Horizontal}
+      iconSize={46}
+      noWrapContent
+      padding="20px"
+    >
+      <span>
+        <p>
+          Your Safe fallback handler was changed after TWAP orders ware placed. All open TWAP orders are not getting
+          created because of that. Please, update the fallback handler in order to make the orders work again.
+        </p>
+        <ActionButton disabled={isTransactionPending} onClick={handleUpdateClick}>
+          {isTransactionPending ? <Loader /> : 'Update fallback handler'}
+        </ActionButton>
+      </span>
     </Banner>
   )
 }
diff --git a/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx b/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx
index 115e7250d7..8c5693c81a 100644
--- a/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx
+++ b/apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx
@@ -44,6 +44,7 @@ export default function AdvancedOrdersPage() {
       <SetupAdvancedOrderAmountsFromUrlUpdater />
       <styledEl.PageWrapper isUnlocked={isUnlocked}>
         <styledEl.PrimaryWrapper>
+          {isFallbackHandlerRequired && allEmulatedOrders.length > 0 && <SetupFallbackHandlerWarning />}
           <AdvancedOrdersWidget
             updaters={<TwapUpdaters />}
             confirmContent={<TwapConfirmModal />}
@@ -65,9 +66,7 @@ export default function AdvancedOrdersPage() {
               displayOrdersOnlyForSafeApp={true}
               orderType={TabOrderTypes.ADVANCED}
               orders={allEmulatedOrders}
-            >
-              {isFallbackHandlerRequired && allEmulatedOrders.length > 0 && <SetupFallbackHandlerWarning />}
-            </OrdersTableWidget>
+            />
           )}
         </styledEl.SecondaryWrapper>
       </styledEl.PageWrapper>