Skip to content

Commit eb8745e

Browse files
clegirarclegirar
authored
fix: fontWeight and fullWidth for Wallet manager screen (#1473)
Signed-off-by: clegirar <clemntgirard@gmail.com>
1 parent 918b2c0 commit eb8745e

File tree

10 files changed

+93
-163
lines changed

10 files changed

+93
-163
lines changed

‎packages/components/Menu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { PrimaryBox } from "./boxes/PrimaryBox";
66

77
import { useDropdowns } from "@/hooks/useDropdowns";
88
import { neutral33 } from "@/utils/style/colors";
9-
import { fontSemibold13 } from "@/utils/style/fonts";
9+
import { fontRegular13 } from "@/utils/style/fonts";
1010
import { layout } from "@/utils/style/layout";
1111

1212
const DEFAULT_WIDTH = 164;
@@ -62,7 +62,7 @@ export const Menu: React.FC<MenuProps> = ({
6262
]}
6363
>
6464
<BrandText
65-
style={[fontSemibold13, item.disabled && { opacity: 0.5 }]}
65+
style={[fontRegular13, item.disabled && { opacity: 0.5 }]}
6666
>
6767
{item.label}
6868
</BrandText>

‎packages/components/buttons/MaxButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import { Pressable, StyleSheet } from "react-native";
33

44
import { neutral22, primaryColor } from "../../utils/style/colors";
5-
import { fontSemibold12 } from "../../utils/style/fonts";
5+
import { fontRegular12 } from "../../utils/style/fonts";
66
import { layout } from "../../utils/style/layout";
77
import { BrandText } from "../BrandText";
88

@@ -22,7 +22,7 @@ export const MaxButton = ({ onPress }: MaxButtonProps) => {
2222
// eslint-disable-next-line no-restricted-syntax
2323
const styles = StyleSheet.create({
2424
maxText: {
25-
...StyleSheet.flatten(fontSemibold12),
25+
...StyleSheet.flatten(fontRegular12),
2626
backgroundColor: primaryColor,
2727
color: neutral22,
2828
borderRadius: layout.borderRadius,

‎packages/components/hub/MyNFTs.tsx‎

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { OmniLink } from "../OmniLink";
1010
import { SVG } from "../SVG";
1111
import { NFTView } from "../nfts/NFTView";
1212

13+
import { fontRegular14, fontRegular20 } from "@/utils/style/fonts";
14+
1315
export const MyNFTs: React.FC = () => {
1416
const selectedWallet = useSelectedWallet();
1517

@@ -25,11 +27,7 @@ export const MyNFTs: React.FC = () => {
2527
priceRange: undefined,
2628
});
2729
return (
28-
<View
29-
style={{
30-
paddingTop: 32,
31-
}}
32-
>
30+
<View style={{ paddingTop: 32 }}>
3331
<View
3432
style={{
3533
flexDirection: "row",
@@ -38,33 +36,24 @@ export const MyNFTs: React.FC = () => {
3836
marginBottom: 24,
3937
}}
4038
>
41-
<BrandText style={{ marginRight: 20, fontSize: 20 }}>My NFTs</BrandText>
39+
<BrandText style={[fontRegular20, { marginRight: 20 }]}>
40+
My NFTs
41+
</BrandText>
4242
<OmniLink
43-
to={{
44-
screen: "MyCollection",
45-
}}
43+
to={{ screen: "MyCollection" }}
4644
style={{
4745
display: "flex",
4846
flexDirection: "row",
4947
alignItems: "center",
5048
}}
5149
>
52-
<BrandText
53-
style={{
54-
fontSize: 14,
55-
marginRight: 16,
56-
}}
57-
>
50+
<BrandText style={[fontRegular14, { marginRight: 16 }]}>
5851
See All
5952
</BrandText>
6053
<SVG source={chevronRightSVG} height={16} />
6154
</OmniLink>
6255
</View>
63-
<View
64-
style={{
65-
flexDirection: "row",
66-
}}
67-
>
56+
<View style={{ flexDirection: "row" }}>
6857
<FlatList
6958
data={nfts}
7059
horizontal

‎packages/components/hub/WalletDashboardHeader.tsx‎

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
1818
import { PrimaryButton } from "../buttons/PrimaryButton";
1919

2020
import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
21+
import {
22+
fontRegular12,
23+
fontRegular13,
24+
fontRegular16,
25+
fontRegular20,
26+
} from "@/utils/style/fonts";
2127

2228
interface WalletDashboardHeaderProps {
2329
title: string;
@@ -38,12 +44,8 @@ const WalletDashboardHeaderCard: React.FC<WalletDashboardHeaderProps> = ({
3844
<LegacyTertiaryBox
3945
height={116}
4046
width={200}
41-
mainContainerStyle={{
42-
backgroundColor: neutral17,
43-
}}
44-
style={{
45-
marginLeft: 16,
46-
}}
47+
mainContainerStyle={{ backgroundColor: neutral17 }}
48+
style={{ marginLeft: 16 }}
4749
>
4850
<View
4951
style={{
@@ -56,31 +58,15 @@ const WalletDashboardHeaderCard: React.FC<WalletDashboardHeaderProps> = ({
5658
position: "relative",
5759
}}
5860
>
59-
<BrandText
60-
style={{
61-
fontSize: 12,
62-
}}
63-
>
64-
{title}
65-
</BrandText>
66-
<BrandText
67-
style={{
68-
fontSize: 16,
69-
}}
70-
>
71-
{data}
72-
</BrandText>
61+
<BrandText style={fontRegular12}>{title}</BrandText>
62+
<BrandText style={fontRegular16}>{data}</BrandText>
7363
{!!actionButton && (
7464
<PrimaryButton
7565
disabled={actionButton.disabled}
7666
size="XS"
7767
text={actionButton.label}
7868
onPress={actionButton.onPress}
79-
touchableStyle={{
80-
position: "absolute",
81-
bottom: 12,
82-
right: 14,
83-
}}
69+
touchableStyle={{ position: "absolute", bottom: 12, right: 14 }}
8470
/>
8571
)}
8672
</View>
@@ -129,12 +115,7 @@ export const WalletDashboardHeader: React.FC = () => {
129115
marginTop: -layout.spacing_x3,
130116
}}
131117
>
132-
<View
133-
style={{
134-
flexDirection: "row",
135-
marginTop: layout.spacing_x3,
136-
}}
137-
>
118+
<View style={{ flexDirection: "row", marginTop: layout.spacing_x3 }}>
138119
<TouchableOpacity
139120
style={{
140121
backgroundColor: neutral22,
@@ -150,19 +131,11 @@ export const WalletDashboardHeader: React.FC = () => {
150131
<SVG width={24} height={24} source={penSVG} />
151132
</TouchableOpacity>
152133
<View>
153-
<BrandText
154-
style={{
155-
color: neutralA3,
156-
fontSize: 14,
157-
}}
158-
>
134+
<BrandText style={[fontRegular13, { color: neutralA3 }]}>
159135
Hello
160136
</BrandText>
161137
<BrandText
162-
style={{
163-
fontSize: 20,
164-
maxWidth: 324,
165-
}}
138+
style={[fontRegular20, { maxWidth: 324 }]}
166139
numberOfLines={1}
167140
>
168141
{userInfo.metadata?.tokenId ||

‎packages/components/modals/DepositWithdrawModal.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ import {
1818
keplrCurrencyFromNativeCurrencyInfo,
1919
} from "../../networks";
2020
import { neutral77, primaryColor } from "../../utils/style/colors";
21-
import { fontSemibold13, fontSemibold14 } from "../../utils/style/fonts";
21+
import {
22+
fontRegular13,
23+
fontRegular14,
24+
fontRegular16,
25+
} from "../../utils/style/fonts";
2226
import { layout } from "../../utils/style/layout";
2327
import { capitalize, tinyAddress } from "../../utils/text";
2428
import { BrandText } from "../BrandText";
@@ -83,7 +87,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
8387
<View style={styles.rowCenter}>
8488
<NetworkIcon networkId={networkId} size={32} />
8589
<SpacerRow size={3} />
86-
<BrandText>
90+
<BrandText style={fontRegular16}>
8791
{variation === "deposit" ? "Deposit on" : "Withdraw from"}{" "}
8892
{getNetwork(networkId)?.displayName || "Unknown"}
8993
</BrandText>
@@ -110,7 +114,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
110114
width={460}
111115
>
112116
<View style={styles.container}>
113-
<BrandText style={[fontSemibold14, styles.selfCenter]}>
117+
<BrandText style={[fontRegular14, styles.selfCenter]}>
114118
{capitalize(variation)} {nativeTargetCurrency?.displayName}
115119
</BrandText>
116120
<SpacerColumn size={1.5} />
@@ -120,7 +124,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
120124
<NetworkIcon size={64} networkId={sourceNetworkId || "unknown"} />
121125
</View>
122126
<SpacerColumn size={1.5} />
123-
<BrandText style={fontSemibold14}>
127+
<BrandText style={fontRegular14}>
124128
From {sourceNetwork?.displayName || "Unknown"}
125129
</BrandText>
126130
<SpacerColumn size={1} />
@@ -149,7 +153,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
149153
/>
150154
</View>
151155
<SpacerColumn size={1.5} />
152-
<BrandText style={fontSemibold14}>
156+
<BrandText style={fontRegular14}>
153157
To {destinationNetwork?.displayName || "Unknown"}
154158
</BrandText>
155159
<SpacerColumn size={1} />
@@ -175,9 +179,9 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
175179
rules={{ required: true, max }}
176180
placeHolder="0"
177181
subtitle={
178-
<BrandText style={[fontSemibold13, { color: neutral77 }]}>
182+
<BrandText style={[fontRegular13, { color: neutral77 }]}>
179183
Available:{" "}
180-
<BrandText style={[fontSemibold13, { color: primaryColor }]}>
184+
<BrandText style={[fontRegular13, { color: primaryColor }]}>
181185
{max}
182186
</BrandText>
183187
</BrandText>
@@ -329,12 +333,7 @@ const styles = StyleSheet.create({
329333
container: {
330334
paddingBottom: layout.spacing_x3,
331335
},
332-
estimatedText: StyleSheet.flatten([
333-
fontSemibold14,
334-
{
335-
color: neutral77,
336-
},
337-
]),
336+
estimatedText: StyleSheet.flatten([fontRegular14, { color: neutral77 }]),
338337
});
339338

340339
const convertCosmosAddress = (

‎packages/screens/WalletManager/Assets.tsx‎

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ import { useIsMobile } from "@/hooks/useIsMobile";
1414
import { parseUserId } from "@/networks";
1515
import { prettyPrice } from "@/utils/coins";
1616
import { neutral22, neutral33 } from "@/utils/style/colors";
17+
import {
18+
fontRegular14,
19+
fontRegular18,
20+
fontRegular20,
21+
} from "@/utils/style/fonts";
1722

1823
const collapsedCount = 5;
1924

@@ -81,7 +86,7 @@ export const Assets: React.FC<{
8186
alignItems: "center",
8287
}}
8388
>
84-
<BrandText style={{ marginRight: 20, fontSize: 20 }}>
89+
<BrandText style={[fontRegular20, { marginRight: 20 }]}>
8590
Assets on {network.displayName}
8691
</BrandText>
8792
</View>
@@ -92,13 +97,7 @@ export const Assets: React.FC<{
9297
alignItems: "center",
9398
}}
9499
>
95-
<BrandText
96-
style={{
97-
fontSize: 14,
98-
lineHeight: 16,
99-
marginRight: 16,
100-
}}
101-
>
100+
<BrandText style={[fontRegular14, { marginRight: 16 }]}>
102101
{expanded ? "Collapse" : "Expand"} All Items
103102
</BrandText>
104103
<TouchableOpacity
@@ -138,43 +137,31 @@ export const Assets: React.FC<{
138137
paddingVertical: 16,
139138
}}
140139
>
141-
<View
142-
style={{
143-
flexDirection: "row",
144-
alignItems: "center",
145-
}}
146-
>
140+
<View style={{ flexDirection: "row", alignItems: "center" }}>
147141
<CurrencyIcon
148142
size={isMobile ? 32 : 64}
149143
networkId={network.id}
150144
denom={currency.denom}
151145
/>
152146
<View style={{ marginLeft: 16 }}>
153-
<BrandText numberOfLines={1} style={{ maxWidth: 600 }}>
147+
<BrandText
148+
numberOfLines={1}
149+
style={[fontRegular18, { maxWidth: 600 }]}
150+
>
154151
{prettyPrice(
155152
network.id,
156153
balance?.amount || "0",
157154
currency.denom,
158155
)}
159156
</BrandText>
160-
<BrandText
161-
style={{
162-
marginTop: 8,
163-
fontSize: 14,
164-
}}
165-
>
157+
<BrandText style={[fontRegular14, { marginTop: 8 }]}>
166158
{balance?.usdAmount
167159
? `≈ $${balance.usdAmount.toFixed(2)}`
168160
: " "}
169161
</BrandText>
170162
</View>
171163
</View>
172-
<View
173-
style={{
174-
flexDirection: "row",
175-
alignItems: "center",
176-
}}
177-
>
164+
<View style={{ flexDirection: "row", alignItems: "center" }}>
178165
{!readOnly && currency.kind === "ibc" && (
179166
<>
180167
{currency.deprecated || (

0 commit comments

Comments
 (0)