diff --git a/web/global.d.ts b/web/global.d.ts index b98930e..64647a5 100644 --- a/web/global.d.ts +++ b/web/global.d.ts @@ -1,6 +1,3 @@ -import {} from "styled-components"; -import { lightTheme } from "./src/styles/themes"; - declare global { module "*.svg" { const content: React.FC>; @@ -12,8 +9,4 @@ declare global { } } -declare module "styled-components" { - type Theme = typeof lightTheme; - //eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface DefaultTheme extends Theme {} -} +export {}; diff --git a/web/package.json b/web/package.json index 672c636..ea366cd 100644 --- a/web/package.json +++ b/web/package.json @@ -48,10 +48,9 @@ "@graphql-codegen/client-preset": "^4.2.0", "@kleros/curate-v2-tsconfig": "workspace:^", "@kleros/kleros-v2-contracts": "^0.10.0", + "@tailwindcss/vite": "^4.1.16", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", - "@types/react-modal": "^3.16.3", - "@types/styled-components": "^5.1.34", "@typescript-eslint/eslint-plugin": "^5.62.0", "@typescript-eslint/parser": "^5.62.0", "@typescript-eslint/utils": "^5.62.0", @@ -61,6 +60,7 @@ "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "lru-cache": "^7.18.3", + "tailwindcss": "^4.1.16", "typescript": "^5.3.3", "vite": "^5.4.2", "vite-plugin-node-polyfills": "^0.22.0", @@ -71,7 +71,7 @@ "@cyntler/react-doc-viewer": "^1.17.0", "@kleros/curate-v2-templates": "workspace:^", "@kleros/kleros-app": "^2.0.2", - "@kleros/ui-components-library": "^2.20.0", + "@kleros/ui-components-library": "^3.6.0", "@reown/appkit": "^1.6.6", "@reown/appkit-adapter-wagmi": "^1.6.6", "@sentry/react": "^7.93.0", @@ -82,6 +82,7 @@ "@yornaath/batshit": "^0.9.0", "chart.js": "^3.9.1", "chartjs-adapter-moment": "^1.0.1", + "clsx": "^2.1.1", "core-js": "^3.35.0", "graphql": "^16.9.0", "graphql-request": "^7.1.2", @@ -98,13 +99,12 @@ "react-is": "^18.2.0", "react-loading-skeleton": "^3.3.1", "react-markdown": "^8.0.7", - "react-modal": "^3.16.1", "react-router-dom": "^6.21.2", "react-scripts": "^5.0.1", "react-toastify": "^9.1.3", "react-use": "^17.4.3", - "styled-components": "^5.3.11", "subgraph-status": "^1.2.4", + "tailwind-merge": "^3.3.1", "viem": "^2.27.2", "wagmi": "^2.14.10", "zod": "^3.24.2" diff --git a/web/src/app.tsx b/web/src/app.tsx index 082eb22..f8d7826 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -3,10 +3,11 @@ import { Route } from "react-router-dom"; import { SentryRoutes } from "./utils/sentry"; import "react-loading-skeleton/dist/skeleton.css"; import "react-toastify/dist/ReactToastify.css"; +import "./global.css"; +import ThemeProvider from "context/ThemeProvider"; import Web3Provider from "context/Web3Provider"; import IsListViewProvider from "context/IsListViewProvider"; import QueryClientProvider from "context/QueryClientProvider"; -import StyledComponentsProvider from "context/StyledComponentsProvider"; import Layout from "layout/index"; import Home from "./pages/Home"; import AllLists from "./pages/AllLists"; @@ -22,7 +23,7 @@ import Settings from "./pages/Settings"; const App: React.FC = () => { return ( - + @@ -55,7 +56,7 @@ const App: React.FC = () => { - + ); }; diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index 3f27591..bd7d1a2 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/web/src/components/ConnectWallet/AccountDisplay.tsx @@ -1,7 +1,4 @@ import React from "react"; -import styled, { css } from "styled-components"; - -import { landscapeStyle } from "styles/landscapeStyle"; import Identicon from "react-identicons"; import { isAddress } from "viem"; @@ -10,110 +7,7 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi"; import { getChain } from "consts/chains"; import { shortenAddress } from "utils/shortenAddress"; - -const Container = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - height: auto; - align-items: flex-start; - gap: 8px; - align-items: center; - background-color: ${({ theme }) => theme.whiteBackground}; - padding: 0px; - cursor: pointer; - - &:hover { - label { - color: ${({ theme }) => theme.white} !important; - transition: color 0.2s; - } - } - - ${landscapeStyle( - () => css` - background-color: ${({ theme }) => theme.whiteLowOpacitySubtle}; - &:hover { - transition: background-color 0.1s; - background-color: ${({ theme }) => theme.whiteLowOpacityStrong}; - } - flex-direction: row; - align-content: center; - border-radius: 300px; - gap: 0px; - padding: 0 12px; - ` - )} -`; - -const AccountContainer = styled.div` - min-height: 32px; - display: flex; - align-items: center; - width: fit-content; - gap: 8px; - - > label { - font-size: 16px; - font-weight: 600; - } - - ${landscapeStyle( - () => css` - gap: 12px; - > label { - color: ${({ theme }) => theme.white}CC !important; - font-weight: 400; - font-size: 14px; - } - ` - )} -`; - -const ChainConnectionContainer = styled.div` - display: flex; - width: fit-content; - min-height: 32px; - align-items: center; - padding-left: 0px; - > label { - color: ${({ theme }) => theme.success}; - font-size: 16px; - - font-weight: 500; - } - - :before { - content: ""; - width: 8px; - height: 8px; - margin: 0px 13px 0px 3px; - border-radius: 50%; - background-color: ${({ theme }) => theme.success}; - } - - ${landscapeStyle( - () => css` - display: none; - ` - )} -`; - -const StyledIdenticon = styled(Identicon)<{ size: `${number}` }>` - align-items: center; - svg { - width: ${({ size }) => size + "px"}; - height: ${({ size }) => size + "px"}; - } -`; - -const StyledAvatar = styled.img<{ size: `${number}` }>` - align-items: center; - object-fit: cover; - border-radius: 50%; - width: ${({ size }) => size + "px"}; - height: ${({ size }) => size + "px"}; -`; +import clsx from "clsx"; interface IIdenticonOrAvatar { size?: `${number}`; @@ -134,9 +28,9 @@ export const IdenticonOrAvatar: React.FC = ({ size = "16", a }); return avatar ? ( - + avatar ) : ( - + ); }; @@ -164,15 +58,34 @@ export const ChainDisplay: React.FC = () => { const AccountDisplay: React.FC = () => { return ( - - +
+
label]:text-base [&>label]:font-semibold lg:[&>label]:text-sm lg:[&>label]:font-normal" + )} + > - - +
+
label]:text-klerosUIComponentsSuccess [&>label]:text-base [&>label]:font-medium", + "before:content-[''] before:w-2 before:h-2 before:rounded-[50%] before:bg-klerosUIComponentsSuccess before:my-0 before:mr-[13px] before:ml-[3px]" + )} + > - - +
+
); }; diff --git a/web/src/components/EnsureAuth.tsx b/web/src/components/EnsureAuth.tsx index 6732408..1f91623 100644 --- a/web/src/components/EnsureAuth.tsx +++ b/web/src/components/EnsureAuth.tsx @@ -30,7 +30,7 @@ const EnsureAuth: React.FC = ({ children, className }) => {