Merge pull request #3738 from rdjuric/bigSingleEmoji

Feature: Make lonely emojis bigger
Expensify · Jun 24, 2021 · cef11b7 · cef11b7
2 parents 3fdea74 + ff5cb8f
commit cef11b7
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/src/CONST.js b/src/CONST.js
diff --git a/src/libs/ValidationUtils.js b/src/libs/ValidationUtils.js
@@ -17,6 +17,23 @@ function isValidAddress(value) {
     return !CONST.REGEX.PO_BOX.test(value);
 }
 
+/**
+ * Validates that this string is composed of a single emoji
+ *
+ * @param {String} message
+ * @returns {Boolean}
+ */
+function isSingleEmoji(message) {
+    const match = message.match(CONST.REGEX.EMOJIS);
+
+    if (!match) {
+        return false;
+    }
+
+    const matchedEmoji = match[0];
+    return message.length === matchedEmoji.length;
+}
+
 /**
  * Validate date fields
  *
@@ -85,4 +102,5 @@ export {
     isValidIndustryCode,
     isValidIdentity,
     isValidZipCode,
+    isSingleEmoji,
 };
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -9,6 +9,7 @@ import themeColors from '../../../styles/themes/default';
 import RenderHTML from '../../../components/RenderHTML';
 import Text from '../../../components/Text';
 import Tooltip from '../../../components/Tooltip';
+import {isSingleEmoji} from '../../../libs/ValidationUtils';
 
 const propTypes = {
     /** The message fragment needing to be displayed */
@@ -56,7 +57,10 @@ class ReportActionItemFragment extends React.PureComponent {
                             debug={false}
                         />
                     ) : (
-                        <Text selectable>
+                        <Text
+                            selectable
+                            style={isSingleEmoji(fragment.text) ? styles.singleEmojiText : undefined}
+                        >
                             {Str.htmlDecode(fragment.text)}
                             {fragment.isEdited && (
                             <Text

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -571,6 +571,11 @@ const styles = {
         textDecorationLine: 'none',
     },
 
+    singleEmojiText: {
+        fontSize: variables.fontSizeSingleEmoji,
+        lineHeight: variables.fontSizeSingleEmojiHeight,
+    },
+
     createMenuPositionSidebar: {
         left: 18,
         bottom: 100,

diff --git a/src/styles/variables.js b/src/styles/variables.js
@@ -9,6 +9,8 @@ export default {
     componentBorderRadiusCard: 12,
     avatarSizeNormal: 40,
     avatarSizeSmall: 28,
+    fontSizeSingleEmoji: 30,
+    fontSizeSingleEmojiHeight: 35,
     fontSizeSmall: 11,
     fontSizeExtraSmall: 9,
     fontSizeLabel: 13,