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({
<IconButton
// Vertically center icon on left side of input. Increase the text
// 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}
size="lg"
title="Search"
......@@ -100,7 +100,7 @@ export default function SearchField({
<Input
aria-label="Search annotations"
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
)}
data-testid="search-input"
......@@ -117,7 +117,7 @@ export default function SearchField({
/>
{pendingQuery && (
<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"
icon={CancelIcon}
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