yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve styling of search results

Browse Source
This commit is contained in:
Tom Moor
2023-11-28 23:04:20 -05:00
parent 5092694951
commit b8f5d669fe
5 changed files with 8 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/components/DocumentListItem.tsx
View File

@@ -260,8 +260,8 @@ const Title = styled(Highlight)`
const ResultContext = styled(Highlight)` const ResultContext = styled(Highlight)`
display: block; display: block;
color: ${s("textTertiary")}; color: ${s("textSecondary")};
font-size: 14px; font-size: 15px;
margin-top: -0.25em; margin-top: -0.25em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
`; `;

7
app/components/Highlight.tsx
View File

@@ -2,7 +2,6 @@ import escapeRegExp from "lodash/escapeRegExp";
import * as React from "react"; import * as React from "react";
import replace from "string-replace-to-array"; import replace from "string-replace-to-array";
import styled from "styled-components"; import styled from "styled-components";
import { s } from "@shared/styles";
type Props = React.HTMLAttributes<HTMLSpanElement> & { type Props = React.HTMLAttributes<HTMLSpanElement> & {
highlight: (string | null | undefined) | RegExp; highlight: (string | null | undefined) | RegExp;
@@ -44,9 +43,9 @@ function Highlight({
} }
export const Mark = styled.mark` export const Mark = styled.mark`
background: ${s("searchHighlight")}; color: inherit;
border-radius: 2px; background: transparent;
padding: 0 2px; font-weight: 600;
`; `;
export default Highlight; export default Highlight;

5
app/scenes/Search/components/SearchInput.tsx
View File

@@ -33,7 +33,7 @@ function SearchInput(
return ( return (
<Wrapper align="center"> <Wrapper align="center">
<StyledIcon size={46} color={theme.textTertiary} onClick={focusInput} /> <StyledIcon size={46} color={theme.placeholder} onClick={focusInput} />
<StyledInput <StyledInput
{...rest} {...rest}
defaultValue={defaultValue} defaultValue={defaultValue}
@@ -54,7 +54,7 @@ const Wrapper = styled(Flex)`
const StyledInput = styled.input` const StyledInput = styled.input`
width: 100%; width: 100%;
padding: 10px 10px 10px 60px; padding: 10px 10px 10px 60px;
font-size: 36px; font-size: 30px;
font-weight: 400; font-weight: 400;
outline: none; outline: none;
border: 0; border: 0;
@@ -84,6 +84,7 @@ const StyledInput = styled.input`
const StyledIcon = styled(SearchIcon)` const StyledIcon = styled(SearchIcon)`
position: absolute; position: absolute;
left: 8px; left: 8px;
opacity: 0.7;
`; `;
export default React.forwardRef(SearchInput); export default React.forwardRef(SearchInput);

1
app/typings/styled-components.d.ts vendored
View File

@@ -81,7 +81,6 @@ declare module "styled-components" {
accent: string; accent: string;
yellow: string; yellow: string;
warmGrey: string; warmGrey: string;
searchHighlight: string;
danger: string; danger: string;
warning: string; warning: string;
success: string; success: string;

1
shared/styles/theme.ts
View File

@@ -27,7 +27,6 @@ const defaultColors: Colors = {
accent: "#0366d6", accent: "#0366d6",
yellow: "#EDBA07", yellow: "#EDBA07",
warmGrey: "#EDF2F7", warmGrey: "#EDF2F7",
searchHighlight: "#FDEA9B",
danger: "#f4345d", danger: "#f4345d",
warning: "#f08a24", warning: "#f08a24",
success: "#2f3336", success: "#2f3336",