diff --git a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css index 8a22b5b23c..ecf7d5d948 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css +++ b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css @@ -11,15 +11,23 @@ border: none; box-sizing: content-box; color: var(--ntp-text-normal); - font-weight: 500; max-height: 10lh; padding: 11px 15px 0; resize: none; + [data-platform="macos"] & { + font-weight: 500; + } + &::placeholder { color: var(--ntp-text-muted); } + [data-platform="windows"] &::selection { + background: var(--ntp-selection-background-color); + color: var(--ntp-selection-color); + } + &:focus { outline: none; } diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js index b78f0a5573..d08d39f189 100644 --- a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js +++ b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js @@ -1,5 +1,5 @@ import { h, Fragment } from 'preact'; -import { useEffect, useId } from 'preact/hooks'; +import { useEffect, useId, useMemo } from 'preact/hooks'; import { SearchIcon, GlobeIcon } from '../../components/Icons.js'; import { useTypedTranslationWith } from '../../types'; import styles from './SearchForm.module.css'; @@ -8,6 +8,7 @@ import { useCompletionInput } from './useSuggestionInput.js'; import { useSuggestions } from './useSuggestions'; import { useSuffixText } from './SuffixText.js'; import { getInputSuffix } from '../utils.js'; +import { usePlatformName } from '../../settings.provider.js'; /** * @typedef {import('../strings.json')} Strings @@ -26,6 +27,7 @@ import { getInputSuffix } from '../utils.js'; export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, onSubmitSearch }) { const { t } = useTypedTranslationWith(/** @type {Strings} */ ({})); const suggestionsListId = useId(); + const platformName = usePlatformName(); const { suggestions, @@ -45,10 +47,12 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on onSubmitSearch, }); + const inputRef = useCompletionInput(inputBase, inputCompletion); + const inputSuffix = getInputSuffix(term, selectedSuggestion); const inputSuffixText = useSuffixText(inputSuffix); - - const inputRef = useCompletionInput(inputBase, inputCompletion); + const inputFont = platformName === 'windows' ? '400 13px / 16px system-ui' : '500 13px / 16px system-ui'; + const inputSuffixWidth = useMemo(() => measureText(inputSuffixText, inputFont), [inputSuffixText, inputFont]); useEffect(() => { if (autoFocus && inputRef.current) { @@ -72,7 +76,7 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on onBlurCapture={handleBlur} onSubmit={handleSubmit} > -