NTP Mac style parity (#1263)

* feat: Add standard and accentBranded Windows styles to shared Button * chore: Update RMF to do both Mac and Windows design * fix: center align customizer button children * chore: Update section headers to h2, batten down the font styles * chore: rm extra lines * chore: Rename button variant * chore: Update variant name * fix: Test * fix: Bring focus ring value to the shared Button * fix: Icon only ShowHideButton hover * fix: Reread the feedback * fix: update the Button css selector for windows * fix: Rearrange new-tab/app/index.js calls * chore: removes possibly breaking changes to button * limit customizer styles to feature-flagged --------- Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>
duckduckgo · Dec 2, 2024 · 8760e79 · 8760e79
1 parent b1e6f22
commit 8760e79
Show file tree

Hide file tree

Showing 16 changed files with 186 additions and 131 deletions.
diff --git a/special-pages/pages/new-tab/app/components/App.js b/special-pages/pages/new-tab/app/components/App.js
@@ -28,7 +28,7 @@ export function App({ children }) {
 
     return (
         <div class={cn(styles.layout)} ref={wrapperRef} data-drawer-visibility={visibility}>
-            <main class={cn(styles.main)}>
+            <main class={cn(styles.main)} data-customizer-kind={customizerKind}>
                 <div class={styles.tube} data-platform={platformName}>
                     <WidgetList />
                     <CustomizerMenuPositionedFixed>

diff --git a/special-pages/pages/new-tab/app/components/App.module.css b/special-pages/pages/new-tab/app/components/App.module.css
@@ -44,9 +44,12 @@ body:has([data-reset-layout="true"]) .tube {
 }
 
 .main {
-    overflow: hidden;
-    height: 100vh;
+    &[data-customizer-kind="drawer"] {
+        overflow: hidden;
+        height: 100vh;
+    }
 }
+
 .active {}
 
 .aside {

diff --git a/special-pages/pages/new-tab/app/components/Icons.module.css b/special-pages/pages/new-tab/app/components/Icons.module.css
@@ -1,5 +1,6 @@
 .chevronButton {
-    &:hover .chevronCircle {
+    transition: all .3s;
+    .chevronCircle {
         fill: black;
         fill-opacity: 0.06;
 
@@ -10,11 +11,6 @@
     }
 }
 
-.chevronCircle {
-    transition: all .3s;
-    fill-opacity: 0;
-}
-
 .chevronArrow {
     @media screen and (prefers-color-scheme: dark) {
         fill: white;

diff --git a/special-pages/pages/new-tab/app/components/ShowHide.module.css b/special-pages/pages/new-tab/app/components/ShowHide.module.css
@@ -19,6 +19,23 @@
         border-radius: 50%;
         padding-inline: 0;
 
+        svg rect {
+            fill-opacity: 0;
+        }
+
+        &:hover {
+            transition: all 0.3s ease-in;
+            svg rect {
+                fill: black;
+                fill-opacity: 0.06;
+
+                @media screen and (prefers-color-scheme: dark) {
+                    fill: white;
+                    fill-opacity: 0.12;
+                }
+            }
+        } 
+
         &:focus-visible {
             box-shadow: var(--focus-ring);
         }

diff --git a/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css b/special-pages/pages/new-tab/app/customizer/components/Customizer.module.css
@@ -27,6 +27,7 @@
     padding: var(--sp-2) var(--sp-3);
     cursor: pointer;
     display: flex;
+    align-items: center;
     gap: calc(6 * var(--px-in-rem));
     color: var(--ntp-text-normal);
 

diff --git a/special-pages/pages/new-tab/app/index.js b/special-pages/pages/new-tab/app/index.js
@@ -69,14 +69,14 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
         messaging.reportPageException({ message });
     };
 
+    // install global side effects that are not specific to any widget
+    installGlobalSideEffects(environment, settings);
+
     // return early if we're in the 'components' view.
     if (environment.display === 'components') {
         return renderComponents(root, environment, settings, strings);
     }
 
-    // install global side effects that are not specific to any widget
-    installGlobalSideEffects(environment, settings);
-
     // Resolve the entry points for each selected widget
     const entryPoints = await resolveEntryPoints(init.widgets, didCatch);
 

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css b/special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css
@@ -21,8 +21,9 @@
 }
 
 .title {
+    font-size: var(--body-font-size);
     font-weight: 590;
-    line-height: var(--sp-4);
+    line-height: var(--body-line-height);
     letter-spacing: -0.08px;
     color: var(--ntp-text-normal);
     margin-bottom: var(--sp-1);
@@ -131,15 +132,18 @@
 
     div {
         background-color: var(--ntp-color-primary);
-        font-size: calc(11 * var(--px-in-rem));
         height: calc(20 * var(--px-in-rem));
-        line-height: normal;
-        font-weight: 600;
-        letter-spacing: 0.06px;
-        color: var(--ntp-text-on-primary);
         display: flex;
         align-items: center;
         justify-content: center;
+
+        h2 {
+            color: var(--ntp-text-on-primary);
+            letter-spacing: 0.06px;
+            font-weight: 600;
+            line-height: normal;
+            font-size: calc(11 * var(--px-in-rem));
+        }
     }
 }
 
@@ -160,7 +164,6 @@
 :root:has(body[data-platform-name="windows"]) {
     .nextStepsCard .title {
         font-weight: 700;
-        line-height: calc(20 * var(--px-in-rem));
         letter-spacing: normal;
     }
 }
diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsCard.js
@@ -17,7 +17,7 @@ export function NextStepsCard({ type, dismiss, action }) {
     return (
         <div class={styles.card}>
             <img src={`./icons/${message.icon}-128.svg`} alt="" class={styles.icon} />
-            <p class={styles.title}>{message.title}</p>
+            <h3 class={styles.title}>{message.title}</h3>
             <p class={styles.description}>{message.summary}</p>
             <button class={styles.btn} onClick={() => action(message.id)}>
                 {message.actionText}

diff --git a/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js b/special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js
@@ -79,7 +79,7 @@ export function NextStepsBubbleHeader() {
                 />
             </svg>
             <div>
-                <p>{text}</p>
+                <h2>{text}</h2>
             </div>
             <svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20" fill="none">
                 <path

diff --git a/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js b/special-pages/pages/new-tab/app/next-steps/integrations-tests/next-steps.spec.js
@@ -54,7 +54,7 @@ test.describe('newtab NextSteps cards', () => {
         // expand the section
         await page.getByLabel('Show More', { exact: true }).click();
 
-        await expect(page.locator('p').filter({ hasText: 'Block Cookie Pop-ups' })).toBeVisible();
+        await expect(page.locator('h3').filter({ hasText: 'Block Cookie Pop-ups' })).toBeVisible();
         await page.getByRole('button', { name: 'Try DuckPlayer' }).click();
         await ntp.mocks.waitForCallCount({ method: 'nextSteps_action', count: 1 });
     });

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
@@ -103,8 +103,8 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
             <span className={styles.headingIcon}>
                 <img src="./icons/shield.svg" alt="Privacy Shield" />
             </span>
-            {none && <p className={styles.title}>{t('stats_noRecent')}</p>}
-            {some && <p className={styles.title}>{alltimeTitle}</p>}
+            {none && <h2 className={styles.title}>{t('stats_noRecent')}</h2>}
+            {some && <h2 className={styles.title}>{alltimeTitle}</h2>}
             {recent > 0 && (
                 <span className={styles.widgetExpander}>
                     <ShowHideButton

diff --git a/...pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.js b/...pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.js
@@ -1,9 +1,11 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import cn from 'classnames';
 import styles from './RemoteMessagingFramework.module.css';
 import { useContext } from 'preact/hooks';
 import { RMFContext } from '../RMFProvider.js';
 import { DismissButton } from '../../components/DismissButton';
+import { Button } from '../../../../../shared/components/Button/Button';
+import { usePlatformName } from '../../settings.provider';
 
 /**
  * @import { RMFMessage } from "../../../../../types/new-tab"
@@ -16,6 +18,8 @@ import { DismissButton } from '../../components/DismissButton';
 
 export function RemoteMessagingFramework({ message, primaryAction, secondaryAction, dismiss }) {
     const { id, messageType, titleText, descriptionText } = message;
+    const platform = usePlatformName();
+
     return (
         <div id={id} class={cn(styles.root, messageType !== 'small' && message.icon && styles.icon)}>
             {messageType !== 'small' && message.icon && (
@@ -24,28 +28,45 @@ export function RemoteMessagingFramework({ message, primaryAction, secondaryActi
                 </span>
             )}
             <div class={styles.content}>
-                <p class={styles.title}>{titleText}</p>
+                <h2 class={styles.title}>{titleText}</h2>
                 <p class={styles.description}>{descriptionText}</p>
                 {messageType === 'big_two_action' && (
                     <div class={styles.btnRow}>
-                        {primaryAction && message.primaryActionText.length > 0 && (
-                            <button class={cn(styles.btn, styles.primary)} onClick={() => primaryAction(id)}>
-                                {message.primaryActionText}
-                            </button>
-                        )}
-                        {secondaryAction && message.secondaryActionText.length > 0 && (
-                            <button class={cn(styles.btn, styles.secondary)} onClick={() => secondaryAction(id)}>
-                                {message.secondaryActionText}
-                            </button>
+                        {platform === 'windows' ? (
+                            <Fragment>
+                                {primaryAction && message.primaryActionText.length > 0 && (
+                                    <Button variant={'accentBrand'} onClick={() => primaryAction(id)}>
+                                        {message.primaryActionText}
+                                    </Button>
+                                )}
+                                {secondaryAction && message.secondaryActionText.length > 0 && (
+                                    <Button variant={'standard'} onClick={() => secondaryAction(id)}>
+                                        {message.secondaryActionText}
+                                    </Button>
+                                )}
+                            </Fragment>
+                        ) : (
+                            <Fragment>
+                                {secondaryAction && message.secondaryActionText.length > 0 && (
+                                    <Button variant={'standard'} onClick={() => secondaryAction(id)}>
+                                        {message.secondaryActionText}
+                                    </Button>
+                                )}
+                                {primaryAction && message.primaryActionText.length > 0 && (
+                                    <Button variant={'accentBrand'} onClick={() => primaryAction(id)}>
+                                        {message.primaryActionText}
+                                    </Button>
+                                )}
+                            </Fragment>
                         )}
                     </div>
                 )}
             </div>
             {messageType === 'big_single_action' && message.primaryActionText && primaryAction && (
                 <div class={styles.btnBlock}>
-                    <button class={cn(styles.btn)} onClick={() => primaryAction(id)}>
+                    <Button variant="standard" onClick={() => primaryAction(id)}>
                         {message.primaryActionText}
-                    </button>
+                    </Button>
                 </div>
             )}
             <DismissButton className={styles.dismissBtn} onClick={() => dismiss(id)} />

diff --git a/...ges/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css b/...ges/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css
@@ -31,17 +31,18 @@
 
 .content {
     flex-grow: 1;
-    font-size: calc(14 * var(--px-in-rem));
 }
 
 .title {
+    font-size: var(--body-font-size);
     font-weight: var(--title-2-font-weight);
     line-height: normal;
     margin-bottom: var(--sp-1);
 }
 
 .description {
-    line-height: 1.25rem;
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
 }
 
 .btnBlock {
@@ -56,96 +57,6 @@
     gap: calc(10 * var(--px-in-rem));
 }
 
-.btn {
-    padding-left: var(--sp-3);
-    padding-right: var(--sp-3);
-    height: var(--sp-8);
-    background-color: var(--color-black-at-6);
-    border-width: 0;
-    border-radius: var(--border-radius-sm);
-    text-wrap: nowrap;
-
-    &:hover {
-        background-color: var(--color-black-at-9);
-        cursor: pointer;
-    }
-
-    &:active {
-        background-color: var(--color-black-at-12);
-    }
-
-    &:disabled {
-        color: var(--color-black-at-84);
-    }
-
-    &:disabled:hover {
-        cursor: not-allowed;
-        background-color: var(--color-white-at-6);
-    }
-
-    &:focus-visible {
-        outline: none;
-        box-shadow: var(--focus-ring);
-    }
-
-    @media screen and (prefers-color-scheme: dark) {
-        color: var(--color-white-at-84);
-        background-color: var(--color-white-at-12);
-
-        &:hover {
-            background-color: var(--color-white-at-18);
-        }
-
-        &:active {
-            background-color: var(--color-white-at-24);
-        }
-
-        &:disabled {
-            color: var(--color-white-at-12);
-            opacity: 0.8;
-        }
-
-        &:disabled:hover {
-            cursor: not-allowed;
-            background-color: var(--color-white-at-12);
-        }
-    }
-}
-
-
-.primary {
-    background-color: var(--ddg-color-primary);
-    color: var(--color-white);
-    position: relative;
-
-
-    &:hover {
-        background-color: var(--color-blue-60);
-    }
-
-    &:active {
-        background-color: var(--color-blue-70);
-    }
-
-    @media screen and (prefers-color-scheme: dark) {
-        color: var(--color-black-at-84);
-        background-color: var(--color-blue-20);
-
-        &:hover {
-            background-color: var(--color-blue-30);
-        }
-
-        &:active {
-            background-color: var(--color-blue-40);
-        }
-
-        &:disabled {
-            background-color: var(--color-white-at-36);
-            color: var(--color-black-at-84);
-        }
-    }
-}
-
 .dismissBtn {
     position: absolute;
     top: 0.5rem;

diff --git a/special-pages/pages/new-tab/app/styles/base.css b/special-pages/pages/new-tab/app/styles/base.css
@@ -64,6 +64,11 @@ li {
     margin: 0;
     padding: 0;
 }
+
+button {
+    text-wrap: nowrap;
+}
+
 .sr-only {
     position: absolute;
     width: 1px;

diff --git a/special-pages/shared/components/Button/Button.js b/special-pages/shared/components/Button/Button.js
@@ -5,7 +5,7 @@ import styles from './Button.module.css';
 /**
  * @param {object} props
  * @param {string} [props.className]
- * @param {'primary'|'standard'|'accent'|'ghost'} [props.variant]
+ * @param {'primary'|'standard'|'accent'|'accentBrand'|'ghost'} [props.variant]
  * @param {'button'|'submit'|'reset'} [props.type]
  * @param {import("preact").ComponentChild} props.children
  * @param {import("preact").JSX.MouseEventHandler<EventTarget>} [props.onClick]
-Original file line number
+Diff line change
@@ Expand Up / @@ -79,7 +79,7 @@ export function NextStepsBubbleHeader() { @@
                     />
                 </svg>
                 <div>
-                    <p>{text}</p>
+                    <h2>{text}</h2>
                 </div>
                 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20" fill="none">
                     <path
@@ Expand Down @@