fixed hover stylings over buttons

src/renderer/components/Increment/ActionsClone.tsx

@@ -4,6 +4,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { IIncrement } from '../../interfaces/IIncrement';
 import { handleClone } from '../../utils/incrementHandlers';
 import { AppDispatch } from '../../store';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ActionsCloneProps {
   increment: IIncrement;
@@ -20,7 +21,7 @@ const ActionsClone: React.FC<ActionsCloneProps> = ({
     <Popup
       trigger={
         <Button
-          className="action-clone"
+          className="action-button"
           basic
           size="tiny"
           icon

src/renderer/components/Increment/ActionsDelete.tsx

@@ -4,6 +4,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { handleDelete } from '../../utils/incrementHandlers';
 import { AppDispatch } from '../../store';
 import { IIncrement } from '../../interfaces/IIncrement';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ActionsDeleteProps {
   increment: IIncrement;
@@ -20,7 +21,7 @@ const ActionsDelete: React.FC<ActionsDeleteProps> = ({
     <Popup
       trigger={
         <Button
-          className="action-delete"
+          className="action-button"
           basic
           size="tiny"
           icon

src/renderer/components/Increment/ActionsEdit.tsx

@@ -4,6 +4,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { IIncrement } from '../../interfaces/IIncrement';
 import { handleEdit } from '../../utils/incrementHandlers';
 import { AppDispatch } from '../../store';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ActionsEditProps {
   increment: IIncrement;
@@ -20,7 +21,7 @@ const ActionsEdit: React.FC<ActionsEditProps> = ({
     <Popup
       trigger={
         <Button
-          className="action-edit"
+          className="action-button"
           basic
           size="tiny"
           icon

src/renderer/components/Model/Actions.tsx

@@ -5,6 +5,7 @@ import ModelActionsClone from './ActionsClone';
 import ModelActionsDelete from './ActionsDelete';
 import { AppDispatch } from '../../store';
 import type { IModel } from '../../interfaces/IModel';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ActionsProps {
   model: IModel;

src/renderer/components/Model/ActionsClone.tsx

@@ -3,6 +3,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { AppDispatch } from '../../store';
 import { handleClone } from '../../utils/modelHandlers';
 import type { IModel } from '../../interfaces/IModel';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ActionsCloneProps {
   model: IModel;
@@ -12,7 +13,13 @@ interface ActionsCloneProps {
 const ActionsClone: React.FC<ActionsCloneProps> = ({ model, dispatch }) => (
   <Popup
     trigger={
-      <Button basic icon size="tiny" onClick={(e) => handleClone(e, model, dispatch)}>
+      <Button
+        basic
+        icon
+        size="tiny"
+        className="action-button"
+        onClick={(e) => handleClone(e, model, dispatch)}
+      >
         <Icon name="clone" />
       </Button>
     }

src/renderer/components/Model/ActionsDelete.tsx

@@ -3,6 +3,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { AppDispatch } from '../../store';
 import { handleDelete } from '../../utils/modelHandlers';
 import { IModel } from '../../interfaces/IModel';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ActionsDeleteProps {
   model: IModel;
@@ -12,7 +13,13 @@ interface ActionsDeleteProps {
 const ActionsDelete: React.FC<ActionsDeleteProps> = ({ model, dispatch }) => (
   <Popup
     trigger={
-      <Button basic icon size="tiny" onClick={(e) => handleDelete(e, model.id, dispatch)}>
+      <Button
+        basic
+        icon
+        size="tiny"
+        className="action-button"
+        onClick={(e) => handleDelete(e, model.id, dispatch)}
+      >
         <Icon color="red" name="trash" />
       </Button>
     }

src/renderer/components/Model/ActionsEdit.tsx

@@ -3,6 +3,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import type { IModel } from '../../interfaces/IModel';
 import { AppDispatch } from '../../store';
 import { handleEdit } from '../../utils/modelHandlers';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface ModelActionsEditProps {
   model: IModel;
@@ -12,7 +13,13 @@ interface ModelActionsEditProps {
 const ModelActionsEdit: React.FC<ModelActionsEditProps> = ({ model, dispatch }) => (
   <Popup
     trigger={
-      <Button basic icon size="tiny" onClick={(e) => handleEdit(e, model, dispatch)}>
+      <Button
+        basic
+        icon
+        size="tiny"
+        className="action-button"
+        onClick={(e) => handleEdit(e, model, dispatch)}
+      >
         <Icon name="pencil" />
       </Button>
     }

src/renderer/components/Products/TableCellActionsClone.tsx

@@ -4,6 +4,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { IProduct } from '../../interfaces/IProduct';
 import { handleClone } from '../../utils/productsHandlers';
 import { AppDispatch } from '../../store';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface TableCellActionsCloneProps {
   product: IProduct;
@@ -19,6 +20,7 @@ const TableCellActionsClone: React.FC<TableCellActionsCloneProps> = ({ product }
           basic
           size="tiny"
           icon
+          className="products-button"
           onClick={(e) => handleClone(e, product, dispatch)}
         >
           <Icon name="clone" />

src/renderer/components/Products/TableCellActionsDelete.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Icon, Popup } from 'semantic-ui-react';
 import { IProduct } from '../../interfaces/IProduct';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface TableCellActionsDeleteProps {
   product: IProduct;
@@ -16,7 +17,11 @@ const TableCellActionsDelete: React.FC<TableCellActionsDeleteProps> = ({
   return (
     <Popup
       trigger={
-        <Button basic size="tiny" icon
+        <Button
+          basic
+          size="tiny"
+          icon
+          className="products-button"
           onClick={(e) => {
             e.stopPropagation();
             setProductToDelete(product.id);

src/renderer/components/Products/TableCellActionsEdit.tsx

@@ -4,6 +4,7 @@ import { Button, Icon, Popup } from 'semantic-ui-react';
 import { IProduct } from '../../interfaces/IProduct';
 import { openEditModal } from '../../utils/productsHandlers';
 import { AppDispatch } from '../../store';
+import '../../styles/products.css'; // Ensure this path is correct based on your project structure
 
 interface TableCellActionsEditProps {
   product: IProduct;
@@ -19,6 +20,7 @@ const TableCellActionsEdit: React.FC<TableCellActionsEditProps> = ({ product })
           basic
           size="tiny"
           icon
+          className="products-button"
           onClick={(e) => {
             e.stopPropagation();
             openEditModal(dispatch, product);

src/renderer/styles/increment.css

@@ -29,3 +29,12 @@
 .increment-content {
   padding-left: 2em;
 }
+
+.increment-actions .action-button {
+  opacity: 0.2;
+  transition: opacity 0.3s ease;
+}
+
+.increment-actions .action-button:hover {
+  opacity: 1;
+}

src/renderer/styles/model.css

@@ -35,3 +35,12 @@
   display: flex;
   align-items: center;
 }
+
+.model-actions .action-button {
+  opacity: 0.2;
+  transition: opacity 0.3s ease;
+}
+
+.model-actions .action-button:hover {
+  opacity: 1;
+}

src/renderer/styles/products.css

@@ -160,7 +160,6 @@
   max-width: 180px;
 }
 
-/* Responsive Table Styles */
 .segment.basic {
   overflow-x: auto;
   padding: 0;
@@ -197,3 +196,11 @@
     justify-content: flex-end !important;
   }
 }
+
+.products-button {
+  opacity: 0.2;
+}
+
+.products-button:hover {
+  opacity: 1;
+}