From c7a040f13916cec0dbd22ca26218e5de10833992 Mon Sep 17 00:00:00 2001
From: brave-builds <brave-builds+devops@brave.com>
Date: Tue, 14 Jan 2025 17:03:28 +0000
Subject: [PATCH] Uplift of #27202 (squashed) to beta

---
 .../components/home/ads_settings_modal.tsx    | 39 +++++----
 .../components/home/earning_card.style.ts     |  6 ++
 .../components/home/earning_card.tsx          | 79 +++++++++++--------
 .../rewards_page/components/modal.style.ts    |  8 +-
 4 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/components/brave_rewards/resources/rewards_page/components/home/ads_settings_modal.tsx b/components/brave_rewards/resources/rewards_page/components/home/ads_settings_modal.tsx
index 5c53f777ac65..0c27ae2faf9e 100644
--- a/components/brave_rewards/resources/rewards_page/components/home/ads_settings_modal.tsx
+++ b/components/brave_rewards/resources/rewards_page/components/home/ads_settings_modal.tsx
@@ -121,22 +121,31 @@ export function AdsSettingsModal(props: Props) {
         onClose={props.onClose}
       />
       <div {...style}>
-        <p className='description'>
-          {getString('adsSettingsText')}
-          {' '}
-          <NewTabLink href={urls.adsLearnMoreURL}>
-            {getString('learnMoreLink')}
-          </NewTabLink>
-        </p>
+        {
+          externalWallet &&
+            <p className='description'>
+              {getString('adsSettingsText')}
+              {' '}
+              <NewTabLink href={urls.adsLearnMoreURL}>
+                {getString('learnMoreLink')}
+              </NewTabLink>
+            </p>
+        }
         <section className='summary'>
-          <div className='row'>
-            <span>
-              {getString('adsSettingsPayoutDateLabel')}
-            </span>
-            <span className='value'>
-              {payoutDateFormatter.format(new Date(adsInfo.nextPaymentDate))}
-            </span>
-          </div>
+          {
+            externalWallet &&
+              <div className='row'>
+                <span>
+                  {getString('adsSettingsPayoutDateLabel')}
+                </span>
+                <span className='value'>
+                  {
+                    payoutDateFormatter.format(
+                      new Date(adsInfo.nextPaymentDate))
+                  }
+                </span>
+              </div>
+          }
           <div className='row'>
             <span>
               {getString('adsSettingsTotalAdsLabel')}
diff --git a/components/brave_rewards/resources/rewards_page/components/home/earning_card.style.ts b/components/brave_rewards/resources/rewards_page/components/home/earning_card.style.ts
index aad576f64eb6..547d9a39147a 100644
--- a/components/brave_rewards/resources/rewards_page/components/home/earning_card.style.ts
+++ b/components/brave_rewards/resources/rewards_page/components/home/earning_card.style.ts
@@ -101,6 +101,12 @@ export const style = scoped.css`
       gap: 8px;
       padding: 4px 0;
     }
+
+    .unconnected & {
+      margin-top: 12px;
+      padding-top: 8px;
+      border-top: solid 1px ${color.divider.subtle};
+    }
   }
 
   .warning-box {
diff --git a/components/brave_rewards/resources/rewards_page/components/home/earning_card.tsx b/components/brave_rewards/resources/rewards_page/components/home/earning_card.tsx
index c657176fb00e..5725c1833d9e 100644
--- a/components/brave_rewards/resources/rewards_page/components/home/earning_card.tsx
+++ b/components/brave_rewards/resources/rewards_page/components/home/earning_card.tsx
@@ -55,6 +55,19 @@ export function EarningCard() {
     setShowAdsHistoryModal(!showAdsHistoryModal)
   }
 
+  function renderAdsNav() {
+    return (
+      <div className='ads-summary-nav'>
+        <button onClick={toggleAdsHistoryModal}>
+          <Icon name='history' />{getString('adsHistoryButtonLabel')}
+        </button>
+        <button onClick={toggleAdsSettingsModal}>
+          <Icon name='settings' />{getString('adsSettingsButtonLabel')}
+        </button>
+      </div>
+    )
+  }
+
   function renderLimited() {
     return (
       <div className='content-card' {...style}>
@@ -74,22 +87,25 @@ export function EarningCard() {
             }
           </div>
         </div>
-        <section className='connect'>
-          <div className='connect-text'>
-            <div>
-              {getString('connectAccountText')}
-            </div>
-            <div className='connect-subtext'>
-              {getString('connectAccountSubtext')}
+        <section className='unconnected'>
+          <div className='connect'>
+            <div className='connect-text'>
+              <div>
+                {getString('connectAccountText')}
+              </div>
+              <div className='connect-subtext'>
+                {getString('connectAccountSubtext')}
+              </div>
             </div>
+            <Button
+              className='connect-button'
+              size='small'
+              onClick={connectAccount}
+            >
+              {getString('connectButtonLabel')}
+            </Button>
           </div>
-          <Button
-            className='connect-button'
-            size='small'
-            onClick={connectAccount}
-          >
-            {getString('connectButtonLabel')}
-          </Button>
+          {renderAdsNav()}
         </section>
       </div>
     )
@@ -150,35 +166,30 @@ export function EarningCard() {
         {
           showAdDetails && <>
             <AdsSummary />
-            <div className='ads-summary-nav'>
-              <button onClick={toggleAdsHistoryModal}>
-                <Icon name='history' />{getString('adsHistoryButtonLabel')}
-              </button>
-              <button onClick={toggleAdsSettingsModal}>
-                <Icon name='settings' />{getString('adsSettingsButtonLabel')}
-              </button>
-            </div>
+            {renderAdsNav()}
           </>
         }
       </section>
     )
   }
 
-  if (!externalWallet) {
-    return renderLimited()
+  function renderConnected() {
+    return (
+      <div className='content-card' {...style}>
+        <PayoutStatusView />
+        <div className='counter'>
+          <img alt='BAT' src={batCoinColor} />
+          <div className='counter-text'>
+            {renderEarningsCounter()}
+          </div>
+        </div>
+        {renderAdsSummary()}
+      </div>
+    )
   }
 
   return <>
-    <div className='content-card' {...style}>
-      <PayoutStatusView />
-      <div className='counter'>
-        <img alt='BAT' src={batCoinColor} />
-        <div className='counter-text'>
-          {renderEarningsCounter()}
-        </div>
-      </div>
-      {renderAdsSummary()}
-    </div>
+    {externalWallet ? renderConnected() : renderLimited()}
     {
       showAdsHistoryModal ?
         <AdsHistoryModal onClose={toggleAdsHistoryModal} /> :
diff --git a/components/brave_rewards/resources/rewards_page/components/modal.style.ts b/components/brave_rewards/resources/rewards_page/components/modal.style.ts
index c1a4b0f06911..634c7b889c62 100644
--- a/components/brave_rewards/resources/rewards_page/components/modal.style.ts
+++ b/components/brave_rewards/resources/rewards_page/components/modal.style.ts
@@ -39,6 +39,10 @@ export const modalStyle = scoped.css`
       border-radius: 16px 16px 0 0;
       margin: auto 0 0 0;
     }
+
+    .modal-skip-animations & {
+      --self-animation-duration: 0ms;
+    }
   }
 
   @keyframes modal-content-fade-in {
@@ -61,10 +65,6 @@ export const modalStyle = scoped.css`
     animation-fill-mode: both;
   }
 
-  .modal-skip-animations &::backdrop {
-    animation-duration: 0ms;
-  }
-
   @keyframes modal-backdrop-fade {
     from {
       background: rgba(0, 0, 0, 0);