From c762d0ff7bfab32bc73d4474dbc34318a6dd37ce Mon Sep 17 00:00:00 2001
From: Kelvin Yelyen <52675327+kelvinyelyen@users.noreply.github.com>
Date: Wed, 16 Aug 2023 21:29:26 +0000
Subject: [PATCH] Fix issue #1037: Task inbox small design improvements (#1238)

* Fix issue #1037: Task inbox small design improvements

* Fix issue #1037: Task inbox small design improvements
---
 front/src/modules/ui/tab/components/Tab.tsx | 23 ++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/front/src/modules/ui/tab/components/Tab.tsx b/front/src/modules/ui/tab/components/Tab.tsx
index 20c43cbea..f176cb9f0 100644
--- a/front/src/modules/ui/tab/components/Tab.tsx
+++ b/front/src/modules/ui/tab/components/Tab.tsx
@@ -21,12 +21,19 @@ const StyledTab = styled.div<{ active?: boolean }>`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
-  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)};
+  padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2)};
+`;
 
-  &:hover,
-  &:active {
-    border-color: ${({ theme }) => theme.border.color.inverted};
-    color: ${({ theme }) => theme.font.color.primary};
+const StyledHover = styled.span`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+  padding: ${({ theme }) => theme.spacing(1)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(2)};
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+    border-radius: ${({ theme }) => theme.border.radius.sm};
   }
 `;
 
@@ -39,8 +46,10 @@ export function Tab({
 }: OwnProps) {
   return (
     <StyledTab onClick={onClick} active={active} className={className}>
-      {icon}
-      {title}
+      <StyledHover>
+        {icon}
+        {title}
+      </StyledHover>
     </StyledTab>
   );
 }