From 627d1c15090599e030a56aeaac66837e1d68d6ad Mon Sep 17 00:00:00 2001
From: Shane Osbourne <sosbourne@duckduckgo.com>
Date: Mon, 4 Nov 2024 08:30:10 +0000
Subject: [PATCH] design feedback

---
 .../new-tab/app/components/App.module.css     |  6 +++++
 .../new-tab/app/components/Components.jsx     | 12 ++++++++--
 .../app/components/Components.module.css      |  7 ++----
 .../pages/new-tab/app/components/Layout.js    |  9 +++++++
 .../new-tab/app/entry-points/favorites.js     |  5 +++-
 .../new-tab/app/entry-points/privacyStats.js  |  5 +++-
 .../pages/new-tab/app/entry-points/rmf.js     |  9 ++++---
 .../pages/new-tab/app/favorites/Favorites.js  |  4 +---
 .../new-tab/app/privacy-stats/PrivacyStats.js |  3 +--
 .../RemoteMessagingFramework.js               |  2 +-
 .../UpdateNotification.examples.js            | 24 +++++++++++++++++++
 .../UpdateNotification.module.css             |  1 +
 12 files changed, 69 insertions(+), 18 deletions(-)
 create mode 100644 special-pages/pages/new-tab/app/components/Layout.js
 create mode 100644 special-pages/pages/new-tab/app/update-notification/UpdateNotification.examples.js

