From 41caae7172366cb5b30529bfcff72dbc181c15b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Wed, 22 Feb 2023 17:42:59 +0000
Subject: [PATCH] fix: improve inline code block font and alignment

---
 src/styles/codeStyles/index.android.js | 12 ++++++++----
 src/styles/codeStyles/index.ios.js     | 11 +++++++----
 src/styles/styles.js                   |  5 ++---
 src/styles/variables.js                |  2 ++
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/styles/codeStyles/index.android.js b/src/styles/codeStyles/index.android.js
index 5f8f51255501..5f635db9d250 100644
--- a/src/styles/codeStyles/index.android.js
+++ b/src/styles/codeStyles/index.android.js
@@ -1,14 +1,18 @@
+import variables from '../variables';
+
 const codeWordWrapper = {
-    height: 20,
+    justifyContent: 'center',
+    height: variables.fontSizeNormalHeight,
 };
 
 const codeWordStyle = {
-    height: 18,
-    top: 4,
+    position: 'relative',
+    top: 4.5,
 };
 
 const codeTextStyle = {
-    lineHeight: 15,
+    fontSize: variables.fontSizeCode,
+    lineHeight: variables.fontSizeCodeHeight,
 };
 
 export default {codeWordWrapper, codeWordStyle, codeTextStyle};
diff --git a/src/styles/codeStyles/index.ios.js b/src/styles/codeStyles/index.ios.js
index 65b1eaef718f..a387609040ea 100644
--- a/src/styles/codeStyles/index.ios.js
+++ b/src/styles/codeStyles/index.ios.js
@@ -1,15 +1,18 @@
+import variables from '../variables';
+
 const codeWordWrapper = {
-    height: 20,
     justifyContent: 'center',
+    height: variables.fontSizeNormalHeight,
 };
 
 const codeWordStyle = {
-    height: 16,
-    top: 4,
+    position: 'relative',
+    top: 2.5,
 };
 
 const codeTextStyle = {
-    lineHeight: 15,
+    fontSize: variables.fontSizeCode,
+    lineHeight: variables.fontSizeCodeHeight,
 };
 
 export default {codeWordWrapper, codeWordStyle, codeTextStyle};
diff --git a/src/styles/styles.js b/src/styles/styles.js
index 520ca2d0c14d..60c289babb53 100644
--- a/src/styles/styles.js
+++ b/src/styles/styles.js
@@ -113,11 +113,11 @@ const webViewStyles = {
 
         code: {
             ...baseCodeTagStyles,
-            ...codeStyles.codeTextStyle,
             paddingLeft: 5,
             paddingRight: 5,
             fontFamily: fontFamily.MONOSPACE,
-            fontSize: 13,
+            fontSize: variables.fontSizeCode,
+            ...codeStyles.codeTextStyle,
         },
 
         img: {
@@ -2284,7 +2284,6 @@ const styles = {
         borderBottomRightRadius: 0,
         paddingLeft: 0,
         paddingRight: 0,
-        justifyContent: 'center',
         ...codeStyles.codeWordStyle,
     },
 
diff --git a/src/styles/variables.js b/src/styles/variables.js
index a3710ff435e3..c6ea4c1a1ff7 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -41,6 +41,7 @@ export default {
     fontSizeOnlyEmojisHeight: 35,
     fontSizeSmall: getValueUsingPixelRatio(11, 17),
     fontSizeExtraSmall: 9,
+    fontSizeCode: getValueUsingPixelRatio(13, 19),
     fontSizeLabel: getValueUsingPixelRatio(13, 19),
     fontSizeNormal: getValueUsingPixelRatio(15, 21),
     fontSizeMedium: getValueUsingPixelRatio(16, 22),
@@ -50,6 +51,7 @@ export default {
     fontSizeXLarge: 22,
     fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
+    fontSizeCodeHeight: getValueUsingPixelRatio(17, 25),
     fontSizeNormalHeight: getValueUsingPixelRatio(20, 28),
     lineHeightHero: 40,
     iconSizeXXXSmall: 4,