Skip to content

Commit 75568be

Browse files
kyrerskyrers
committed
refactor: migrate Header and related components
1 parent a3f01fd commit 75568be

28 files changed

+410
-1128
lines changed

‎web/src/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { SentryRoutes } from "./utils/sentry";
44
import "react-loading-skeleton/dist/skeleton.css";
55
import "react-toastify/dist/ReactToastify.css";
66
import "overlayscrollbars/styles/overlayscrollbars.css";
7-
import "global.css";
7+
import "./global.css";
88
import Web3Provider from "context/Web3Provider";
99
import IsListProvider from "context/IsListProvider";
1010
import QueryClientProvider from "context/QueryClientProvider";

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

Lines changed: 28 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
32

43
import Identicon from "react-identicons";
54
import { isAddress } from "viem";
@@ -9,111 +8,7 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
98
import { getChain } from "consts/chains";
109
import { shortenAddress } from "utils/shortenAddress";
1110

12-
import { landscapeStyle } from "styles/landscapeStyle";
13-
14-
const Container = styled.div`
15-
display: flex;
16-
flex-direction: column;
17-
justify-content: space-between;
18-
height: auto;
19-
align-items: flex-start;
20-
gap: 8px;
21-
align-items: center;
22-
background-color: ${({ theme }) => theme.whiteBackground};
23-
padding: 0px;
24-
cursor: pointer;
25-
26-
&:hover {
27-
label {
28-
color: ${({ theme }) => theme.white} !important;
29-
transition: color 0.2s;
30-
}
31-
}
32-
33-
${landscapeStyle(
34-
() => css`
35-
background-color: ${({ theme }) => theme.whiteLowOpacitySubtle};
36-
&:hover {
37-
transition: background-color 0.1s;
38-
background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
39-
}
40-
flex-direction: row;
41-
align-content: center;
42-
border-radius: 300px;
43-
gap: 0px;
44-
padding: 0 12px;
45-
`
46-
)}
47-
`;
48-
49-
const AccountContainer = styled.div`
50-
min-height: 32px;
51-
display: flex;
52-
align-items: center;
53-
width: fit-content;
54-
gap: 8px;
55-
56-
> label {
57-
font-size: 16px;
58-
font-weight: 600;
59-
}
60-
61-
${landscapeStyle(
62-
() => css`
63-
gap: 12px;
64-
> label {
65-
color: ${({ theme }) => theme.white}CC !important;
66-
font-weight: 400;
67-
font-size: 14px;
68-
}
69-
`
70-
)}
71-
`;
72-
73-
const ChainConnectionContainer = styled.div`
74-
display: flex;
75-
width: fit-content;
76-
min-height: 32px;
77-
align-items: center;
78-
padding-left: 0px;
79-
> label {
80-
color: ${({ theme }) => theme.success};
81-
font-size: 16px;
82-
83-
font-weight: 500;
84-
}
85-
86-
:before {
87-
content: "";
88-
width: 8px;
89-
height: 8px;
90-
margin: 0px 13px 0px 3px;
91-
border-radius: 50%;
92-
background-color: ${({ theme }) => theme.success};
93-
}
94-
95-
${landscapeStyle(
96-
() => css`
97-
display: none;
98-
`
99-
)}
100-
`;
101-
102-
const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>`
103-
align-items: center;
104-
svg {
105-
width: ${({ size }) => size + "px"};
106-
height: ${({ size }) => size + "px"};
107-
}
108-
`;
109-
110-
const StyledAvatar = styled.img<{ size: `${number}` }>`
111-
align-items: center;
112-
object-fit: cover;
113-
border-radius: 50%;
114-
width: ${({ size }) => size + "px"};
115-
height: ${({ size }) => size + "px"};
116-
`;
11+
import clsx from "clsx";
11712

11813
interface IIdenticonOrAvatar {
11914
size?: `${number}`;
@@ -134,9 +29,9 @@ export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", a
13429
});
13530

13631
return avatar ? (
137-
<StyledAvatar src={avatar} alt="avatar" size={size} />
32+
<img className="object-cover rounded-[50%]" src={avatar} alt="avatar" width={size} height={size} />
13833
) : (
139-
<StyledIdenticon size={size} string={address} />
34+
<Identicon size={size} string={address} />
14035
);
14136
};
14237

