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;