Skip to content

Commit bb0901b

Browse files
kyrerskyrers
committed
refactor: migrate DesktopHeader and related components to tailwind
1 parent 0bec1a7 commit bb0901b

File tree

22 files changed

+250
-885
lines changed

22 files changed

+250
-885
lines changed

‎web/src/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from "react";
22
import { Route } from "react-router-dom";
33
import { SentryRoutes } from "./utils/sentry";
4-
import "./global.css";
54
import "react-loading-skeleton/dist/skeleton.css";
65
import "react-toastify/dist/ReactToastify.css";
6+
import "./global.css";
77
import ThemeProvider from "context/ThemeProvider";
88
import Web3Provider from "context/Web3Provider";
99
import IsListViewProvider from "context/IsListViewProvider";

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

Lines changed: 25 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
import React from "react";
2-
import styled, { css } from "styled-components";
3-
4-
import { landscapeStyle } from "styles/landscapeStyle";
52

63
import Identicon from "react-identicons";
74
import { isAddress } from "viem";
@@ -11,110 +8,6 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
118
import { getChain } from "consts/chains";
129
import { shortenAddress } from "utils/shortenAddress";
1310

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-
`;
117-
11811
interface IIdenticonOrAvatar {
11912
size?: `${number}`;
12013
address?: `0x${string}`;
@@ -134,9 +27,9 @@ export const IdenticonOrAvatar: React.FC<IIdenticonOrAvatar> = ({ size = "16", a
13427
});
13528

13629
return avatar ? (
137-
<StyledAvatar src={avatar} alt="avatar" size={size} />
30+
<img className="items-center object-cover rounded-[50%]" src={avatar} alt="avatar" width={size} height={size} />
13831
) : (
139-
<StyledIdenticon size={size} string={address} />
32+
<Identicon className="items-center" size={size} string={address} />
14033
);
14134
};
14235

@@ -164,15 +57,32 @@ export const ChainDisplay: React.FC = () => {
16457

16558
const AccountDisplay: React.FC = () => {
16659
return (
167-
<Container>
168-
<AccountContainer>
60+
<div
61+
className={
62+
"flex flex-col justify-between h-auto items-center gap-2 bg-klerosUIComponentsWhiteBackground p-0 cursor-pointer" +
63+
"hover:[&_label]:text-white hover:[&_label]:transition-colors hover:[&_label]:duration-200 landscape-900:hover:bg-white-low-opacity-strong landscape-900:hover:transition-[background-color_0.1s]" +
64+
"landscape-900:bg-white-low-opacity-subtle landscape-900:flex-row landscape-900:content-center landscape-900:rounded-[300px] landscape-900:gap-0 landscape-900:py-0 landscape-900:px-3"
65+
}
66+
>
67+
<div
68+
className={
69+
"flex items-center gap-2 w-fit min-h-8 [&>label]:text-base [&>label]:font-semibold" +
70+
"landscape-900:gap-3 landscape-900:[&>label]:text-sm landscape-900:[&>label]:font-normal"
71+
}
72+
>
16973
<IdenticonOrAvatar size="32" />
17074
<AddressOrName />
171-
</AccountContainer>
172-
<ChainConnectionContainer>
75+
</div>
76+
<div
77+
className={
78+
"flex w-fit min-h-8 items-center pl-0 [&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium" +
79+
"before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]" +
80+
"landscape-900:display-none"
81+
}
82+
>
17383
<ChainDisplay />
174-
</ChainConnectionContainer>
175-
</Container>
84+
</div>
85+
</div>
17686
);
17787
};
17888

‎web/src/components/InfoCard.tsx‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,24 @@
11
import React from "react";
2-
import styled from "styled-components";
32
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={`grid grid-cols-[16px_auto] gap-${responsiveSize(
14+
6,
15+
8,
16+
300
17+
)} items-center justify-start text-start text-klerosUIComponentsSecondaryText ${className}`}
18+
>
2419
<InfoCircle />
2520
{msg}
26-
</InfoContainer>
21+
</div>
2722
);
2823
};
2924

‎web/src/components/LightButton.tsx‎

Lines changed: 14 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,6 @@
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";
73

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-
`;
37-
384
interface ILightButton {
395
text: string;
406
Icon?: React.FC<React.SVGAttributes<SVGElement>>;
@@ -45,7 +11,20 @@ interface ILightButton {
4511
}
4612

4713
const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
48-
<StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
14+
<Button
15+
variant="primary"
16+
small
17+
className={
18+
"transition duration-100 bg-transparent p-2 rounded-[7px] landscape-900:[&_button-svg]:mr-0" +
19+
"[&_button-text]:text-KlerosUIComponentsPrimaryText [&_button-text]:font-normal" +
20+
`[&_button-svg]:${isMobileNavbar ? "fill-KlerosUIComponentsSecondaryText" : "fill-white-75"}` +
21+
`hover:[&_button-svg]:${
22+
isMobileNavbar ? "fill-KlerosUIComponentsPrimaryText" : "fill-white"
23+
} hover:bg-white-low-opacity-strong` +
24+
`${className}`
25+
}
26+
{...{ text, Icon, onClick, disabled }}
27+
/>
4928
);
5029

5130
export default LightButton;

‎web/src/components/Overlay.tsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
import styled from "styled-components";
1+
import React from "react";
22

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-
`;
3+
export const Overlay: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
4+
<div className="fixed top-0 left-0 w-screen h-screen bg-black-low-opacity z-30">{children}</div>
5+
);

‎web/src/components/OverlayPortal.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11
import React from "react";
22
import ReactDOM from "react-dom";
3-
import styled from "styled-components";
4-
5-
const PortalContainer = styled.div`
6-
position: fixed;
7-
top: 0;
8-
left: 0;
9-
z-index: 9999;
10-
width: 100%;
11-
height: 100%;
12-
`;
133

144
const OverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
15-
return ReactDOM.createPortal(<PortalContainer>{children}</PortalContainer>, document.body);
5+
return ReactDOM.createPortal(
6+
<div className="fixed top-0 left-0 z-9999 w-full h-full">{children}</div>,
7+
document.body
8+
);
169
};
1710

1811
export default OverlayPortal;

‎web/src/global.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@
33

44
@theme {
55
--color-white: #ffffff;
6+
--color-white-75: #ffffffbf;
7+
--color-white-73: #ffffffba;
68
--color-black: #000000;
9+
--color-light-blue-65: #2a1260a6;
710
--color-light-grey: #f0f0f0;
811
--color-dark-purple: #220050;
912
--color-violet-purple: #6a1dcd;
@@ -13,6 +16,7 @@
1316
--color-white-low-opacity-subtle: #ffffff0d;
1417
--color-white-low-opacity-strong: #ffffff26;
1518
--color-black-low-opacity: #00000080;
19+
--color-primary-text-73: color-mix(in srgb, var(--klerosUIComponentsPrimaryText) 73%, transparent);
1620
--color-skeleton-bg: #ebebeb;
1721
--color-skeleton-highlight: #f5f5f5;
1822
--breakpoint-landscape-900: 900px;

0 commit comments

Comments
 (0)