@@ -164,15 +59,34 @@ export const ChainDisplay: React.FC = () => {
16459

16560
const AccountDisplay: React.FC = () => {
16661
return (
167-
<Container>
168-
<AccountContainer>
62+
<div
63+
className={clsx(
64+
"flex flex-col justify-between items-center gap-2 h-auto p-0",
65+
"lg:flex-row lg:content-center lg:rounded-[300px] lg:gap-0 lg:py-0 lg:px-3",
66+
"cursor-pointer bg-klerosUIComponentsWhiteBackground lg:bg-white-low-opacity-subtle",
67+
"lg:hover:bg-white-low-opacity-strong lg:hover:transition-[background-color_0.1s]",
68+
"hover:[&_label]:text-white hover:[&_label]:transition-colors hover:[&_label]:duration-200"
69+
)}
70+
>
71+
<div
72+
className={clsx(
73+
"flex items-center w-fit min-h-8 gap-2 lg:gap-3",
74+
"[&>label]:text-base [&>label]:font-semibold lg:[&>label]:text-sm lg:[&>label]:font-normal"
75+
)}
76+
>
16977
<IdenticonOrAvatar size="32" />
17078
<AddressOrName />
171-
</AccountContainer>
172-
<ChainConnectionContainer>
79+
</div>
80+
<div
81+
className={clsx(
82+
"flex w-fit min-h-8 items-center pl-0 lg:hidden",
83+
"[&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium",
84+
"before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]"
85+
)}
86+
>
17387
<ChainDisplay />
174-
</ChainConnectionContainer>
175-
</Container>
88+
</div>
89+
</div>
17690
);
17791
};
17892

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className
2222
<Button
2323
{...{ className }}
2424
isLoading={isPending}
25-
disabled={isPending}
25+
isDisabled={isPending}
2626
text={`Switch to ${SUPPORTED_CHAINS[DEFAULT_CHAIN].name}`}
27-
onClick={handleSwitch}
27+
onPress={handleSwitch}
2828
/>
2929
);
3030
};
@@ -35,10 +35,10 @@ const ConnectButton: React.FC<{ className?: string }> = ({ className }) => {
3535
return (
3636
<Button
3737
{...{ className }}
38-
disabled={isOpen}
38+
isDisabled={isOpen}
3939
small
4040
text={"Connect"}
41-
onClick={async () => open({ view: "Connect" })}
41+
onPress={async () => open({ view: "Connect" })}
4242
/>
4343
);
4444
};

‎web/src/components/EnsureAuth.tsx‎

Lines changed: 5 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,9 @@ import { useAccount } from "wagmi";
44

55
import { Button } from "@kleros/ui-components-library";
66

7-
import styled from "styled-components";
87
import { useAtlasProvider } from "@kleros/kleros-app";
98
import { errorToast, infoToast, successToast } from "utils/wrapWithToast";
109

