Skip to content

Commit 7512ebc

Browse files
kyrerskyrers
committed
refactor: replace style string concatenation with clsx/cn
1 parent 52538dc commit 7512ebc

File tree

10 files changed

+79
-50
lines changed

10 files changed

+79
-50
lines changed

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

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi";
77

88
import { getChain } from "consts/chains";
99
import { shortenAddress } from "utils/shortenAddress";
10+
import clsx from "clsx";
1011

1112
interface IIdenticonOrAvatar {
1213
size?: `${number}`;
@@ -58,27 +59,29 @@ export const ChainDisplay: React.FC = () => {
5859
const AccountDisplay: React.FC = () => {
5960
return (
6061
<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 lg:hover:bg-white-low-opacity-strong lg:hover:transition-[background-color_0.1s] " +
64-
"lg:bg-white-low-opacity-subtle lg:flex-row lg:content-center lg:rounded-[300px] lg:gap-0 lg:py-0 lg:px-3"
65-
}
62+
className={clsx(
63+
"flex flex-col justify-between items-center gap-2 h-auto p-0",
64+
"lg:flex-row lg:content-center lg:rounded-[300px] lg:gap-0 lg:py-0 lg:px-3",
65+
"cursor-pointer bg-klerosUIComponentsWhiteBackground lg:bg-white-low-opacity-subtle",
66+
"lg:hover:bg-white-low-opacity-strong lg:hover:transition-[background-color_0.1s]",
67+
"hover:[&_label]:text-white hover:[&_label]:transition-colors hover:[&_label]:duration-200"
68+
)}
6669
>
6770
<div
68-
className={
69-
"flex items-center gap-2 w-fit min-h-8 [&>label]:text-base [&>label]:font-semibold " +
70-
"lg:gap-3 lg:[&>label]:text-sm lg:[&>label]:font-normal"
71-
}
71+
className={clsx(
72+
"flex items-center w-fit min-h-8 gap-2 lg:gap-3",
73+
"[&>label]:text-base [&>label]:font-semibold lg:[&>label]:text-sm lg:[&>label]:font-normal"
74+
)}
7275
>
7376
<IdenticonOrAvatar size="32" />
7477
<AddressOrName />
7578
</div>
7679
<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-
"lg:hidden"
81-
}
80+
className={clsx(
81+
"flex w-fit min-h-8 items-center pl-0 lg:hidden",
82+
"[&>label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium",
83+
"before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]"
84+
)}
8285
>
8386
<ChainDisplay />
8487
</div>

‎web/src/components/InfoCard.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { responsiveSize } from "styles/responsiveSize";
33
import InfoCircle from "svgs/icons/info-circle.svg";
4+
import { cn } from "~src/utils";
45

56
interface IInfoCard {
67
msg: string;
@@ -10,7 +11,10 @@ interface IInfoCard {
1011
const InfoCard: React.FC<IInfoCard> = ({ msg, className }) => {
1112
return (
1213
<div
13-
className={`grid grid-cols-[16px_auto] items-center justify-start text-start text-klerosUIComponentsSecondaryText ${className}`}
14+
className={cn(
15+
"grid grid-cols-[16px_auto] items-center justify-start text-start text-klerosUIComponentsSecondaryText",
16+
className
17+
)}
1418
style={{ gap: responsiveSize(6, 8, 300) }}
1519
>
1620
<InfoCircle />

‎web/src/components/LightButton.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { Button } from "@kleros/ui-components-library";
3+
import { cn } from "~src/utils";
34

45
interface ILightButton {
56
text: string;
@@ -14,15 +15,16 @@ const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, cl
1415
<Button
1516
variant="primary"
1617
small
17-
className={
18-
"transition duration-100 bg-transparent p-2 rounded-[7px] lg:[&_.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-
}
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+
)}
2628
{...{ text, Icon, onClick, disabled }}
2729
/>
2830
);

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Vea from "svgs/icons/vea.svg";
1313
import { responsiveSize } from "styles/responsiveSize";
1414

1515
import Product from "./Product";
16+
import clsx from "clsx";
1617

1718
const ITEMS = [
1819
{
@@ -88,10 +89,13 @@ const DappList: React.FC<IDappList> = ({ toggleIsDappListOpen }) => {
8889
return (
8990
<div
9091
ref={containerRef}
91-
className={
92-
"flex flex-col items-center absolute max-h-[340px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 max-w-[480px] border border-klerosUIComponentsStroke rounded-[3px] bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)] " +
93-
"[&_svg]:visible lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:max-h-[80vh]"
94-
}
92+
className={clsx(
93+
"flex flex-col items-center absolute max-h-[340px] top-[5%] left-1/2 transform -translate-x-1/2 z-1 max-w-[480px]",
94+
"border border-klerosUIComponentsStroke rounded-[3px]",
95+
"bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)]",
96+
"[&_svg]:visible",
97+
"lg:mt-16 lg:top-0 lg:left-0 lg:right-auto lg:transform-none lg:max-h-[80vh]"
98+
)}
9599
style={{ width: responsiveSize(300, 480, 900) }}
96100
>
97101
<h1 className="pt-6 text-2xl font-semibold leading-8">Kleros Solutions</h1>

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Link, useLocation } from "react-router-dom";
33
import { useOpenContext } from "../MobileHeader";
44
import { MAIN_CURATE_ADDRESS } from "consts/index";
55
import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
6-
import { isUndefined } from "utils/index";
6+
import { cn, isUndefined } from "utils/index";
77
import { getIpfsUrl } from "utils/getIpfsUrl";
88

99
interface IExplore {
@@ -35,11 +35,13 @@ const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
3535
{links.map(({ to, text, identifier }) => (
3636
<Link
3737
key={text}
38-
className={`flex items-center no-underline text-base p-2 pl-0 rounded-[7px] lg:py-4 lg:px-2 ${
39-
isActive(to) ? "text-klerosUIComponentsPrimaryText lg:text-white" : "text-primary-text-73 lg:text-white-73"
40-
} ${isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal"} ${
41-
isMobileNavbar ? "hover:text-klerosUIComponentsPrimaryText" : "hover:text-white"
42-
}`}
38+
className={cn(
39+
"flex items-center p-2 pl-0 rounded-[7px] lg:py-4 lg:px-2",
40+
"no-underline text-base",
41+
isActive(to) ? "text-klerosUIComponentsPrimaryText lg:text-white" : "text-primary-text-73 lg:text-white-73",
42+
isMobileNavbar ? "hover:text-klerosUIComponentsPrimaryText" : "hover:text-white",
43+
isMobileNavbar && isActive(to) ? "font-semibold" : "font-normal"
44+
)}
4345
onClick={toggleIsOpen}
4446
{...{ to }}
4547
>

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Telegram from "svgs/socialmedia/telegram.svg";
1010

1111
import Debug from "../Debug";
1212
import { IHelp } from "../index";
13+
import clsx from "clsx";
1314

1415
const ITEMS = [
1516
{
@@ -47,10 +48,12 @@ const Help: React.FC<IHelp> = ({ toggleIsHelpOpen }) => {
4748
<>
4849
<div
4950
ref={containerRef}
50-
className={
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)] " +
51+
className={clsx(
52+
"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",
53+
"border border-klerosUIComponentsStroke rounded-[3px]",
54+
"bg-klerosUIComponentsWhiteBackground shadow-[0px_2px_3px_rgba(0,0,0,0.06)]",
5255
"lg:mt-16 lg:top-0 lg:right-0 lg:left-auto lg:transform-none lg:max-w-[260px]"
53-
}
56+
)}
5457
>
5558
{ITEMS.map((item, index) => (
5659
<a

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import General from "./General";
55
import NotificationSettings from "./Notifications";
66
import { ISettings } from "../../index";
77
import { useLocation, useNavigate } from "react-router-dom";
8+
import clsx from "clsx";
89

910
const TABS = [
1011
{
@@ -29,10 +30,11 @@ const Settings: React.FC<ISettings> = ({ toggleIsSettingsOpen, initialTab }) =>
2930
return (
3031
<div
3132
ref={containerRef}
32-
className={
33-
"flex flex-col absolute max-h-[80vh] overflow-y-auto bg-klerosUIComponentsWhiteBackground top-[5%] left-1/2 transform -translate-x-1/2 z-1 border border-solid border-klerosUIComponentsStroke rounded-[3px] " +
33+
className={clsx(
34+
"flex flex-col absolute max-h-[80vh] overflow-y-auto top-[5%] left-1/2 transform -translate-x-1/2 z-1",
35+
"bg-klerosUIComponentsWhiteBackground border border-solid border-klerosUIComponentsStroke rounded-[3px]",
3436
"lg:mt-16 lg:top-0 lg:right-0 lg:left-auto lg:transform-none"
35-
}
37+
)}
3638
>
3739
<div className="flex justify-center text-2xl mt-6 text-klerosUIComponentsPrimaryText">Settings</div>
3840
<Tabs

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import LightModeIcon from "svgs/menu-icons/light-mode.svg";
77
import SettingsIcon from "svgs/menu-icons/settings.svg";
88
import { useToggleTheme } from "hooks/useToggleThemeContext";
99
import { IHelp, ISettings } from "..";
10+
import clsx from "clsx";
1011

1112
const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsOpen }) => {
1213
const [theme, toggleTheme] = useToggleTheme();
@@ -38,10 +39,12 @@ const Menu: React.FC<ISettings & IHelp> = ({ toggleIsHelpOpen, toggleIsSettingsO
3839
{buttons.map(({ text, Icon, onClick }) => (
3940
<div
4041
key={Icon}
41-
className={
42-
"flex items-center min-h-8 [&_button]:p-0 [&_.button-text]:block [&_.button-svg]:fill-klerosUIComponentsSecondaryPurple " +
43-
"lg:[&_.button-text]:hidden lg:[&_.button-svg]:fill-white"
44-
}
42+
className={clsx(
43+
"flex items-center min-h-8",
44+
"[&_button]:p-0",
45+
"[&_.button-text]:block lg:[&_.button-text]:hidden",
46+
"[&_.button-svg]:fill-klerosUIComponentsSecondaryPurple lg:[&_.button-svg]:fill-white"
47+
)}
4548
>
4649
<LightButton {...{ text, onClick, Icon }} />
4750
</div>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import clsx from "clsx";
12
import React, { useState } from "react";
23
import Skeleton from "react-loading-skeleton";
34

@@ -17,10 +18,11 @@ const Product: React.FC<IProduct> = ({ text, url, Icon }) => {
1718
href={url}
1819
target="_blank"
1920
rel="noopener noreferrer"
20-
className={
21-
"flex flex-col items-center cursor-pointer pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2 bg-klerosUIComponentsLightBackground " +
22-
"hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02] hover:bg-klerosUIComponentsLightGrey"
23-
}
21+
className={clsx(
22+
"flex flex-col items-center pt-4 pb-7 px-2 max-w-[100px] rounded-[3px] gap-2",
23+
"cursor-pointer bg-klerosUIComponentsLightBackground hover:bg-klerosUIComponentsLightGrey",
24+
"hover:transition-[transform_0.15s,background-color_0.3s] hover:scale-[1.02]"
25+
)}
2426
style={{ width: responsiveSize(100, 130) }}
2527
>
2628
{typeof Icon === "string" ? (

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Menu from "./Menu";
1414
import Help from "./Menu/Help";
1515
import Settings from "./Menu/Settings";
1616
import { DisconnectWalletButton } from "./Menu/Settings/General";
17+
import { cn } from "~src/utils";
1718

1819
export interface ISettings {
1920
toggleIsSettingsOpen: () => void;
@@ -38,9 +39,12 @@ const NavBar: React.FC = () => {
3839
return (
3940
<>
4041
<div
41-
className={`absolute top-16 left-0 right-0 max-h-[calc(100vh-64px)] overflow-y-auto z-10 bg-klerosUIComponentsWhiteBackground shadow-default p-6 [&_hr]:my-6 origin-top transition-[transform,visibility] duration-[klerosUIComponentsTransitionSpeed] ease-in-out ${
42+
className={cn(
43+
"absolute top-16 left-0 right-0 max-h-[calc(100vh-64px)] p-6 overflow-y-auto z-10",
44+
"bg-klerosUIComponentsWhiteBackground shadow-default origin-top transition-[transform,visibility] duration-[klerosUIComponentsTransitionSpeed] ease-in-out",
45+
"[&_hr]:my-6",
4246
isOpen ? "scale-y-100 visible" : "scale-y-0 invisible"
43-
}`}
47+
)}
4448
>
4549
<LightButton
4650
text="Kleros Solutions"

0 commit comments

Comments
 (0)