Improve styling of search results

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

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;

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

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;

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",