Skip to content

Commit db0463d

Browse files
alcercualcercu
authored
Merge pull request #58 from kleros/feat/hover-effects-and-ui-impros
feat: hover effects, abstract common styles, transition timings, brea…
2 parents 4988b1c + 9886b2d commit db0463d

File tree

16 files changed

+169
-35
lines changed

16 files changed

+169
-35
lines changed

‎src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>My First Parcel App</title>
6+
<title>UI Components Library</title>
77
</head>
88
<body>
99
<div id="app"></div>

‎src/lib/accordion/accordion-item.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,22 @@ import styled from "styled-components";
33
import { useElementSize } from "../../hooks/useElementSize";
44
import Plus from "../../assets/svgs/accordion/plus.svg";
55
import Minus from "../../assets/svgs/accordion/minus.svg";
6-
import { svg, button } from "../../styles/common-style";
6+
import {
7+
svg,
8+
button,
9+
hoverMediumBlue,
10+
hoverShortTransitionTiming,
11+
} from "../../styles/common-style";
712

813
const StyledDiv = styled.div`
914
margin: 8px 0px;
1015
.accordion-button {
1116
${button}
17+
${hoverMediumBlue}
18+
${hoverShortTransitionTiming}
1219
width: 100%;
13-
background: ${({ theme }) => theme.klerosUIComponentsPrimaryPurple};
20+
background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
21+
border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
1422
border-radius: 3px;
1523
padding: 11.5px 32px;
1624
display: flex;
@@ -21,7 +29,7 @@ const StyledDiv = styled.div`
2129
${svg}
2230
height: 16px;
2331
width: 16px;
24-
fill: ${({ theme }) => theme.klerosUIComponentsLightPurple};
32+
fill: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
2533
}
2634
}
2735
`;

‎src/lib/accordion/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const AccordionTitle = styled.p`
2727
width: fit-content;
2828
font-weight: 600;
2929
text-align: center;
30-
color: ${({ theme }) => theme.klerosUIComponentsLightPurple};
30+
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
3131
`;
3232

3333
const DefaultTitle: React.FC<{ item: AccordionItem }> = ({ item }) => (

‎src/lib/breadcrumb.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { borderBox, small, button } from "../styles/common-style";
55
const Wrapper = styled.div`
66
${borderBox}
77
display: flex;
8+
flex-wrap: wrap;
9+
gap: 2px 0;
810
`;
911

1012
const Element = styled.button<{ clickable?: boolean }>`

‎src/lib/container/card.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import styled from "styled-components";
2-
import { borderBox } from "../../styles/common-style";
2+
import {
3+
borderBox,
4+
hoverShortTransitionTiming,
5+
} from "../../styles/common-style";
36

