Skip to content

Commit 9985f0b

Browse files
kemurukemuru
committed
feat: bug fixes, more hover effects
1 parent f745bf5 commit 9985f0b

File tree

25 files changed

+178
-156
lines changed

25 files changed

+178
-156
lines changed

‎web/src/components/ConnectWallet/AccountDisplay.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,22 @@ const Container = styled.div`
2121
align-items: center;
2222
background-color: ${({ theme }) => theme.whiteBackground};
2323
padding: 0px;
24+
cursor: pointer;
25+
26+
&:hover {
27+
label {
28+
color: ${({ theme }) => theme.white} !important;
29+
transition: color 0.2s;
30+
}
31+
}
2432
2533
${landscapeStyle(
2634
() => css`
27-
background-color: ${({ theme }) => theme.whiteLowOpacity};
35+
background-color: ${({ theme }) => theme.whiteLowOpacitySubtle};
36+
&:hover {
37+
transition: background-color 0.1s;
38+
background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
39+
}
2840
flex-direction: row;
2941
align-content: center;
3042
border-radius: 300px;
@@ -50,13 +62,14 @@ const AccountContainer = styled.div`
5062
() => css`
5163
gap: 12px;
5264
> label {
53-
color: ${({ theme }) => theme.primaryText};
65+
color: ${({ theme }) => theme.white}CC !important;
5466
font-weight: 400;
5567
font-size: 14px;
5668
}
5769
`
5870
)}
5971
`;
72+
6073
const ChainConnectionContainer = styled.div`
6174
display: flex;
6275
width: fit-content;

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

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

4-
import { Link } from "react-router-dom";
5-
64
import PaperclipIcon from "svgs/icons/paperclip.svg";
75
import PolicyIcon from "svgs/icons/policy.svg";
86

@@ -12,6 +10,8 @@ import { isUndefined } from "utils/index";
1210
import { landscapeStyle } from "styles/landscapeStyle";
1311
import { responsiveSize } from "styles/responsiveSize";
1412

13+
import { InternalLink } from "components/InternalLink";
14+
1515
const ShadeArea = styled.div`
1616
display: flex;
1717
flex-direction: column;
@@ -58,12 +58,13 @@ const LinkContainer = styled.div`
5858
align-items: center;
5959
`;
6060

