(UI) increase font size in emoji messages

Author: antoine92190

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
 	rules: {
 		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+		'no-control-regex': 0,
 		'vue/no-unused-properties': [
 			'error',
 			{

src/components/FormatMessage/FormatMessage.scss

@@ -35,4 +35,8 @@
 		max-width: 166px;
 		font-size: 12px;
 	}
+
+	.vac-emoji-message {
+		font-size: 28px;
+	}
 }

src/components/FormatMessage/FormatMessage.vue

@@ -47,12 +47,14 @@
 						</div>
 					</template>
 					<template v-else>
-						<span>{{ message.value }}</span>
+						<span :class="{ 'vac-emoji-message': containsOnlyEmojis }">
+							{{ message.value }}
+						</span>
 					</template>
 				</component>
 			</div>
 		</div>
-		<div v-else>
+		<div v-else :class="{ 'vac-emoji-message': containsOnlyEmojis }">
 			{{ formattedContent }}
 		</div>
 	</div>
@@ -103,6 +105,17 @@ export default {
 
 			return message
 		},
+		containsOnlyEmojis() {
+			const onlyEmojis = this.content.replace(
+				new RegExp('[\u0000-\u1eeff]', 'g'),
+				''
+			)
+			const visibleChars = this.content.replace(
+				new RegExp('[\n\rs]+|( )+', 'g'),
+				''
+			)
+			return onlyEmojis.length === visibleChars.length
+		},
 		formattedContent() {
 			return this.formatTags(this.content)
 		}