Skip to content

Commit 26bb22f

Browse files
committed
feat: update ui library, abstract hover transition style, update favicon, add more hovers
1 parent 1db8170 commit 26bb22f

File tree

16 files changed

+82
-45
lines changed

16 files changed

+82
-45
lines changed

web/src/components/CasesDisplay/Filters.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from "react";
2-
import styled, { useTheme } from "styled-components";
2+
import styled, { css, useTheme } from "styled-components";
3+
4+
import { hoverShortTransitionTiming } from "styles/commonStyles";
35

46
import { useNavigate, useParams } from "react-router-dom";
57

@@ -19,29 +21,32 @@ const Container = styled.div`
1921
width: fit-content;
2022
`;
2123

22-
const StyledGridIcon = styled(GridIcon)`
23-
cursor: pointer;
24-
transition: filter 0.2s ease;
25-
fill: ${({ theme }) => theme.primaryBlue};
26-
width: 16px;
27-
height: 16px;
28-
overflow: hidden;
29-
`;
30-
3124
const IconsContainer = styled.div`
3225
display: flex;
3326
justify-content: center;
3427
align-items: center;
3528
gap: 4px;
3629
`;
3730

38-
const StyledListIcon = styled(ListIcon)`
31+
const BaseIconStyles = css`
32+
${hoverShortTransitionTiming}
3933
cursor: pointer;
40-
transition: filter 0.2s ease;
4134
fill: ${({ theme }) => theme.primaryBlue};
4235
width: 16px;
4336
height: 16px;
4437
overflow: hidden;
38+
39+
:hover {
40+
fill: ${({ theme }) => theme.secondaryBlue};
41+
}
42+
`;
43+
44+
const StyledGridIcon = styled(GridIcon)`
45+
${BaseIconStyles}
46+
`;
47+
48+
const StyledListIcon = styled(ListIcon)`
49+
${BaseIconStyles}
4550
`;
4651

4752
const Filters: React.FC = () => {

web/src/components/DisputePreview/Policies.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { getIpfsUrl } from "utils/getIpfsUrl";
88
import { isUndefined } from "utils/index";
99

1010
import { responsiveSize } from "styles/responsiveSize";
11+
import { hoverShortTransitionTiming } from "styles/commonStyles";
1112

1213
import { InternalLink } from "components/InternalLink";
1314

@@ -38,12 +39,12 @@ const StyledPaperclipIcon = styled(PaperclipIcon)`
3839
`;
3940

4041
const StyledInternalLink = styled(InternalLink)`
42+
${hoverShortTransitionTiming}
4143
display: flex;
4244
gap: 4px;
4345
4446
&:hover {
4547
svg {
46-
transition: fill 0.1s;
4748
fill: ${({ theme }) => theme.secondaryBlue};
4849
}
4950
}

web/src/components/DisputeView/DisputeCardView.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,19 @@ import { Card } from "@kleros/ui-components-library";
88
import { Periods } from "consts/periods";
99

1010
import { responsiveSize } from "styles/responsiveSize";
11+
import { hoverShortTransitionTiming } from "styles/commonStyles";
1112

1213
import { StyledSkeleton } from "components/StyledSkeleton";
1314

1415
import DisputeInfo from "./DisputeInfo";
1516
import PeriodBanner from "./PeriodBanner";
1617

