diff --git a/apps/daimo-mobile/src/view/style/skins.ts b/apps/daimo-mobile/src/view/style/skins.ts index c56bd64b2..6b0c7e6aa 100644 --- a/apps/daimo-mobile/src/view/style/skins.ts +++ b/apps/daimo-mobile/src/view/style/skins.ts @@ -34,13 +34,18 @@ export interface SkinContextType { logo: ImageSourcePropType; // Skin Selector Logo } -const fonts = { - neue: "NeueMontreal-Regular", // default +const iosFonts = { + default: "San Francisco", chalkboard: "ChalkboardSE-Light", courier: "CourierNewPSMT", arial: "Arial Rounded MT Bold", }; +const androidFonts = { + default: "normal", + roboto: "Roboto", +}; + export const Skin = { usdc: "usdc", doge: "doge", @@ -57,7 +62,10 @@ export const skins: Record = { [Skin.usdc]: createSkin({ name: Skin.usdc, color: blueColorway, - font: fonts.neue, + font: Platform.select({ + ios: iosFonts.default, + default: androidFonts.default, + }), logo: { uri: "https://daimo.com/assets/deposit/usdc.png", }, @@ -66,7 +74,10 @@ export const skins: Record = { [Skin.usdt]: createSkin({ name: Skin.usdt, color: greenColorway, - font: fonts.neue, + font: Platform.select({ + ios: iosFonts.default, + default: androidFonts.default, + }), logo: { uri: "https://assets.coingecko.com/coins/images/32884/large/USDT.PNG", }, @@ -75,14 +86,20 @@ export const skins: Record = { [Skin.doge]: createSkin({ name: Skin.doge, color: orangeColorway, - font: fonts.chalkboard, + font: Platform.select({ + ios: iosFonts.chalkboard, + default: androidFonts.default, + }), logo: require("../../../assets/skins/dogecoin.png"), }), // Bitcoin is soooo BACK [Skin.bitcoin]: createSkin({ name: Skin.bitcoin, color: darkColorway, - font: fonts.courier, + font: Platform.select({ + ios: iosFonts.courier, + default: androidFonts.roboto, + }), logo: { uri: "https://assets.coingecko.com/coins/images/32883/large/wbtc.png", }, @@ -91,14 +108,20 @@ export const skins: Record = { [Skin.penguin]: createSkin({ name: Skin.penguin, color: blueColorway, - font: fonts.arial, + font: Platform.select({ + ios: iosFonts.arial, + default: androidFonts.default, + }), logo: require("../../../assets/skins/penguin2.png"), }), // Rubber ducky [Skin.duck]: createSkin({ name: Skin.duck, color: yellowColorway, - font: fonts.arial, + font: Platform.select({ + ios: iosFonts.arial, + default: androidFonts.default, + }), logo: require("../../../assets/skins/duck.png"), }), // ADD MORE SKINS HERE @@ -109,13 +132,13 @@ export const skins: Record = { function createSkin({ name, color, - font, logo, + font, }: { name: SkinName; color: Colorway; - font: string; logo: ImageSourcePropType; + font: string; }): SkinContextType { return { name, @@ -133,7 +156,6 @@ function getSS(color: Colorway, font: string) { fontVariant: ["tabular-nums"], color: color.midnight, }; - return { container: StyleSheet.create({ screen: {