fix: fix padding for transaction toast notifications (Uniswap#6373)

* padding fixes, special casing for txn

* add drop shadow, change width to 348px, remove debug code

* opacity animation

* address comments

* one more change

* respond to tina comments

* name change

* add $ to padding

src/components/Popups/PopupItem.tsx

@@ -1,38 +1,49 @@
-import { useCallback, useEffect } from 'react'
+import { useEffect } from 'react'
 import { X } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
+import styled, { css, useTheme } from 'styled-components/macro'
 
 import { useRemovePopup } from '../../state/application/hooks'
 import { PopupContent } from '../../state/application/reducer'
 import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
 import TransactionPopup from './TransactionPopup'
 
-const StyledClose = styled(X)`
+const StyledClose = styled(X)<{ $padding: number }>`
   position: absolute;
-  right: 20px;
-  top: 20px;
+  right: ${({ $padding }) => `${$padding}px`};
+  top: ${({ $padding }) => `${$padding}px`};
 
   :hover {
     cursor: pointer;
   }
 `
-const Popup = styled.div`
+const PopupCss = css<{ show: boolean }>`
   display: inline-block;
   width: 100%;
-  padding: 1em;
+  visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
   background-color: ${({ theme }) => theme.backgroundSurface};
   position: relative;
+  border: 1px solid ${({ theme }) => theme.backgroundOutline};
   border-radius: 16px;
-  padding: 20px;
-  padding-right: 35px;
   overflow: hidden;
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  transition: ${({ theme }) => `visibility ${theme.transition.duration.fast} ease-in-out`};
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    min-width: 290px;
-    &:not(:last-of-type) {
-      margin-right: 20px;
-    }
-  `}
+  min-width: 290px;
+  &:not(:last-of-type) {
+    margin-right: 20px;
+  }
+`}
+`
+
+const TransactionPopupContainer = styled.div`
+  ${PopupCss}
+  padding: 2px 0px;
+`
+
+const FailedSwitchNetworkPopupContainer = styled.div<{ show: boolean }>`
+  ${PopupCss}
+  padding: 20px 35px 20px 20px;
 `
 
 export default function PopupItem({
@@ -45,32 +56,34 @@ export default function PopupItem({
   popKey: string
 }) {
   const removePopup = useRemovePopup()
-  const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
+  const theme = useTheme()
+
   useEffect(() => {
     if (removeAfterMs === null) return undefined
 
     const timeout = setTimeout(() => {
-      removeThisPopup()
+      removePopup(popKey)
     }, removeAfterMs)
 
     return () => {
       clearTimeout(timeout)
     }
-  }, [removeAfterMs, removeThisPopup])
+  }, [popKey, removeAfterMs, removePopup])
 
-  const theme = useTheme()
-
-  let popupContent
   if ('txn' in content) {
-    popupContent = <TransactionPopup hash={content.txn.hash} />
+    return (
+      <TransactionPopupContainer show={true}>
+        <StyledClose $padding={16} color={theme.textSecondary} onClick={() => removePopup(popKey)} />
+        <TransactionPopup hash={content.txn.hash} />
+      </TransactionPopupContainer>
+    )
   } else if ('failedSwitchNetwork' in content) {
-    popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
+    return (
+      <FailedSwitchNetworkPopupContainer show={true}>
+        <StyledClose $padding={20} color={theme.textSecondary} onClick={() => removePopup(popKey)} />
+        <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
+      </FailedSwitchNetworkPopupContainer>
+    )
   }
-
-  return popupContent ? (
-    <Popup>
-      <StyledClose color={theme.textSecondary} onClick={removeThisPopup} />
-      {popupContent}
-    </Popup>
-  ) : null
+  return null
 }

src/components/Popups/index.tsx

@@ -41,7 +41,7 @@ const FixedPopupColumn = styled(AutoColumn)<{ extraPadding: boolean; xlPadding:
   position: fixed;
   top: ${({ extraPadding }) => (extraPadding ? '72px' : '64px')};
   right: 1rem;
-  max-width: 376px !important;
+  max-width: 348px !important;
   width: 100%;
   z-index: 3;
 

src/components/WalletModal/index.tsx

@@ -160,7 +160,7 @@ export default function WalletModal({ openSettings }: { openSettings: () => void
         dispatch(updateSelectedWallet({ wallet: connection.type }))
         if (drawerOpenRef.current) toggleWalletDrawer()
       } catch (error) {
-        console.debug(`web3-react connection error: ${error}`)
+        console.debug(`web3-react connection error: ${JSON.stringify(error)}`)
         // TODO(WEB-3162): re-add special treatment for already-pending injected errors
         if (didUserReject(connection, error)) {
           setPendingConnection(undefined)

src/constants/misc.ts

@@ -8,7 +8,7 @@ export const DEFAULT_DEADLINE_FROM_NOW = 60 * 30
 export const L2_DEADLINE_FROM_NOW = 60 * 5
 
 // transaction popup dismisal amounts
-export const DEFAULT_TXN_DISMISS_MS = 25000
+export const DEFAULT_TXN_DISMISS_MS = 10000
 export const L2_TXN_DISMISS_MS = 5000
 
 export const BIG_INT_ZERO = JSBI.BigInt(0)

src/state/application/reducer.test.ts

@@ -29,7 +29,7 @@ describe('application reducer', () => {
       expect(typeof list[0].key).toEqual('string')
       expect(list[0].show).toEqual(true)
       expect(list[0].content).toEqual({ txn: { hash: 'abc' } })
-      expect(list[0].removeAfterMs).toEqual(25000)
+      expect(list[0].removeAfterMs).toEqual(10000)
     })
 
     it('replaces any existing popups with the same key', () => {
@@ -40,7 +40,7 @@ describe('application reducer', () => {
       expect(list[0].key).toEqual('abc')
       expect(list[0].show).toEqual(true)
       expect(list[0].content).toEqual({ txn: { hash: 'def' } })
-      expect(list[0].removeAfterMs).toEqual(25000)
+      expect(list[0].removeAfterMs).toEqual(10000)
     })
   })