47
interface CardProps {
58
round?: boolean;
@@ -8,22 +11,20 @@ interface CardProps {
811

912
const Card = styled.div<CardProps>`
1013
${borderBox}
11-
background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
14+
${hoverShortTransitionTiming}
15+
background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
1216
border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
1317
box-shadow: 0px 2px 3px
1418
${({ theme }) => theme.klerosUIComponentsDefaultShadow};
1519
border-radius: ${({ round }) => (round ? "18px" : "3px")};
1620
width: 328px;
1721
height: 200px;
1822
19-
transition: box-shadow ease
20-
${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
21-
2223
${({ theme, hover }) =>
2324
hover &&
2425
`
2526
:hover {
26-
box-shadow: 0px 6px 9px ${theme.klerosUIComponentsHoveredShadow};
27+
background-color: ${theme.klerosUIComponentsLightGrey}BB;
2728
cursor: pointer;
2829
}
2930
`}

‎src/lib/dropdown/base-item.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
33
import Dot from "../dot";
4-
import { borderBox, svg, p } from "../../styles/common-style";
4+
import {
5+
borderBox,
6+
svg,
7+
p,
8+
hoverShortTransitionTiming,
9+
} from "../../styles/common-style";
510

611
interface IItem {
712
selected?: boolean;
@@ -10,10 +15,9 @@ interface IItem {
1015

1116
const Item = styled.div<IItem>`
1217
${borderBox}
13-
background: ${({ selected, theme }) =>
14-
selected
15-
? theme.klerosUIComponentsMediumBlue
16-
: theme.klerosUIComponentsWhiteBackground};
18+
${hoverShortTransitionTiming}
19+
background-color: ${({ selected, theme }) =>
20+
selected ? theme.klerosUIComponentsMediumBlue : ""};
1721
padding: ${({ current }) =>
1822
current ? "10.5px 16px 10.5px 13px" : "11.5px 16px 11.5px 13px"};
1923
display: flex;

‎src/lib/dropdown/button.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
import React, { ReactNode } from "react";
22
import styled, { css } from "styled-components";
33
import Arrow from "../../assets/svgs/dropdown/arrow.svg";
4-
import { borderBox, button, svg } from "../../styles/common-style";
4+
import {
5+
borderBox,
6+
button,
7+
hoverLongTransitionTiming,
8+
svg,
9+
hoverMediumBlue,
10+
} from "../../styles/common-style";
511

612
const Container = styled.button`
713
${borderBox}
814
${button}
15+
${hoverLongTransitionTiming}
16+
${hoverMediumBlue}
917
width: 240px;
10-
background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
18+
background-color: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
1119
border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
1220
border-radius: 3px;
1321
display: flex;

‎src/lib/dropdown/simple-button.tsx‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
33
import Arrow from "../../assets/svgs/dropdown/arrow.svg";
4-
import { borderBox, button, svg, small, h1 } from "../../styles/common-style";
4+
import {
5+
borderBox,
6+
button,
7+
svg,
8+
small,
9+
h1,
10+
hoverShortTransitionTiming,
11+
} from "../../styles/common-style";
512

613
const Container = styled.button`
714
${borderBox}
@@ -10,16 +17,30 @@ const Container = styled.button`
1017
display: flex;
1118
align-items: center;
1219
padding: 0px;
20+
21+
:hover {
22+
small {
23+
color: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
24+
}
25+
h1 {
26+
color: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
27+
}
28+
svg {
29+
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryBlue};
30+
}
31+
}
1332
`;
1433

1534
const StyledSmallText = styled.small`
1635
${small}
36+
${hoverShortTransitionTiming}
1737
font-weight: 600;
1838
color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
1939
`;
2040

2141
const StyledBigText = styled.h1`
2242
${h1}
43+
${hoverShortTransitionTiming}
2344
font-weight: 600;
2445
color: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};
2546
`;
@@ -28,6 +49,7 @@ const StyledArrow = styled(({ ignoredIsOpen, ignoredSmall, ...props }) => (
2849
<Arrow {...props} />
2950
))`
3051
${svg}
52+
${hoverShortTransitionTiming}
3153
width: ${({ ignoredSmall: small }) => (small ? "8" : "16")}px;
3254
height: ${({ ignoredSmall: small }) => (small ? "8" : "16")}px;
3355
fill: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue};

‎src/lib/form/datepicker/display-button.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
import React from "react";
22
import styled from "styled-components";
33
import Calendar from "../../../assets/svgs/form/calendar.svg";
4-
import { button, p } from "../../../styles/common-style";
4+
import {
5+
button,
6+
hoverLongTransitionTiming,
7+
hoverMediumBlue,
8+
p,
9+
} from "../../../styles/common-style";
510

611
const StyledButton = styled.button`
712
${button}
13+
${hoverMediumBlue}
14+
${hoverLongTransitionTiming}
815
height: 45px;
916
width: 330px;
1017
background: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};

‎src/lib/form/field.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ import InfoIcon from "../../assets/svgs/status-icons/info.svg";
77
import UpArrowIcon from "../../assets/svgs/arrows/field-arrow-up.svg";
88
import DownArrowIcon from "../../assets/svgs/arrows/field-arrow-down.svg";
99

10-
import { borderBox, small, svg } from "../../styles/common-style";
10+
import {
11+
borderBox,
12+
hoverMediumBlue,
13+
hoverLongTransitionTiming,
14+
small,
15+
svg,
16+
} from "../../styles/common-style";
1117
import { useHover } from "usehooks-ts";
1218

1319
export type VariantProp = {
@@ -53,6 +59,8 @@ const StyledErrorIcon = styled(ErrorIcon)`
5359
`;
5460

5561
export const baseInputStyle = css<VariantProp>`
62+
${hoverMediumBlue}
63+
${hoverLongTransitionTiming}
5664
height: 100%;
5765
width: 100%;
5866
background: ${(props) => props.theme.klerosUIComponentsWhiteBackground};

0 commit comments

Comments
 (0)