Commit 63033b10 authored by Robert Knight's avatar Robert Knight

Adjust icon placement

Adjust icon placement per feedback in
https://github.com/hypothesis/client/pull/6130#pullrequestreview-1838479102.
parent df69b8d3
...@@ -90,7 +90,7 @@ export default function SearchField({ ...@@ -90,7 +90,7 @@ export default function SearchField({
<IconButton <IconButton
// Vertically center icon on left side of input. Increase the text // Vertically center icon on left side of input. Increase the text
// size to make the icon the same size as the top bar icons. // size to make the icon the same size as the top bar icons.
classes="absolute left-1 text-[16px] top-[50%] translate-y-[-50%]" classes="absolute left-0 text-[16px] top-[50%] translate-y-[-50%]"
icon={SearchIcon} icon={SearchIcon}
size="lg" size="lg"
title="Search" title="Search"
...@@ -100,7 +100,7 @@ export default function SearchField({ ...@@ -100,7 +100,7 @@ export default function SearchField({
<Input <Input
aria-label="Search annotations" aria-label="Search annotations"
classes={classnames( classes={classnames(
'pl-9 pr-9', // Add padding so input does not overlap search/clear buttons. 'pl-8 pr-8', // Add padding so input does not overlap search/clear buttons.
'disabled:text-grey-6', // Dim text when input is disabled 'disabled:text-grey-6', // Dim text when input is disabled
)} )}
data-testid="search-input" data-testid="search-input"
...@@ -117,7 +117,7 @@ export default function SearchField({ ...@@ -117,7 +117,7 @@ export default function SearchField({
/> />
{pendingQuery && ( {pendingQuery && (
<IconButton <IconButton
classes="absolute right-1 text-[16px] top-[50%] translate-y-[-50%]" classes="absolute right-0 text-[16px] top-[50%] translate-y-[-50%]"
size="lg" size="lg"
icon={CancelIcon} icon={CancelIcon}
data-testid="clear-button" data-testid="clear-button"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment