feat(wallet): NFT Pinning design updates (uplift 1.51.x) (#17904)

feat(wallet): NFT Pinning design updates (#17557)

* NFT Pinning design updates

Use media queries

* Update components/brave_wallet_ui/components/desktop/nft-ipfs-banner/nft-ipfs-banner.style.ts



* Remove getSuccessBackground && getSuccessBackground, use css variables

---------

Co-authored-by: Douglas Daniel <[email protected]>

components/brave_wallet/browser/brave_wallet_constants.h

@@ -1135,8 +1135,6 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_NFT_PINNING_BENEFITS_ONE},
     {"braveWalletNftPinningBenefitTwo",
      IDS_BRAVE_WALLET_NFT_PINNING_BENEFITS_TWO},
-    {"braveWalletNftPinningBenefitThree",
-     IDS_BRAVE_WALLET_NFT_PINNING_BENEFITS_THREE},
     {"braveWalletNftPinningPinNftsButton",
      IDS_BRAVE_WALLET_NFT_PINNING_PIN_NFT_BUTTON},
     {"braveWalletNftPinningRunNodeButton",
@@ -1174,6 +1172,14 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_NFT_PINNING_STATUS_PINNING},
     {"braveWalletNftPinningStatusPinningFailed",
      IDS_BRAVE_WALLET_NFT_PINNING_STATUS_PINNING_FAILED},
+    {"braveWalletNftPinningErrorTooltipHeading",
+     IDS_BRAVE_WALLET_NFT_PINNING_STATUS_PINNING_TOOLTIP_HEADING},
+    {"braveWalletNftPinningErrorTooltipReasonOne",
+     IDS_BRAVE_WALLET_NFT_PINNING_STATUS_PINNING_TOOLTIP_REASON_ONE},
+    {"braveWalletNftPinningErrorTooltipReasonTwo",
+     IDS_BRAVE_WALLET_NFT_PINNING_STATUS_PINNING_TOOLTIP_REASON_TWO},
+    {"braveWalletNftPinningErrorTooltipReasonThree",
+     IDS_BRAVE_WALLET_NFT_PINNING_STATUS_PINNING_TOOLTIP_REASON_THREE},
     {"braveNftsTabImportNft", IDS_BRAVE_WALLET_NFTS_TAB_IMPORT_NFT},
     {"braveNftsTabEmptyStateHeading",
      IDS_BRAVE_WALLET_NFTS_TAB_EMPTY_STATE_HEADING},

components/brave_wallet_ui/components/desktop/inspect-nfts/components/info-tooltip/info-tooltip.style.ts

@@ -13,23 +13,22 @@ export const StyledWrapper = styled.div`
   z-index: 3;
   background-color: #1e2029;
   width: 238px;
-  height: 125px;
   border-radius: 6px;
-  top: 32px;
+  top: 25px;
   right: -76px;
 `
 
 export const TooltipContent = styled.div`
   position: relative;
-  padding: 8px 16px 16px;
+  padding: 24px;
   width: 100%;
   height: 100%;
 `
 
 export const TooltipText = styled.p`
   font-family: 'Poppins';
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   font-size: 13px;
   line-height: 20px;
   letter-spacing: 0.01em;

components/brave_wallet_ui/components/desktop/inspect-nfts/components/nft-list/nft-list.styles.ts

@@ -16,10 +16,9 @@ export const NftListWrapper = styled.div`
 export const List = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-gap: 22.5px;
+  grid-gap:16px;
   box-sizing: border-box;
   width: 100%;
-  padding-top: 16px;
 `
 export const NftItem = styled.div`
   position: relative;

components/brave_wallet_ui/components/desktop/inspect-nfts/inspect-nfts.tsx

@@ -109,7 +109,6 @@ export const InspectNftsScreen = ({ onClose }: Props) => {
           <BenefitsList>
             <li>{getLocale('braveWalletNftPinningBenefitOne')}</li>
             <li>{getLocale('braveWalletNftPinningBenefitTwo')}</li>
-            <li>{getLocale('braveWalletNftPinningBenefitThree')}</li>
           </BenefitsList>
         </Column>
         <Row gap='16px' alignItems='center' justifyContent='center'>

components/brave_wallet_ui/components/desktop/inspect-nfts/inspects-nfts.styles.ts

@@ -125,6 +125,7 @@ export const SubDivider = styled.div`
   width: 100%;
   height: 1px;
   background-color: rgba(233, 233, 244, 0.3);
+  margin-top: 13px;
 `
 
 export const PinnedNftIllustration = styled.img`

components/brave_wallet_ui/components/desktop/local-ipfs-node/local-ipfs-node.tsx

@@ -105,7 +105,6 @@ export const LocalIpfsNodeScreen = (props: Props) => {
             <BenefitsList>
               <li>{getLocale('braveWalletNftPinningBenefitOne')}</li>
               <li>{getLocale('braveWalletNftPinningBenefitTwo')}</li>
-              <li>{getLocale('braveWalletNftPinningBenefitThree')}</li>
             </BenefitsList>
           </RightWrapper>
         </Section>

components/brave_wallet_ui/components/desktop/nft-ipfs-banner/nft-ipfs-banner.style.ts

@@ -10,27 +10,29 @@ import BannerBackground from '../../../assets/svg-icons/nft-ipfs/banner-backgrou
 
 import { BannerStatus } from './nft-ipfs-banner'
 
-const getSuccessBackground = () => {
-  return window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? '#CBF1D2'
-    : '#EEFBF0'
-}
-
 export const StyledWrapper = styled.div<{ status: BannerStatus }>`
   display: flex;
   flex-direction: row;
   align-items: center;
   width: 100%;
   justify-content: flex-start;
+  --success-background: #E8F9EB;
+  --uploading-background: #F0F7FC;
+  @media (prefers-color-scheme: dark) {
+      --success-background: #15371B;
+      --uploading-background: #063256;
+  }
   background: ${(p) =>
     p.status === 'start'
-      ? `url(${BannerBackground}) right 80px center/contain no-repeat, linear-gradient(110.74deg, #242464 -10.97%, #000027 173.98%)`
+      ? `url(${BannerBackground}) right 80px center/contain no-repeat, #1A1C3B`
       : p.status === 'uploading'
-      ? '#F0F7FC'
-      : getSuccessBackground()};
+      ? 'var(--uploading-background)'
+      : 'var(--success-background)'};
   border-radius: 8px;
-  padding: 10px 25px;
   border-width: 0;
+  height: 67px;
+  padding-left: 18px;
+  padding-right: 18px;
 `
 
 export const Text = styled.p<{ status: BannerStatus }>`
@@ -40,7 +42,11 @@ export const Text = styled.p<{ status: BannerStatus }>`
   font-size: 14px;
   line-height: 20px;
   align-items: center;
-  color: ${(p) => (p.status === 'start' ? p.theme.palette.white : '#1D1F25')};
+  --text-color: #1D1F25;
+  @media (prefers-color-scheme: dark) {
+    --text-color: #ECEFF2;
+  }
+  color: ${(p) => p.status === 'start' ? p.theme.palette.white : 'var(--text-color)'};
   padding: 0;
   margin: 0;
   max-width: 70%;
@@ -57,24 +63,27 @@ export const LearnMore = styled(WalletButton)`
   cursor: pointer;
   font-family: 'Poppins';
   font-style: normal;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  color: ${(p) => p.theme.palette.white};
+  color: #AAA8F7; /* Leo theme value: Dark/Text/Interactive */
   outline: none;
   border: none;
   background: transparent;
+  margin-left: auto;
 `
 
-export const CloseButton = styled(WalletButton)<{ status: BannerStatus }>`
+export const CloseButton = styled(WalletButton)`
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   width: 20px;
   height: 20px;
-  background-color: ${(p) =>
-    p.status === 'success' ? '#6B7084' : p.theme.palette.white};
+  background-color: #6B7084;
+  @media (prefers-color-scheme: dark) {
+    background-color: #8C90A1; /* Leo theme value: Icon/Default */
+  }
   -webkit-mask-image: url(${CloseIcon});
   mask-image: url(${CloseIcon});
   outline: none;

components/brave_wallet_ui/components/desktop/nft-ipfs-banner/nft-ipfs-banner.tsx

@@ -65,17 +65,14 @@ export const NftIpfsBanner = ({ onDismiss }: Props) => {
     <StyledWrapper status={bannerStatus}>
       <Row gap='12px' justifyContent='flex-start'>
         <NftPinningStatusAnimation
-          size='30px'
+          size='14px'
           status={status}
           isAutopinEnabled={isAutoPinEnabled}
         />
         <Text status={bannerStatus}>
           {bannerStatus === 'start' ? (
             <>
-              {getLocale('braveWalletNftPinningBannerStart')}&nbsp;
-              <LearnMore onClick={onLearnMore}>
-                {getLocale('braveWalletNftPinningBannerLearnMore')}
-              </LearnMore>
+              {getLocale('braveWalletNftPinningBannerStart')}
             </>
           ) : bannerStatus === 'success' ? (
             `${getLocale('braveWalletNftPinningBannerSuccess')
@@ -84,9 +81,14 @@ export const NftIpfsBanner = ({ onDismiss }: Props) => {
             `${getLocale('braveWalletNftPinningBannerUploading')}`
           )}
         </Text>
+        {bannerStatus === 'start' &&
+          <LearnMore onClick={onLearnMore}>
+            {getLocale('braveWalletNftPinningBannerLearnMore')}
+          </LearnMore>
+        }
       </Row>
-      {(bannerStatus === 'start' || bannerStatus === 'success') && (
-        <CloseButton onClick={onDismiss} status={bannerStatus} />
+      {(bannerStatus === 'success') && (
+        <CloseButton onClick={onDismiss} />
       )}
     </StyledWrapper>
   )

components/brave_wallet_ui/components/desktop/nft-pinning-status-animation/nft-pinning-status-animation.style.ts

@@ -4,8 +4,8 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 import styled from 'styled-components'
 
-import IpfsIcon from '../../../assets/svg-icons/nft-ipfs/ipfs.svg'
-import IpfsSuccessIcon from '../../../assets/svg-icons/nft-ipfs/ipfs-success.svg'
+import IpfsIcon from '../../../assets/svg-icons/nft-ipfs/ipfs-small.svg'
+import IpfsUploadingIcon from '../../../assets/svg-icons/nft-ipfs/ipfs-uploading.svg'
 
 export const StyledWrapper = styled.div<{ size: string }>`
   display: flex;
@@ -15,28 +15,27 @@ export const StyledWrapper = styled.div<{ size: string }>`
   height: ${p => p.size};
 `
 
-export const GifWrapper = styled.div<{ size?: string }>`
+export const GifWrapper = styled.div`
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
-  width: ${p => p.size};
-  height: ${p => p.size};
+  width: 30px;
+  height: 30px;
 `
 
 export const StatusGif = styled.img`
   width: 100%;
   height: 100%;
-  z-index: 0;
-  mix-blend-mode: multiply; /* make gif background blend with parent background */
+  z-index: 1;
 `
 
 const BannerLeftIcon = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: 14px;
+  height: 14px;
   background-color: ${(p) => p.theme.palette.white};
 `
 
@@ -49,11 +48,13 @@ export const Ipfs = styled(BannerLeftIcon)<{ size?: string }>`
 `
 
 export const IpfsUploading = styled(BannerLeftIcon)`
-  background-image: url(${IpfsSuccessIcon});
+  background-image: url(${IpfsUploadingIcon});
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 0;
   background-color: transparent;
-  z-index: 0;
   position: absolute;
+  width: 23px;
+  height: 23px;
+  z-index: 2;
 `

components/brave_wallet_ui/components/desktop/nft-pinning-status-animation/nft-pinning-status-animation.tsx

@@ -13,8 +13,10 @@ import { useNftPin } from '../../../common/hooks/nft-pin'
 
 // styles
 import { GifWrapper, Ipfs, IpfsUploading, StatusGif, StyledWrapper } from './nft-pinning-status-animation.style'
-import UploadingGif from '../../../assets/svg-icons/nft-ipfs/uploading.gif'
-import SuccessGif from '../../../assets/svg-icons/nft-ipfs/success.gif'
+import UploadingDarkGif from '../../../assets/svg-icons/nft-ipfs/uploading-dark.gif'
+import UploadingLightGif from '../../../assets/svg-icons/nft-ipfs/uploading-light.gif'
+import SuccessDarkGif from '../../../assets/svg-icons/nft-ipfs/success-dark.gif'
+import SuccessLightGif from '../../../assets/svg-icons/nft-ipfs/success-light.gif'
 
 interface Props {
   size: string | undefined
@@ -27,18 +29,36 @@ export const NftPinningStatusAnimation = ({ size, status, isAutopinEnabled }: Pr
   const { pinnableNftsCount } = useNftPin()
 
   return (
-    <StyledWrapper size={size || '30px'}>
-      {(!isAutopinEnabled || pinnableNftsCount === 0) ? (
+    <StyledWrapper
+      size={
+        status === STATUS_PINNING_IN_PROGRESS || status === STATUS_PINNED
+          ? '30px'
+          : size || '14px'
+      }
+    >
+      {!isAutopinEnabled || pinnableNftsCount === 0 ? (
         <Ipfs size={size} />
       ) : status === STATUS_PINNING_IN_PROGRESS ? (
         <GifWrapper>
-          <StatusGif src={UploadingGif} />
+          <StatusGif
+            src={
+              window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? UploadingDarkGif
+                : UploadingLightGif
+            }
+          />
           <IpfsUploading />
         </GifWrapper>
       ) : (
         status === STATUS_PINNED && (
           <GifWrapper>
-            <StatusGif src={SuccessGif} />
+            <StatusGif
+              src={
+                window.matchMedia('(prefers-color-scheme: dark)').matches
+                  ? SuccessDarkGif
+                  : SuccessLightGif
+              }
+            />
           </GifWrapper>
         )
       )}