(UI) remove list divider

Author: antoine92190

src/ChatWindow/ChatMessage.vue

@@ -126,7 +126,6 @@
 									<div class="menu-item" @click="messageActionHandler(action)">
 										{{ action.title }}
 									</div>
-									<hr class="menu-divider" />
 								</div>
 							</div>
 						</div>
@@ -321,7 +320,7 @@ export default {
 .message-card {
 	background: var(--chat-message-bg-color);
 	color: var(--chat-message-color);
-	border-radius: 4px;
+	border-radius: 8px;
 	font-size: 14px;
 	padding: 6px 9px 3px;
 	white-space: pre-wrap;

src/ChatWindow/MessagesList.vue

@@ -21,7 +21,6 @@
 							<div class="menu-item" @click="menuActionHandler(action)">
 								{{ action.title }}
 							</div>
-							<hr class="menu-divider" />
 						</div>
 					</div>
 				</div>
@@ -504,7 +503,7 @@ export default {
 	.reply-box {
 		width: 100%;
 		overflow: hidden;
-		background: var(--chat-message-bg-color-reply);
+		background: var(--chat-footer-bg-color-reply);
 		border-radius: 4px;
 		padding: 8px 10px;
 	}

src/styles/menu.scss

@@ -3,6 +3,7 @@
 	display: block;
 	cursor: pointer;
 	background: var(--chat-dropdown-bg-color);
+	padding: 6px 0;
 
 	:hover {
 		background: var(--chat-dropdown-bg-color-hover);
@@ -27,24 +28,10 @@
 	-ms-flex: 1 1 100%;
 	flex: 1 1 100%;
 	min-height: 30px;
-	padding: 8px 16px;
+	padding: 7px 16px;
 	position: relative;
 }
 
-.menu-divider {
-	display: block;
-	-webkit-box-flex: 1;
-	-ms-flex: 1 1 0px;
-	flex: 1 1 0px;
-	max-width: 100%;
-	height: 0;
-	max-height: 0;
-	border: solid;
-	border-width: thin 0 0 0;
-	border-color: rgba(0, 0, 0, 0.12);
-	margin: 0;
-}
-
 .menu-options {
 	position: absolute;
 	right: 10px;

src/themes/index.js

@@ -16,7 +16,8 @@ export const defaultThemeColors = {
 
 		footer: {
 			background: '#f0f0f0',
-			borderInputSelected: '#1976d2'
+			borderInputSelected: '#1976d2',
+			backgroundReply: 'rgba(0, 0, 0, 0.08)'
 		},
 
 		content: {
@@ -95,7 +96,8 @@ export const defaultThemeColors = {
 
 		footer: {
 			background: '#131415',
-			borderInputSelected: '#1976d2'
+			borderInputSelected: '#1976d2',
+			backgroundReply: '#1b1c1c'
 		},
 
 		content: {
@@ -117,13 +119,13 @@ export const defaultThemeColors = {
 
 		message: {
 			background: '#22242a',
-			backgroundMe: '#1F87EC',
+			backgroundMe: '#4fb381',
 			color: '#fff',
 			backgroundDeleted: '#1b1c21',
-			colorDeleted: '#dadfe2',
+			colorDeleted: '#a2a5a8',
 			colorUsername: '#b3bac9',
 			colorTimestamp: '#ebedf2',
-			backgroundDate: 'rgba(0, 0, 0, 0.2)',
+			backgroundDate: 'rgba(0, 0, 0, 0.1)',
 			colorDate: '#9ca6af',
 			backgroundReply: 'rgba(0, 0, 0, 0.18)',
 			colorReplyUsername: '#fff',
@@ -133,8 +135,8 @@ export const defaultThemeColors = {
 
 		room: {
 			colorUsername: '#fff',
-			colorMessage: '#a2aeb8',
-			colorTimestamp: '#67717a'
+			colorMessage: '#6c7278',
+			colorTimestamp: '#6c7278'
 		},
 
 		icons: {
@@ -186,6 +188,7 @@ export const cssThemeVars = ({
 		// footer
 		'--chat-footer-bg-color': footer.background,
 		'--chat-border-color-input-selected': footer.borderInputSelected,
+		'--chat-footer-bg-color-reply': footer.backgroundReply,
 
 		// content
 		'--chat-content-bg-color': content.background,
@@ -202,7 +205,6 @@ export const cssThemeVars = ({
 		'--chat-dropdown-bg-color-hover': dropdown.backgroundHover,
 
 		// message
-		// '--chat-bg-color-message-image': message.backgroundImage,
 		'--chat-message-bg-color': message.background,
 		'--chat-message-bg-color-me': message.backgroundMe,
 		'--chat-message-bg-color-deleted': message.backgroundDeleted,