From 34fc9707fef77e4f0d563dd0f4b971e9ae93a012 Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Thu, 16 Jan 2025 11:00:54 +0100 Subject: [PATCH] add boson theme from cc --- package-lock.json | 33 ++++++++++++++-------- package.json | 1 + src/components/app/index.tsx | 14 +++++---- src/components/header/web3Status/index.tsx | 10 +++---- src/lib/styles/GlobalStyle.tsx | 3 ++ src/lib/utils/hooks/useCSSVariable.ts | 2 ++ src/theme.ts | 11 ++++++-- 7 files changed, 51 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2a09e770..54240a2d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/react-kit": "^0.35.1-alpha.7", + "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.14", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", @@ -3424,11 +3425,11 @@ } }, "node_modules/@bosonprotocol/common": { - "version": "1.30.0-alpha.7", - "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.30.0-alpha.7.tgz", - "integrity": "sha512-sN+nnI+Zem0NwYlz9bEMxnzBKDnGLHZiVZKJp+ixgbv+kH6TWTJCXfh3YVSHbzJEIySqsDxiX5djtX2gBvYHuA==", + "version": "1.30.0-alpha.8", + "resolved": "https://registry.npmjs.org/@bosonprotocol/common/-/common-1.30.0-alpha.8.tgz", + "integrity": "sha512-elcgmCPRi3i6LBtGohsHqvsqZr2mFUBHXOWrnoFauesvhpwQrSmtz4l/YILcJhfFkY+Y3IRN20BZBmNDO0Mwdw==", "dependencies": { - "@bosonprotocol/metadata": "^1.16.3-alpha.3", + "@bosonprotocol/metadata": "^1.16.3-alpha.4", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -3437,11 +3438,11 @@ } }, "node_modules/@bosonprotocol/core-sdk": { - "version": "1.42.0-alpha.1", - "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.42.0-alpha.1.tgz", - "integrity": "sha512-dJnTPEAyslLYdTmAHhunefR/nO+TxB1W0a5/6RKXghSVGYxefeBK0M+LHMPbKWnONyTOriWEjJzpJ1uUfLVGFg==", + "version": "1.42.0-alpha.2", + "resolved": "https://registry.npmjs.org/@bosonprotocol/core-sdk/-/core-sdk-1.42.0-alpha.2.tgz", + "integrity": "sha512-sULdoOx0mR5jDpWzqyGW7zCoZPZkZGZtZvS+sgeJpQyOy4y0uGAvZ1kHQ+Iy1X73s651m4TJhVmVZFiq4i/KGA==", "dependencies": { - "@bosonprotocol/common": "^1.30.0-alpha.7", + "@bosonprotocol/common": "^1.30.0-alpha.8", "@ethersproject/abi": "^5.5.0", "@ethersproject/address": "^5.5.0", "@ethersproject/bignumber": "^5.5.0", @@ -3479,9 +3480,9 @@ } }, "node_modules/@bosonprotocol/metadata": { - "version": "1.16.3-alpha.3", - "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.3-alpha.3.tgz", - "integrity": "sha512-4fe588oZXH+B7LPOQwRXFnOMpR5Th3ifk1Yt6rO4S1tAt6B2cgDI5lVBSJDNF/tcppBr01MTreJjp8sQjxFkTg==", + "version": "1.16.3-alpha.4", + "resolved": "https://registry.npmjs.org/@bosonprotocol/metadata/-/metadata-1.16.3-alpha.4.tgz", + "integrity": "sha512-TVYOZL6O0Z9N92TBbU8x/Y+SWz6OjayIrQeBfeq0nXBbZqhtb1hp5P1WkspOtHsKjExOUHLV6Fmast5ruUd0fQ==", "dependencies": { "@bosonprotocol/metadata-storage": "^1.0.1", "schema-to-yup": "^1.11.11", @@ -4254,6 +4255,16 @@ "url": "https://opencollective.com/svgo" } }, + "node_modules/@bosonprotocol/roblox-sdk": { + "version": "1.0.0-alpha.14", + "resolved": "https://registry.npmjs.org/@bosonprotocol/roblox-sdk/-/roblox-sdk-1.0.0-alpha.14.tgz", + "integrity": "sha512-BK6A5wV5zQYkgA54NWvFzuFpglAwcSGrz/s703Mr1Um8xN0gXWE6NBkib1P2orLAMdCjDXbiFd1Qq9jn4hup7A==", + "peerDependencies": { + "@bosonprotocol/common": "^1.30.0-alpha.8", + "@bosonprotocol/core-sdk": "^1.42.0-alpha.2", + "typescript": "^5.7.3" + } + }, "node_modules/@cfcs/core": { "version": "0.0.6", "license": "MIT", diff --git a/package.json b/package.json index 8895fb673..902a019ab 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@apollo/client": "^3.8.1", "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9", "@bosonprotocol/react-kit": "^0.35.1-alpha.7", + "@bosonprotocol/roblox-sdk": "^1.0.0-alpha.14", "@davatar/react": "^1.10.4", "@ethersproject/address": "^5.6.1", "@ethersproject/units": "^5.7.0", diff --git a/src/components/app/index.tsx b/src/components/app/index.tsx index 0e2b032a4..a9f12f9fe 100644 --- a/src/components/app/index.tsx +++ b/src/components/app/index.tsx @@ -1,10 +1,11 @@ +import { BosonThemeProvider } from "@bosonprotocol/react-kit"; import { IconContext } from "phosphor-react"; import { ThemeProvider } from "styled-components"; import ModalProvider from "../../components/modal/ModalProvider"; import { getCurrentViewMode, ViewMode } from "../../lib/viewMode"; import ChatProvider from "../../pages/chat/ChatProvider/ChatProvider"; -import theme from "../../theme"; +import theme, { themeVars } from "../../theme"; import CookieBanner from "../cookie/CookieBanner"; import { AppView } from "./AppView"; import { Container } from "./index.styles"; @@ -39,8 +40,11 @@ export default function App({ }} > - - <> + + - - + + diff --git a/src/components/header/web3Status/index.tsx b/src/components/header/web3Status/index.tsx index 0840eeb10..92c405c2c 100644 --- a/src/components/header/web3Status/index.tsx +++ b/src/components/header/web3Status/index.tsx @@ -15,7 +15,7 @@ import useENSName from "lib/utils/hooks/useENSName"; import { useLast } from "lib/utils/hooks/useLast"; import { memo, useCallback, useEffect, useRef } from "react"; import { useAppSelector } from "state/hooks"; -import styled from "styled-components"; +import styled, { CSSProperties } from "styled-components"; import { breakpoint, breakpointNumbers } from "../../../lib/styles/breakpoint"; import { formatAddress } from "../../../lib/utils/address"; @@ -98,9 +98,9 @@ const Text = styled.p` font-weight: 500; `; -const StyledConnectButton = styled(Button)` +const StyledConnectButton = styled(Button)<{ $color: CSSProperties["color"] }>` background-color: var(--buttonBgColor); - color: inherit; + color: ${({ $color }) => $color}; `; const getCommonWalletButtonProps = (isXXS: boolean) => @@ -224,9 +224,9 @@ function Web3StatusInner({ showOnlyIcon }: { showOnlyIcon?: boolean }) { {...getCommonWalletButtonProps(isXXS)} variant="primaryFill" style={{ - ...getCommonWalletButtonProps(isXXS).style, - color: connectedButtonTextColor + ...getCommonWalletButtonProps(isXXS).style }} + $color={connectedButtonTextColor} > Connect Wallet diff --git a/src/lib/styles/GlobalStyle.tsx b/src/lib/styles/GlobalStyle.tsx index 299d12d9c..566ec6c8c 100644 --- a/src/lib/styles/GlobalStyle.tsx +++ b/src/lib/styles/GlobalStyle.tsx @@ -1,3 +1,4 @@ +import { cssVars } from "@bosonprotocol/react-kit"; import { createGlobalStyle } from "styled-components"; import barlowRegular from "../../assets/fonts/Barlow-Regular.ttf"; @@ -101,6 +102,8 @@ const GlobalStyle = createGlobalStyle<{ ? props.$lowerCardBgColor : colors.white}; + ${cssVars}; + font-size: 0.75rem; ${breakpoint.xs} { font-size: 0.75rem; diff --git a/src/lib/utils/hooks/useCSSVariable.ts b/src/lib/utils/hooks/useCSSVariable.ts index 9e19d2d33..768286195 100644 --- a/src/lib/utils/hooks/useCSSVariable.ts +++ b/src/lib/utils/hooks/useCSSVariable.ts @@ -1,3 +1,4 @@ +import { CssVarKeys } from "@bosonprotocol/react-kit"; import { useEffect, useState } from "react"; // all css variables can be found in src/components/app/index.tsx @@ -18,6 +19,7 @@ export const useCSSVariable = ( | "--buttonTextColor" | "--upperCardBgColor" | "--lowerCardBgColor" + | CssVarKeys ) => { const [value, setValue] = useState(); useEffect(() => { diff --git a/src/theme.ts b/src/theme.ts index 46bd516f3..6ad4ecfb2 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -2,13 +2,20 @@ import "styled-components"; import { BaseTagsInputProps, getThemes } from "@bosonprotocol/react-kit"; import { colors } from "lib/styles/colors"; - -const theme = getThemes({ roundness: "min" })["light"]; +export const themeVars = { + roundness: "min", + themeKey: "light" +} as const; +const theme = getThemes({ roundness: themeVars.roundness })[themeVars.themeKey]; export const inputTheme = { background: colors.greyLight, borderColor: colors.border, borderRadius: 0, + color: "inherit", + placeholder: { + color: "inherit" + }, focus: { caretColor: "initial" },