kleros · alcercu · Dec 16, 2024 · Dec 14, 2024 · Dec 15, 2024 · Dec 16, 2024
diff --git a/src/index.html b/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My First Parcel App</title>
+    <title>UI Components Library</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/lib/accordion/accordion-item.tsx b/src/lib/accordion/accordion-item.tsx
@@ -3,14 +3,22 @@ import styled from "styled-components";
 import { useElementSize } from "../../hooks/useElementSize";
 import Plus from "../../assets/svgs/accordion/plus.svg";
 import Minus from "../../assets/svgs/accordion/minus.svg";
-import { svg, button } from "../../styles/common-style";
+import {
+  svg,
+  button,
+  hoverMediumBlue,
+  hoverShortTransitionTiming,
+} from "../../styles/common-style";
 
 const StyledDiv = styled.div`
   margin: 8px 0px;
   .accordion-button {
     ${button}
+    ${hoverMediumBlue}
+    ${hoverShortTransitionTiming}
     width: 100%;
-    background: ${({ theme }) => theme.klerosUIComponentsPrimaryPurple};
+    background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+    border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
     border-radius: 3px;
     padding: 11.5px 32px;
     display: flex;
@@ -21,7 +29,7 @@ const StyledDiv = styled.div`
       ${svg}
       height: 16px;
       width: 16px;
-      fill: ${({ theme }) => theme.klerosUIComponentsLightPurple};
+      fill: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
     }
   }
 `;

diff --git a/src/lib/accordion/index.tsx b/src/lib/accordion/index.tsx
@@ -27,7 +27,7 @@ const AccordionTitle = styled.p`
   width: fit-content;
   font-weight: 600;
   text-align: center;
-  color: ${({ theme }) => theme.klerosUIComponentsLightPurple};
+  color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
 `;
 
 const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => (

diff --git a/src/lib/breadcrumb.tsx b/src/lib/breadcrumb.tsx
@@ -5,6 +5,8 @@ import { borderBox, small, button } from "../styles/common-style";
 const Wrapper = styled.div`
   ${borderBox}
   display: flex;