diff --git a/special-pages/pages/new-tab/app/components/App.module.css b/special-pages/pages/new-tab/app/components/App.module.css
index b1f6c7b0da..fe88227a9c 100644
--- a/special-pages/pages/new-tab/app/components/App.module.css
+++ b/special-pages/pages/new-tab/app/components/App.module.css
@@ -23,5 +23,11 @@ body:has([data-reset-layout="true"]) .layout {
 
 :global(.layout-centered) {
     margin-inline: auto;
+    width: 100%;
     max-width: calc(504 * var(--px-in-rem));
 }
+
+/** Don't affect layout if empty (eg: if a widget was toggled) **/
+:global(.layout-centered:empty) {
+    display: contents;
+}
diff --git a/special-pages/pages/new-tab/app/components/Components.jsx b/special-pages/pages/new-tab/app/components/Components.jsx
index 2679f3a569..a5e5f749e3 100644
--- a/special-pages/pages/new-tab/app/components/Components.jsx
+++ b/special-pages/pages/new-tab/app/components/Components.jsx
@@ -1,19 +1,27 @@
 import { Fragment, h } from "preact";
 import styles from "./Components.module.css";
 import { mainExamples, otherExamples } from "./Examples.jsx";
+import { updateNotificationExamples } from "../update-notification/UpdateNotification.examples.js";
 const url = new URL(window.location.href);
 
+const list = {
+    ...mainExamples,
+    ...otherExamples,
+    ...updateNotificationExamples
+}
+
+const entries = Object.entries(list);
+
 export function Components() {
     const ids = url.searchParams.getAll("id");
     const isolated = url.searchParams.has("isolate");
     const e2e = url.searchParams.has("e2e");
-    const entries = Object.entries(mainExamples).concat(Object.entries(otherExamples));
     const entryIds = entries.map(([id]) => id);
 
     const validIds = ids.filter(id => entryIds.includes(id));
 
     const filtered = validIds.length
-        ? validIds.map((id) => /** @type {const} */([id, mainExamples[id] || otherExamples[id]]))
+        ? validIds.map((id) => /** @type {const} */([id, list[id]]))
         : entries
 
     if (isolated) {
diff --git a/special-pages/pages/new-tab/app/components/Components.module.css b/special-pages/pages/new-tab/app/components/Components.module.css
index b4a9625211..d66a9da90c 100644
--- a/special-pages/pages/new-tab/app/components/Components.module.css
+++ b/special-pages/pages/new-tab/app/components/Components.module.css
@@ -1,9 +1,4 @@
 /* nested styles to avoid global side-effects */
-[data-display="components"] {
-    a {
-        color: var(--ntp-text-normal);
-    }
-}
 
 body[data-display="components"] {
     padding-left: 0;
@@ -35,7 +30,9 @@ body[data-display="components"] {
     align-items: center;
     gap: 1em;
 }
+
 .itemLink {
+    color: var(--ntp-text-normal);
     padding: 0.2em 0.3em;
     border: 1px solid var(--color-gray-60);
     border-radius: 4px;
diff --git a/special-pages/pages/new-tab/app/components/Layout.js b/special-pages/pages/new-tab/app/components/Layout.js
new file mode 100644
index 0000000000..f3aeecea73
--- /dev/null
+++ b/special-pages/pages/new-tab/app/components/Layout.js
@@ -0,0 +1,9 @@
+import { h } from 'preact'
+
+export function Centered ({ children }) {
+    return (
+        <div class="layout-centered">
+            {children}
+        </div>
+    )
+}
diff --git a/special-pages/pages/new-tab/app/entry-points/favorites.js b/special-pages/pages/new-tab/app/entry-points/favorites.js
index 9c90956940..7ca6addc61 100644
--- a/special-pages/pages/new-tab/app/entry-points/favorites.js
+++ b/special-pages/pages/new-tab/app/entry-points/favorites.js
@@ -1,8 +1,11 @@
 import { h } from 'preact'
 import { FavoritesCustomized } from '../favorites/Favorites.js'
+import { Centered } from '../components/Layout.js'
 
 export function factory () {
     return (
-        <FavoritesCustomized />
+        <Centered>
+            <FavoritesCustomized/>
+        </Centered>
     )
 }
diff --git a/special-pages/pages/new-tab/app/entry-points/privacyStats.js b/special-pages/pages/new-tab/app/entry-points/privacyStats.js
index 2cb6cf3d03..c550f95fdd 100644
--- a/special-pages/pages/new-tab/app/entry-points/privacyStats.js
+++ b/special-pages/pages/new-tab/app/entry-points/privacyStats.js
@@ -1,8 +1,11 @@
 import { h } from 'preact'
 import { PrivacyStatsCustomized } from '../privacy-stats/PrivacyStats.js'
+import { Centered } from '../components/Layout.js'
 
 export function factory () {
     return (
-        <PrivacyStatsCustomized />
+        <Centered>
+            <PrivacyStatsCustomized />
+        </Centered>
     )
 }
diff --git a/special-pages/pages/new-tab/app/entry-points/rmf.js b/special-pages/pages/new-tab/app/entry-points/rmf.js
index 52bfddd4b8..49df969123 100644
--- a/special-pages/pages/new-tab/app/entry-points/rmf.js
+++ b/special-pages/pages/new-tab/app/entry-points/rmf.js
@@ -1,11 +1,14 @@
 import { h } from 'preact'
+import { Centered } from '../components/Layout.js'
 import { RMFConsumer } from '../remote-messaging-framework/RemoteMessagingFramework.js'
 import { RMFProvider } from '../remote-messaging-framework/RMFProvider.js'
 
 export function factory () {
     return (
-        <RMFProvider>
-            <RMFConsumer />
-        </RMFProvider>
+        <Centered>
+            <RMFProvider>
+                <RMFConsumer/>
+            </RMFProvider>
+        </Centered>
     )
 }
diff --git a/special-pages/pages/new-tab/app/favorites/Favorites.js b/special-pages/pages/new-tab/app/favorites/Favorites.js
index 1a4dc55cfe..33062d5fa0 100644
--- a/special-pages/pages/new-tab/app/favorites/Favorites.js
+++ b/special-pages/pages/new-tab/app/favorites/Favorites.js
@@ -15,8 +15,6 @@ export function FavoritesCustomized () {
         return null
     }
     return (
-        <div class="layout-centered">
-            <p>Favourites here... (id: <code>{id}</code>)</p>
-        </div>
+        <p>Favourites here... (id: <code>{id}</code>)</p>
     )
 }
diff --git a/special-pages/pages/new-tab/app/privacy-stats/PrivacyStats.js b/special-pages/pages/new-tab/app/privacy-stats/PrivacyStats.js
index 90a929d922..fc6bd00702 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/PrivacyStats.js
+++ b/special-pages/pages/new-tab/app/privacy-stats/PrivacyStats.js
@@ -1,5 +1,4 @@
 import { h } from 'preact'
-import cn from 'classnames'
 import styles from './PrivacyStats.module.css'
 import { useTypedTranslation } from '../types.js'
 import { useContext, useState, useId, useCallback } from 'preact/hooks'
@@ -63,7 +62,7 @@ function PrivacyStatsConfigured ({ parentRef, expansion, data, toggle }) {
     const TOGGLE_ID = useId()
 
     return (
-        <div class={cn('layout-centered', styles.root)} ref={parentRef}>
+        <div class={styles.root} ref={parentRef}>
             <Heading
                 totalCount={data.totalCount}
                 trackerCompanies={data.trackerCompanies}
diff --git a/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js b/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js
index a785dcd156..5b213f1bda 100644
--- a/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js
+++ b/special-pages/pages/new-tab/app/remote-messaging-framework/RemoteMessagingFramework.js
@@ -17,7 +17,7 @@ import { Cross } from '../components/Icons.js'
 export function RemoteMessagingFramework ({ message, primaryAction, secondaryAction, dismiss }) {
     const { id, messageType, titleText, descriptionText } = message
     return (
-        <div id={id} class={cn('layout-centered', styles.root, (messageType !== 'small' && message.icon) && styles.icon)}>
+        <div id={id} class={cn(styles.root, (messageType !== 'small' && message.icon) && styles.icon)}>
             {messageType !== 'small' && message.icon && (
                 <span class={styles.iconBlock}>
                     <img src={`./icons/${message.icon}.svg`} alt=""/>
diff --git a/special-pages/pages/new-tab/app/update-notification/UpdateNotification.examples.js b/special-pages/pages/new-tab/app/update-notification/UpdateNotification.examples.js
new file mode 100644
index 0000000000..892f0cd2fc
--- /dev/null
+++ b/special-pages/pages/new-tab/app/update-notification/UpdateNotification.examples.js
@@ -0,0 +1,24 @@
+import { h } from 'preact'
+import { UpdateNotification } from './UpdateNotification.js'
+import { noop } from '../utils.js'
+
+export const updateNotificationExamples = {
+    empty: {
+        factory: () => {
+            return <UpdateNotification
+                notes={[]}
+                version={'1.2.3'}
+                dismiss={noop('dismiss!')}
+            />
+        }
+    },
+    populated: {
+        factory: () => {
+            return <UpdateNotification
+                notes={['Bug Fixed and Updates']}
+                version={'1.2.3'}
+                dismiss={noop('dismiss!')}
+            />
+        }
+    }
+}
diff --git a/special-pages/pages/new-tab/app/update-notification/UpdateNotification.module.css b/special-pages/pages/new-tab/app/update-notification/UpdateNotification.module.css
index 47d54cbf4a..c75f2675ac 100644
--- a/special-pages/pages/new-tab/app/update-notification/UpdateNotification.module.css
+++ b/special-pages/pages/new-tab/app/update-notification/UpdateNotification.module.css
@@ -19,6 +19,7 @@
     width: 100%;
 }
 .inlineLink {
+    color: var(--color-blue-50);
     text-decoration: none;
     &:focus-visible {
         text-decoration: underline;