From f64fa3b82638c8b4ec72b2e09a6341a44745ff46 Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Sat, 16 Mar 2024 22:53:40 -0400
Subject: fix: fix ButtonMenu icon rotation

---
 src/components/ButtonMenu.css | 11 +++--------
 src/components/ButtonMenu.tsx |  6 +++++-
 2 files changed, 8 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/ButtonMenu.css b/src/components/ButtonMenu.css
index 45d986a..e896030 100644
--- a/src/components/ButtonMenu.css
+++ b/src/components/ButtonMenu.css
@@ -4,23 +4,18 @@
 			position: relative;
 			padding-left: 2.5rem;
 
-			&::before {
+			img {
 				content: '';
-				width: 1rem;
-				height: 1rem;
 				left: 0.75rem;
 				position: absolute;
-				background: url('../icons/chevron-right.svg');
-				background-position: left 2px center;
-				background-repeat: no-repeat;
 			}
 
-			&:has(+ :popover-open)::before {
+			&:has(+ :popover-open) img {
 				transform: rotate(90deg);
 			}
 
 			@media not (prefers-reduced-motion) {
-				&::before {
+				img {
 					transition: transform 0.2s;
 				}
 			}
diff --git a/src/components/ButtonMenu.tsx b/src/components/ButtonMenu.tsx
index f4427b3..1cb518a 100644
--- a/src/components/ButtonMenu.tsx
+++ b/src/components/ButtonMenu.tsx
@@ -3,6 +3,7 @@ import { useEffect, useCallback, useRef, useId } from 'preact/hooks';
 import { useSignal, batch } from '@preact/signals';
 import Button from './Button.tsx';
 import Menu from './Menu.tsx';
+import chevronRight from '../icons/chevron-right.svg';
 import './ButtonMenu.css';
 
 export interface ButtonMenuProps {
@@ -31,7 +32,10 @@ const ButtonMenu = ({ children, label }: ButtonMenuProps) => {
 			onScroll={updateRect}
 			style={`--anchor-x: ${x}px; --anchor-y: ${y}px;`}
 		>
-			<Button kind="ghost" popoverTarget={id}>{label}</Button>
+			<Button kind="ghost" popoverTarget={id}>
+				<img src={chevronRight} />
+				{label}
+			</Button>
 			<Menu id={id} popover="auto">
 				{children}
 			</Menu>
-- 
cgit v1.2.3