feat: show action buttons only on hover (#869)

Author: setchy

src/components/NotificationRow.tsx

@@ -67,7 +67,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}`}
         title={notificationTitle}
@@ -90,7 +90,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"

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"

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"
@@ -59,7 +59,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"

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"