11-
const Container = styled.div`
12-
display: flex;
13-
flex-direction: column;
14-
gap: 16px;
15-
justify-content: center;
16-
align-items: center;
17-
`;
18-
19-
const StyledInfo = styled.p`
20-
margin: 0;
21-
padding: 0;
22-
`;
23-
2410
interface IEnsureAuth {
2511
children: React.ReactElement;
2612
message?: string;
@@ -45,15 +31,15 @@ export const EnsureAuth: React.FC<IEnsureAuth> = ({ children, message, buttonTex
4531
return isVerified ? (
4632
children
4733
) : (
48-
<Container>
49-
{message ? <StyledInfo>{message}</StyledInfo> : null}
34+
<div className="flex flex-col gap-4 justify-center items-center">
35+
{message ? <p className="m-0 p-0">{message}</p> : null}
5036
<Button
5137
text={buttonText ?? "Sign In"}
52-
onClick={handleClick}
53-
disabled={isSigningIn || !address}
38+
onPress={handleClick}
39+
isDisabled={isSigningIn || !address}
5440
isLoading={isSigningIn}
5541
{...{ className }}
5642
/>
57-
</Container>
43+
</div>
5844
);
5945
};

‎web/src/components/InfoCard.tsx‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
1+
import clsx from "clsx";
12
import React from "react";
2-
import styled from "styled-components";
3-
import { responsiveSize } from "styles/responsiveSize";
43
import InfoCircle from "svgs/icons/info-circle.svg";
54

6-
const InfoContainer = styled.div`
7-
display: grid;
8-
grid-template-columns: 16px auto;
9-
gap: ${responsiveSize(6, 8, 300)};
10-
align-items: center;
11-
justify-items: start;
12-
text-align: start;
13-
color: ${({ theme }) => theme.secondaryText};
14-
`;
15-
165
interface IInfoCard {
176
msg: string;
187
className?: string;
198
}
209

2110
const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
2211
return (
23-
<InfoContainer {...{ className }}>
12+
<div
13+
className={clsx(
14+
"grid grid-cols-[16px_auto] gap-fluid-6-8-300 items-center justify-start",
15+
"text-start text-klerosUIComponentsSecondaryText",
16+
className
17+
)}
18+
>
2419
<InfoCircle />
2520
{msg}
26-
</InfoContainer>
21+
</div>
2722
);
2823
};
2924

‎web/src/components/LightButton.tsx‎

Lines changed: 18 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,32 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
import { landscapeStyle } from "styles/landscapeStyle";
4-
import { hoverShortTransitionTiming } from "styles/commonStyles";
5-
62
import { Button } from "@kleros/ui-components-library";
7-
8-
const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
9-
${hoverShortTransitionTiming}
10-
background-color: transparent;
11-
padding: 8px !important;
12-
border-radius: 7px;
13-
.button-text {
14-
color: ${({ theme }) => theme.primaryText};
15-
font-weight: 400;
16-
}
17-
.button-svg {
18-
fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.secondaryText : `${theme.white}BF`)} !important;
19-
}
20-
21-
&:hover {
22-
.button-svg {
23-
fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
24-
}
25-
background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
26-
}
27-
28-
${landscapeStyle(
29-
() => css`
30-
padding: 8px !important;
31-
.button-svg {
32-
margin-right: 0;
33-
}
34-
`
35-
)}
36-
`;
3+
import { cn } from "src/utils";
374

385
interface ILightButton {
396
text: string;
407
Icon?: React.FC<React.SVGAttributes<SVGElement>>;
41-
onClick?: React.MouseEventHandler<HTMLButtonElement>;
8+
onPress?: () => void;
429
disabled?: boolean;
4310
className?: string;
4411
isMobileNavbar?: boolean;
4512
}
4613

47-
const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
48-
<StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
14+
const LightButton: React.FC<ILightButton> = ({ text, Icon, onPress, disabled, className, isMobileNavbar }) => (
15+
<Button
16+
variant="primary"
17+
small
18+
className={cn(
19+
"p-2 rounded-[7px]!",
20+
"bg-transparent hover:bg-white-low-opacity-strong transition duration-100",
21+
"[&_.button-text]:text-klerosUIComponentsPrimaryText [&_.button-text]:font-normal",
22+
"lg:[&_.button-svg]:mr-0",
23+
isMobileNavbar
24+
? "[&_.button-svg]:fill-klerosUIComponentsSecondaryText hover:[&_.button-svg]:fill-klerosUIComponentsPrimaryText"
25+
: "[&_.button-svg]:fill-white/75 hover:[&_.button-svg]:fill-white",
26+
className
27+
)}
28+
{...{ text, Icon, disabled, onPress }}
29+
/>
4930
);
5031

5132
export default LightButton;

‎web/src/components/Overlay.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import styled from "styled-components";
1+
import React from "react";
2+
import { cn } from "src/utils";
23

3-
export const Overlay = styled.div`
4-
position: fixed;
5-
top: 0;
6-
left: 0;
7-
width: 100vw;
8-
height: 100vh;
9-
background-color: ${({ theme }) => theme.blackLowOpacity};
10-
z-index: 30;
11-
`;
4+
interface Props {
5+
children?: React.ReactNode;
6+
className?: string;
7+
}
8+
9+
export const Overlay: React.FC<Props> = ({ children, className }) => (
10+
<div className={cn("fixed top-0 left-0 w-screen h-screen bg-black-low-opacity z-30", className)}>{children}</div>
11+
);

0 commit comments

Comments
 (0)