don't use forwardRef anti-pattern

fix: make first-time tooltip buttons less-annoying

src/react/Button.tsx

@@ -1,5 +1,5 @@
-import { forwardRef } from 'react'
 import classNames from 'classnames'
+import { FC, Ref } from 'react'
 import { loadSound, playSound } from '../basicSounds'
 import buttonCss from './button.module.css'
 
@@ -10,11 +10,12 @@ interface Props extends React.ComponentProps<'button'> {
   icon?: string
   children?: React.ReactNode
   inScreen?: boolean
+  rootRef?: Ref<HTMLButtonElement>
 }
 
 void loadSound('button_click.mp3')
 
-export default forwardRef<HTMLButtonElement, Props>(({ label, icon, children, inScreen, ...args }, ref) => {
+export default (({ label, icon, children, inScreen, rootRef, ...args }) => {
   const onClick = (e) => {
     void playSound('button_click.mp3')
     args.onClick?.(e)
@@ -28,9 +29,9 @@ export default forwardRef<HTMLButtonElement, Props>(({ label, icon, children, in
     args.style.width = 20
   }
 
-  return <button ref={ref} {...args} className={classNames(buttonCss.button, args.className)} onClick={onClick}>
+  return <button ref={rootRef} {...args} className={classNames(buttonCss.button, args.className)} onClick={onClick}>
     {icon && <iconify-icon class={buttonCss.icon} icon={icon}></iconify-icon>}
     {label}
     {children}
   </button>
-})
+}) satisfies FC<Props>

src/react/ButtonWithTooltip.tsx

@@ -51,20 +51,21 @@ export default ({ initialTooltip, ...args }: Props) => {
   })
 
   return <>
-    <Button {...args} ref={refs.setReference} />
+    <Button {...args} rootRef={refs.setReference} />
     <div ref={refs.setFloating} style={{
       ...floatingStyles,
-      background: 'rgba(0, 0, 0, 0.7)',
+      background: 'rgba(0, 0, 0, 0.3)',
       fontSize: 8,
       pointerEvents: 'none',
       userSelect: 'text',
       padding: '2px 4px',
       opacity: showTooltips ? 1 : 0,
       transition: 'opacity 0.3s ease-in-out',
+      textShadow: '1px 1px 2px BLACK',
       zIndex: 11
     }}>
       {initialTooltip.content}
-      <FloatingArrow ref={arrowRef} context={context}></FloatingArrow>
+      <FloatingArrow ref={arrowRef} context={context} style={{ opacity: 0.7 }}></FloatingArrow>
     </div>
   </>
 }