diff --git a/src/webviews/apps/plus/graph/graph.scss b/src/webviews/apps/plus/graph/graph.scss index 184aff5..946e73d 100644 --- a/src/webviews/apps/plus/graph/graph.scss +++ b/src/webviews/apps/plus/graph/graph.scss @@ -125,7 +125,7 @@ a { appearance: none; font-family: inherit; border: none; - padding: 0 0.75rem; + padding: 0 0.6rem; cursor: pointer; color: var(--vscode-menu-foreground); background-color: var(--vscode-menu-background); diff --git a/src/webviews/apps/shared/components/search/search-input.ts b/src/webviews/apps/shared/components/search/search-input.ts index cd1ef14..d20ac98 100644 --- a/src/webviews/apps/shared/components/search/search-input.ts +++ b/src/webviews/apps/shared/components/search/search-input.ts @@ -17,7 +17,7 @@ export type SearchOperators = export type HelpTypes = 'message:' | 'author:' | 'commit:' | 'file:' | 'change:'; -const searchRegex = /(?:^|(?<= ))(message:|@:|author:|#:|commit:|\?:|file:|~:|change:)/gi; +const searchRegex = /(?:^|(?<= ))(=:|message:|@:|author:|#:|commit:|\?:|file:|~:|change:)/gi; const operatorsHelpMap = new Map([ ['=:', 'message:'], ['message:', 'message:'], @@ -49,7 +49,7 @@ const template = html` id="search" part="search" class="${x => (x.showHelp ? 'has-helper' : '')}" - type="search" + type="text" spellcheck="false" placeholder="${x => x.placeholder}" :value="${x => x.value}" @@ -146,20 +146,21 @@ const template = html`
+

Search by

@@ -190,9 +191,8 @@ const styles = css` color: var(--vscode-input-foreground); cursor: pointer; } - label[aria-expanded='true'] { + label:hover { background-color: var(--vscode-input-background); - border-radius: 0.3rem 0.3rem 0 0; } .icon-small { @@ -326,29 +326,35 @@ const styles = css` left: 0; z-index: 5000; width: fit-content; - background-color: var(--vscode-input-background); - border-radius: 0 0.3rem 0.3rem 0.3rem; + background-color: var(--vscode-menu-background); + border: 1px solid var(--vscode-menu-border); outline: none; } label[aria-expanded='true'] ~ .helper { display: block; } + .helper-label { + text-transform: uppercase; + font-size: 0.84em; + line-height: 2.2rem; + padding-left: 0.6rem; + padding-right: 0.6rem; + margin: 0; + } + .helper-button { display: block; width: 100%; - padding: 0.3rem 0.6rem; + padding-left: 0.6rem; + padding-right: 0.6rem; + line-height: 2.2rem; text-align: left; + color: var(--vscode-menu-foreground); } .helper-button:hover { - background-color: var(--vscode-inputOption-hoverBackground); - } - .helper-button:first-child { - border-top-right-radius: 0.3rem; - } - .helper-button:last-child { - border-bottom-left-radius: 0.3rem; - border-bottom-right-radius: 0.3rem; + color: var(--vscode-menu-selectionForeground); + background-color: var(--vscode-menu-selectionBackground); } .helper-button small { opacity: 0.5;