From b8f5d669fe400989083878c44406251fd8b495fd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 28 Nov 2023 23:04:20 -0500
Subject: [PATCH] Improve styling of search results

---
 app/components/DocumentListItem.tsx          | 4 ++--
 app/components/Highlight.tsx                 | 7 +++----
 app/scenes/Search/components/SearchInput.tsx | 5 +++--
 app/typings/styled-components.d.ts           | 1 -
 shared/styles/theme.ts                       | 1 -
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/components/DocumentListItem.tsx b/app/components/DocumentListItem.tsx
index 9f220f76e..1b8862952 100644
--- a/app/components/DocumentListItem.tsx
+++ b/app/components/DocumentListItem.tsx
@@ -260,8 +260,8 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${s("textTertiary")};
-  font-size: 14px;
+  color: ${s("textSecondary")};
+  font-size: 15px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;
 `;
diff --git a/app/components/Highlight.tsx b/app/components/Highlight.tsx
index f57e7135f..d071dc6d7 100644
--- a/app/components/Highlight.tsx
+++ b/app/components/Highlight.tsx
@@ -2,7 +2,6 @@ import escapeRegExp from "lodash/escapeRegExp";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
-import { s } from "@shared/styles";
 
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
   highlight: (string | null | undefined) | RegExp;
@@ -44,9 +43,9 @@ function Highlight({
 }
 
 export const Mark = styled.mark`
-  background: ${s("searchHighlight")};
-  border-radius: 2px;
-  padding: 0 2px;
+  color: inherit;
+  background: transparent;
+  font-weight: 600;
 `;
 
 export default Highlight;
diff --git a/app/scenes/Search/components/SearchInput.tsx b/app/scenes/Search/components/SearchInput.tsx
index d645b9c1c..2487d9600 100644
--- a/app/scenes/Search/components/SearchInput.tsx
+++ b/app/scenes/Search/components/SearchInput.tsx
@@ -33,7 +33,7 @@ function SearchInput(
 
   return (
     <Wrapper align="center">
-      <StyledIcon size={46} color={theme.textTertiary} onClick={focusInput} />
+      <StyledIcon size={46} color={theme.placeholder} onClick={focusInput} />
       <StyledInput
         {...rest}
         defaultValue={defaultValue}
@@ -54,7 +54,7 @@ const Wrapper = styled(Flex)`
 const StyledInput = styled.input`
   width: 100%;
   padding: 10px 10px 10px 60px;
-  font-size: 36px;
+  font-size: 30px;
   font-weight: 400;
   outline: none;
   border: 0;
@@ -84,6 +84,7 @@ const StyledInput = styled.input`
 const StyledIcon = styled(SearchIcon)`
   position: absolute;
   left: 8px;
+  opacity: 0.7;
 `;
 
 export default React.forwardRef(SearchInput);
diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts
index f30b74449..bb65ceb13 100644
--- a/app/typings/styled-components.d.ts
+++ b/app/typings/styled-components.d.ts
@@ -81,7 +81,6 @@ declare module "styled-components" {
     accent: string;
     yellow: string;
     warmGrey: string;
-    searchHighlight: string;
     danger: string;
     warning: string;
     success: string;
diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts
index 40a9bbd62..3b849efc6 100644
--- a/shared/styles/theme.ts
+++ b/shared/styles/theme.ts
@@ -27,7 +27,6 @@ const defaultColors: Colors = {
   accent: "#0366d6",
   yellow: "#EDBA07",
   warmGrey: "#EDF2F7",
-  searchHighlight: "#FDEA9B",
   danger: "#f4345d",
   warning: "#f08a24",
   success: "#2f3336",