diff --git a/special-pages/pages/new-tab/app/components/Components.jsx b/special-pages/pages/new-tab/app/components/Components.jsx
index 16953dd92..7f8abd1f7 100644
--- a/special-pages/pages/new-tab/app/components/Components.jsx
+++ b/special-pages/pages/new-tab/app/components/Components.jsx
@@ -1,13 +1,11 @@
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);
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 d66a9da90..dae95b90b 100644
--- a/special-pages/pages/new-tab/app/components/Components.module.css
+++ b/special-pages/pages/new-tab/app/components/Components.module.css
@@ -35,7 +35,7 @@ body[data-display="components"] {
color: var(--ntp-text-normal);
padding: 0.2em 0.3em;
border: 1px solid var(--color-gray-60);
- border-radius: 4px;
+ border-radius: var(--border-radius-xs);
display: inline-block;
line-height: 1;
text-decoration: none;
@@ -72,7 +72,6 @@ body[data-display="components"] {
gap: 1rem; /* Adjust the gap size as needed */
}
-.selectItem {
+.item {
+ position: relative;
}
-
-.item {}
diff --git a/special-pages/pages/new-tab/app/components/DismissButton.module.css b/special-pages/pages/new-tab/app/components/DismissButton.module.css
index ab20ddd7f..dea5469a8 100644
--- a/special-pages/pages/new-tab/app/components/DismissButton.module.css
+++ b/special-pages/pages/new-tab/app/components/DismissButton.module.css
@@ -2,18 +2,15 @@
border-width: 0;
text-wrap: nowrap;
font-weight: 600;
- font-size: calc(11 * var(--px-in-rem));
- line-height: calc(11 * var(--px-in-rem));
- color: var(--ntp-color-primary);
height: 1rem;
width: 1rem;
padding: 0;
line-height: 1;
background-color: transparent;
- color: var(--color-black-at-60);
+ color: var(--ntp-text-muted);
border: none;
border-radius: 50%;
-
+ transition: all .3s;
&:hover {
background-color: var(--color-black-at-9);
@@ -22,7 +19,7 @@
&:active {
background-color: var(--color-black-at-18);
- color: var(--color-black-at-84);
+ color: var(--ntp-text-normal);
}
&:disabled {
@@ -35,20 +32,17 @@
}
&:focus-visible {
- box-shadow: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color);
+ box-shadow: var(--focus-ring);
+ outline: none;
}
@media screen and (prefers-color-scheme: dark) {
- color: var(--color-white-at-60);
-
-
&:hover {
background-color: var(--color-black-at-9);
}
&:active {
background-color: var(--color-white-at-18);
- color: var(--color-white-at-84);
}
&:disabled {
@@ -60,42 +54,5 @@
cursor: not-allowed;
background-color: var(--color-white-at-12);
}
-
- &:focus-visible {
- box-shadow: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white);
- }
- }
-}
-/*
-.dismissBtn {
- height: 1rem;
- width: 1rem;
- padding: 0;
- line-height: 1;
- background-color: transparent;
- color: var(--color-black-at-60);
- border: none;
- border-radius: 50%;
-
- &:active {
- background-color: var(--color-black-at-18);
- color: var(--color-black-at-84);
- }
-
- &:hover {
- background-color: var(--color-black-at-9);
- }
-
- @media screen and (prefers-color-scheme: dark) {
- color: var(--color-white-at-60);
-
- &:hover {
- background-color: var(--color-white-at-9);
- }
-
- &:active {
- background-color: var(--color-white-at-18);
- color: var(--color-white-at-84);
- }
}
-} */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/special-pages/pages/new-tab/app/components/Examples.jsx b/special-pages/pages/new-tab/app/components/Examples.jsx
index f2a4e695b..75b00bc59 100644
--- a/special-pages/pages/new-tab/app/components/Examples.jsx
+++ b/special-pages/pages/new-tab/app/components/Examples.jsx
@@ -1,172 +1,24 @@
-import { Fragment, h } from 'preact';
-import { PrivacyStatsMockProvider } from '../privacy-stats/mocks/PrivacyStatsMockProvider.js';
-import { Body, Heading, PrivacyStatsConsumer } from '../privacy-stats/PrivacyStats.js';
-import { RemoteMessagingFramework } from '../remote-messaging-framework/RemoteMessagingFramework.js';
-import { nextStepsExamples, otherNextStepsExamples } from '../next-steps/components/NextStepsExamples.js';
-import { stats } from '../privacy-stats/mocks/stats.js';
+import { h } from 'preact';
+import { favoritesExamples } from '../favorites/components/Favorites.examples.js';
+import { otherPrivacyStatsExamples, privacyStatsExamples } from '../privacy-stats/components/PrivacyStats.examples.js';
+import { nextStepsExamples, otherNextStepsExamples } from '../next-steps/components/NextSteps.examples.js';
+import { otherRMFExamples, RMFExamples } from '../remote-messaging-framework/components/RMF.examples.js';
+import { customizerExamples } from '../customizer/components/Customizer.examples.js';
import { noop } from '../utils.js';
-import { VisibilityMenu } from '../customizer/VisibilityMenu.js';
-import { CustomizerButton } from '../customizer/Customizer.js';
-import { rmfDataExamples } from '../remote-messaging-framework/mocks/rmf.data.js';
-import { favoritesExamples } from '../favorites/components/FavoritesExamples.js';
+import { updateNotificationExamples } from '../update-notification/components/UpdateNotification.examples.js';
/** @type {Record
import("preact").ComponentChild}>} */
export const mainExamples = {
- 'stats.few': {
- factory: () => (
-
-
-
- ),
- },
- 'stats.few.collapsed': {
- factory: () => (
-
-
-
- ),
- },
- 'stats.single': {
- factory: () => (
-
-
-
- ),
- },
- 'stats.none': {
- factory: () => (
-
-
-
- ),
- },
- 'stats.norecent': {
- factory: () => (
-
-
-
- ),
- },
- 'stats.list': {
- factory: () => ,
- },
- 'stats.heading': {
- factory: () => (
-
- ),
- },
- 'stats.heading.none': {
- factory: () => (
-
- ),
- },
- 'rmf.small': {
- factory: () =>
{}} />,
- },
- 'rmf.medium': {
- factory: () => {}} />,
- },
- 'rmf.big-single-action': {
- factory: () => (
- {}} dismiss={() => {}} />
- ),
- },
- 'rmf.big-two-action': {
- factory: () => (
- {}}
- secondaryAction={() => {}}
- dismiss={() => {}}
- />
- ),
- },
...favoritesExamples,
...nextStepsExamples,
+ ...privacyStatsExamples,
+ ...RMFExamples,
};
export const otherExamples = {
- 'stats.without-animation': {
- factory: () => (
-
-
-
- ),
- },
- 'stats.with-view-transitions': {
- factory: () => (
-
-
-
- ),
- },
- 'rmf.big-two-action-overflow': {
- factory: () => (
- {}}
- secondaryAction={() => {}}
- dismiss={() => {}}
- />
- ),
- },
...otherNextStepsExamples,
- 'customizer-menu': {
- factory: () => (
-
-
-
-
-
-
-
-
-
- ),
- },
+ ...otherPrivacyStatsExamples,
+ ...otherRMFExamples,
+ ...customizerExamples,
+ ...updateNotificationExamples,
};
-
-function MaxContent({ children }) {
- return {children}
;
-}
diff --git a/special-pages/pages/new-tab/app/components/Icons.js b/special-pages/pages/new-tab/app/components/Icons.js
index 7b2860481..dd0198ecd 100644
--- a/special-pages/pages/new-tab/app/components/Icons.js
+++ b/special-pages/pages/new-tab/app/components/Icons.js
@@ -3,7 +3,7 @@ import styles from './Icons.module.css';
export function ChevronButton() {
return (
- ;
+/**
+ * @param {object} props
+ * @param {import("preact").ComponentChild} props.children
+ * @param {import("preact").ComponentProps<"div">} [props.rest]
+ */
+export function Centered({ children, ...rest }) {
+ return (
+