design feedback

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;
+}

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) {

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;

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>
+    )
+}

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>
     )
 }

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>
     )
 }

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>
     )
 }

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>
     )
 }

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}

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=""/>

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!')}
+            />
+        }
+    }
+}

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;