diff --git a/web/global.d.ts b/web/global.d.ts index b98930e9..64647a54 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 b0bb3bb5..b1aed968 100644 --- a/web/package.json +++ b/web/package.json @@ -51,7 +51,6 @@ "@types/react": "^18.2.59", "@types/react-dom": "^18.2.18", "@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", @@ -70,17 +69,19 @@ "dependencies": { "@cyntler/react-doc-viewer": "^1.16.3", "@kleros/kleros-app": "^2.1.0", - "@kleros/ui-components-library": "^2.19.0", + "@kleros/ui-components-library": "^3.6.0", "@mdxeditor/editor": "^3.45.0", "@reown/appkit": "^1.6.6", "@reown/appkit-adapter-wagmi": "^1.6.6", "@sentry/react": "^7.93.0", "@sentry/tracing": "^7.93.0", + "@tailwindcss/vite": "^4.1.17", "@tanstack/react-query": "^5.66.0", "@yornaath/batshit": "^0.9.0", "alchemy-sdk": "^3.3.1", "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", @@ -103,8 +104,9 @@ "rehype-raw": "^6.1.1", "rehype-sanitize": "^5.0.1", "remark-gfm": "^3.0.1", - "styled-components": "^5.3.11", "subgraph-status": "^1.2.4", + "tailwind-merge": "^3.4.0", + "tailwindcss": "^4.1.17", "viem": "^2.27.2", "wagmi": "^2.14.16" } diff --git a/web/src/app.tsx b/web/src/app.tsx index 301a884e..cfa6f2cb 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -3,10 +3,12 @@ import { Navigate, Route } from "react-router-dom"; import { SentryRoutes } from "./utils/sentry"; import "react-loading-skeleton/dist/skeleton.css"; import "react-toastify/dist/ReactToastify.css"; +import "overlayscrollbars/styles/overlayscrollbars.css"; +import "./global.css"; import Web3Provider from "context/Web3Provider"; import IsListProvider from "context/IsListProvider"; import QueryClientProvider from "context/QueryClientProvider"; -import StyledComponentsProvider from "context/StyledComponentsProvider"; +import ThemeProvider from "context/ThemeProvider"; import GraphqlBatcherProvider from "context/GraphqlBatcher"; import Layout from "layout/index"; import NewTransaction from "./pages/NewTransaction"; @@ -18,7 +20,7 @@ import Settings from "./pages/Settings"; const App: React.FC = () => { return ( - + @@ -41,7 +43,7 @@ const App: React.FC = () => { - + ); }; diff --git a/web/src/components/ConnectWallet/AccountDisplay.tsx b/web/src/components/ConnectWallet/AccountDisplay.tsx index bc44bafc..fc3140fc 100644 --- a/web/src/components/ConnectWallet/AccountDisplay.tsx +++ b/web/src/components/ConnectWallet/AccountDisplay.tsx @@ -1,5 +1,4 @@ import React from "react"; -import styled, { css } from "styled-components"; import Identicon from "react-identicons"; import { isAddress } from "viem"; @@ -9,111 +8,7 @@ import { useAccount, useChainId, useEnsAvatar, useEnsName } from "wagmi"; import { getChain } from "consts/chains"; import { shortenAddress } from "utils/shortenAddress"; -import { landscapeStyle } from "styles/landscapeStyle"; - -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 +29,9 @@ export const IdenticonOrAvatar: React.FC = ({ size = "16", a }); return avatar ? ( - + avatar ) : ( - + ); }; @@ -164,15 +59,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/ConnectWallet/index.tsx b/web/src/components/ConnectWallet/index.tsx index 4102e141..eddf305a 100644 --- a/web/src/components/ConnectWallet/index.tsx +++ b/web/src/components/ConnectWallet/index.tsx @@ -22,9 +22,9 @@ export const SwitchChainButton: React.FC<{ className?: string }> = ({ className