Use the color-primary-element* variables

Signed-off-by: Simon L <szaimen@e.mail.de>

11 files changed, 12 insertions, 12 deletions

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
index 480dbca19..f494a018d 100644
--- a/src/components/ChatView.vue
+++ b/src/components/ChatView.vue
@@ -165,7 +165,7 @@ export default {
 	left: 10%;
 	width: 80%;
 	height: 80%;
-	background: var(--color-primary-light);
+	background: var(--color-primary-element-light);
 	z-index: 11;
 	display: flex;
 	box-shadow: 0 0 36px var(--color-box-shadow);
diff --git a/src/components/ConversationSettings/NotificationsSettings.vue b/src/components/ConversationSettings/NotificationsSettings.vue
index 4364be98c..856f490bd 100644
--- a/src/components/ConversationSettings/NotificationsSettings.vue
+++ b/src/components/ConversationSettings/NotificationsSettings.vue
@@ -165,7 +165,7 @@ export default {
 		background-color: var(--color-background-hover);
 	}
 	&--active{
-		background-color: var(--color-primary-light) !important;
+		background-color: var(--color-primary-element-light) !important;
 	}
 	&__icon {
 		display: flex;
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index b4d72b991..044d39b1e 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -468,6 +468,6 @@ export default {
 }
 
 .forced-active {
-	background-color: var(--color-primary-light) !important //Overrides gray hover feedback;
+	background-color: var(--color-primary-element-light) !important //Overrides gray hover feedback;
 }
 </style>
diff --git a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
index ec546b73e..01456bd85 100644
--- a/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue
@@ -93,7 +93,7 @@ $bubble-height: 24px;
 	display: flex;
 	align-items: center;
 	margin: 4px;
-	background-color: var(--color-primary-light);
+	background-color: var(--color-primary-element-light);
 	border-radius: $bubble-height;
 	height: $bubble-height;
 	&__avatar {
diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
index 221036033..28ccba51b 100644
--- a/src/components/MediaSettings/VideoBackgroundEditor.vue
+++ b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -292,7 +292,7 @@ export default {
 		flex: 1 0 108px;
 
 		&--selected {
-			box-shadow: inset 0 0 0 var(--default-grid-baseline) var(--color-primary);
+			box-shadow: inset 0 0 0 var(--default-grid-baseline) var(--color-primary-element);
 		}
 	 }
 }
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 1e8fd149b..af6db8f41 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -880,7 +880,7 @@ export default {
 			}
 
 			&.call-started {
-				background-color: var(--color-primary-light);
+				background-color: var(--color-primary-element-light);
 				padding: 10px;
 				border-radius: var(--border-radius-large);
 				text-align: center;
@@ -906,7 +906,7 @@ export default {
 			}
 
 			&--quote {
-				border-left: 4px solid var(--color-primary);
+				border-left: 4px solid var(--color-primary-element);
 				padding: 4px 0 0 8px;
 			}
 		}
diff --git a/src/components/NewMessageForm/TemplatePreview.vue b/src/components/NewMessageForm/TemplatePreview.vue
index 8402133e4..61151321d 100644
--- a/src/components/NewMessageForm/TemplatePreview.vue
+++ b/src/components/NewMessageForm/TemplatePreview.vue
@@ -203,7 +203,7 @@ export default {
 		border-radius: var(--border-radius-large);
 
 		input:checked + label > & {
-			border-color: var(--color-primary);
+			border-color: var(--color-primary-element);
 		}
 
 		&--failed {
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index 7ed86a515..9338fe10a 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -262,7 +262,7 @@ export default {
 	max-width: $messages-list-max-width - $message-utils-width;
 
 	&.quote-own-message {
-		border-left: 4px solid var(--color-primary);
+		border-left: 4px solid var(--color-primary-element);
 	}
 
 	&__main {
diff --git a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
index f946cd89c..bfe68545c 100644
--- a/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue
@@ -730,7 +730,7 @@ export default {
 
 <style lang="scss" scoped>
 .selected {
-	background-color: var(--color-primary-light);
+	background-color: var(--color-primary-element-light);
 	border-radius: 5px;
 }
 
diff --git a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
index 43b56a99a..5d1e4468f 100644
--- a/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
+++ b/src/components/RightSidebar/SharedItems/SharedItemsBrowser/SharedItemsBrowser.vue
@@ -176,7 +176,7 @@ export default {
 :deep(.button-vue) {
 	border-radius: var(--border-radius-large);
 	&.active {
-		background-color: var(--color-primary-light);
+		background-color: var(--color-primary-element-light);
 	}
 }
 </style>
diff --git a/src/views/RoomSelector.vue b/src/views/RoomSelector.vue
index 30ce2d0db..c392ebf6f 100644
--- a/src/views/RoomSelector.vue
+++ b/src/views/RoomSelector.vue
@@ -233,7 +233,7 @@ li {
 	}
 
 	&.selected {
-		background-color: var(--color-primary-light);
+		background-color: var(--color-primary-element-light);
 		border-radius: var(--border-radius-pill);
 	}