diff --git a/src/components/ContactDropdownList/styles.scss b/src/components/ContactDropdownList/styles.scss
index 2cf140c5e5..56186188ff 100644
--- a/src/components/ContactDropdownList/styles.scss
+++ b/src/components/ContactDropdownList/styles.scss
@@ -41,10 +41,10 @@
}
li.active {
- color: $rc-blue;
+ color: $primary-color;
.name {
- color: $rc-blue;
+ color: $primary-color;
}
}
}
diff --git a/src/components/RecipientsInput/index.js b/src/components/RecipientsInput/index.js
index 0bf1d8745e..fd843486f0 100644
--- a/src/components/RecipientsInput/index.js
+++ b/src/components/RecipientsInput/index.js
@@ -8,7 +8,7 @@ function SelectedRecipientItem({
name = phoneNumber,
onRemove,
}) {
- const className = phoneNumber.length > 5 ? styles.blue : null;
+ const className = phoneNumber.length > 5 ? styles.phoneNumber : styles.extension;
return (
{name}
diff --git a/src/components/RecipientsInput/styles.scss b/src/components/RecipientsInput/styles.scss
index d344919dc8..1c5722629e 100644
--- a/src/components/RecipientsInput/styles.scss
+++ b/src/components/RecipientsInput/styles.scss
@@ -73,7 +73,6 @@
li {
position: relative;
color: #fff;
- background-color: #66d17b;
border-radius: 20px;
font-size: 13px;
line-height: 1;
@@ -90,12 +89,17 @@
}
}
- .blue {
- background-color: $rc-blue;
+ .phoneNumber {
+ background-color: $primary-color;
opacity: 0.6;
}
+ .extension {
+ background-color: $extension-background-color;
+ }
+
}
+
.removeReceiver {
position: absolute;
bottom: 4px;
diff --git a/src/lib/commonStyles/colors.scss b/src/lib/commonStyles/colors.scss
index c7b771f457..fc2ed6a66b 100644
--- a/src/lib/commonStyles/colors.scss
+++ b/src/lib/commonStyles/colors.scss
@@ -53,7 +53,7 @@ $dialer-btn-border-color: $primary-color-highlight !default;
$call-btn-color: #4cd964 !default;
$call-btn-press-color: rgba(76,217,100,0.4) !default;
-
+$extension-background-color: #66d17b !default;
$sms-bubble-background-color: #d5f3fd !default;
$brand-font-color: $rc-blue !default;