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 1/2] 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>

From 6149fa651d3650c91b149a2a5396d2646640b72f Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:52:58 +0000
Subject: [PATCH 2/2] feat: fix typo and change orientation of banner

---
 .../twap/containers/SetupFallbackHandlerWarning/index.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 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 7fd33c9632..0fc5e28758 100644
--- a/apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx
+++ b/apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx
@@ -95,14 +95,14 @@ export function SetupFallbackHandlerWarning() {
     <Banner
       bannerType="danger"
       backDropBlur
-      orientation={BannerOrientation.Horizontal}
+      orientation={BannerOrientation.Vertical}
       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
+          Your Safe fallback handler was changed after TWAP orders were 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}>