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 <[email protected]>

Author: vkraucunas

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>

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 {

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;

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

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

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

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

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}

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

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