Skip to content

Commit 318211a

Browse files
kyrerskyrers
committed
fix: proper className concatenation + minor tailwind utility name fixes
1 parent bb0901b commit 318211a

File tree

13 files changed

+35
-47
lines changed

13 files changed

+35
-47
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,14 +59,14 @@ const AccountDisplay: React.FC = () => {
5959
return (
6060
<div
6161
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]" +
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] " +
6464
"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"
6565
}
6666
>
6767
<div
6868
className={
69-
"flex items-center gap-2 w-fit min-h-8 [&>label]:text-base [&>label]:font-semibold" +
69+
"flex items-center gap-2 w-fit min-h-8 [&>label]:text-base [&>label]:font-semibold " +
7070
"landscape-900:gap-3 landscape-900:[&>label]:text-sm landscape-900:[&>label]:font-normal"
7171
}
7272
>
@@ -75,9 +75,9 @@ const AccountDisplay: React.FC = () => {
7575
</div>
7676
<div
7777
className={
78-
"flex w-fit min-h-8 items-center pl-0 [&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium" +
78+
"flex w-fit min-h-8 items-center pl-0 [&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium " +
7979
"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"
80+
"landscape-900:hidden"
8181
}
8282
>
8383
<ChainDisplay />

‎web/src/components/InfoCard.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@ interface IInfoCard {
1010
const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
1111
return (
1212
<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}`}
13+
className={`grid grid-cols-[16px_auto] items-center justify-start text-start text-klerosUIComponentsSecondaryText ${className}`}
14+
style={{ gap: responsiveSize(6, 8, 300) }}
1815
>
1916
<InfoCircle />
2017
{msg}

‎web/src/components/LightButton.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, cl
1515
variant="primary"
1616
small
1717
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"}` +
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"} ` +
2121
`hover:[&_button-svg]:${
22-
isMobileNavbar ? "fill-KlerosUIComponentsPrimaryText" : "fill-white"
23-
} hover:bg-white-low-opacity-strong` +
22+
isMobileNavbar ? "fill-klerosUIComponentsPrimaryText" : "fill-white"
23+
} hover:bg-white-low-opacity-strong ` +
2424
`${className}`
2525
}
2626
{...{ text, Icon, onClick, disabled }}

‎web/src/global.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
@theme {
55
--color-white: #ffffff;
6-
--color-white-75: #ffffffbf;
76
--color-white-73: #ffffffba;
87
--color-black: #000000;
98
--color-light-blue-65: #2a1260a6;

‎web/src/layout/Header/DesktopHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const DesktopHeader: React.FC = () => {
5050
<Explore />
5151
</div>
5252

53-
<div className={`flex ml-2 [&_canvas]:w-5 gap-[${responsiveSize(4, 8)}]`}>
53+
<div className="flex ml-2 [&_canvas]:w-5" style={{ gap: responsiveSize(4, 8) }}>
5454
<div
5555
className="[&_label]:cursor-pointer [&_label]:text-white"
5656
onClick={isConnected && isDefaultChain ? toggleIsSettingsOpen : undefined}

‎web/src/layout/Header/Logo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const Logo: React.FC = () => (
88
<div className="flex flex-row items-center gap-4">
99
{" "}
1010
<Link to={"/"}>
11-
<CurateLogo className="transition duration-100 max-h-12 w-auto hover:fill-white-75" />
11+
<CurateLogo className="transition duration-100 max-h-12 w-auto hover:fill-white/75" />
1212
</Link>
1313
</div>
1414
);

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -89,21 +89,15 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
8989
<div
9090
ref={containerRef}
9191
className={
92-
"flex flex-col items-center absolute max-h-[340px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 w-[86vw] max-w-[480px] border border-klerosUIComponentsStroke rounded-[3px] bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)]" +
93-
"[&_svg]:visible" +
94-
"landscape-900:mt-16 landscape-900:top-0 landscape-900:left-0 landscape-900:right-auto landscape-900:transform-none landscape-900:max-h-[80vh]" +
95-
`landscape-900:w-[${responsiveSize(300, 480)}]`
92+
"flex flex-col items-center absolute max-h-[340px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 w-[86vw] max-w-[480px] border border-klerosUIComponentsStroke rounded-[3px] bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)] " +
93+
"[&_svg]:visible landscape-900:mt-16 landscape-900:top-0 landscape-900:left-0 landscape-900:right-auto landscape-900:transform-none landscape-900:max-h-[80vh]"
9694
}
95+
style={{ width: responsiveSize(300, 480, 900) }}
9796
>
9897
<h1 className="pt-6 text-2xl font-semibold leading-8">Kleros Solutions</h1>
9998
<div
100-
className={`grid overflow-y-auto p-[4px_${responsiveSize(
101-
8,
102-
24
103-
)}_16px] gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px] w-[${responsiveSize(
104-
300,
105-
480
106-
)}] grid-cols-[repeat(auto-fit,minmax(100px,1fr))]`}
99+
className="grid overflow-y-auto gap-y-2 gap-x-0.5 justify-items-center max-w-[480px] min-w-[300px] grid-cols-[repeat(auto-fit,minmax(100px,1fr))]"
100+
style={{ padding: `4px_${responsiveSize(8, 24)}_16px`, width: responsiveSize(300, 480) }}
107101
>
108102
{ITEMS.map((item) => {
109103
return <Product {...item} key={item.text} />;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
3636
<Link
3737
key={text}
3838
className={
39-
"flex items-center no-underline text-base p-2 pl-0 rounded-[7px] landscape-900:py-4 landscape-900:px-2" +
39+
"flex items-center no-underline text-base p-2 pl-0 rounded-[7px] landscape-900:py-4 landscape-900:px-2 " +
4040
`${
4141
isActive(to)
42-
? "text-klerosUIComponentsPrimaryText landscape-900:text-white"
43-
: "text-primary-text-73 landscape-900:text-white-73"
42+
? "text-klerosUIComponentsPrimaryText landscape-900:text-white "
43+
: "text-primary-text-73 landscape-900:text-white-73 "
4444
}` +
45-
`${isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal"}` +
45+
`${isMobileNavbar && isActive(to) ? "font-semibold " : "font-normal "}` +
4646
`hover:${isMobileNavbar ? "text-klerosUIComponentsPrimaryText" : "text-white"}`
4747
}
4848
onClick={toggleIsOpen}

