fix: style on transaction modal (#5427)

src/nft/components/collection/TransactionCompleteModal.css.ts

@@ -16,8 +16,9 @@ export const modalContainer = style([
     paddingX: '12',
   }),
   {
-    alignItems: 'center',
+    flexDirection: 'column',
     justifyContent: 'center',
+    gap: '24px',
     '@media': {
       'screen and (min-width: 656px)': {
         marginLeft: '-320px',
@@ -142,7 +143,7 @@ export const successAssetsContainer = style([
 
 export const successAssetImage = style([
   sprinkles({
-    borderRadius: '20',
+    borderRadius: '12',
     flexShrink: '0',
   }),
   {
@@ -171,7 +172,7 @@ export const overflowFade = style({
 export const totalEthCost = style([
   sprinkles({
     fontSize: '14',
-    color: 'textPrimary',
+    color: 'textSecondary',
     marginTop: '1',
     marginBottom: '0',
   }),

src/nft/components/collection/TransactionCompleteModal.tsx

@@ -17,7 +17,6 @@ import {
   formatUSDPriceWithCommas,
   getSuccessfulImageSize,
   parseTransactionResponse,
-  shortenTxHash,
 } from 'nft/utils'
 import { formatAssetEventProperties } from 'nft/utils/formatEventProperties'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -138,8 +137,8 @@ const TxCompleteModal = () => {
                       <Box>{formatEthPrice(totalPurchaseValue.toString())} ETH</Box>
                     </Row>
                     <a href={txHashUrl} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
-                      <Box color="textPrimary" fontWeight="normal">
-                        {shortenTxHash(txHash, 2, 2)}
+                      <Box color="textSecondary" fontWeight="normal">
+                        View on Etherscan
                       </Box>
                     </a>
                   </Box>
@@ -203,8 +202,13 @@ const TxCompleteModal = () => {
                           width={{ sm: 'half', md: 'auto' }}
                         >
                           <a href={txHashUrl} target="_blank" rel="noreferrer" style={{ textDecoration: 'none' }}>
-                            <Box fontWeight="normal" marginTop="16" className={styles.totalEthCost}>
-                              {shortenTxHash(txHash, 2, 2)}
+                            <Box
+                              fontWeight="normal"
+                              marginTop="16"
+                              color="textSecondary"
+                              className={styles.totalEthCost}
+                            >
+                              View on Etherscan
                             </Box>
                           </a>
                         </Box>
@@ -315,7 +319,7 @@ const TxCompleteModal = () => {
                     <p className={styles.totalUsdRefund}>{formatUSDPriceWithCommas(totalUSDRefund)}</p>
                     <Box className={styles.walletAddress} marginLeft="auto" marginRight="0">
                       <a href={txHashUrl} target="_blank" rel="noreferrer">
-                        <Box className={styles.addressHash}>{shortenTxHash(txHash, 2, 2)}</Box>
+                        <Box className={styles.addressHash}>View on Etherscan</Box>
                       </a>
                     </Box>
                     <p className={styles.totalEthCost}>

src/nft/css/sprinkles.css.ts

@@ -31,6 +31,8 @@ const themeContractValues = {
     textPrimary: '',
     textSecondary: '',
     textTertiary: '',
+
+    dropShadow: '',
   },
 
   shadows: {
@@ -158,7 +160,6 @@ export const vars = createGlobalTheme(':root', {
     genieBlue: '#4C82FB',
     fallbackGradient: 'linear-gradient(270deg, #D1D5DB 0%, #F6F6F6 100%)',
     loadingBackground: '#24272e',
-    dropShadow: '0px 4px 16px rgba(70, 115, 250, 0.4)',
     cardDropShadow: 'rgba(0, 0, 0, 10%) 0px 4px 12px',
     green: '#209853',
     orange: '#FA2C38',

src/nft/themes/darkTheme.ts

@@ -29,6 +29,8 @@ export const darkTheme: Theme = {
     textPrimary: '#FFFFFF',
     textSecondary: vars.color.gray300,
     textTertiary: vars.color.gray500,
+
+    dropShadow: `0px 4px 16px rgba(76, 130, 251, 0.4)`,
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

src/nft/themes/lightTheme.ts

@@ -29,6 +29,8 @@ export const lightTheme: Theme = {
     textPrimary: vars.color.gray900,
     textSecondary: vars.color.gray500,
     textTertiary: vars.color.gray300,
+
+    dropShadow: `0px 4px 16px rgba(251, 17, 142, 0.4)`,
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',