From afb91a2a0c645f31be739bf9f38b76ab1ab585f0 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 19 Dec 2024 17:49:12 +0100
Subject: [PATCH 1/2] fast withdrawal icon

---
 .../public/images/LightningIcon.svg           |  3 +++
 .../TransferPanel/TransferPanelSummary.tsx    | 22 +++++++++++++------
 2 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/public/images/LightningIcon.svg

diff --git a/packages/arb-token-bridge-ui/public/images/LightningIcon.svg b/packages/arb-token-bridge-ui/public/images/LightningIcon.svg
new file mode 100644
index 0000000000..b3b74ca881
--- /dev/null
+++ b/packages/arb-token-bridge-ui/public/images/LightningIcon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1901 5.33453C13.1145 5.16328 12.9451 5.05328 12.7576 5.05328H9.42318L11.2264 1.93008C11.3108 1.78382 11.3108 1.60382 11.2264 1.45696C11.142 1.3107 10.9858 1.2207 10.817 1.2207H7.12394C6.9552 1.2207 6.79957 1.3107 6.71457 1.45633L2.83324 8.15446C2.74824 8.30072 2.74824 8.48134 2.83261 8.62758C2.91699 8.77384 3.07324 8.86446 3.24261 8.86446H6.23635L4.35955 14.1463C4.28392 14.3588 4.36892 14.5951 4.56267 14.7107C4.63829 14.7557 4.72204 14.7776 4.80517 14.7776C4.93517 14.7776 5.06329 14.7238 5.1558 14.622L13.1077 5.84328C13.2333 5.70454 13.2652 5.50516 13.1895 5.33391L13.1901 5.33453ZM6.04316 12.2345L7.3519 8.55026C7.40315 8.40526 7.38128 8.24464 7.29253 8.11901C7.20378 7.99338 7.06002 7.91901 6.90628 7.91901H4.06308L7.39614 2.16714H9.99801L8.19481 5.29034C8.11044 5.4366 8.11044 5.6166 8.19481 5.76346C8.27918 5.90972 8.43544 5.99972 8.60418 5.99972H11.6911L6.04298 12.2354L6.04316 12.2345Z" fill="#FFD000"/>
+</svg>
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
index 53015bc306..5298320e37 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
+import Image from 'next/image'
 
 import { formatAmount } from '../../util/NumberUtils'
 import { getNetworkName, isNetwork } from '../../util/networks'
@@ -20,6 +21,7 @@ import { NoteBox } from '../common/NoteBox'
 import { DISABLED_CHAIN_IDS } from './useTransferReadiness'
 import { useIsBatchTransferSupported } from '../../hooks/TransferPanel/useIsBatchTransferSupported'
 import { getConfirmationTime } from '../../util/WithdrawalUtils'
+import LightningIcon from '@/images/LightningIcon.svg'
 
 export type TransferPanelSummaryToken = {
   symbol: string
@@ -292,13 +294,19 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
           {confirmationTimeInReadableFormatShort}
         </span>
         {fastWithdrawalActive && (
-          <Tooltip
-            content={
-              'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
-            }
-          >
-            <InformationCircleIcon className="ml-1 h-3 w-3" />
-          </Tooltip>
+          <div className="flex items-center">
+            <Tooltip
+              content={
+                'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
+              }
+            >
+              <InformationCircleIcon className="ml-1 h-3 w-3" />
+            </Tooltip>
+            <div className="ml-1 flex space-x-0.5 text-[#FFD000]">
+              <Image src={LightningIcon} alt="Lightning Icon" />
+              <span className="font-normal">FAST</span>
+            </div>
+          </div>
         )}
       </span>
     </>

From a5d0cb86c5546118e54ffec124a49ee84d67e474 Mon Sep 17 00:00:00 2001
From: Bartek <bartlomiejkramek@outlook.com>
Date: Thu, 19 Dec 2024 18:27:37 +0100
Subject: [PATCH 2/2] fix mobile

---
 .../src/components/TransferPanel/TransferPanelSummary.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
index 5298320e37..3761043fd8 100644
--- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
+++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx
@@ -286,7 +286,7 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
   return (
     <>
       <span className="whitespace-nowrap">Confirmation time:</span>
-      <span className="flex items-center font-medium">
+      <span className="flex flex-col items-start font-medium sm:flex-row sm:items-center">
         <span className="hidden sm:inline">
           {confirmationTimeInReadableFormat}
         </span>
@@ -300,7 +300,7 @@ function ConfirmationTimeInfo({ chainId }: { chainId: number }) {
                 'Fast Withdrawals relies on a committee of validators. In the event of a committee outage, your withdrawal falls back to the 7 day challenge period secured by Arbitrum Fraud Proofs.'
               }
             >
-              <InformationCircleIcon className="ml-1 h-3 w-3" />
+              <InformationCircleIcon className="h-3 w-3 sm:ml-1" />
             </Tooltip>
             <div className="ml-1 flex space-x-0.5 text-[#FFD000]">
               <Image src={LightningIcon} alt="Lightning Icon" />