Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/components/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { PrimaryBox } from "./boxes/PrimaryBox";

import { useDropdowns } from "@/hooks/useDropdowns";
import { neutral33 } from "@/utils/style/colors";
import { fontSemibold13 } from "@/utils/style/fonts";
import { fontRegular13 } from "@/utils/style/fonts";
import { layout } from "@/utils/style/layout";

const DEFAULT_WIDTH = 164;
Expand Down Expand Up @@ -62,7 +62,7 @@ export const Menu: React.FC<MenuProps> = ({
]}
>
<BrandText
style={[fontSemibold13, item.disabled && { opacity: 0.5 }]}
style={[fontRegular13, item.disabled && { opacity: 0.5 }]}
>
{item.label}
</BrandText>
Expand Down
4 changes: 2 additions & 2 deletions packages/components/buttons/MaxButton.tsx
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please remove StyleSheet usages when you see that in your changed files

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from "react";
import { Pressable, StyleSheet } from "react-native";

import { neutral22, primaryColor } from "../../utils/style/colors";
import { fontSemibold12 } from "../../utils/style/fonts";
import { fontRegular12 } from "../../utils/style/fonts";
import { layout } from "../../utils/style/layout";
import { BrandText } from "../BrandText";

Expand All @@ -22,7 +22,7 @@ export const MaxButton = ({ onPress }: MaxButtonProps) => {
// eslint-disable-next-line no-restricted-syntax
const styles = StyleSheet.create({
maxText: {
...StyleSheet.flatten(fontSemibold12),
...StyleSheet.flatten(fontRegular12),
backgroundColor: primaryColor,
color: neutral22,
borderRadius: layout.borderRadius,
Expand Down
29 changes: 9 additions & 20 deletions packages/components/hub/MyNFTs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { OmniLink } from "../OmniLink";
import { SVG } from "../SVG";
import { NFTView } from "../nfts/NFTView";

import { fontRegular14, fontRegular20 } from "@/utils/style/fonts";

export const MyNFTs: React.FC = () => {
const selectedWallet = useSelectedWallet();

Expand All @@ -25,11 +27,7 @@ export const MyNFTs: React.FC = () => {
priceRange: undefined,
});
return (
<View
style={{
paddingTop: 32,
}}
>
<View style={{ paddingTop: 32 }}>
<View
style={{
flexDirection: "row",
Expand All @@ -38,33 +36,24 @@ export const MyNFTs: React.FC = () => {
marginBottom: 24,
}}
>
<BrandText style={{ marginRight: 20, fontSize: 20 }}>My NFTs</BrandText>
<BrandText style={[fontRegular20, { marginRight: 20 }]}>
My NFTs
</BrandText>
<OmniLink
to={{
screen: "MyCollection",
}}
to={{ screen: "MyCollection" }}
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<BrandText
style={{
fontSize: 14,
marginRight: 16,
}}
>
<BrandText style={[fontRegular14, { marginRight: 16 }]}>
See All
</BrandText>
<SVG source={chevronRightSVG} height={16} />
</OmniLink>
</View>
<View
style={{
flexDirection: "row",
}}
>
<View style={{ flexDirection: "row" }}>
<FlatList
data={nfts}
horizontal
Expand Down
34 changes: 10 additions & 24 deletions packages/components/hub/WalletDashboardHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,12 @@ import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
import { PrimaryButton } from "../buttons/PrimaryButton";

import { useAppNavigation } from "@/hooks/navigation/useAppNavigation";
import {
fontRegular12,
fontRegular13,
fontRegular16,
fontRegular20,
} from "@/utils/style/fonts";

interface WalletDashboardHeaderProps {
title: string;
Expand Down Expand Up @@ -56,20 +62,8 @@ const WalletDashboardHeaderCard: React.FC<WalletDashboardHeaderProps> = ({
position: "relative",
}}
>
<BrandText
style={{
fontSize: 12,
}}
>
{title}
</BrandText>
<BrandText
style={{
fontSize: 16,
}}
>
{data}
</BrandText>
<BrandText style={[fontRegular12]}>{title}</BrandText>
<BrandText style={[fontRegular16]}>{data}</BrandText>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a smaaaall detail, but we can remove the arrays usage is styles (I forgot too sometimes lol)

Suggested change
<BrandText style={[fontRegular12]}>{title}</BrandText>
<BrandText style={[fontRegular16]}>{data}</BrandText>
<BrandText style={fontRegular12}>{title}</BrandText>
<BrandText style={fontRegular16}>{data}</BrandText>

{!!actionButton && (
<PrimaryButton
disabled={actionButton.disabled}
Expand Down Expand Up @@ -150,19 +144,11 @@ export const WalletDashboardHeader: React.FC = () => {
<SVG width={24} height={24} source={penSVG} />
</TouchableOpacity>
<View>
<BrandText
style={{
color: neutralA3,
fontSize: 14,
}}
>
<BrandText style={[fontRegular13, { color: neutralA3 }]}>
Hello
</BrandText>
<BrandText
style={{
fontSize: 20,
maxWidth: 324,
}}
style={[fontRegular20, { maxWidth: 324 }]}
numberOfLines={1}
>
{userInfo.metadata?.tokenId ||
Expand Down
9 changes: 8 additions & 1 deletion packages/components/inputs/TextInputCustom.tsx
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

StyleSheet usage in this file (pretty big)

Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
import { CustomPressable } from "../buttons/CustomPressable";
import { SpacerColumn, SpacerRow } from "../spacer";

import { useTheme } from "@/hooks/useTheme";

// TODO: Refacto TextInputCustom. Too much props

export interface TextInputCustomProps<T extends FieldValues>
Expand Down Expand Up @@ -164,6 +166,7 @@ export const TextInputCustom = <T extends FieldValues>({
});
const inputRef = useRef<TextInput>(null);
const [hovered, setHovered] = useState(false);
const theme = useTheme();
// Passing ref to parent since I didn't find a pattern to handle generic argument <T extends FieldValues> AND forwardRef
useEffect(() => {
if (inputRef.current && setRef) {
Expand Down Expand Up @@ -313,7 +316,11 @@ export const TextInputCustom = <T extends FieldValues>({
onKeyPress={(event) => handleKeyPress({ event, onPressEnter })}
placeholderTextColor={neutral77}
value={field.value}
style={[styles.textInput, textInputStyle]}
style={[
{ color: theme.textColor },
styles.textInput,
textInputStyle,
]}
{...restProps}
/>
</View>
Expand Down
25 changes: 12 additions & 13 deletions packages/components/modals/DepositWithdrawModal.tsx
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

StyleSheet usage in this file

Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ import {
keplrCurrencyFromNativeCurrencyInfo,
} from "../../networks";
import { neutral77, primaryColor } from "../../utils/style/colors";
import { fontSemibold13, fontSemibold14 } from "../../utils/style/fonts";
import {
fontRegular13,
fontRegular14,
fontRegular16,
} from "../../utils/style/fonts";
import { layout } from "../../utils/style/layout";
import { capitalize, tinyAddress } from "../../utils/text";
import { BrandText } from "../BrandText";
Expand Down Expand Up @@ -83,7 +87,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
<View style={styles.rowCenter}>
<NetworkIcon networkId={networkId} size={32} />
<SpacerRow size={3} />
<BrandText>
<BrandText style={[fontRegular16]}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<BrandText style={[fontRegular16]}>
<BrandText style={fontRegular16}>

{variation === "deposit" ? "Deposit on" : "Withdraw from"}{" "}
{getNetwork(networkId)?.displayName || "Unknown"}
</BrandText>
Expand All @@ -110,7 +114,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
width={460}
>
<View style={styles.container}>
<BrandText style={[fontSemibold14, styles.selfCenter]}>
<BrandText style={[fontRegular14, styles.selfCenter]}>
{capitalize(variation)} {nativeTargetCurrency?.displayName}
</BrandText>
<SpacerColumn size={1.5} />
Expand All @@ -120,7 +124,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
<NetworkIcon size={64} networkId={sourceNetworkId || "unknown"} />
</View>
<SpacerColumn size={1.5} />
<BrandText style={fontSemibold14}>
<BrandText style={fontRegular14}>
From {sourceNetwork?.displayName || "Unknown"}
</BrandText>
<SpacerColumn size={1} />
Expand Down Expand Up @@ -149,7 +153,7 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
/>
</View>
<SpacerColumn size={1.5} />
<BrandText style={fontSemibold14}>
<BrandText style={fontRegular14}>
To {destinationNetwork?.displayName || "Unknown"}
</BrandText>
<SpacerColumn size={1} />
Expand All @@ -175,9 +179,9 @@ export const DepositWithdrawModal: React.FC<DepositModalProps> = ({
rules={{ required: true, max }}
placeHolder="0"
subtitle={
<BrandText style={[fontSemibold13, { color: neutral77 }]}>
<BrandText style={[fontRegular13, { color: neutral77 }]}>
Available:{" "}
<BrandText style={[fontSemibold13, { color: primaryColor }]}>
<BrandText style={[fontRegular13, { color: primaryColor }]}>
{max}
</BrandText>
</BrandText>
Expand Down Expand Up @@ -329,12 +333,7 @@ const styles = StyleSheet.create({
container: {
paddingBottom: layout.spacing_x3,
},
estimatedText: StyleSheet.flatten([
fontSemibold14,
{
color: neutral77,
},
]),
estimatedText: StyleSheet.flatten([fontRegular14, { color: neutral77 }]),
});

const convertCosmosAddress = (
Expand Down
41 changes: 14 additions & 27 deletions packages/screens/WalletManager/Assets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ import { useIsMobile } from "@/hooks/useIsMobile";
import { parseUserId } from "@/networks";
import { prettyPrice } from "@/utils/coins";
import { neutral22, neutral33 } from "@/utils/style/colors";
import {
fontRegular14,
fontRegular18,
fontRegular20,
} from "@/utils/style/fonts";

const collapsedCount = 5;

Expand Down Expand Up @@ -81,7 +86,7 @@ export const Assets: React.FC<{
alignItems: "center",
}}
>
<BrandText style={{ marginRight: 20, fontSize: 20 }}>
<BrandText style={[fontRegular20, { marginRight: 20 }]}>
Assets on {network.displayName}
</BrandText>
</View>
Expand All @@ -92,13 +97,7 @@ export const Assets: React.FC<{
alignItems: "center",
}}
>
<BrandText
style={{
fontSize: 14,
lineHeight: 16,
marginRight: 16,
}}
>
<BrandText style={[fontRegular14, { marginRight: 16 }]}>
{expanded ? "Collapse" : "Expand"} All Items
</BrandText>
<TouchableOpacity
Expand Down Expand Up @@ -138,43 +137,31 @@ export const Assets: React.FC<{
paddingVertical: 16,
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
}}
>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<CurrencyIcon
size={isMobile ? 32 : 64}
networkId={network.id}
denom={currency.denom}
/>
<View style={{ marginLeft: 16 }}>
<BrandText numberOfLines={1} style={{ maxWidth: 600 }}>
<BrandText
numberOfLines={1}
style={[fontRegular18, { maxWidth: 600 }]}
>
{prettyPrice(
network.id,
balance?.amount || "0",
currency.denom,
)}
</BrandText>
<BrandText
style={{
marginTop: 8,
fontSize: 14,
}}
>
<BrandText style={[fontRegular14, { marginTop: 8 }]}>
{balance?.usdAmount
? `≈ $${balance.usdAmount.toFixed(2)}`
: " "}
</BrandText>
</View>
</View>
<View
style={{
flexDirection: "row",
alignItems: "center",
}}
>
<View style={{ flexDirection: "row", alignItems: "center" }}>
{!readOnly && currency.kind === "ibc" && (
<>
{currency.deprecated || (
Expand Down
Loading