feat(v3-uplift): restyle modal close button & align Bridge GHO header button

- BasicModal: close button gets a real hover fill (same alpha/opacity as
  text-variant buttons) instead of a no-op transparent hover; icon bumped to
  30px in a rounded-square hit area, with an adjusted inset
- BridgeModalContent: "Transactions" header button now matches the governance
  header button format (outlined, small, ArrowUpRightIcon) instead of the
  old heroicons ExternalLinkIcon + custom sizing

Author: abjt14

src/components/primitives/BasicModal.tsx

@@ -1,4 +1,4 @@
-import { Box, IconButton, Modal, Paper } from '@mui/material';
+import { alpha, Box, IconButton, Modal, Paper } from '@mui/material';
 import React from 'react';
 
 import { CloseIcon } from '../icons/CloseIcon';
@@ -74,19 +74,22 @@ export const BasicModal = ({
         {children}
 
         {withCloseButton && (
-          <Box sx={{ position: 'absolute', top: '24px', right: '50px', zIndex: 5 }}>
+          <Box sx={{ position: 'absolute', top: '23.5px', right: '54px', zIndex: 5 }}>
             <IconButton
               sx={{
-                borderRadius: '50%',
+                borderRadius: '0.375rem',
                 p: 0,
                 minWidth: 0,
                 position: 'absolute',
-                '&:hover': { backgroundColor: 'transparent' },
+                '&:hover': {
+                  backgroundColor: (theme) =>
+                    alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+                },
               }}
               onClick={handleClose}
               data-cy={'close-button'}
             >
-              <CloseIcon data-cy={'CloseModalIcon'} sx={{ fontSize: '24px', color: 'fg-3' }} />
+              <CloseIcon data-cy={'CloseModalIcon'} sx={{ fontSize: '30px', color: 'fg-3' }} />
             </IconButton>
           </Box>
         )}

src/components/transactions/Bridge/BridgeModalContent.tsx

@@ -1,5 +1,5 @@
 import { ChainId } from '@aave/contract-helpers';
-import { ExternalLinkIcon, SwitchVerticalIcon } from '@heroicons/react/outline';
+import { SwitchVerticalIcon } from '@heroicons/react/outline';
 import { Trans } from '@lingui/macro';
 import {
   Box,
@@ -15,6 +15,7 @@ import { BigNumber } from 'bignumber.js';
 import { constants } from 'ethers';
 import { formatUnits } from 'ethers/lib/utils';
 import React, { useEffect, useState } from 'react';
+import { ArrowUpRightIcon } from 'src/components/icons/ArrowUpRightIcon';
 import { Link } from 'src/components/primitives/Link';
 import { Row } from 'src/components/primitives/Row';
 import { Warning } from 'src/components/primitives/Warning';
@@ -341,28 +342,18 @@ export const BridgeModalContent = () => {
           <Trans>Bridge GHO</Trans>
         </Typography>
         {user && (
-          <Box
-            sx={{
-              right: '0px',
-            }}
+          <Button
+            component={Link}
+            href={`https://ccip.chain.link/address/${user}`}
+            target="_blank"
+            rel="noopener"
+            variant="outlined"
+            size="small"
+            endIcon={<ArrowUpRightIcon sx={{ color: 'fgp-3' }} />}
+            sx={{ minWidth: 'unset', mr: 9 }}
           >
-            <Button
-              component={Link}
-              href={`https://ccip.chain.link/address/${user}`}
-              target="_blank"
-              rel="noopener"
-              sx={{ mr: 8 }}
-              variant="outlined"
-              size="small"
-              endIcon={
-                <SvgIcon sx={{ width: 14, height: 14 }}>
-                  <ExternalLinkIcon />
-                </SvgIcon>
-              }
-            >
-              <Trans>Transactions</Trans>
-            </Button>
-          </Box>
+            <Trans>Transactions</Trans>
+          </Button>
         )}
       </Box>