‎web/src/layout/Header/navbar/Menu/Help.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
4848
<div
4949
ref={containerRef}
5050
className={
51-
"flex flex-col absolute max-h-[80vh] overflow-y-auto width-[86vw] max-width-[444px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 p-3 pb-6 border border-klerosUIComponentsStroke rounded-[3px] bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)]" +
51+
"flex flex-col absolute max-h-[80vh] overflow-y-auto w-[86vw] max-w-[444px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 p-3 pb-6 border border-klerosUIComponentsStroke rounded-[3px] bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)] " +
5252
"landscape-900:mt-16 landscape-900:top-0 landscape-900:right-0 landscape-900:left-auto landscape-900:transform-none landscape-900:max-w-[260px]"
5353
}
5454
>

‎web/src/layout/Header/navbar/Menu/Settings/Notifications/FormContactDetails/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,9 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
7272
};
7373

7474
return (
75-
<div
76-
className={`w-full relative flex flex-col py-0 px-${responsiveSize(12, 32, 300)} pb-4 gap-4`}
75+
<form
76+
className="w-full relative flex flex-col py-0 pb-4 gap-4"
77+
style={{ paddingInline: responsiveSize(12, 32, 300) }}
7778
onSubmit={handleSubmit}
7879
>
7980
{/* <FormContactContainer>
@@ -115,7 +116,7 @@ const FormContactDetails: React.FC<ISettings> = ({ toggleIsSettingsOpen }) => {
115116
/>
116117
</div>
117118
<EmailVerificationInfo toggleIsSettingsOpen={toggleIsSettingsOpen} />
118-
</div>
119+
</form>
119120
);
120121
};
121122

0 commit comments

Comments
 (0)