1718
const StyledCard = styled(Card)`
19+
${hoverShortTransitionTiming}
1820
width: 100%;
1921
height: 100%;
2022
max-height: 335px;
2123
min-height: 290px;
22-
transition: background-color 0.1s;
2324
2425
&:hover {
2526
background-color: ${({ theme }) => theme.lightGrey}BB;

web/src/components/DisputeView/DisputeListView.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,17 @@ import { Card } from "@kleros/ui-components-library";
99
import { Periods } from "consts/periods";
1010

1111
import { responsiveSize } from "styles/responsiveSize";
12+
import { hoverShortTransitionTiming } from "styles/commonStyles";
1213

1314
import DisputeInfo from "./DisputeInfo";
1415
import PeriodBanner from "./PeriodBanner";
1516

1617
const StyledListItem = styled(Card)`
18+
${hoverShortTransitionTiming}
1719
display: flex;
1820
flex-grow: 1;
1921
width: 100%;
2022
height: 82px;
21-
transition: background-color 0.1s;
2223
2324
&:hover {
2425
background-color: ${({ theme }) => theme.lightGrey}BB;

web/src/components/DottedMenuButton.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from "react";
22
import styled, { css, keyframes } from "styled-components";
33

4+
import { hoverShortTransitionTiming } from "styles/commonStyles";
5+
46
import DottedMenu from "svgs/icons/dotted-menu.svg";
57

68
const ripple = keyframes`
@@ -57,13 +59,16 @@ const Container = styled.div<{ displayRipple: boolean }>`
5759
`;
5860

5961
const ButtonContainer = styled.div`
62+
${hoverShortTransitionTiming}
6063
border-radius: 50%;
6164
z-index: 1;
6265
background-color: ${({ theme }) => theme.lightBackground};
6366
64-
transition: background-color 0.1s;
6567
:hover {
6668
background-color: ${({ theme }) => theme.lightGrey};
69+
svg {
70+
fill: ${({ theme }) => theme.secondaryBlue};
71+
}
6772
}
6873
`;
6974

web/src/components/EvidenceCard.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled, { css } from "styled-components";
33

44
import { landscapeStyle } from "styles/landscapeStyle";
55
import { responsiveSize } from "styles/responsiveSize";
6+
import { hoverShortTransitionTiming } from "styles/commonStyles";
67

78
import Identicon from "react-identicons";
89
import ReactMarkdown from "react-markdown";
@@ -165,6 +166,7 @@ const MobileText = styled.span`
165166
`;
166167

167168
const StyledInternalLink = styled(InternalLink)`
169+
${hoverShortTransitionTiming}
168170
display: flex;
169171
gap: ${responsiveSize(5, 6)};
170172
> svg {
@@ -173,7 +175,6 @@ const StyledInternalLink = styled(InternalLink)`
173175
}
174176
175177
:hover svg {
176-
transition: fill 0.1s;
177178
fill: ${({ theme }) => theme.secondaryBlue};
178179
}
179180
`;

web/src/components/HowItWorks.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import React from "react";
22
import styled from "styled-components";
33

4+
import { hoverShortTransitionTiming } from "styles/commonStyles";
5+
46
import BookOpenIcon from "svgs/icons/book-open.svg";
57

68
const Container = styled.div`
9+
${hoverShortTransitionTiming}
710
display: flex;
811
align-items: center;
912
font-size: 14px;
1013
font-weight: 400;
1114
gap: 8px;
1215
cursor: pointer;
1316
color: ${({ theme }) => theme.primaryBlue};
14-
transition: color 0.1s;
1517
1618
svg path {
1719
fill: ${({ theme }) => theme.primaryBlue};
@@ -20,7 +22,6 @@ const Container = styled.div`
2022
&:hover {
2123
color: ${({ theme }) => theme.secondaryBlue};
2224
svg path {
23-
transition: fill 0.1s;
2425
fill: ${({ theme }) => theme.secondaryBlue};
2526
}
2627
}

web/src/components/LightButton.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from "react";
22
import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
4+
import { hoverShortTransitionTiming } from "styles/commonStyles";
45

56
import { Button } from "@kleros/ui-components-library";
67

78
const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
9+
${hoverShortTransitionTiming}
810
background-color: transparent;
911
padding: 8px !important;
1012
border-radius: 7px;
@@ -20,7 +22,6 @@ const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
2022
.button-svg {
2123
fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
2224
}
23-
transition: background-color 0.1s;
2425
background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
2526
}
2627

web/src/favicon.ico

-225 KB
Binary file not shown.

web/src/layout/Footer/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import styled, { css } from "styled-components";
33

44
import { landscapeStyle } from "styles/landscapeStyle";
5+
import { hoverShortTransitionTiming } from "styles/commonStyles";
56

67
import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
78

@@ -32,6 +33,7 @@ const Container = styled.div`
3233
`;
3334

3435
const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)`
36+
${hoverShortTransitionTiming}
3537
min-height: 24px;
3638
3739
path {
@@ -40,7 +42,6 @@ const StyledSecuredByKlerosLogo = styled(SecuredByKlerosLogo)`
4042
4143
:hover path {
4244
fill: ${({ theme }) => theme.white};
43-
transition: fill 0.1s;
4445
}
4546
`;
4647

0 commit comments

Comments
 (0)