feat: add hover effects to device menu items

* add hover effects to device menu items
* add hover styling on other buttons

Author: gnoulk

src/AppFooter.tsx

@@ -11,11 +11,11 @@ export const AppFooter = ({
     <div className="grid justify-center m-1">
       <div>
         <span>&copy; 2024 - The ZMK Contributors</span> -{" "}
-        <a href="#" onClick={onShowAbout}>
+        <a className="hover:text-accent hover:cursor-pointer" onClick={onShowAbout}>
           About ZMK Studio
         </a>{" "}
         -{" "}
-        <a href="#" onClick={onShowLicenseNotice}>
+        <a className="hover:text-accent hover:cursor-pointer" onClick={onShowLicenseNotice}>
           License NOTICE
         </a>
       </div>

src/AppHeader.tsx

@@ -58,11 +58,11 @@ export const AppHeader = ({
   const showSettingsRef = useModalRef(showSettingsReset);
   const [unsaved, setUnsaved] = useConnectedDeviceData<boolean>(
     { keymap: { checkUnsavedChanges: true } },
-    (r) => r.keymap?.checkUnsavedChanges
+    (r) => r.keymap?.checkUnsavedChanges,
   );
 
   useSub("rpc_notification.keymap.unsavedChangesStatusChanged", (unsaved) =>
-    setUnsaved(unsaved)
+    setUnsaved(unsaved),
   );
 
   return (
@@ -100,12 +100,12 @@ export const AppHeader = ({
           {connectedDeviceLabel}
         </Button>
         <Popover>
-          <Menu className="border rounded bg-bg-base">
-            <MenuItem className="p-1" onAction={onDisconnect}>
+          <Menu className="border rounded bg-bg-base cursor-pointer">
+            <MenuItem className="p-1 hover:text-accent" onAction={onDisconnect}>
               Disconnect
             </MenuItem>
             <MenuItem
-              className="p-1"
+              className="p-1 hover:text-accent"
               onAction={() => setShowSettingsReset(true)}
             >
               Settings Reset
@@ -117,7 +117,7 @@ export const AppHeader = ({
         {onUndo && (
           <button
             type="button"
-            className="flex justify-center items-center rounded border-solid border-transparent px-3 py-1.5 border enabled:hover:border-text-base disabled:text-gray-500"
+            className="flex justify-center items-center px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
             disabled={!canUndo}
             onClick={onUndo}
           >
@@ -131,7 +131,7 @@ export const AppHeader = ({
         {onRedo && (
           <button
             type="button"
-            className="flex items-center justify-center rounded border-solid border-transparent px-3 py-1.5 border enabled:hover:border-text-base disabled:text-gray-500"
+            className="flex items-center justify-center px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
             disabled={!canRedo}
             onClick={onRedo}
           >
@@ -143,15 +143,15 @@ export const AppHeader = ({
         )}
         <button
           type="button"
-          className="rounded border-solid border-transparent px-3 py-1.5 border enabled:hover:border-text-base disabled:text-gray-500"
+          className="px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
           disabled={!unsaved}
           onClick={onSave}
         >
           Save
         </button>
         <button
           type="button"
-          className="rounded border-solid border-transparent px-3 py-1.5 border enabled:hover:border-text-base disabled:text-gray-500"
+          className="px-3 py-1.5 enabled:hover:text-accent disabled:text-gray-500"
           onClick={onDiscard}
           disabled={!unsaved}
         >

src/ConnectModal.tsx

@@ -164,7 +164,11 @@ function simpleDevicePicker(
 
   let connections = transports.map((t) => (
     <li key={t.label} className="p-1 m-1 list-none">
-      <button type="button" onClick={async () => setSelectedTransport(t)}>
+      <button
+        className="hover:text-accent"
+        type="button"
+        onClick={async () => setSelectedTransport(t)}
+      >
         {t.label}
       </button>
     </li>

src/keyboard/LayerPicker.tsx

@@ -171,7 +171,7 @@ export const LayerPicker = ({
         {onRemoveClicked && (
           <button
             type="button"
-            className="px-2"
+            className="px-2 hover:text-accent"
             disabled={!canRemove}
             onClick={onRemoveClicked}
           >
@@ -182,7 +182,7 @@ export const LayerPicker = ({
           <button
             type="button"
             disabled={!canAdd}
-            className="px-2"
+            className="px-2 hover:text-accent disabled:text-gray-500 disabled:cursor-not-allowed"
             onClick={onAddClicked}
           >
             +

src/keyboard/PhysicalLayoutPicker.tsx

@@ -46,7 +46,7 @@ export const PhysicalLayoutPicker = ({
       selectedKey={layouts[selectedPhysicalLayoutIndex].name}
     >
       <Label className="after:content-[':']">Layout</Label>
-      <Button className="ml-4 min-w-24 text-left">
+      <Button className="ml-4 min-w-24 text-left hover:text-accent">
         <SelectValue<PhysicalLayoutItem>>
           {(v) => {
             return <span>{v.selectedItem?.name}</span>;