Tweak subtitle styling to be consistent with Next Steps widget

Author: noisysocks

special-pages/pages/new-tab/app/privacy-stats/components/ActivityHeading.js

@@ -65,12 +65,14 @@ export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount,
                 </span>
             )}
             {itemCount === 0 && (
-                <p className={styles.subtitle}>
+                <p className={cn(styles.subtitle, { [styles.indented]: !adBlocking })}>
                     {adBlocking ? t('activity_noRecentAdsAndTrackers_subtitle') : t('activity_noRecent_subtitle')}
                 </p>
             )}
             {itemCount > 0 && (
-                <p className={cn(styles.subtitle, { [styles.uppercase]: !adBlocking })}>{t('stats_feedCountBlockedPeriod')}</p>
+                <p className={cn(styles.subtitle, styles.indented, { [styles.uppercase]: !adBlocking })}>
+                    {t('stats_feedCountBlockedPeriod')}
+                </p>
             )}
         </div>
     );

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

@@ -35,10 +35,6 @@
         padding-left: 6px;
         grid-column-gap: 10px;
     }
-
-    &.adsAndTrackersVariant {
-        grid-row-gap: 0;
-    }
 }
 
 .headingIcon {
@@ -109,17 +105,20 @@
 .subtitle {
     grid-area: label;
     color: var(--ntp-text-muted);
-    padding-left: 2px;
 
     &.uppercase {
         line-height: 1;
         text-transform: uppercase;
     }
 
+    &.indented {
+        padding-left: 2px;
+    }
+
     .adsAndTrackersVariant & {
         font-size: var(--small-label-font-size);
-        line-height: 1;
-        text-transform: none;
+        letter-spacing: 0.06px;
+        line-height: var(--small-label-line-height);
     }
 }
 

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStatsHeading.js

@@ -60,8 +60,16 @@ export function PrivacyStatsHeading({ expansion, canExpand, recent, onToggle, bu
                     />
                 </span>
             )}
-            {recent === 0 && <p className={styles.subtitle}>{adBlocking ? t('stats_noActivityAdsAndTrackers') : t('stats_noActivity')}</p>}
-            {recent > 0 && <p className={cn(styles.subtitle, styles.uppercase)}>{t('stats_feedCountBlockedPeriod')}</p>}
+            {recent === 0 && (
+                <p className={cn(styles.subtitle, { [styles.indented]: !adBlocking })}>
+                    {adBlocking ? t('stats_noActivityAdsAndTrackers') : t('stats_noActivity')}
+                </p>
+            )}
+            {recent > 0 && (
+                <p className={cn(styles.subtitle, styles.indented, { [styles.uppercase]: !adBlocking })}>
+                    {t('stats_feedCountBlockedPeriod')}
+                </p>
+            )}
         </div>
     );
 }