[NTP Search]: UX tweaks

brave · Jul 9, 2024 · 502027b · 502027b
1 parent cf7f2d8
commit 502027b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/components/brave_new_tab_ui/components/search/SearchResult.tsx b/components/brave_new_tab_ui/components/search/SearchResult.tsx
@@ -47,10 +47,17 @@ const IconContainer = styled.div`
 
   flex-shrink: 0;
 
-  > span, > img {
+  > * { border-radius: ${radius.s}; }
+
+  > span {
     width: 20px;
     height: 20px;
   }
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
 `
 
 const SearchIcon = styled.span<{ url: string }>`
@@ -67,7 +74,7 @@ const FavIcon = styled.span<{ url: string }>`
 const Content = styled.span`
   font: ${font.large.regular};
   line-height: 24px;
-  color: ${color.text.secondary};
+  color: ${color.white};
 `
 
 const Description = styled.span`
@@ -76,12 +83,8 @@ const Description = styled.span`
   color: rgba(255,255,255,0.7);
 `
 
-const Hint = styled.span`
-  color: ${color.text.interactive};
-`
-
 const LeoIcon = styled(Icon)`
-  --leo-icon-size: ${icon.m};
+  --leo-icon-size: ${icon.l};
 
   color: ${color.white};
   background: ${gradient.iconsActive};
@@ -125,10 +128,6 @@ export default function SearchResult({ match, selected, onClick }: Props) {
   const description = mojoString16ToString(match.swapContentsAndDescription ? match.contents : match.description)
   const isAskLeo = description === getLocale('searchAskLeo')
 
-  const hint = description && match.destinationUrl.url
-    ? description
-    : ''
-
   const result = <Container href={match.destinationUrl.url} aria-selected={selected} onClick={e => {
     e.preventDefault()
     onClick(e)
@@ -137,8 +136,8 @@ export default function SearchResult({ match, selected, onClick }: Props) {
       <Image key={match.imageUrl ?? match.iconUrl} match={match} isAskLeo={isAskLeo} />
     </IconContainer>
     <Flex direction='column'>
-      <Content>{contents}<Hint>{hint ? ` - ${hint}` : ''}</Hint></Content>
-      {description && description !== hint && <Description>{description}</Description>}
+      <Content>{contents}</Content>
+      {description && <Description>{description}</Description>}
     </Flex>
   </Container>
 

diff --git a/components/brave_new_tab_ui/components/search/SearchResults.tsx b/components/brave_new_tab_ui/components/search/SearchResults.tsx
@@ -15,7 +15,7 @@ import { handleOpenURLClick, validateScheme } from '$web-common/SecureLink';
 import MaybePromptEnableSuggestions from './MaybePromptEnableSuggestions';
 
 const Container = styled.div`
-  border-top: 1px solid ${color.divider.subtle};
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 
   background: rgba(255,255,255,0.1);