setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onFocus={() => setIsHovered(true)}
@@ -105,7 +106,7 @@ const ToastItem: React.FC<{ toast: ToastMessage; removeToast: (id: string) => vo
const ToastContainer: React.FC<{ toasts: ToastMessage[]; removeToast: (id: string) => void }> = ({ toasts, removeToast }) => {
return (
-
+
{toasts.map(toast => (
))}
diff --git a/src/index.css b/src/index.css
index 115b778..834831d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -352,7 +352,7 @@
color: hsl(var(--text-primary));
font-weight: 500;
font-size: 13px;
- transition: background-color 100ms ease;
+ transition: background-color 100ms ease, transform 100ms ease;
box-shadow: 0 1px 1px hsl(var(--shadow-color));
}
@@ -362,6 +362,7 @@
.app-button:active:not(:disabled) {
background: hsl(var(--border-color));
+ transform: scale(0.96);
}
.app-button-primary {
@@ -382,7 +383,7 @@
justify-content: center;
border-radius: 6px;
color: hsl(var(--text-secondary));
- transition: background-color 100ms ease;
+ transition: background-color 100ms ease, transform 100ms ease;
}
.app-icon-button:hover:not(:disabled) {
@@ -392,6 +393,7 @@
.app-icon-button:active:not(:disabled) {
background: hsl(var(--border-color));
+ transform: scale(0.94);
}
.app-modal-backdrop {
@@ -695,7 +697,7 @@
}
.add-download-button:active:not(:disabled) {
- transform: translateY(1px);
+ transform: scale(0.96);
}
.add-download-button-secondary {