diff --git a/src/annotator/components/AdderToolbar.tsx b/src/annotator/components/AdderToolbar.tsx index 62772ced28c..448bce603d9 100644 --- a/src/annotator/components/AdderToolbar.tsx +++ b/src/annotator/components/AdderToolbar.tsx @@ -19,7 +19,7 @@ function NumberIcon({ badgeCount }: { badgeCount: number }) { return (
+
diff --git a/src/sidebar/components/MarkdownEditor.tsx b/src/sidebar/components/MarkdownEditor.tsx index a8caeab1806..918b6032526 100644 --- a/src/sidebar/components/MarkdownEditor.tsx +++ b/src/sidebar/components/MarkdownEditor.tsx @@ -225,7 +225,7 @@ function Toolbar({ isPreviewing, onCommand, onTogglePreview }: ToolbarProps) { className={classnames( // Allow buttons to wrap to second line if necessary. 'flex flex-wrap w-full items-center', - 'p-1 border-x border-t rounded-t-[4px] bg-white', + 'p-1 border-x border-t rounded-t bg-white', // For touch interfaces, allow height to scale to larger button targets. // Don't wrap buttons but instead scroll horizontally. Add bottom // padding to provide some space for scrollbar. diff --git a/src/sidebar/components/Menu.tsx b/src/sidebar/components/Menu.tsx index a69eb748e64..79703394f9d 100644 --- a/src/sidebar/components/Menu.tsx +++ b/src/sidebar/components/Menu.tsx @@ -232,7 +232,7 @@ export default function Menu({ direction="up" classes={classnames( // Position menu-arrow caret near bottom right of menu label/toggle control - 'right-0 top-[calc(100%-3px)] w-[15px]', + 'right-1 top-[calc(100%-3px)] w-[15px]', arrowClass, )} /> @@ -240,11 +240,13 @@ export default function Menu({ className={classnames( 'focus-visible-ring', // Position menu content near bottom of menu label/toggle control - 'absolute top-[calc(100%+5px)] z-1 border shadow', - 'bg-white text-md', + 'absolute top-[calc(100%+5px)] z-1', + 'border shadow rounded-lg overflow-hidden bg-white text-md', { 'left-0': align === 'left', - 'right-0': align === 'right', + // Adding negative right distance so that the menu arrow does + // not overlap with the top-right corner when it's rounded + '-right-1': align === 'right', }, contentClass, )} diff --git a/src/sidebar/components/MenuItem.tsx b/src/sidebar/components/MenuItem.tsx index 74609275e63..7919da0e88d 100644 --- a/src/sidebar/components/MenuItem.tsx +++ b/src/sidebar/components/MenuItem.tsx @@ -239,7 +239,7 @@ export default function MenuItem({ const wrapperClasses = classnames( 'focus-visible-ring ring-inset', 'w-full min-w-[150px] flex items-center select-none', - 'border-b', + 'border-b rounded-none cursor-pointer', // Set this container as a "group" so that children may style based on its // layout state. // See https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state @@ -263,7 +263,7 @@ export default function MenuItem({ 'border-b-grey-3': isExpanded, 'border-b-transparent': !isExpanded, 'text-color-text-light': isDisabled, - 'text-color-text': !isDisabled, + 'text-color-text hover:text-color-text': !isDisabled, }, ); diff --git a/src/sidebar/components/PaginationNavigation.tsx b/src/sidebar/components/PaginationNavigation.tsx index 70dc26a86ab..eb51bfad368 100644 --- a/src/sidebar/components/PaginationNavigation.tsx +++ b/src/sidebar/components/PaginationNavigation.tsx @@ -19,7 +19,7 @@ function NavigationButton({ ...buttonProps }: NavigationButtonProps) {