Update omnibar widget design and copy (#1843)

* Refactor omnibar UI: update styles, layout, and placeholder text

Co-authored-by: randerson <[email protected]>

* Adjust omnibar layout, width, and placeholder text for improved UI

Co-authored-by: randerson <[email protected]>

* Adjust omnibar width using CSS global selector and remove fixed width

Co-authored-by: randerson <[email protected]>

* Checkpoint before follow-up message

---------

Co-authored-by: Cursor Agent <[email protected]>

Author: noisysocks

special-pages/pages/new-tab/app/components/App.module.css

@@ -32,6 +32,10 @@ body[data-animate-background="true"] {
     max-width: calc(504 * var(--px-in-rem));
 }
 
+:global([data-entry-point="omnibar"]) {
+    max-width: calc(620 * var(--px-in-rem));
+}
+
 :global(.vertical-space) {
     padding-top: 1rem;
     padding-bottom: 1rem;

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css

@@ -11,6 +11,7 @@
     border: none;
     box-sizing: content-box;
     color: var(--ntp-text-normal);
+    font-weight: 500;
     max-height: 10lh;
     padding: 11px 15px 0;
     resize: none;

special-pages/pages/new-tab/app/omnibar/components/Container.module.css

@@ -7,7 +7,6 @@
     background: var(--ntp-surface-tertiary);
     border-radius: 12px;
     box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
-    margin: 0 calc(-1 * var(--sp-1));
     overflow: hidden;
     position: relative;
     transition: height 200ms ease;

special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css

@@ -8,5 +8,5 @@
 
 .logo {
     margin-bottom: var(--sp-4);
-    width: 123px;
+    width: 164px;
 }

special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css

@@ -13,6 +13,7 @@
     background: none;
     border: none;
     color: var(--ntp-text-normal);
+    font-weight: 500;
     height: var(--sp-8);
     left: var(--sp-1);
     padding-bottom: 0;

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.page.js

@@ -22,7 +22,7 @@ export class OmnibarPage {
     }
 
     chatInput() {
-        return this.context().getByRole('textbox', { name: 'Chat privately with Duck.ai' });
+        return this.context().getByRole('textbox', { name: 'Ask privately' });
     }
 
     chatSubmitButton() {

special-pages/pages/new-tab/app/omnibar/strings.json

@@ -4,7 +4,7 @@
     "description": "Title of the omnibar widget in the customizer panel."
   },
   "omnibar_aiChatFormPlaceholder": {
-    "title": "Chat privately with Duck.ai",
+    "title": "Ask privately",
     "description": "Placeholder text for the AI chat input field."
   },
   "omnibar_aiChatFormSubmitButtonLabel": {
@@ -28,7 +28,7 @@
     "description": "Label for the AI chat tab."
   },
   "omnibar_searchFormPlaceholder": {
-    "title": "Search or enter address",
+    "title": "Search privately",
     "description": "Placeholder text for the search input field."
   },
   "omnibar_hideDuckAi": {

special-pages/pages/new-tab/public/locales/en/new-tab.json

@@ -130,7 +130,7 @@
     "description": "Title of the omnibar widget in the customizer panel."
   },
   "omnibar_aiChatFormPlaceholder": {
-    "title": "Chat privately with Duck.ai",
+    "title": "Ask privately",
     "description": "Placeholder text for the AI chat input field."
   },
   "omnibar_aiChatFormSubmitButtonLabel": {
@@ -154,7 +154,7 @@
     "description": "Label for the AI chat tab."
   },
   "omnibar_searchFormPlaceholder": {
-    "title": "Search or enter address",
+    "title": "Search privately",
     "description": "Placeholder text for the search input field."
   },
   "omnibar_hideDuckAi": {