(UI) improve reply box over textarea

Author: antoine92190

src/ChatWindow/MessagesList.vue

@@ -75,13 +75,16 @@
 		<div ref="roomFooter" class="room-footer">
 			<transition name="slide-up">
 				<div v-if="messageReply" class="reply-container">
-					<img
-						v-if="isImageCheck(messageReply.file)"
-						:src="messageReply.file.url"
-						class="image-reply"
-					/>
-
-					<div class="message-reply">{{ messageReply.content }}</div>
+					<div class="reply-box">
+						<img
+							v-if="isImageCheck(messageReply.file)"
+							:src="messageReply.file.url"
+							class="image-reply"
+						/>
+
+						<div class="reply-username">{{ messageReply.username }}</div>
+						<div class="reply-content">{{ messageReply.content }}</div>
+					</div>
 
 					<div class="icon-reply">
 						<div class="svg-button" @click="resetMessage">
@@ -490,23 +493,40 @@ export default {
 
 .reply-container {
 	display: flex;
-	padding: 10px;
+	padding: 10px 10px 0;
 	background: var(--chat-bg-color-footer);
 	z-index: -1;
-}
+	align-items: center;
+	max-width: 100%;
+
+	.reply-box {
+		width: 100%;
+		overflow: hidden;
+		background: var(--chat-bg-color-message-reply);
+		border-radius: 4px;
+		padding: 8px 10px;
+	}
 
-.message-reply {
-	overflow: hidden;
-	width: 100%;
-}
+	.reply-username {
+		color: var(--chat-color-message-reply-username);
+		font-size: 12px;
+		line-height: 15px;
+		margin-bottom: 2px;
+	}
 
-.icon-reply {
-	margin-left: 10px;
-}
+	.reply-content {
+		font-size: 12px;
+		color: var(--chat-color-message-reply-content);
+	}
+
+	.icon-reply {
+		margin-left: 10px;
+	}
 
-.image-reply {
-	max-height: 100px;
-	margin-right: 10px;
+	.image-reply {
+		max-height: 100px;
+		margin-right: 10px;
+	}
 }
 
 .image-file {

src/themes/index.js

@@ -14,7 +14,7 @@ export const defaultThemeColors = {
 		messageDeletedColor: '#757e85',
 		messageUsernameColor: '#9ca6af',
 		messageTimestampColor: '#828c94',
-		messageDateBg: 'rgba(33, 148, 243, 0.15)',
+		messageDateBg: '#e5effa',
 		messageDateColor: '#505a62',
 		messageTextColor: '#0a0a0a',
 		messageReplyBg: 'rgba(0, 0, 0, 0.08)',
@@ -35,7 +35,7 @@ export const defaultThemeColors = {
 			closeImage: '#fff',
 			file: '#1976d2',
 			paperclip: '#1976d2',
-			closeOutline: '#1976d2',
+			closeOutline: '#000',
 			send: '#1976d2',
 			sendDisabled: '#9ca6af',
 			emoji: '#1976d2',
@@ -62,8 +62,8 @@ export const defaultThemeColors = {
 		messageDeletedColor: '#dadfe2',
 		messageUsernameColor: '#b3bac9',
 		messageTimestampColor: '#ebedf2',
-		messageDateBg: 'rgba(33, 148, 243, 0.15)',
-		messageDateColor: '#b8bdcc',
+		messageDateBg: '#444e57',
+		messageDateColor: '#ebedf2',
 		messageTextColor: '#fff',
 		messageReplyBg: 'rgba(0, 0, 0, 0.18)',
 		messageReplyUsernameColor: '#fff',