Style reactions buttons

Signed-off-by: marco <marcoambrosini@pm.me>

2 files changed, 38 insertions, 3 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 6e486fec4..e0ce4c906 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -79,7 +79,9 @@ describe('Message.vue', () => {
 		// properly mounted.
 		testStoreConfig.modules.messagesStore.getters.message
 			= jest.fn().mockReturnValue(() => {
-				return {}
+				return {
+					reactions: '',
+				}
 			})
 	})
 
@@ -252,6 +254,7 @@ describe('Message.vue', () => {
 				messageParameters: {},
 				token: TOKEN,
 				parentId: -1,
+				reactions: '',
 			}
 			messageProps.parent = 120
 
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 87cc928e3..31ba435a6 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -78,13 +78,13 @@ the main body of the message as well as a quote.
 						@focus="showReloadButton = true"
 						@mouseleave="showReloadButton = true"
 						@blur="showReloadButton = true">
-						<button v-if="sendingErrorCanRetry && showReloadButton"
+						<Button v-if="sendingErrorCanRetry && showReloadButton"
 							class="nc-button nc-button__main--dark"
 							@click="handleRetry">
 							<Reload decorative
 								title=""
 								:size="16" />
-						</button>
+						</Button>
 						<AlertCircle v-else
 							decorative
 							title=""
@@ -112,6 +112,15 @@ the main body of the message as well as a quote.
 					</div>
 				</div>
 			</div>
+			<div v-if="messageObject.reactions !== ''" class="message-body__reactions">
+				<button v-for="reaction in Object.keys(messageObject.reactions)"
+					:key="reaction"
+					class="reaction-button"
+					type="secondary">
+					<span class="reaction-button__emoji"> {{ reaction }} </span>
+					<span> {{ messageObject.reactions[reaction] }} </span>
+				</button>
+			</div>
 		</div>
 		<MessageButtonsBar v-if="hasMessageButtonsBar"
 			v-show="showMessageButtonsBar"
@@ -661,6 +670,10 @@ export default {
 			padding: 0 8px 0 8px;
 		}
 	}
+	&__reactions {
+		display: flex;
+		margin: 4px 0;
+	}
 }
 
 .date {
@@ -725,4 +738,23 @@ export default {
 		cursor: pointer;
 	}
 }
+
+.reaction-button {
+	// Clear server rules
+	min-height: 0 !important;
+	padding: 0 8px !important;
+	font-weight: normal !important;
+
+	margin: 0 2px;
+	height: 26px;
+	background-color: var(--color-main-background);
+
+	&__emoji {
+		margin: 0 4px 0 0;
+	}
+
+	&:hover {
+		background-color: var(--color-primary-element-lighter);
+	}
+}
 </style>