diff --git a/android/app/src/main/assets/fonts/GTAmericaExpMono-Bd.otf b/android/app/src/main/assets/fonts/GTAmericaExpMono-Bd.otf new file mode 100755 index 000000000000..ba733848f1d9 Binary files /dev/null and b/android/app/src/main/assets/fonts/GTAmericaExpMono-Bd.otf differ diff --git a/android/app/src/main/assets/fonts/GTAmericaExpMono-BdIt.otf b/android/app/src/main/assets/fonts/GTAmericaExpMono-BdIt.otf new file mode 100755 index 000000000000..063e653c8b52 Binary files /dev/null and b/android/app/src/main/assets/fonts/GTAmericaExpMono-BdIt.otf differ diff --git a/android/app/src/main/assets/fonts/GTAmericaExpMono-RgIt.otf b/android/app/src/main/assets/fonts/GTAmericaExpMono-RgIt.otf new file mode 100755 index 000000000000..6852a3391dae Binary files /dev/null and b/android/app/src/main/assets/fonts/GTAmericaExpMono-RgIt.otf differ diff --git a/assets/css/fonts.css b/assets/css/fonts.css index 2cf924a6b1a5..a58f45bb3b0f 100644 --- a/assets/css/fonts.css +++ b/assets/css/fonts.css @@ -68,6 +68,27 @@ src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular.woff2') format('woff2'); } +@font-face { + font-family: GTAmericaExpMono-RgIt; + font-weight: 400; + font-style: italic; + src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Regular-Italic.woff2') format('woff2'); +} + +@font-face { + font-family: GTAmericaExpMono-Bd; + font-weight: 700; + font-style: normal; + src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold.woff2') format('woff2'); +} + +@font-face { + font-family: GTAmericaExpMono-BdIt; + font-weight: 700; + font-style: italic; + src: url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.eot') format('embedded-opentype'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff') format('woff'), url('https://www.expensify.com/font/GT-America-Exp-Mono-Bold-Italic.woff2') format('woff2'); +} + * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/assets/fonts/GTAmericaExpMono-Bd.otf b/assets/fonts/GTAmericaExpMono-Bd.otf new file mode 100755 index 000000000000..ba733848f1d9 Binary files /dev/null and b/assets/fonts/GTAmericaExpMono-Bd.otf differ diff --git a/assets/fonts/GTAmericaExpMono-BdIt.otf b/assets/fonts/GTAmericaExpMono-BdIt.otf new file mode 100755 index 000000000000..063e653c8b52 Binary files /dev/null and b/assets/fonts/GTAmericaExpMono-BdIt.otf differ diff --git a/assets/fonts/GTAmericaExpMono-RgIt.otf b/assets/fonts/GTAmericaExpMono-RgIt.otf new file mode 100755 index 000000000000..6852a3391dae Binary files /dev/null and b/assets/fonts/GTAmericaExpMono-RgIt.otf differ diff --git a/ios/ExpensifyCash.xcodeproj/project.pbxproj b/ios/ExpensifyCash.xcodeproj/project.pbxproj index 27ca296fa44c..b5d3c915a5d0 100644 --- a/ios/ExpensifyCash.xcodeproj/project.pbxproj +++ b/ios/ExpensifyCash.xcodeproj/project.pbxproj @@ -26,6 +26,9 @@ 8C86654500DCC843A74147B5 /* libPods-ExpensifyCash-ExpensifyCashTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ED2AB27DDDFCCE3CD100EA0C /* libPods-ExpensifyCash-ExpensifyCashTests.a */; }; BB6CECBDA023256B6B955321 /* libPods-ExpensifyCash.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6F2C8BDCC1FF0B64AE2DFC9B /* libPods-ExpensifyCash.a */; }; E9DF872D2525201700607FDC /* AirshipConfig.plist in Resources */ = {isa = PBXBuildFile; fileRef = E9DF872C2525201700607FDC /* AirshipConfig.plist */; }; + 52477A09739546F4814EA25F /* GTAmericaExpMono-Bd.otf in Resources */ = {isa = PBXBuildFile; fileRef = 0DE5D096095C41EE96746C9E /* GTAmericaExpMono-Bd.otf */; }; + ED814D34526B415CAFA0451E /* GTAmericaExpMono-BdIt.otf in Resources */ = {isa = PBXBuildFile; fileRef = 3981452A2C7340EBBA2B9BD1 /* GTAmericaExpMono-BdIt.otf */; }; + DB77016704074197AB6633BB /* GTAmericaExpMono-RgIt.otf in Resources */ = {isa = PBXBuildFile; fileRef = 5150E5D0D7F74DBA8D7C1914 /* GTAmericaExpMono-RgIt.otf */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -70,6 +73,9 @@ ED2971642150620600B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = Platforms/AppleTVOS.platform/Developer/SDKs/AppleTVOS12.0.sdk/System/Library/Frameworks/JavaScriptCore.framework; sourceTree = DEVELOPER_DIR; }; ED2AB27DDDFCCE3CD100EA0C /* libPods-ExpensifyCash-ExpensifyCashTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-ExpensifyCash-ExpensifyCashTests.a"; sourceTree = BUILT_PRODUCTS_DIR; }; F4BC0E78FF1E9BD8B2D38C66 /* Pods-ExpensifyCash.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-ExpensifyCash.debug.xcconfig"; path = "Target Support Files/Pods-ExpensifyCash/Pods-ExpensifyCash.debug.xcconfig"; sourceTree = ""; }; + 0DE5D096095C41EE96746C9E /* GTAmericaExpMono-Bd.otf */ = {isa = PBXFileReference; name = "GTAmericaExpMono-Bd.otf"; path = "../assets/fonts/GTAmericaExpMono-Bd.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 3981452A2C7340EBBA2B9BD1 /* GTAmericaExpMono-BdIt.otf */ = {isa = PBXFileReference; name = "GTAmericaExpMono-BdIt.otf"; path = "../assets/fonts/GTAmericaExpMono-BdIt.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; + 5150E5D0D7F74DBA8D7C1914 /* GTAmericaExpMono-RgIt.otf */ = {isa = PBXFileReference; name = "GTAmericaExpMono-RgIt.otf"; path = "../assets/fonts/GTAmericaExpMono-RgIt.otf"; sourceTree = ""; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -181,6 +187,9 @@ A8D6F2F722FD4E66A38EBBB6 /* GTAmericaExp-BdIt.otf */, DB5A1365442D4419AF6F08E5 /* GTAmericaExp-MdIt.otf */, 918D7FEFF96242E6B5F5E14D /* GTAmericaExp-RgIt.otf */, + 0DE5D096095C41EE96746C9E /* GTAmericaExpMono-Bd.otf */, + 3981452A2C7340EBBA2B9BD1 /* GTAmericaExpMono-BdIt.otf */, + 5150E5D0D7F74DBA8D7C1914 /* GTAmericaExpMono-RgIt.otf */, ); name = Resources; sourceTree = ""; @@ -307,6 +316,9 @@ 6856B78873B64C44A92E51DB /* GTAmericaExp-MdIt.otf in Resources */, 8821A238A081483FA947BC4E /* GTAmericaExp-RgIt.otf in Resources */, 70CF6E82262E297300711ADC /* BootSplash.storyboard in Resources */, + 52477A09739546F4814EA25F /* GTAmericaExpMono-Bd.otf in Resources */, + ED814D34526B415CAFA0451E /* GTAmericaExpMono-BdIt.otf in Resources */, + DB77016704074197AB6633BB /* GTAmericaExpMono-RgIt.otf in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/ios/ExpensifyCash/Info.plist b/ios/ExpensifyCash/Info.plist index 9b1c7b08fc15..76a601c7fdd5 100644 --- a/ios/ExpensifyCash/Info.plist +++ b/ios/ExpensifyCash/Info.plist @@ -66,7 +66,7 @@ NSCameraUsageDescription Your camera is used to create chat attachments. NSLocationWhenInUseUsageDescription - + NSPhotoLibraryAddUsageDescription Your camera roll is used to store chat attachments. NSPhotoLibraryUsageDescription @@ -82,6 +82,9 @@ GTAmericaExp-BdIt.otf GTAmericaExp-MdIt.otf GTAmericaExp-RgIt.otf + GTAmericaExpMono-Bd.otf + GTAmericaExpMono-BdIt.otf + GTAmericaExpMono-RgIt.otf UIBackgroundModes diff --git a/src/components/RenderHTML.js b/src/components/RenderHTML.js index d44fbebaf1f3..d2c7fa5bbe55 100644 --- a/src/components/RenderHTML.js +++ b/src/components/RenderHTML.js @@ -8,7 +8,7 @@ import HTML, { splitBoxModelStyle, } from 'react-native-render-html'; import Config from '../CONFIG'; -import styles, {webViewStyles} from '../styles/styles'; +import styles, {webViewStyles, getFontFamilyMonospace} from '../styles/styles'; import fontFamily from '../styles/fontFamily'; import AnchorForCommentsOnly from './AnchorForCommentsOnly'; import InlineCodeBlock from './InlineCodeBlock'; @@ -22,6 +22,9 @@ const EXTRA_FONTS = [ fontFamily.GTA_BOLD, fontFamily.GTA_ITALIC, fontFamily.MONOSPACE, + fontFamily.MONOSPACE_ITALIC, + fontFamily.MONOSPACE_BOLD, + fontFamily.MONOSPACE_BOLD_ITALIC, fontFamily.SYSTEM, ]; @@ -65,11 +68,28 @@ function CodeRenderer({ // We split wrapper and inner styles // "boxModelStyle" corresponds to border, margin, padding and backgroundColor const {boxModelStyle, otherStyle: textStyle} = splitBoxModelStyle(style); + + // Get the correct fontFamily variant based in the fontStyle and fontWeight + const font = getFontFamilyMonospace({ + fontStyle: textStyle.fontStyle, + fontWeight: textStyle.fontWeight, + }); + + const textStyleOverride = { + fontFamily: font, + + // We need to override this properties bellow that was defined in `textStyle` + // Because by default the `react-native-render-html` add a style in the elements, + // for example the tag has a fontWeight: "bold" and in the android it break the font + fontWeight: undefined, + fontStyle: undefined, + }; + return ( diff --git a/src/styles/fontFamily/index.js b/src/styles/fontFamily/index.js index a5eba1fcb2a8..5c7ef62497a0 100644 --- a/src/styles/fontFamily/index.js +++ b/src/styles/fontFamily/index.js @@ -4,8 +4,11 @@ const fontFamily = { GTA_ITALIC: 'GTAmericaExp-RgIt', GTA_BOLD: bold, GTA: 'GTAmericaExp-Regular', - MONOSPACE: 'GTAmericaExpMono-Rg', SYSTEM: 'System', + MONOSPACE: 'GTAmericaExpMono-Rg', + MONOSPACE_ITALIC: 'GTAmericaExpMono-RgIt', + MONOSPACE_BOLD: 'GTAmericaExpMono-Bd', + MONOSPACE_BOLD_ITALIC: 'GTAmericaExpMono-BdIt', }; export default fontFamily; diff --git a/src/styles/styles.js b/src/styles/styles.js index 084cb0a05083..d342e74829ee 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -1,5 +1,4 @@ import fontFamily from './fontFamily'; -import italic from './italic'; import addOutlineWidth from './addOutlineWidth'; import themeColors from './themes/default'; import fontWeightBold from './fontWeight/bold'; @@ -1408,7 +1407,7 @@ const webViewStyles = { tagStyles: { em: { fontFamily: fontFamily.GTA_ITALIC, - fontStyle: italic, + fontStyle: 'italic', }, del: { @@ -1418,7 +1417,7 @@ const webViewStyles = { strong: { fontFamily: fontFamily.GTA_BOLD, - fontWeight: fontWeightBold, + fontWeight: 'bold', }, a: styles.link, @@ -1678,6 +1677,20 @@ function getModalPaddingStyles({ }; } +/** + * Takes fontStyle and fontWeight and returns the correct fontFamily + * + * @param {Object} params + * @returns {String} + */ +function getFontFamilyMonospace({fontStyle, fontWeight}) { + const italic = fontStyle === 'italic' && fontFamily.MONOSPACE_ITALIC; + const bold = fontWeight === 'bold' && fontFamily.MONOSPACE_BOLD; + const italicBold = italic && bold && fontFamily.MONOSPACE_BOLD_ITALIC; + + return italicBold || bold || italic || fontFamily.MONOSPACE; +} + export default styles; export { getSafeAreaPadding, @@ -1696,4 +1709,5 @@ export { getAnimatedFABStyle, getWidthAndHeightStyle, getModalPaddingStyles, + getFontFamilyMonospace, };