From 2885a2223b97ca8267d5025d34f216c3654c769d Mon Sep 17 00:00:00 2001 From: ikethirdweb Date: Thu, 19 Oct 2023 10:30:28 -0400 Subject: [PATCH 1/4] [RN] Improve UI and theming --- .../react-native/src/evm/assets/close.tsx | 4 +- .../ConnectWalletDetailsModal.tsx | 7 +- .../SmartWalletAdditionalActions.tsx | 4 +- .../ChooseWallet/ChooseWallet.tsx | 20 ++---- .../ConnectWalletFlow/ConnectWalletButton.tsx | 2 + .../components/SendFunds/TokenSelector.tsx | 2 +- .../src/evm/components/base/NetworkButton.tsx | 2 +- .../src/evm/components/base/TextBalance.tsx | 2 +- .../react-native/src/evm/styles/colors.ts | 3 + .../src/evm/styles/textVariants.ts | 20 ++++++ packages/react-native/src/evm/styles/theme.ts | 17 +++-- .../react-native/src/evm/types/deepPartial.ts | 19 ++++++ .../wallets/embedded/EmbeddedSelectionUI.tsx | 7 +- pnpm-lock.yaml | 67 +++++-------------- 14 files changed, 89 insertions(+), 87 deletions(-) diff --git a/packages/react-native/src/evm/assets/close.tsx b/packages/react-native/src/evm/assets/close.tsx index 75d67461139..514e6b80baa 100644 --- a/packages/react-native/src/evm/assets/close.tsx +++ b/packages/react-native/src/evm/assets/close.tsx @@ -1,12 +1,12 @@ import Svg, { Path } from "react-native-svg"; import { IconStyleProp } from "./types"; -const CloseIcon = ({ width, height }: IconStyleProp) => { +const CloseIcon = ({ width, height, color }: IconStyleProp) => { return ( ); diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx index 73c3cf231c0..a5f340fd61b 100644 --- a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx +++ b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectWalletDetailsModal.tsx @@ -142,6 +142,8 @@ export const ConnectWalletDetailsModal = ({ )} - + Connect @@ -180,7 +174,6 @@ export function ChooseWallet({ !isConnectAWalletEnabled && (guestWallet || connectionWallets.length > 0) ? ( ); })} - - Connect a wallet - + Connect a wallet ) ) : null} @@ -253,9 +245,7 @@ export function ChooseWallet({ color={theme.colors.textPrimary} /> ) : ( - - Continue as guest - + Continue as guest )} ) : null} diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx index 0422b74502e..70e9215d224 100644 --- a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx +++ b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx @@ -95,6 +95,8 @@ export const ConnectWalletButton = ({ diff --git a/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx b/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx index 70e246c0952..2a06bb6c956 100644 --- a/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx +++ b/packages/react-native/src/evm/components/SendFunds/TokenSelector.tsx @@ -197,7 +197,7 @@ export function TokenSelector(props: { minHeight={150} paddingTop="none" > - + No Tokens found )} diff --git a/packages/react-native/src/evm/components/base/NetworkButton.tsx b/packages/react-native/src/evm/components/base/NetworkButton.tsx index b63e90f1376..c38b57d8f0a 100644 --- a/packages/react-native/src/evm/components/base/NetworkButton.tsx +++ b/packages/react-native/src/evm/components/base/NetworkButton.tsx @@ -151,7 +151,7 @@ export const SwitchChainModal = ({ - + {supportedChains?.length > 0 ? ( supportedChains.map((chain) => { return ( diff --git a/packages/react-native/src/evm/components/base/TextBalance.tsx b/packages/react-native/src/evm/components/base/TextBalance.tsx index 6396b1b9cce..460282f0265 100644 --- a/packages/react-native/src/evm/components/base/TextBalance.tsx +++ b/packages/react-native/src/evm/components/base/TextBalance.tsx @@ -4,7 +4,7 @@ import LoadingTextAnimation from "./LoadingTextAnimation"; import { baseTheme } from "../../styles/theme"; type TextBalance = { - textVariant: keyof typeof baseTheme.textVariants; + textVariant: keyof Omit; tokenAddress?: string; }; diff --git a/packages/react-native/src/evm/styles/colors.ts b/packages/react-native/src/evm/styles/colors.ts index 8f9e3d40a1d..6fd9fa9f077 100644 --- a/packages/react-native/src/evm/styles/colors.ts +++ b/packages/react-native/src/evm/styles/colors.ts @@ -1,6 +1,7 @@ export type Palette = { buttonBackgroundColor: string; buttonTextColor: string; + buttonBorderColor: string; accentButtonColor: string; accentButtonTextColor: string; @@ -41,6 +42,7 @@ export const paletteBase = { export const paletteLight: Palette = { buttonBackgroundColor: "black", + buttonBorderColor: "black", buttonTextColor: "white", accentButtonColor: "#3385FF", @@ -67,6 +69,7 @@ export const paletteLight: Palette = { export const paletteDark: Palette = { buttonBackgroundColor: "white", + buttonBorderColor: "white", buttonTextColor: "black", accentButtonColor: "#3385FF", diff --git a/packages/react-native/src/evm/styles/textVariants.ts b/packages/react-native/src/evm/styles/textVariants.ts index 06695f3a6d6..3d1497f2324 100644 --- a/packages/react-native/src/evm/styles/textVariants.ts +++ b/packages/react-native/src/evm/styles/textVariants.ts @@ -1,10 +1,23 @@ export const textVariants = { + defaults: { + fontFamily: "none", + fontSize: 24, + fontWeight: "700", + lineHeight: 32, + color: "textPrimary", + }, header: { fontSize: 24, fontWeight: "600", lineHeight: 32, color: "textPrimary", }, + headerBold: { + fontSize: 24, + fontWeight: "700", + lineHeight: 32, + color: "textPrimary", + }, subHeader: { fontSize: 16, fontWeight: "500", @@ -32,6 +45,13 @@ export const textVariants = { fontSize: 14, lineHeight: 16, }, + bodySmallBold: { + color: "textPrimary", + textAlign: "center", + fontWeight: "700", + fontSize: 14, + lineHeight: 16, + }, bodySmallSecondary: { color: "textSecondary", textAlign: "left", diff --git a/packages/react-native/src/evm/styles/theme.ts b/packages/react-native/src/evm/styles/theme.ts index f76705438c1..b3ef835debb 100644 --- a/packages/react-native/src/evm/styles/theme.ts +++ b/packages/react-native/src/evm/styles/theme.ts @@ -1,4 +1,4 @@ -import { DeepPartial } from "../types/deepPartial"; +import { DeepPartial, deepMerge } from "../types/deepPartial"; import { paletteDark, paletteLight } from "./colors"; import { textVariants } from "./textVariants"; import { createTheme } from "@shopify/restyle"; @@ -45,40 +45,43 @@ export type Theme = typeof _darkTheme; export type ButtonTheme = { buttonBackgroundColor?: string; buttonTextColor?: string; + buttonBorderColor?: string; }; export const darkTheme = ({ buttonBackgroundColor = paletteDark.buttonBackgroundColor, buttonTextColor = paletteDark.buttonTextColor, + buttonBorderColor = paletteLight.buttonBorderColor, colors, ...props }: ButtonTheme & DeepPartial = _darkTheme): Theme => { - return { - ..._darkTheme, + return deepMerge(_darkTheme, { colors: { ..._darkTheme.colors, ...colors, buttonBackgroundColor, buttonTextColor, + buttonBorderColor, }, ...props, - } as Theme; + }); }; export const lightTheme = ({ buttonBackgroundColor = paletteLight.buttonBackgroundColor, buttonTextColor = paletteLight.buttonTextColor, + buttonBorderColor = paletteLight.buttonBorderColor, colors, ...props }: ButtonTheme & DeepPartial = _lightTheme): Theme => { - return { - ..._lightTheme, + return deepMerge(_lightTheme, { colors: { ..._lightTheme.colors, ...colors, buttonBackgroundColor, buttonTextColor, + buttonBorderColor, }, ...props, - } as Theme; + }); }; diff --git a/packages/react-native/src/evm/types/deepPartial.ts b/packages/react-native/src/evm/types/deepPartial.ts index 4fff18893a1..41918134188 100644 --- a/packages/react-native/src/evm/types/deepPartial.ts +++ b/packages/react-native/src/evm/types/deepPartial.ts @@ -1,3 +1,22 @@ export type DeepPartial = { [P in keyof T]?: DeepPartial; }; + +export function deepMerge(target: T, source: DeepPartial): T { + for (const key in source) { + if ( + source[key] instanceof Object && + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + key in target && + target[key] instanceof Object + ) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + deepMerge(target[key], source[key]); + } else { + target[key] = source[key] as any; + } + } + return target; +} diff --git a/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx b/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx index b6d78107d04..9f0244d536a 100644 --- a/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx +++ b/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx @@ -133,6 +133,7 @@ export const EmailSelectionUI: React.FC< style: { fontSize: 14, color: theme.colors.textPrimary, + fontFamily: theme.textVariants.defaults.fontFamily, lineHeight: 16, padding: 0, flex: 1, @@ -166,11 +167,7 @@ export const EmailSelectionUI: React.FC< color={theme.colors.accentButtonTextColor} /> ) : ( - + Continue )} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 63dcee7bd33..3a689bf6f0d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1438,7 +1438,7 @@ importers: version: 4.1.1 abitype: specifier: ^0.2.5 - version: 0.2.5(typescript@5.1.6) + version: 0.2.5(typescript@5.1.6)(zod@3.22.3) babel-plugin-transform-inline-environment-variables: specifier: ^0.4.4 version: 0.4.4 @@ -1587,7 +1587,7 @@ packages: '@ethersproject/properties': 5.7.0 '@ethersproject/providers': 5.7.2 '@types/debug': 4.1.7 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) ethers: 5.7.2 transitivePeerDependencies: - bufferutil @@ -1602,7 +1602,7 @@ packages: '@ethersproject/abi': 5.7.0 '@ethersproject/providers': 5.7.2 '@openzeppelin/contracts': 4.9.3 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) ethers: 5.7.2 transitivePeerDependencies: - bufferutil @@ -4728,7 +4728,7 @@ packages: '@babel/traverse': 7.22.8 '@babel/types': 7.22.5 convert-source-map: 1.9.0 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) gensync: 1.0.0-beta.2 json5: 2.2.3 semver: 7.5.4 @@ -6233,7 +6233,7 @@ packages: '@babel/helper-split-export-declaration': 7.22.6 '@babel/parser': 7.22.7 '@babel/types': 7.22.5 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) globals: 11.12.0 transitivePeerDependencies: - supports-color @@ -7118,7 +7118,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: ajv: 6.12.6 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) espree: 9.6.0 globals: 13.20.0 ignore: 5.2.4 @@ -7857,7 +7857,7 @@ packages: engines: {node: '>=10.10.0'} dependencies: '@humanwhocodes/object-schema': 1.2.1 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) minimatch: 3.1.2 transitivePeerDependencies: - supports-color @@ -8672,7 +8672,7 @@ packages: engines: {node: '>=14.0.0'} dependencies: '@types/debug': 4.1.7 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) semver: 7.5.4 superstruct: 1.0.3 transitivePeerDependencies: @@ -13251,19 +13251,6 @@ packages: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} dev: false - /abitype@0.2.5(typescript@5.1.6): - resolution: {integrity: sha512-t1iiokWYpkrziu4WL2Gb6YdGvaP9ZKs7WnA39TI8TsW2E99GVRgDPW/xOKhzoCdyxOYt550CNYEFluCwGaFHaA==} - engines: {pnpm: '>=7'} - peerDependencies: - typescript: '>=4.7.4' - zod: '>=3.19.1' - peerDependenciesMeta: - zod: - optional: true - dependencies: - typescript: 5.1.6 - dev: true - /abitype@0.2.5(typescript@5.1.6)(zod@3.22.3): resolution: {integrity: sha512-t1iiokWYpkrziu4WL2Gb6YdGvaP9ZKs7WnA39TI8TsW2E99GVRgDPW/xOKhzoCdyxOYt550CNYEFluCwGaFHaA==} engines: {pnpm: '>=7'} @@ -13276,7 +13263,6 @@ packages: dependencies: typescript: 5.1.6 zod: 3.22.3 - dev: false /abort-controller@3.0.0: resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==} @@ -13393,7 +13379,7 @@ packages: resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==} engines: {node: '>= 6.0.0'} dependencies: - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) transitivePeerDependencies: - supports-color @@ -13401,7 +13387,7 @@ packages: resolution: {integrity: sha512-7Epl1Blf4Sy37j4v9f9FjICCh4+KAQOyXgHEwlyBiAQLbhKdq/i2QQU3amQalS/wPhdPzDXPL5DMR5bkn+YeWg==} engines: {node: '>= 8.0.0'} dependencies: - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) depd: 2.0.0 humanize-ms: 1.2.1 transitivePeerDependencies: @@ -13867,7 +13853,7 @@ packages: /axios@0.21.4: resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==} dependencies: - follow-redirects: 1.15.2 + follow-redirects: 1.15.2(debug@4.3.4) transitivePeerDependencies: - debug dev: false @@ -13883,7 +13869,7 @@ packages: /axios@0.27.2: resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==} dependencies: - follow-redirects: 1.15.2 + follow-redirects: 1.15.2(debug@4.3.4) form-data: 4.0.0 transitivePeerDependencies: - debug @@ -15968,17 +15954,6 @@ packages: dependencies: ms: 2.1.3 - /debug@4.3.4: - resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - dependencies: - ms: 2.1.2 - /debug@4.3.4(supports-color@8.1.1): resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -17560,7 +17535,7 @@ packages: ajv: 6.12.6 chalk: 4.1.2 cross-spawn: 7.0.3 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.2.0 @@ -17792,7 +17767,7 @@ packages: asn1.js: 5.4.1 aws-sdk: 2.1336.0 bn.js: 5.2.1 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) ethers: 5.7.2 transitivePeerDependencies: - bufferutil @@ -18546,16 +18521,6 @@ packages: resolution: {integrity: sha512-G4oeDNpNGyIrweF9EnoHatncAihMT0tQgV6NMdyM5I7fhrz9Pr13PJ2KLQ673O4wj9KooTdBpeeYHdDNAQoyyw==} engines: {node: '>=0.4.0'} - /follow-redirects@1.15.2: - resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} - engines: {node: '>=4.0'} - peerDependencies: - debug: '*' - peerDependenciesMeta: - debug: - optional: true - dev: false - /follow-redirects@1.15.2(debug@4.3.4): resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} engines: {node: '>=4.0'} @@ -19596,7 +19561,7 @@ packages: engines: {node: '>= 6'} dependencies: agent-base: 6.0.2 - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) transitivePeerDependencies: - supports-color @@ -26371,7 +26336,7 @@ packages: resolution: {integrity: sha512-wfI3pk7EE80lCIXprqh7ym48IHYdwmAAzESdbU8Q9l7pnRCk9LEhpbOTNKjz6FARLm/Bl5m+4F0ABxOkYUujSQ==} engines: {node: '>=12'} dependencies: - debug: 4.3.4 + debug: 4.3.4(supports-color@8.1.1) extend: 3.0.2 transitivePeerDependencies: - supports-color From b89d33ed245818b5c2850f7e656d8923783c63c8 Mon Sep 17 00:00:00 2001 From: ikethirdweb Date: Thu, 19 Oct 2023 10:55:18 -0400 Subject: [PATCH 2/4] bold --- .changeset/eight-gorillas-dream.md | 5 +++++ .../ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx | 4 ++-- .../src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/eight-gorillas-dream.md diff --git a/.changeset/eight-gorillas-dream.md b/.changeset/eight-gorillas-dream.md new file mode 100644 index 00000000000..444d75ef3bc --- /dev/null +++ b/.changeset/eight-gorillas-dream.md @@ -0,0 +1,5 @@ +--- +"@thirdweb-dev/react-native": patch +--- + +React Native UI/theme improvements diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx index 4ca382135d1..273f390d499 100644 --- a/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx +++ b/packages/react-native/src/evm/components/ConnectWalletFlow/ChooseWallet/ChooseWallet.tsx @@ -224,7 +224,7 @@ export function ChooseWallet({ ); })} - Connect a wallet + Connect a wallet ) ) : null} @@ -245,7 +245,7 @@ export function ChooseWallet({ color={theme.colors.textPrimary} /> ) : ( - Continue as guest + Continue as guest )} ) : null} diff --git a/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx b/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx index 9f0244d536a..c6d17bbf45d 100644 --- a/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx +++ b/packages/react-native/src/evm/wallets/wallets/embedded/EmbeddedSelectionUI.tsx @@ -167,7 +167,7 @@ export const EmailSelectionUI: React.FC< color={theme.colors.accentButtonTextColor} /> ) : ( - + Continue )} From 5c614ae82e83a42839626e40daed76df45b8e37c Mon Sep 17 00:00:00 2001 From: ikethirdweb Date: Thu, 19 Oct 2023 15:11:53 -0400 Subject: [PATCH 3/4] [RN] Pass custom fontfamily to placeholders --- .../evm/components/ConnectWalletDetails/ConnectAppField.tsx | 4 ++++ .../components/ConnectWalletFlow/LocalWalletImportModal.tsx | 4 ++++ packages/react-native/src/evm/components/PasswordInput.tsx | 6 +++++- .../src/evm/components/SendFunds/SendButton.tsx | 1 + .../src/evm/components/SendFunds/TokenSelector.tsx | 1 + .../react-native/src/evm/wallets/wallets/magic-link.tsx | 1 + .../evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx | 1 + 7 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectAppField.tsx b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectAppField.tsx index bf3f9e43de8..fb0ef0ed962 100644 --- a/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectAppField.tsx +++ b/packages/react-native/src/evm/components/ConnectWalletDetails/ConnectAppField.tsx @@ -130,6 +130,10 @@ const ConnectAppField = () => { placeholder: "wc://...", placeholderTextColor: theme.colors.textSecondary, numberOfLines: 1, + style: { + color: theme.colors.textPrimary, + fontFamily: theme.textVariants.defaults.fontFamily, + }, }} containerProps={{ flex: 1, diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletImportModal.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletImportModal.tsx index 9ba571152db..4d02255520a 100644 --- a/packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletImportModal.tsx +++ b/packages/react-native/src/evm/components/ConnectWalletFlow/LocalWalletImportModal.tsx @@ -210,6 +210,10 @@ export const LocalWalletImportModal = ({ placeholder: "Private key / Mnemonic", placeholderTextColor: theme.colors.textSecondary, onChangeText: onPrivateKeyEntered, + style: { + color: theme.colors.textPrimary, + fontFamily: theme.textVariants.defaults.fontFamily, + }, }} containerProps={{ pl: "xxs" }} /> diff --git a/packages/react-native/src/evm/components/PasswordInput.tsx b/packages/react-native/src/evm/components/PasswordInput.tsx index 5a238d398de..93de1b3dd77 100644 --- a/packages/react-native/src/evm/components/PasswordInput.tsx +++ b/packages/react-native/src/evm/components/PasswordInput.tsx @@ -28,7 +28,11 @@ export const PasswordInput = ({ pl="xxs" > > = (props) => { style: { fontSize: 14, color: theme.colors.textPrimary, + fontFamily: theme.textVariants.defaults.fontFamily, lineHeight: 16, padding: 0, }, diff --git a/packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx b/packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx index 6ea65a8da6b..4470f338cf4 100644 --- a/packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx +++ b/packages/react-native/src/evm/wallets/wallets/wallet-connect/WalletConnectUI.tsx @@ -194,6 +194,7 @@ export function WalletConnectUI({ style={{ ...styles.textInput, color: theme.colors.textSecondary, + fontFamily: theme.textVariants.defaults.fontFamily, }} /> From 0d5d929d6b647b076b4d765f20e9a73146b66189 Mon Sep 17 00:00:00 2001 From: ikethirdweb Date: Fri, 20 Oct 2023 12:02:57 -0400 Subject: [PATCH 4/4] Update weight --- .../ConnectWalletFlow/ConnectWalletButton.tsx | 2 +- .../src/evm/components/base/WalletButton.tsx | 2 +- packages/react-native/src/evm/styles/textVariants.ts | 11 ++++++++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx index 3990e848483..d22a75c34fe 100644 --- a/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx +++ b/packages/react-native/src/evm/components/ConnectWalletFlow/ConnectWalletButton.tsx @@ -102,7 +102,7 @@ export const ConnectWalletButton = ({ onPress={onConnectWalletPress} style={styles.connectWalletButton} > - + {showButtonSpinner ? ( ) : buttonTitle ? ( diff --git a/packages/react-native/src/evm/components/base/WalletButton.tsx b/packages/react-native/src/evm/components/base/WalletButton.tsx index 8f4e9b00840..2a6c1904f4f 100644 --- a/packages/react-native/src/evm/components/base/WalletButton.tsx +++ b/packages/react-native/src/evm/components/base/WalletButton.tsx @@ -51,7 +51,7 @@ export const WalletButton = ({ height={iconHeight} /> - + {name} {recommended ? ( diff --git a/packages/react-native/src/evm/styles/textVariants.ts b/packages/react-native/src/evm/styles/textVariants.ts index 3d1497f2324..9121becc06b 100644 --- a/packages/react-native/src/evm/styles/textVariants.ts +++ b/packages/react-native/src/evm/styles/textVariants.ts @@ -1,6 +1,8 @@ +import { Platform } from "react-native"; + export const textVariants = { defaults: { - fontFamily: "none", + fontFamily: Platform.OS === "ios" ? "san Francisco" : "Roboto", fontSize: 24, fontWeight: "700", lineHeight: 32, @@ -38,6 +40,13 @@ export const textVariants = { fontSize: 16, lineHeight: 24, }, + bodyLargeBold: { + color: "textPrimary", + textAlign: "center", + fontWeight: "700", + fontSize: 16, + lineHeight: 24, + }, bodySmall: { color: "textPrimary", textAlign: "center",