Skip to content

Commit f4d2ebb

Browse files
kyrerskyrers
committed
refactor: scaffold to migrate from styled-components to Tailwind CSS
1 parent 1e7c186 commit f4d2ebb

16 files changed

+2746
-741
lines changed

‎web/global.d.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import {} from "styled-components";
2-
import { lightTheme } from "./src/styles/themes";
3-
41
declare global {
52
module "*.svg" {
63
const content: React.FC<React.SVGAttributes<SVGElement>>;
@@ -12,8 +9,4 @@ declare global {
129
}
1310
}
1411

15-
declare module "styled-components" {
16-
type Theme = typeof lightTheme;
17-
//eslint-disable-next-line @typescript-eslint/no-empty-interface
18-
export interface DefaultTheme extends Theme {}
19-
}
12+
export {};

‎web/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"@types/react": "^18.2.59",
5252
"@types/react-dom": "^18.2.18",
5353
"@types/react-modal": "^3.16.3",
54-
"@types/styled-components": "^5.1.34",
5554
"@typescript-eslint/eslint-plugin": "^5.62.0",
5655
"@typescript-eslint/parser": "^5.62.0",
5756
"@typescript-eslint/utils": "^5.62.0",
@@ -70,12 +69,13 @@
7069
"dependencies": {
7170
"@cyntler/react-doc-viewer": "^1.16.3",
7271
"@kleros/kleros-app": "^2.1.0",
73-
"@kleros/ui-components-library": "^2.19.0",
72+
"@kleros/ui-components-library": "^3.6.0",
7473
"@mdxeditor/editor": "^3.45.0",
7574
"@reown/appkit": "^1.6.6",
7675
"@reown/appkit-adapter-wagmi": "^1.6.6",
7776
"@sentry/react": "^7.93.0",
7877
"@sentry/tracing": "^7.93.0",
78+
"@tailwindcss/vite": "^4.1.17",
7979
"@tanstack/react-query": "^5.66.0",
8080
"@yornaath/batshit": "^0.9.0",
8181
"alchemy-sdk": "^3.3.1",
@@ -103,8 +103,8 @@
103103
"rehype-raw": "^6.1.1",
104104
"rehype-sanitize": "^5.0.1",
105105
"remark-gfm": "^3.0.1",
106-
"styled-components": "^5.3.11",
107106
"subgraph-status": "^1.2.4",
107+
"tailwindcss": "^4.1.17",
108108
"viem": "^2.27.2",
109109
"wagmi": "^2.14.16"
110110
}

‎web/src/app.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { Navigate, Route } from "react-router-dom";
33
import { SentryRoutes } from "./utils/sentry";
44
import "react-loading-skeleton/dist/skeleton.css";
55
import "react-toastify/dist/ReactToastify.css";
6+
import "overlayscrollbars/styles/overlayscrollbars.css";
7+
import "global.css";
68
import Web3Provider from "context/Web3Provider";
79
import IsListProvider from "context/IsListProvider";
810
import QueryClientProvider from "context/QueryClientProvider";
9-
import StyledComponentsProvider from "context/StyledComponentsProvider";
11+
import ThemeProvider from "context/ThemeProvider";
1012
import GraphqlBatcherProvider from "context/GraphqlBatcher";
1113
import Layout from "layout/index";
1214
import NewTransaction from "./pages/NewTransaction";
@@ -18,7 +20,7 @@ import Settings from "./pages/Settings";
1820

1921
const App: React.FC = () => {
2022
return (
21-
<StyledComponentsProvider>
23+
<ThemeProvider>
2224
<Web3Provider>
2325
<QueryClientProvider>
2426
<AtlasProvider>
@@ -41,7 +43,7 @@ const App: React.FC = () => {
4143
</AtlasProvider>
4244
</QueryClientProvider>
4345
</Web3Provider>
44-
</StyledComponentsProvider>
46+
</ThemeProvider>
4547
);
4648
};
4749

‎web/src/context/StyledComponentsProvider.tsx‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎web/src/context/ThemeProvider.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useEffect } from "react";
2+
import { useLocalStorage } from "hooks/useLocalStorage";
3+
import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
4+
5+
type Theme = "light" | "dark";
6+
7+
const ThemeProvider: React.FC<{
8+
children: React.ReactNode;
9+
}> = ({ children }) => {
10+
const [theme, setTheme] = useLocalStorage<Theme>("theme", "dark");
11+
12+
const toggleTheme = () => {
13+
if (theme === "light") setTheme("dark");
14+
else setTheme("light");
15+
};
16+
17+
useEffect(() => {
18+
const root = document.documentElement;
19+
if (theme === "dark") {
20+
root.classList.add("dark");
21+
} else {
22+
root.classList.remove("dark");
23+
}
24+
}, [theme]);
25+
26+
return <ToggleThemeProvider {...{ theme, toggleTheme }}>{children}</ToggleThemeProvider>;
27+
};
28+
29+
export default ThemeProvider;

‎web/src/context/Web3Provider.tsx‎

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

33
import { fallback, http, WagmiProvider, webSocket } from "wagmi";
4-
import { mainnet, arbitrumSepolia, gnosisChiado, type AppKitNetwork, arbitrum, sepolia, gnosis } from "@reown/appkit/networks";
4+
import {
5+
mainnet,
6+
arbitrumSepolia,
7+
gnosisChiado,
8+
type AppKitNetwork,
9+
arbitrum,
10+
sepolia,
11+
gnosis,
12+
} from "@reown/appkit/networks";
513
import { createAppKit } from "@reown/appkit/react";
614
import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
7-
import { lightTheme } from "styles/themes";
815
import { isProductionDeployment } from "consts/index";
916
import { ALL_CHAINS, DEFAULT_CHAIN } from "consts/chains";
1017

@@ -82,7 +89,7 @@ createAppKit({
8289
projectId,
8390
allowUnsupportedChain: true,
8491
themeVariables: {
85-
"--w3m-color-mix": lightTheme.primaryPurple,
92+
"--w3m-color-mix": "#4D00B4",
8693
"--w3m-color-mix-strength": 20,
8794
// overlay portal is at 9999
8895
"--w3m-z-index": 10000,

‎web/src/global.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@import "../../node_modules/@kleros/ui-components-library/dist/assets/theme.css";
2+
@tailwind utilities;
3+
@source "../../node_modules/@kleros/ui-components-library";
4+
@import "tailwindcss";
5+
@custom-variant dark (&:where(.dark, .dark *));
6+
7+
@theme {
8+
--color-white: #ffffff;
9+
--color-white-73: #ffffffba;
10+
--color-black: #000000;
11+
--color-light-blue-65: #2a1260a6;
12+
--color-light-grey: #f0f0f0;
13+
--color-dark-purple: #220050;
14+
--color-violet-purple: #6a1dcd;
15+
--color-lavender-purple: #bb72ff;
16+
--color-pale-cyan: #acffff;
17+
--color-lime-green: #f3ffd9;
18+
--color-white-low-opacity-subtle: #ffffff0d;
19+
--color-white-low-opacity-strong: #ffffff26;
20+
--color-black-low-opacity: #00000080;
21+
--color-primary-text-73: color-mix(in srgb, var(--klerosUIComponentsPrimaryText) 73%, transparent);
22+
--color-skeleton-bg: #ebebeb;
23+
--color-skeleton-highlight: #f5f5f5;
24+
--max-width-landscape: 87.5rem;
25+
--shadow-custom: 0px 2px 3px rgba(0, 0, 0, 0.06);
26+
--leading-18px: 18px;
27+
}
28+
29+
.dark {
30+
--color-skeleton-bg: #3a2270;
31+
--color-skeleton-highlight: #3e307c;
32+
}
33+
34+
:root {
35+
--toastify-color-info: var(--klerosUIComponentsPrimaryBlue);
36+
--toastify-color-success: var(--klerosUIComponentsSuccess);
37+
--toastify-color-warning: var(--klerosUIComponentsWarning);
38+
--toastify-color-error: var(--klerosUIComponentsError);
39+
}
40+
41+
.react-loading-skeleton {
42+
z-index: 0;
43+
--base-color: var(--color-skeleton-bg);
44+
--highlight-color: var(--color-skeleton-highlight);
45+
}
46+
47+
body {
48+
font-family: "Open Sans", sans-serif;
49+
margin: 0;
50+
background-color: var(--klerosUIComponentsLightBlue);
51+
}
52+
53+
html {
54+
box-sizing: border-box;
55+
}
56+
57+
*,
58+
*:before,
59+
*:after {
60+
box-sizing: inherit;
61+
}
62+
63+
h1 {
64+
font-weight: 600;
65+
font-size: 24px;
66+
line-height: 32px;
67+
color: var(--klerosUIComponentsPrimaryText);
68+
}
69+
70+
label {
71+
font-weight: 400;
72+
font-size: 14px;
73+
line-height: 18px;
74+
color: var(--klerosUIComponentsSecondaryText);
75+
}
76+
77+
a {
78+
font-weight: 400;
79+
font-size: 14px;
80+
text-decoration: none;
81+
color: var(--klerosUIComponentsPrimaryBlue);
82+
}
83+
84+
hr {
85+
opacity: 1;
86+
border: 1px solid var(--klerosUIComponentsStroke);
87+
}
88+
89+
.os-theme-dark {
90+
--os-handle-bg: var(--color-violet-purple);
91+
--os-handle-bg-hover: var(--klerosUIComponentsSecondaryPurple);
92+
--os-handle-bg-active: var(--color-lavender-purple);
93+
}
94+
95+
.Toastify__toast-container.Toastify__toast-container {
96+
top: unset;
97+
padding-top: 20px;
98+
}
99+
100+
/* @cyntler/react-doc-viewer injects a canvas to load pdf, this is alters the height of body tag, so set to hidden */
101+
.hiddenCanvasElement {
102+
display: none;
103+
}
104+
105+
/* Custom Scrollbar */
106+
.custom-scrollbar::-webkit-scrollbar {
107+
width: 6px;
108+
height: 6px;
109+
}
110+
111+
.custom-scrollbar::-webkit-scrollbar-track {
112+
background: transparent;
113+
}
114+
115+
.custom-scrollbar::-webkit-scrollbar-thumb {
116+
background-color: var(--color-violet-purple);
117+
border-radius: 10px;
118+
transition: opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s;
119+
}
120+
121+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
122+
background-color: var(--klerosUIComponentsSecondaryPurple);
123+
}
124+
125+
.custom-scrollbar::-webkit-scrollbar-thumb:active {
126+
background-color: var(--color-lavender-purple);
127+
}
128+
129+
.custom-scrollbar {
130+
scrollbar-width: thin;
131+
scrollbar-color: var(--color-violet-purple) transparent;
132+
}

‎web/src/hooks/useToggleThemeContext.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ export const ToggleThemeProvider: React.FC<{
1212
theme: string;
1313
toggleTheme: () => void;
1414
}> = ({ theme, toggleTheme, children }) => {
15-
return (
16-
<Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>
17-
);
15+
return <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>;
1816
};
1917

20-
export const useToggleTheme: () => [string, () => void] = () => {
18+
export const useTheme: () => [string, () => void] = () => {
2119
return useContext(Context);
2220
};

‎web/src/layout/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { useRef } from "react";
22
import styled from "styled-components";
3-
import "overlayscrollbars/styles/overlayscrollbars.css";
43
import { Outlet } from "react-router-dom";
54
import { ToastContainer } from "react-toastify";
65
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";

‎web/src/styles/commonStyles.ts‎

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)