(theme) add dropdown message bg color

advanced-chat · Mar 24, 2020 · 1f2c6f5 · 1f2c6f5
1 parent 2dea1b4
commit 1f2c6f5
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -293,7 +293,8 @@ styles="{
     pencil: '#9e9e9e',
     checkmark: '#0696c7',
     eye: '#fff',
-    dropdown: '#fff',
+		dropdownMessage: '#fff',
+		dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
     dropdownScroll: '#0a0a0a'
   }
 }"

diff --git a/src/ChatWindow/Message.vue b/src/ChatWindow/Message.vue
@@ -138,7 +138,7 @@
 								v-if="isMessageActions"
 								@click="openOptions"
 							>
-								<svg-icon name="dropdown" />
+								<svg-icon name="dropdown" param="message" />
 							</div>
 
 							<emoji-picker
@@ -722,7 +722,7 @@ export default {
 }
 
 .message-options {
-	background: rgba(0, 0, 0, 0.25);
+	background: var(--chat-icon-bg-dropdown-message);
 	border-radius: 50%;
 	position: absolute;
 	top: 7px;

diff --git a/src/ChatWindow/SvgIcon.vue b/src/ChatWindow/SvgIcon.vue
@@ -173,8 +173,8 @@ export default {
 	fill: var(--chat-icon-color-eye);
 }
 
-#chat-icon-dropdown {
-	fill: var(--chat-icon-color-dropdown);
+#chat-icon-dropdown-message {
+	fill: var(--chat-icon-color-dropdown-message);
 }
 
 #chat-icon-dropdown-scroll {

diff --git a/src/themes/index.js b/src/themes/index.js
@@ -105,7 +105,8 @@ export const defaultThemeStyles = {
 			pencil: '#9e9e9e',
 			checkmark: '#0696c7',
 			eye: '#fff',
-			dropdown: '#fff',
+			dropdownMessage: '#fff',
+			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
 			dropdownScroll: '#0a0a0a'
 		}
 	},
@@ -215,7 +216,8 @@ export const defaultThemeStyles = {
 			pencil: '#ebedf2',
 			checkmark: '#f0d90a',
 			eye: '#fff',
-			dropdown: '#fff',
+			dropdownMessage: '#fff',
+			dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
 			dropdownScroll: '#0a0a0a'
 		}
 	}
@@ -332,7 +334,8 @@ export const cssThemeVars = ({
 		'--chat-icon-color-pencil': icons.pencil,
 		'--chat-icon-color-checkmark': icons.checkmark,
 		'--chat-icon-color-eye': icons.eye,
-		'--chat-icon-color-dropdown': icons.dropdown,
+		'--chat-icon-color-dropdown-message': icons.dropdownMessage,
+		'--chat-icon-bg-dropdown-message': icons.dropdownMessageBackground,
 		'--chat-icon-color-dropdown-scroll': icons.dropdownScroll
 	}
 }