chore: more coherent styling in tabs

kleros · Dec 16, 2024 · 3b5b29a · 3b5b29a
1 parent 5b89616
commit 3b5b29a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 19 deletions.
diff --git a/src/lib/container/card.tsx b/src/lib/container/card.tsx
@@ -1,5 +1,8 @@
 import styled from "styled-components";
-import { borderBox } from "../../styles/common-style";
+import {
+  borderBox,
+  hoverShortTransitionTiming,
+} from "../../styles/common-style";
 
 interface CardProps {
   round?: boolean;
@@ -8,22 +11,20 @@ interface CardProps {
 
 const Card = styled.div<CardProps>`
   ${borderBox}
-  background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+  ${hoverShortTransitionTiming}
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   box-shadow: 0px 2px 3px
     ${({ theme }) => theme.klerosUIComponentsDefaultShadow};
   border-radius: ${({ round }) => (round ? "18px" : "3px")};
   width: 328px;
   height: 200px;
 
-  transition: box-shadow ease
-    ${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
-
   ${({ theme, hover }) =>
     hover &&
     `
       :hover {
-        box-shadow: 0px 6px 9px ${theme.klerosUIComponentsHoveredShadow};
+        background-color: ${theme.klerosUIComponentsLightGrey}BB;
         cursor: pointer;
       }
   `}

diff --git a/src/lib/pagination/tabs.tsx b/src/lib/pagination/tabs.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import {
   borderBox,
   button,
+  hoverLongTransitionTiming,
   hoverShortTransitionTiming,
   svg,
 } from "../../styles/common-style";
@@ -40,25 +41,15 @@ const StyledTab = styled.button<{ selected?: boolean }>`
   ${(props) =>
     !props.disabled && !props.selected
       ? `:hover {
+        ${hoverLongTransitionTiming}
             border-bottom: 3px solid
-              ${props.theme.klerosUIComponentsSecondaryBlue};
-            color: ${
-              props.theme.klerosUIComponentsName === "light"
-                ? `${props.theme.klerosUIComponentsPrimaryBlue}B0`
-                : `${props.theme.klerosUIComponentsSecondaryBlue}`
-            }; 
-            svg {
-              fill: ${
-                props.theme.klerosUIComponentsName === "light"
-                  ? `${props.theme.klerosUIComponentsPrimaryBlue}B0`
-                  : `${props.theme.klerosUIComponentsSecondaryBlue}`
-              };
-            }
+              ${props.theme.klerosUIComponentsPrimaryBlue};
           }`
       : ""}
 
   & ${StyledSVG} {
     ${svg}
+    ${hoverShortTransitionTiming}
     height: 16px;
     width: 16px;
     margin-right: 16px;