Move heading to the right 4px to align with favicons

duckduckgo · Jan 30, 2025 · f1589f9 · f1589f9
1 parent a46c78a
commit f1589f9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.js b/special-pages/pages/new-tab/app/activity/components/Activity.js
@@ -56,6 +56,7 @@ function ActivityConfigured({ expansion, toggle }) {
     return (
         <div class={styles.root}>
             <ActivityHeading
+                className={styles.activityHeading}
                 trackerCount={count.value}
                 itemCount={itemCount.value}
                 onToggle={toggle}

diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.module.css b/special-pages/pages/new-tab/app/activity/components/Activity.module.css
@@ -295,4 +295,8 @@
             transform: rotate(180deg)
         }
     }
+}
+
+.activityHeading {
+    margin-left: 4px;
 }
diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
@@ -148,10 +148,11 @@ export function Heading({ expansion, canExpand, recent, onToggle, buttonAttrs =
  * @param {number} props.itemCount
  * @param {boolean} props.canExpand
  * @param {() => void} props.onToggle
+ * @param {string} [props.className]
  * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
  */
-export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount, onToggle, buttonAttrs = {} }) {
-    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount, onToggle, className, buttonAttrs = {} }) {
+    const { t } = useTypedTranslationWith(/** @type {Strings} */({}));
     const [formatter] = useState(() => new Intl.NumberFormat());
 
     const none = itemCount === 0;
@@ -161,7 +162,7 @@ export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount,
         trackerCount === 1 ? t('stats_countBlockedSingular') : t('stats_countBlockedPlural', { count: trackerCountFormatted });
 
     return (
-        <div className={styles.heading} data-testid={'ActivityHeading'}>
+        <div className={cn(styles.heading, className)} data-testid={'ActivityHeading'}>
             <span className={styles.headingIcon}>
                 <img src="./icons/shield.svg" alt="Privacy Shield" />
             </span>