diff --git a/.changeset/thirty-onions-develop.md b/.changeset/thirty-onions-develop.md new file mode 100644 index 000000000..a6a8a2372 --- /dev/null +++ b/.changeset/thirty-onions-develop.md @@ -0,0 +1,5 @@ +--- +"@crossmint/client-sdk-react-ui": patch +--- + +Fixed styles diff --git a/packages/client/ui/react-ui/package.json b/packages/client/ui/react-ui/package.json index 9e54c90cd..25de2edd1 100644 --- a/packages/client/ui/react-ui/package.json +++ b/packages/client/ui/react-ui/package.json @@ -41,6 +41,7 @@ "@twind/preset-tailwind": "1.1.4", "bs58": "5.0.0", "clsx": "2.1.1", + "color": "4.2.3", "input-otp": "1.2.4", "lodash.isequal": "4.5.0", "react-jss": "10.10.0", @@ -50,6 +51,7 @@ "zod": "3.22.4" }, "devDependencies": { + "@types/color": "4.2.0", "@types/lodash.isequal": "4.5.6", "@types/react": "^18.3.0", "@types/react-dom": "^18.3.0", diff --git a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx index 68f132889..6ab576518 100644 --- a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx +++ b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx @@ -10,17 +10,17 @@ import { classNames } from "@/utils/classNames"; export function AuthForm({ className }: { className?: string }) { const { step, appearance, baseUrl, loginMethods } = useAuthForm(); return ( -
+
{step === "initial" ? (

Sign In

Sign in using one of the options below @@ -43,7 +43,10 @@ export function AuthForm({ className }: { className?: string }) { ) : null} {step === "initial" || step === "otp" ? ( - + ) : null}

); diff --git a/packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx b/packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx index 453bc27d5..f12cf51c9 100644 --- a/packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx +++ b/packages/client/ui/react-ui/src/components/auth/AuthFormBackButton.tsx @@ -11,13 +11,9 @@ export const AuthFormBackButton = ({ return (

{"Check your email"}

-

+

{"A temporary login code has been sent to your email"}

@@ -104,13 +107,13 @@ export function EmailOTPInput({
-

+

Can't find the email? Check spam folder or contact {" "} diff --git a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx index e74b413e1..b810433a1 100644 --- a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx +++ b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx @@ -1,4 +1,5 @@ import { type FormEvent, useState } from "react"; +import Color from "color"; import { Spinner } from "@/components/common/Spinner"; import { classNames } from "@/utils/classNames"; @@ -42,12 +43,6 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm <>

-

- Email -

{ setEmailInput(e.target.value); setEmailError(""); }} readOnly={isLoading} - // aria-invalid={emailError != null} aria-describedby="emailError" />
@@ -96,8 +92,8 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm {!emailError && !isLoading && ( @@ -157,7 +154,7 @@ function FarcasterQRCode() { href={qrCodeUrl} rel="noopener noreferrer" target="_blank" - className="text-base font-normal text-cm-ring" + className="text-base font-normal text-cm-link" style={{ color: appearance?.colors?.textLink }} > Open Warpcast diff --git a/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx index 6024e789e..c4268c09c 100644 --- a/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx +++ b/packages/client/ui/react-ui/src/components/auth/methods/google/GoogleSignIn.tsx @@ -21,17 +21,14 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes - Google + Sign in with Google )} - - {/* For accessibility sake */} Sign in with Google ); diff --git a/packages/client/ui/react-ui/src/components/common/Dialog.tsx b/packages/client/ui/react-ui/src/components/common/Dialog.tsx index 0af93bbf8..e5db38183 100644 --- a/packages/client/ui/react-ui/src/components/common/Dialog.tsx +++ b/packages/client/ui/react-ui/src/components/common/Dialog.tsx @@ -37,15 +37,15 @@ const DialogContent = React.forwardRef +
{text != null ? (

- Powered by - - - crossmint - +

+

); } diff --git a/packages/client/ui/react-ui/src/icons/poweredByLeaf.tsx b/packages/client/ui/react-ui/src/icons/poweredByLeaf.tsx index a22639e54..c00d3f6dc 100644 --- a/packages/client/ui/react-ui/src/icons/poweredByLeaf.tsx +++ b/packages/client/ui/react-ui/src/icons/poweredByLeaf.tsx @@ -1,84 +1,85 @@ -export const PoweredByLeaf = ({ color, size = "16" }: { color: string; size?: string }) => { +export const PoweredByLeaf = ({ color }: { color: string }) => { return ( - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/packages/client/ui/react-ui/src/twind.config.ts b/packages/client/ui/react-ui/src/twind.config.ts index 4fd597149..51bc1d094 100644 --- a/packages/client/ui/react-ui/src/twind.config.ts +++ b/packages/client/ui/react-ui/src/twind.config.ts @@ -4,9 +4,6 @@ import presetTailwind from "@twind/preset-tailwind"; export default defineConfig({ presets: [presetTailwind()], theme: { - screens: { - xs: "480px", - }, extend: { colors: { // Crossmint colors (cm- prefix) @@ -14,8 +11,10 @@ export default defineConfig({ "cm-text-secondary": "#67797F", "cm-background-primary": "#FFFFFF", "cm-muted-primary": "#F0F2F4", + "cm-hover": "#E9ECF0", "cm-border": "#D9D9D9", - "cm-ring": "#1A73E8", + "cm-link": "#1A73E8", + "cm-accent": "#04AA6D", }, keyframes: { "caret-blink": { @@ -94,7 +93,7 @@ export default defineConfig({ }, rules: [ [ - "responsive-border-radius-auth-dialog", + "cm-responsive-border-radius-auth-dialog", { "@media (max-width: 479px)": { "border-bottom-left-radius": "0 !important", @@ -102,6 +101,14 @@ export default defineConfig({ }, }, ], + [ + "focus-ring-custom", + { + "&:focus": { + "box-shadow": "0 0 0 3px var(--focus-ring-color)", + }, + }, + ], ], /* config */ }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 71d37251a..d95d99f40 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,7 +98,7 @@ importers: version: crypto-browserify@3.12.0 eslint-config-react-app: specifier: 7.0.1 - version: 7.0.1(@babel/plugin-syntax-flow@7.25.7(@babel/core@7.22.17))(@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.22.17))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.7)(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.3.3))(utf-8-validate@5.0.10))(typescript@5.3.3) + version: 7.0.1(@babel/plugin-syntax-flow@7.25.7(@babel/core@7.22.17))(@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.22.17))(eslint@8.57.0)(jest@29.6.4(@types/node@20.12.7)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.3)))(typescript@5.3.3) react: specifier: 18.2.0 version: 18.2.0 @@ -531,6 +531,9 @@ importers: clsx: specifier: 2.1.1 version: 2.1.1 + color: + specifier: 4.2.3 + version: 4.2.3 input-otp: specifier: 1.2.4 version: 1.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -553,6 +556,9 @@ importers: specifier: 3.22.4 version: 3.22.4 devDependencies: + '@types/color': + specifier: 4.2.0 + version: 4.2.0 '@types/lodash.isequal': specifier: 4.5.6 version: 4.5.6 @@ -5936,6 +5942,15 @@ packages: '@types/chai@4.3.6': resolution: {integrity: sha512-VOVRLM1mBxIRxydiViqPcKn6MIxZytrbMpd6RJLIWKxUNr3zux8no0Oc7kJx0WAPIitgZ0gkrDS+btlqQpubpw==} + '@types/color-convert@2.0.4': + resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==} + + '@types/color-name@1.1.5': + resolution: {integrity: sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==} + + '@types/color@4.2.0': + resolution: {integrity: sha512-6+xrIRImMtGAL2X3qYkd02Mgs+gFGs+WsK0b7VVMaO4mYRISwyTjcqNrO0mNSmYEoq++rSLDB2F5HDNmqfOe+A==} + '@types/connect-history-api-fallback@1.5.1': resolution: {integrity: sha512-iaQslNbARe8fctL5Lk+DsmgWOM83lM+7FzP0eQUJs1jd3kBE8NWqBTIT2S8SqQOJjxvt2eyIjpOuYeRXq2AdMw==} @@ -17744,7 +17759,7 @@ snapshots: '@confio/ics23@0.6.8': dependencies: '@noble/hashes': 1.4.0 - protobufjs: 6.11.4 + protobufjs: 7.2.5 '@cosmjs/amino@0.30.1': dependencies: @@ -24821,6 +24836,16 @@ snapshots: '@types/chai@4.3.6': {} + '@types/color-convert@2.0.4': + dependencies: + '@types/color-name': 1.1.5 + + '@types/color-name@1.1.5': {} + + '@types/color@4.2.0': + dependencies: + '@types/color-convert': 2.0.4 + '@types/connect-history-api-fallback@1.5.1': dependencies: '@types/express-serve-static-core': 4.17.36 @@ -28497,7 +28522,7 @@ snapshots: cosmjs-types@0.7.2: dependencies: long: 4.0.0 - protobufjs: 6.11.4 + protobufjs: 7.2.5 country-list@2.3.0: {} @@ -29589,6 +29614,33 @@ snapshots: - jest - supports-color + eslint-config-react-app@7.0.1(@babel/plugin-syntax-flow@7.25.7(@babel/core@7.22.17))(@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.22.17))(eslint@8.57.0)(jest@29.6.4(@types/node@20.12.7)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.3)))(typescript@5.3.3): + dependencies: + '@babel/core': 7.22.17 + '@babel/eslint-parser': 7.22.15(@babel/core@7.22.17)(eslint@8.57.0) + '@rushstack/eslint-patch': 1.3.3 + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.3.3) + babel-preset-react-app: 10.0.1 + confusing-browser-globals: 1.0.11 + eslint: 8.57.0 + eslint-plugin-flowtype: 8.0.3(@babel/plugin-syntax-flow@7.25.7(@babel/core@7.22.17))(@babel/plugin-transform-react-jsx@7.22.15(@babel/core@7.22.17))(eslint@8.57.0) + eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0) + eslint-plugin-jest: 25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(jest@29.6.4(@types/node@20.12.7)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.3)))(typescript@5.3.3) + eslint-plugin-jsx-a11y: 6.7.1(eslint@8.57.0) + eslint-plugin-react: 7.33.2(eslint@8.57.0) + eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) + eslint-plugin-testing-library: 5.11.1(eslint@8.57.0)(typescript@5.3.3) + optionalDependencies: + typescript: 5.3.3 + transitivePeerDependencies: + - '@babel/plugin-syntax-flow' + - '@babel/plugin-transform-react-jsx' + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - jest + - supports-color + eslint-config-react-app@7.0.1(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.7)(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.4.2))(utf-8-validate@5.0.10))(typescript@5.4.2): dependencies: '@babel/core': 7.22.17 @@ -29772,6 +29824,17 @@ snapshots: - supports-color - typescript + eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(jest@29.6.4(@types/node@20.12.7)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.3)))(typescript@5.3.3): + dependencies: + '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.57.0)(typescript@5.3.3) + eslint: 8.57.0 + optionalDependencies: + '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3) + jest: 29.6.4(@types/node@20.12.7)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@20.12.7)(typescript@5.5.3)) + transitivePeerDependencies: + - supports-color + - typescript + eslint-plugin-jest@25.7.0(@typescript-eslint/eslint-plugin@5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.0)(typescript@5.4.2))(eslint@8.57.0)(typescript@5.4.2))(eslint@8.57.0)(jest@27.5.1(bufferutil@4.0.7)(ts-node@10.9.2(@types/node@20.14.11)(typescript@5.4.2))(utf-8-validate@5.0.10))(typescript@5.4.2): dependencies: '@typescript-eslint/experimental-utils': 5.62.0(eslint@8.57.0)(typescript@5.4.2)