Skip to content

Commit f745bf5

Browse files
kemurukemuru
committed
feat: more hover effects, style impros
1 parent 53e4bc4 commit f745bf5

File tree

15 files changed

+168
-131
lines changed

15 files changed

+168
-131
lines changed

‎web/src/components/DisputePreview/Policies.tsx

+10-10
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,6 @@ const StyledP = styled.p`
4141
)};
4242
`;
4343

44-
const StyledA = styled.a`
45-
display: flex;
46-
align-items: center;
47-
gap: 4px;
48-
`;
49-
5044
const StyledPolicyIcon = styled(PolicyIcon)`
5145
width: 16px;
5246
fill: ${({ theme }) => theme.primaryBlue};
@@ -67,6 +61,12 @@ const LinkContainer = styled.div`
6761
const StyledLink = styled(Link)`
6862
display: flex;
6963
gap: 4px;
64+
65+
&:hover {
66+
svg {
67+
fill: ${({ theme }) => theme.secondaryBlue};
68+
}
69+
}
7070
`;
7171

7272
type Attachment = {
@@ -85,10 +85,10 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
8585
<StyledP>Make sure you read and understand the Policies</StyledP>
8686
<LinkContainer>
8787
{!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
88-
<StyledA href={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
88+
<StyledLink to={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
8989
<StyledPaperclipIcon />
9090
{attachment.label ?? "Attachment"}
91-
</StyledA>
91+
</StyledLink>
9292
) : null}
9393
{isUndefined(disputePolicyURI) ? null : (
9494
<StyledLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
@@ -97,10 +97,10 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
9797
</StyledLink>
9898
)}
9999
{isUndefined(courtId) ? null : (
100-
<StyledA href={`#/courts/${courtId}/purpose?section=description`}>
100+
<StyledLink to={`/courts/${courtId}/purpose?section=description`}>
101101
<StyledPolicyIcon />
102102
Court Policy
103-
</StyledA>
103+
</StyledLink>
104104
)}
105105
</LinkContainer>
106106
</ShadeArea>

‎web/src/components/EvidenceCard.tsx

+68-38
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const BottomShade = styled.div`
5454
display: flex;
5555
flex-wrap: wrap;
5656
align-items: center;
57-
gap: 16px;
57+
justify-content: space-between;
5858
padding: 12px ${responsiveSize(8, 24)};
5959
> * {
6060
flex-basis: 1;
@@ -81,55 +81,81 @@ const AccountContainer = styled.div`
8181
}
8282
`;
8383

84-
const DesktopText = styled.span`
85-
display: none;
84+
const LeftContent = styled.div`
85+
display: block;
86+
87+
& > *:not(:last-child) {
88+
margin-bottom: 8px;
89+
}
90+
8691
${landscapeStyle(
8792
() => css`
88-
display: inline;
93+
display: flex;
94+
flex-direction: row;
95+
align-items: center;
96+
justify-content: center;
97+
gap: 0 12px;
98+
99+
& > *:not(:last-child) {
100+
margin-bottom: 0;
101+
}
89102
`
90103
)}
91104
`;
92105

106+
const HoverStyle = css`
107+
:hover {
108+
text-decoration: underline;
109+
color: ${({ theme }) => theme.secondaryBlue};
110+
cursor: pointer;
111+
}
112+
`;
113+
114+
const Address = styled.p`
115+
${HoverStyle}
116+
margin: 0;
117+
`;
118+
93119
const Timestamp = styled.label`
94120
color: ${({ theme }) => theme.secondaryText};
121+
${HoverStyle}
95122
`;
96123

97-
const MobileText = styled.span`
124+
const DesktopText = styled.span`
125+
display: none;
98126
${landscapeStyle(
99127
() => css`
100-
display: none;
128+
display: inline;
101129
`
102130
)}
103131
`;
104132

105-
const StyledLink = styled(Link)`
106-
height: fit-content;
107-
display: flex;
108-
margin-left: auto;
109-
gap: ${responsiveSize(5, 6)};
133+
const MobileText = styled.span`
110134
${landscapeStyle(
111135
() => css`
112-
> svg {
113-
width: 16px;
114-
fill: ${({ theme }) => theme.primaryBlue};
115-
}
136+
display: none;
116137
`
117138
)}
118139
`;
119140

120-
const StyledA = styled.a`
121-
:hover {
122-
text-decoration: underline;
123-
p {
124-
color: ${({ theme }) => theme.primaryBlue};
125-
}
126-
label {
127-
cursor: pointer;
128-
color: ${({ theme }) => theme.primaryBlue};
129-
}
141+
const StyledLink = styled(Link)`
142+
display: flex;
143+
gap: ${responsiveSize(5, 6)};
144+
> svg {
145+
width: 16px;
146+
fill: ${({ theme }) => theme.primaryBlue};
147+
}
148+
149+
:hover svg {
150+
transition: fill 0.1s;
151+
fill: ${({ theme }) => theme.secondaryBlue};
130152
}
131153
`;
132154

155+
const FileLinkContainer = styled.div`
156+
margin-left: auto;
157+
`;
158+
133159
const AttachedFileText: React.FC = () => (
134160
<>
135161
<DesktopText>View attached file</DesktopText>
@@ -175,20 +201,24 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
175201
)}
176202
</TextContainer>
177203
<BottomShade>
178-
<AccountContainer>
179-
<Identicon size="24" string={sender} />
180-
<StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
181-
<p>{shortenAddress(sender)}</p>
182-
</StyledA>
183-
</AccountContainer>
184-
<StyledA href={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
185-
<Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
186-
</StyledA>
187-
{fileURI && fileURI !== "-" ? (
188-
<StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
189-
<AttachmentIcon />
190-
<AttachedFileText />
204+
<LeftContent>
205+
<AccountContainer>
206+
<Identicon size="24" string={sender} />
207+
<StyledLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
208+
<Address>{shortenAddress(sender)}</Address>
209+
</StyledLink>
210+
</AccountContainer>
211+
<StyledLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
212+
<Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
191213
</StyledLink>
214+
</LeftContent>
215+
{fileURI && fileURI !== "-" ? (
216+
<FileLinkContainer>
217+
<StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
218+
<AttachmentIcon />
219+
<AttachedFileText />
220+
</StyledLink>
221+
</FileLinkContainer>
192222
) : null}
193223
</BottomShade>
194224
</StyledCard>

‎web/src/components/HowItWorks.tsx

+11-14
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,26 @@ import BookOpenIcon from "svgs/icons/book-open.svg";
66
const Container = styled.div`
77
display: flex;
88
align-items: center;
9+
font-size: 14px;
10+
font-weight: 400;
911
gap: 8px;
12+
cursor: pointer;
1013
color: ${({ theme }) => theme.primaryBlue};
14+
transition: color 0.1s;
1115
12-
&,
13-
& * {
14-
cursor: pointer;
16+
svg path {
17+
fill: ${({ theme }) => theme.primaryBlue};
18+
transition: fill 0.1s;
1519
}
1620
1721
&:hover {
18-
text-decoration: underline;
19-
}
20-
21-
svg {
22-
path {
23-
fill: ${({ theme }) => theme.primaryBlue};
22+
color: ${({ theme }) => theme.secondaryBlue};
23+
svg path {
24+
fill: ${({ theme }) => theme.secondaryBlue};
2425
}
2526
}
2627
`;
2728

28-
const StyledLabel = styled.label`
29-
color: ${({ theme }) => theme.primaryBlue};
30-
`;
31-
3229
interface IHowItWorks {
3330
isMiniGuideOpen: boolean;
3431
toggleMiniGuide: () => void;
@@ -40,7 +37,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, M
4037
<>
4138
<Container onClick={toggleMiniGuide}>
4239
<BookOpenIcon />
43-
<StyledLabel> How it works </StyledLabel>
40+
How it works
4441
</Container>
4542
{isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
4643
</>

‎web/src/components/ScrollTop.tsx

+21-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
1-
import React, { useEffect } from "react";
1+
import React, { useEffect, useRef } from "react";
2+
import { useLocation, useNavigate } from "react-router-dom";
23

34
import { useScrollTop } from "hooks/useScrollTop";
45

56
const ScrollTop: React.FC = () => {
67
const scrollTop = useScrollTop();
8+
const { search, pathname } = useLocation();
9+
const navigate = useNavigate();
10+
const hasScrolled = useRef(false);
711

812
useEffect(() => {
13+
if (hasScrolled.current) return;
14+
const params = new URLSearchParams(search);
15+
const section = params.get("section");
16+
17+
if (section) {
18+
const targetElement = document.getElementById(section);
19+
if (targetElement) {
20+
targetElement.scrollIntoView({ behavior: "smooth" });
21+
hasScrolled.current = true;
22+
navigate(pathname, { replace: true });
23+
return;
24+
}
25+
}
26+
927
scrollTop();
1028
}, []);
1129

12-
return <></>;
30+
return null;
1331
};
32+
1433
export default ScrollTop;

‎web/src/consts/community-elements.tsx

+9-32
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import styled, { css } from "styled-components";
32

43
import FrenchFlagIcon from "svgs/icons/french-flag.svg";
@@ -8,13 +7,6 @@ import TelegramIcon from "svgs/socialmedia/telegram.svg";
87

98
import { IElement } from "../pages/Home/Community/Element";
109

11-
const StyledLabel = styled.label`
12-
color: ${({ theme }) => theme.primaryBlue};
13-
:hover {
14-
cursor: pointer;
15-
}
16-
`;
17-
1810
const fillWithSecondaryPurple = css`
1911
fill: ${({ theme }) => theme.secondaryPurple};
2012
`;
@@ -34,39 +26,24 @@ const StyledTelegramIcon = styled(TelegramIcon)`
3426
export const section: IElement[] = [
3527
{
3628
Icon: StyledPNKIcon,
37-
urls: [
38-
{
39-
node: <StyledLabel>Kleros Forum</StyledLabel>,
40-
link: "https://forum.kleros.io/",
41-
},
42-
],
29+
title: "Kleros Forum",
30+
link: "https://forum.kleros.io/",
4331
},
32+
4433
{
4534
Icon: SnapshotIcon,
46-
urls: [
47-
{
48-
node: <StyledLabel>Vote on proposals</StyledLabel>,
49-
link: "https://snapshot.org/#/kleros.eth/",
50-
},
51-
],
35+
title: "Vote on proposals",
36+
link: "https://snapshot.org/#/kleros.eth/",
5237
},
5338
{
5439
Icon: StyledTelegramIcon,
40+
title: "Community Calls",
41+
link: "https://t.me/kleros",
5542
primaryText: "Wednesday, 18h UTC",
56-
urls: [
57-
{
58-
node: <StyledLabel>Community Calls</StyledLabel>,
59-
link: "https://t.me/kleros",
60-
},
61-
],
6243
},
6344
{
6445
Icon: FrenchFlagIcon,
65-
urls: [
66-
{
67-
node: <StyledLabel>Join the Coopérative</StyledLabel>,
68-
link: "https://kleros.io/coop/",
69-
},
70-
],
46+
title: "Join the Coopérative",
47+
link: "https://kleros.io/coop/",
7148
},
7249
];

‎web/src/layout/Header/navbar/Product.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,7 @@ const Container = styled.a`
1313
border-radius: 3px;
1414
:hover {
1515
transform: scale(1.05);
16-
transition: 350ms;
17-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
16+
transition: 0.1s;
1817
}
1918
gap: 8px;
2019
width: ${responsiveSize(100, 130)};

‎web/src/pages/Cases/AttachmentDisplay/Header.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@ const StyledButton = styled(Button)`
5353
:focus,
5454
:hover {
5555
background-color: transparent;
56+
.button-svg {
57+
path {
58+
fill: ${({ theme }) => theme.secondaryBlue};
59+
}
60+
}
61+
.button-text {
62+
color: ${({ theme }) => theme.secondaryBlue};
63+
}
5664
}
5765
`;
5866

‎web/src/pages/Cases/AttachmentDisplay/index.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ const NewTabInfo = styled.a`
3030
display: flex;
3131
gap: 8px;
3232
align-items: center;
33+
34+
:hover {
35+
text-decoration: underline;
36+
svg path {
37+
transition: fill 0.1s;
38+
fill: ${({ theme }) => theme.secondaryBlue};
39+
}
40+
}
3341
`;
3442

3543
const StyledNewTabIcon = styled(NewTabIcon)`

0 commit comments

Comments
 (0)