From 21c01fed39e125d85eb4e88f149d59c32b0f3a68 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 8 Mar 2024 14:32:48 -0500
Subject: [PATCH] feat: show action buttons only on hover

---
 src/components/NotificationRow.tsx                         | 4 ++--
 src/components/Repository.tsx                              | 4 ++--
 src/components/__snapshots__/NotificationRow.test.tsx.snap | 4 ++--
 src/components/__snapshots__/Repository.test.tsx.snap      | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 44c049c0a..dc50868b0 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -63,7 +63,7 @@ export const NotificationRow: React.FC<IProps> = ({
   });
 
   return (
-    <div className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker">
+    <div className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group">
       <div className={`flex justify-center items-center w-5 ${realIconColor}`}>
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
@@ -83,7 +83,7 @@ export const NotificationRow: React.FC<IProps> = ({
         </div>
       </div>
 
-      <div className="flex justify-center items-center gap-2">
+      <div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
         <button
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Done"
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 7cf0ed8ca..2ece71241 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -40,13 +40,13 @@ export const RepositoryNotifications: React.FC<IProps> = ({
 
   return (
     <>
-      <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white">
+      <div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group">
         <div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
           <img className="rounded w-5 h-5" src={avatarUrl} />
           <span onClick={openBrowser}>{repoName}</span>
         </div>
 
-        <div className="flex justify-center items-center gap-2">
+        <div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
           <button
             className="focus:outline-none h-full hover:text-green-500"
             title="Mark Repository as Done"
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 643122d32..4b93cd92d 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/Notification.js should render itself & its children 1`] = `
 <div
-  className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker"
+  className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
 >
   <div
     className="flex justify-center items-center w-5 text-green-500"
@@ -58,7 +58,7 @@ exports[`components/Notification.js should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    className="flex justify-center items-center gap-2"
+    className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
   >
     <button
       className="focus:outline-none h-full hover:text-green-500"
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index 8222bc734..a7059bbf8 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`components/Repository.tsx should render itself & its children 1`] = `
 [
   <div
-    className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white"
+    className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group"
   >
     <div
       className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
@@ -19,7 +19,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
       </span>
     </div>
     <div
-      className="flex justify-center items-center gap-2"
+      className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity"
     >
       <button
         className="focus:outline-none h-full hover:text-green-500"