Address ship review UI comments

Author: jsoningram

special-pages/pages/new-tab/app/components/TickPill/TickPill.module.css

@@ -3,7 +3,7 @@
     align-items: center;
     gap: 6px;
     padding: 8px 10px;
-    border-radius: 100px;
+    border-radius: 1000px;
     background-color: var(--color-white-at-3);
     border: 1px solid var(--color-white-at-12);
     height: 20px;
@@ -32,8 +32,8 @@
 
 /* Light mode styles */
 [data-theme="light"] .tickPill {
-    background-color: var(--color-black-at-4);
-    border: 1px solid var(--color-black-at-12);
+    background-color: var(--color-black-at-1);
+    border: 1px solid var(--color-black-at-9);
 }
 
 [data-theme="light"] .text {

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css

@@ -39,6 +39,7 @@
     height: 16px;
     display: inline-block;
     vertical-align: middle;
+    margin-top: 2px;
 }
 
 .widgetExpander {

special-pages/pages/new-tab/app/protections/components/Protections.module.css

@@ -44,7 +44,7 @@
 }
 
 .block {
-    margin-top: 32px;
+    margin-top: 16px;
 }
 
 /* @todo legacyProtections: Remove once all platforms support the new UI */

special-pages/pages/new-tab/app/protections/integrations-tests/protections.screenshots.spec.js

@@ -10,7 +10,8 @@ test.describe('Protections screenshots', { tag: ['@screenshots'] }, () => {
             const ntp = NewtabPage.create(page, workerInfo);
             await ntp.reducedMotion();
             const protections = new ProtectionsPage(ntp);
-            await ntp.openPage({ additional: { 'protections.feed': 'privacy-stats' } });
+            // Use cpm: 'true' to enable new UI (non-legacy)
+            await ntp.openPage({ additional: { 'protections.feed': 'privacy-stats', cpm: 'true' } });
             await protections.ready();
 
             await expect(protections.context()).toHaveScreenshot('protections-stats.png', { maxDiffPixels });
@@ -19,7 +20,8 @@ test.describe('Protections screenshots', { tag: ['@screenshots'] }, () => {
             const ntp = NewtabPage.create(page, workerInfo);
             await ntp.reducedMotion();
             const protections = new ProtectionsPage(ntp);
-            await ntp.openPage({ additional: { 'protections.feed': 'privacy-stats', activity: 'empty' } });
+            // Use cpm: 'true' to enable new UI (non-legacy)
+            await ntp.openPage({ additional: { 'protections.feed': 'privacy-stats', activity: 'empty', cpm: 'true' } });
             await protections.ready();
             await expect(protections.context()).toHaveScreenshot('protections-stats-empty.png', { maxDiffPixels });
         });
@@ -28,7 +30,8 @@ test.describe('Protections screenshots', { tag: ['@screenshots'] }, () => {
             await ntp.reducedMotion();
             await ntp.darkMode();
             const protections = new ProtectionsPage(ntp);
-            await ntp.openPage({ additional: { 'protections.feed': 'privacy-stats' } });
+            // Use cpm: 'true' to enable new UI (non-legacy)
+            await ntp.openPage({ additional: { 'protections.feed': 'privacy-stats', cpm: 'true' } });
             await protections.ready();
 
             await expect(protections.context()).toHaveScreenshot('protections-stats-dark.png', { maxDiffPixels });
@@ -38,7 +41,8 @@ test.describe('Protections screenshots', { tag: ['@screenshots'] }, () => {
         const ntp = NewtabPage.create(page, workerInfo);
         await ntp.reducedMotion();
         const protections = new ProtectionsPage(ntp);
-        await ntp.openPage({ additional: { 'protections.feed': 'activity' } });
+        // Use cpm: 'null' to enable new UI (non-legacy) with feature disabled
+        await ntp.openPage({ additional: { 'protections.feed': 'activity', cpm: 'null' } });
         await protections.ready();
 
         await expect(protections.context()).toHaveScreenshot('protections-activity.png', { maxDiffPixels });