Hover effect for close tab button

franciscoBSalgueiro · May 10, 2024 · 9e48db7 · 9e48db7
1 parent a323719
commit 9e48db7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/components/tabs/BoardTab.css.ts b/src/components/tabs/BoardTab.css.ts
@@ -3,6 +3,7 @@ import { style } from "@vanilla-extract/css";
 
 export const tab = style({
   cursor: "unset",
+  paddingRight: 9,
   marginRight: 5,
   [vars.lightSelector]: {
     backgroundColor: "transparent",
@@ -41,3 +42,12 @@ export const input = style({
   outline: "none",
   textAlign: "start",
 });
+
+export const closeTabBtn = style({
+  boxSizing: "content-box",
+  padding: "0.3rem",
+  transition: "background-color 100ms ease",
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+  },
+});
diff --git a/src/components/tabs/BoardTab.tsx b/src/components/tabs/BoardTab.tsx
@@ -53,6 +53,7 @@ export function BoardTab({
           rightSection={
             <ActionIcon
               component="div"
+              className={classes.closeTabBtn}
               onClick={(e) => {
                 closeTab(tab.value);
                 e.stopPropagation();