+  flex-wrap: wrap;
+  gap: 2px 0;
 `;
 
 const Element = styled.button<{ clickable?: boolean }>`

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/dropdown/base-item.tsx b/src/lib/dropdown/base-item.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import Dot from "../dot";
-import { borderBox, svg, p } from "../../styles/common-style";
+import {
+  borderBox,
+  svg,
+  p,
+  hoverShortTransitionTiming,
+} from "../../styles/common-style";
 
 interface IItem {
   selected?: boolean;
@@ -10,10 +15,9 @@ interface IItem {
 
 const Item = styled.div<IItem>`
   ${borderBox}
-  background: ${({ selected, theme }) =>
-    selected
-      ? theme.klerosUIComponentsMediumBlue
-      : theme.klerosUIComponentsWhiteBackground};
+  ${hoverShortTransitionTiming}
+  background-color: ${({ selected, theme }) =>
+    selected ? theme.klerosUIComponentsMediumBlue : ""};
   padding: ${({ current }) =>
     current ? "10.5px 16px 10.5px 13px" : "11.5px 16px 11.5px 13px"};
   display: flex;

diff --git a/src/lib/dropdown/button.tsx b/src/lib/dropdown/button.tsx
@@ -1,13 +1,21 @@
 import React, { ReactNode } from "react";
 import styled, { css } from "styled-components";
 import Arrow from "../../assets/svgs/dropdown/arrow.svg";
-import { borderBox, button, svg } from "../../styles/common-style";
+import {
+  borderBox,
+  button,
+  hoverLongTransitionTiming,
+  svg,
+  hoverMediumBlue,
+} from "../../styles/common-style";
 
 const Container = styled.button`
   ${borderBox}
   ${button}
+  ${hoverLongTransitionTiming}
+  ${hoverMediumBlue}
   width: 240px;
-  background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+  background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   border-radius: 3px;
   display: flex;

diff --git a/src/lib/dropdown/simple-button.tsx b/src/lib/dropdown/simple-button.tsx
@@ -1,7 +1,14 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import Arrow from "../../assets/svgs/dropdown/arrow.svg";
-import { borderBox, button, svg, small, h1 } from "../../styles/common-style";
+import {
+  borderBox,
+  button,
+  svg,
+  small,
+  h1,
+  hoverShortTransitionTiming,
+} from "../../styles/common-style";
 
 const Container = styled.button`
   ${borderBox}
@@ -10,16 +17,30 @@ const Container = styled.button`
   display: flex;
   align-items: center;
   padding: 0px;
+
+  :hover {
+    small {
+      color: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
+    }
+    h1 {
+      color: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
+    }
+    svg {
+      fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
+    }
+  }
 `;
 
 const StyledSmallText = styled.small`
   ${small}
+  ${hoverShortTransitionTiming}
   font-weight: 600;
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
 `;
 
 const StyledBigText = styled.h1`
   ${h1}
+  ${hoverShortTransitionTiming}
   font-weight: 600;
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
 `;
@@ -28,6 +49,7 @@ const StyledArrow = styled(({ ignoredIsOpen, ignoredSmall, ...props }) => (
   <Arrow {...props} />
 ))`
   ${svg}
+  ${hoverShortTransitionTiming}
   width: ${({ ignoredSmall: small }) => (small ? "8" : "16")}px;
   height: ${({ ignoredSmall: small }) => (small ? "8" : "16")}px;
   fill: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};

diff --git a/src/lib/form/datepicker/display-button.tsx b/src/lib/form/datepicker/display-button.tsx
@@ -1,10 +1,17 @@
 import React from "react";
 import styled from "styled-components";
 import Calendar from "../../../assets/svgs/form/calendar.svg";
-import { button, p } from "../../../styles/common-style";
+import {
+  button,
+  hoverLongTransitionTiming,
+  hoverMediumBlue,
+  p,
+} from "../../../styles/common-style";
 
 const StyledButton = styled.button`
   ${button}
+  ${hoverMediumBlue}
+  ${hoverLongTransitionTiming}
   height: 45px;
   width: 330px;
   background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};

diff --git a/src/lib/form/field.tsx b/src/lib/form/field.tsx
@@ -7,7 +7,13 @@ import InfoIcon from "../../assets/svgs/status-icons/info.svg";
 import UpArrowIcon from "../../assets/svgs/arrows/field-arrow-up.svg";
 import DownArrowIcon from "../../assets/svgs/arrows/field-arrow-down.svg";
 
-import { borderBox, small, svg } from "../../styles/common-style";
+import {
+  borderBox,
+  hoverMediumBlue,
+  hoverLongTransitionTiming,
+  small,
+  svg,
+} from "../../styles/common-style";
 import { useHover } from "usehooks-ts";
 
 export type VariantProp = {
@@ -53,6 +59,8 @@ const StyledErrorIcon = styled(ErrorIcon)`
 `;
 
 export const baseInputStyle = css<VariantProp>`
+  ${hoverMediumBlue}
+  ${hoverLongTransitionTiming}
   height: 100%;
   width: 100%;
   background: ${(props) => props.theme.klerosUIComponentsWhiteBackground};

diff --git a/src/lib/form/file-uploader.tsx b/src/lib/form/file-uploader.tsx
@@ -6,7 +6,14 @@ import ErrorIcon from "../../assets/svgs/status-icons/error.svg";
 import WarningIcon from "../../assets/svgs/status-icons/warning.svg";
 import InfoIcon from "../../assets/svgs/status-icons/info.svg";
 import { variantColor } from "./field";
-import { borderBox, small, svg, button } from "../../styles/common-style";
+import {
+  borderBox,
+  small,
+  svg,
+  button,
+  hoverShortTransitionTiming,
+  hoverWhiteBackground,
+} from "../../styles/common-style";
 
 type VariantProp = { variant?: "success" | "warning" | "error" | "info" };
 
@@ -18,9 +25,11 @@ const Wrapper = styled.div`
 
 const DropZone = styled.button`
   ${button}
+  ${hoverWhiteBackground}
+  ${hoverShortTransitionTiming}
   height: 100%;
   width: 100%;
-  background: ${({ theme }) => theme.klerosUIComponentsMediumBlue};
+  background-color: ${({ theme }) => theme.klerosUIComponentsMediumBlue};
   border: 1px dashed ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
   border-radius: 3px;
 

diff --git a/src/lib/pagination/tabs.tsx b/src/lib/pagination/tabs.tsx
@@ -1,6 +1,12 @@
 import React from "react";
 import styled from "styled-components";
-import { borderBox, button, svg } from "../../styles/common-style";
+import {
+  borderBox,
+  button,
+  hoverLongTransitionTiming,
+  hoverShortTransitionTiming,
+  svg,
+} from "../../styles/common-style";
 
 const Wrapper = styled.div`
   ${borderBox}
@@ -13,6 +19,7 @@ const StyledSVG = styled.svg``;
 
 const StyledTab = styled.button<{ selected?: boolean }>`
   ${button}
+  ${hoverShortTransitionTiming}
   flex-grow: 1;
   height: 45px;
   background: none;
@@ -34,13 +41,15 @@ const StyledTab = styled.button<{ selected?: boolean }>`
   ${(props) =>
     !props.disabled && !props.selected
       ? `:hover {
+        ${hoverLongTransitionTiming}
             border-bottom: 3px solid
-              ${props.theme.klerosUIComponentsSecondaryBlue};
+              ${props.theme.klerosUIComponentsPrimaryBlue};
           }`
       : ""}
 
   & ${StyledSVG} {
     ${svg}
+    ${hoverShortTransitionTiming}
     height: 16px;
     width: 16px;
     margin-right: 16px;

diff --git a/src/lib/tag/index.tsx b/src/lib/tag/index.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 import styled from "styled-components";
-import { borderBox, p, button } from "../../styles/common-style";
+import {
+  borderBox,
+  p,
+  button,
+  hoverShortTransitionTiming,
+} from "../../styles/common-style";
 
 interface BaseTagProps {
   active?: boolean;
@@ -11,18 +16,29 @@ const BaseTag = styled.button<BaseTagProps>`
   ${borderBox}
   ${button}
   height: 32px;
-  background: ${({ theme }) => theme.klerosUIComponentsMediumBlue};
+  background-color: ${({ theme }) => theme.klerosUIComponentsMediumBlue};
   border: ${({ theme, active }) =>
     active ? `1px solid ${theme.klerosUIComponentsPrimaryBlue}` : "none"};
   border-radius: 300px;
   padding: 0 16px;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  :hover {
+    ${({ active, theme }) =>
+      !active &&
+      `
+      p {
+        color: ${theme.klerosUIComponentsSecondaryBlue};
+      }
+    `}
+  }
 `;
 
 const StyledText = styled.p`
   ${p}
+  ${hoverShortTransitionTiming}
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
 `;
 

diff --git a/src/styles/common-style.ts b/src/styles/common-style.ts
@@ -113,3 +113,36 @@ export const borderBox = css`
     box-sizing: border-box;
   }
 `;
+
+export const hoverShortTransitionTiming = css`
+  :hover {
+    transition: 0.1s;
+  }
+
+  :not(:hover) {
+    transition: 0.1s;
+  }
+`;
+
+export const hoverLongTransitionTiming = css`
+  :hover {
+    transition: 0.2s;
+  }
+
+  :not(:hover) {
+    transition: 0.2s;
+  }
+`;
+
+export const hoverMediumBlue = css`
+  :hover {
+    background-color: ${(props) => props.theme.klerosUIComponentsMediumBlue};
+  }
+`;
+
+export const hoverWhiteBackground = css`
+  :hover {
+    background-color: ${(props) =>
+      props.theme.klerosUIComponentsWhiteBackground};
+  }
+`;