61-
const StyledLink = styled(Link)`
61+
const StyledInternalLink = styled(InternalLink)`
6262
display: flex;
6363
gap: 4px;
6464
6565
&:hover {
6666
svg {
67+
transition: fill 0.1s;
6768
fill: ${({ theme }) => theme.secondaryBlue};
6869
}
6970
}
@@ -85,22 +86,22 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
8586
<StyledP>Make sure you read and understand the Policies</StyledP>
8687
<LinkContainer>
8788
{!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
88-
<StyledLink to={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
89+
<StyledInternalLink to={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
8990
<StyledPaperclipIcon />
9091
{attachment.label ?? "Attachment"}
91-
</StyledLink>
92+
</StyledInternalLink>
9293
) : null}
9394
{isUndefined(disputePolicyURI) ? null : (
94-
<StyledLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
95+
<StyledInternalLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
9596
<StyledPolicyIcon />
9697
Dispute Policy
97-
</StyledLink>
98+
</StyledInternalLink>
9899
)}
99100
{isUndefined(courtId) ? null : (
100-
<StyledLink to={`/courts/${courtId}/purpose?section=description`}>
101+
<StyledInternalLink to={`/courts/${courtId}/purpose?section=description`}>
101102
<StyledPolicyIcon />
102103
Court Policy
103-
</StyledLink>
104+
</StyledInternalLink>
104105
)}
105106
</LinkContainer>
106107
</ShadeArea>

‎web/src/components/DisputeView/DisputeCardView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const StyledCard = styled(Card)`
2222
transition: background-color 0.1s;
2323
2424
&:hover {
25-
background-color: ${({ theme }) => theme.lightGrey};
25+
background-color: ${({ theme }) => theme.lightGrey}BB;
2626
}
2727
`;
2828

‎web/src/components/DisputeView/DisputeListView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const StyledListItem = styled(Card)`
2121
transition: background-color 0.1s;
2222
2323
&:hover {
24-
background-color: ${({ theme }) => theme.lightGrey};
24+
background-color: ${({ theme }) => theme.lightGrey}BB;
2525
}
2626
`;
2727

‎web/src/components/EvidenceCard.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React, { useMemo } from "react";
22
import styled, { css } from "styled-components";
33

4+
import { landscapeStyle } from "styles/landscapeStyle";
5+
import { responsiveSize } from "styles/responsiveSize";
6+
47
import Identicon from "react-identicons";
58
import ReactMarkdown from "react-markdown";
6-
import { Link } from "react-router-dom";
79

810
import { Card } from "@kleros/ui-components-library";
911

@@ -16,8 +18,8 @@ import { shortenAddress } from "utils/shortenAddress";
1618

1719
import { type Evidence } from "src/graphql/graphql";
1820

19-
import { landscapeStyle } from "styles/landscapeStyle";
20-
import { responsiveSize } from "styles/responsiveSize";
21+
import { ExternalLink } from "./ExternalLink";
22+
import { InternalLink } from "./InternalLink";
2123

2224
const StyledCard = styled(Card)`
2325
width: 100%;
@@ -106,7 +108,7 @@ const LeftContent = styled.div`
106108
const HoverStyle = css`
107109
:hover {
108110
text-decoration: underline;
109-
color: ${({ theme }) => theme.secondaryBlue};
111+
color: ${({ theme }) => theme.primaryBlue};
110112
cursor: pointer;
111113
}
112114
`;
@@ -138,7 +140,7 @@ const MobileText = styled.span`
138140
)}
139141
`;
140142

141-
const StyledLink = styled(Link)`
143+
const StyledInternalLink = styled(InternalLink)`
142144
display: flex;
143145
gap: ${responsiveSize(5, 6)};
144146
> svg {
@@ -204,20 +206,20 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
204206
<LeftContent>
205207
<AccountContainer>
206208
<Identicon size="24" string={sender} />
207-
<StyledLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
209+
<ExternalLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
208210
<Address>{shortenAddress(sender)}</Address>
209-
</StyledLink>
211+
</ExternalLink>
210212
</AccountContainer>
211-
<StyledLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
213+
<ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
212214
<Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
213-
</StyledLink>
215+
</ExternalLink>
214216
</LeftContent>
215217
{fileURI && fileURI !== "-" ? (
216218
<FileLinkContainer>
217-
<StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
219+
<StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
218220
<AttachmentIcon />
219221
<AttachedFileText />
220-
</StyledLink>
222+
</StyledInternalLink>
221223
</FileLinkContainer>
222224
) : null}
223225
</BottomShade>

‎web/src/components/ExternalLink.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Link } from "react-router-dom";
2+
import styled from "styled-components";
3+
4+
export const ExternalLink = styled(Link)`
5+
:hover {
6+
text-decoration: underline;
7+
}
8+
`;

‎web/src/components/Field.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import styled, { css } from "styled-components";
33
import { landscapeStyle } from "styles/landscapeStyle";
44

5-
import { Link } from "react-router-dom";
5+
import { InternalLink } from "./InternalLink";
66

77
const FieldContainer = styled.div<FieldContainerProps>`
88
display: flex;
@@ -58,14 +58,9 @@ const FieldContainer = styled.div<FieldContainerProps>`
5858

5959
const LinkContainer = styled.div``;
6060

61-
const StyledLink = styled(Link)`
62-
color: ${({ theme }) => theme.primaryBlue};
61+
const StyledInternalLink = styled(InternalLink)`
6362
text-wrap: auto;
6463
justify-content: end;
65-
66-
&:hover {
67-
text-decoration: underline ${({ theme }) => theme.secondaryBlue};
68-
}
6964
`;
7065

7166
type FieldContainerProps = {
@@ -104,14 +99,14 @@ const Field: React.FC<IField> = ({
10499
{(!displayAsList || isOverview || isJurorBalance) && <label>{name}:</label>}
105100
{link ? (
106101
<LinkContainer className="value">
107-
<StyledLink
102+
<StyledInternalLink
108103
to={link}
109104
onClick={(event) => {
110105
event.stopPropagation();
111106
}}
112107
>
113108
{value}
114-
</StyledLink>
109+
</StyledInternalLink>
115110
</LinkContainer>
116111
) : (
117112
<label className="value">{value}</label>

‎web/src/components/InternalLink.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Link } from "react-router-dom";
2+
import styled from "styled-components";
3+
4+
export const InternalLink = styled(Link)`
5+
:hover {
6+
color: ${({ theme }) => theme.secondaryBlue} !important;
7+
}
8+
`;

‎web/src/components/LightButton.tsx‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
11
import React from "react";
2-
import styled from "styled-components";
2+
import styled, { css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
34

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

67
const StyledButton = styled(Button)`
78
background-color: transparent;
8-
padding-left: 0;
9+
padding: 8px 8px 8px 0 !important;
10+
border-radius: 7px;
911
.button-text {
1012
color: ${({ theme }) => theme.primaryText};
1113
font-weight: 400;
1214
}
1315
.button-svg {
14-
fill: ${({ theme }) => theme.secondaryPurple};
16+
margin-right: 8px;
17+
fill: ${({ theme }) => theme.white}BF !important;
1518
}
1619
17-
:focus,
18-
:hover {
19-
background-color: transparent;
20+
&:hover {
21+
.button-svg {
22+
fill: ${({ theme }) => theme.white} !important;
23+
}
24+
transition: background-color 0.1s;
25+
background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
2026
}
27+
28+
${landscapeStyle(
29+
() => css`
30+
padding: 8px !important;
31+
.button-svg {
32+
margin-right: 0;
33+
}
34+
`
35+
)}
2136
`;
2237

2338
interface ILightButton {

‎web/src/components/Popup/MiniGuides/JurorLevels.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Card = styled(_Card)`
3232

3333
const leftPageContents = [
3434
{
35-
title: "Juror Level 1: Phytagoras",
35+
title: "Juror Level 1: Pythagoras",
3636
paragraphs: [
3737
"Jurors are classified into distinct levels according to their performance starting from Level 1.",
3838
"Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.",
@@ -62,7 +62,7 @@ const leftPageContents = [
6262
const userLevelData = [
6363
{
6464
level: 1,
65-
title: "Phytagoras",
65+
title: "Pythagoras",
6666
totalCoherentVotes: 6,
6767
totalResolvedVotes: 10,
6868
},

0 commit comments

Comments
 (0)