Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-04-21 17:08:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update to new design for avatars: individual/group icons/colors

Browse Source 
And two initials.
This commit is contained in:
Scott Nonnenberg
2018-09-26 17:23:17 -07:00
parent cf16ced91c
commit 8f3e3b7aaf
21 changed files with 1210 additions and 1017 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
stylesheets/_theme_dark.scss
View File

@@ -2,7 +2,7 @@
body.dark-theme {
background-color: $color-black;
color: $color-gray-95;
color: $color-gray-05;
}
.dark-theme {
@@ -797,44 +797,6 @@ body.dark-theme {
border: 1px solid $color-dark-60;
}
.module-message__author-default-avatar--red {
background-color: $color-conversation-red;
}
.module-message__author-default-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__author-default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-message__author-default-avatar--pink {
background-color: $color-conversation-pink;
}
.module-message__author-default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-message__author-default-avatar--indigo {
background-color: $color-conversation-indigo;
}
.module-message__author-default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-message__author-default-avatar--teal {
background-color: $color-conversation-teal;
}
.module-message__author-default-avatar--green {
background-color: $color-conversation-green;
}
.module-message__author-default-avatar--light_green {
background-color: $color-conversation-light_green;
}
.module-message__author-default-avatar--blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-message__author-default-avatar__label {
color: $color-white;
}
// Module: Expire Timer
.module-expire-timer {
@@ -1076,11 +1038,6 @@ body.dark-theme {
// Module: Embedded Contact
.module-embedded-contact__image-container__default-avatar {
background-color: $color-conversation-grey;
color: $color-white;
}
.module-embedded-contact__contact-name {
color: $color-dark-05;
}
@@ -1099,11 +1056,6 @@ body.dark-theme {
// Module: Contact Detail
.module-contact-detail__image-container__default-avatar {
background-color: $color-conversation-grey;
color: $color-white;
}
.module-contact-detail__send-message {
background-color: $blue;
color: $color-white;
@@ -1145,7 +1097,7 @@ body.dark-theme {
.module-verification-notification__button {
color: $color-signal-blue;
background-color: $color-light-02;
background-color: $color-gray-75;
}
// Module: Verification Notification
@@ -1182,48 +1134,6 @@ body.dark-theme {
color: $color-dark-30;
}
.module-contact-list-item__avatar-default {
background-color: $color-conversation-grey;
}
.module-contact-list-item__avatar-default--red {
background-color: $color-conversation-red;
}
.module-contact-list-item__avatar-default--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-contact-list-item__avatar-default--brown {
background-color: $color-conversation-brown;
}
.module-contact-list-item__avatar-default--pink {
background-color: $color-conversation-pink;
}
.module-contact-list-item__avatar-default--purple {
background-color: $color-conversation-purple;
}
.module-contact-list-item__avatar-default--indigo {
background-color: $color-conversation-indigo;
}
.module-contact-list-item__avatar-default--blue {
background-color: $color-conversation-blue;
}
.module-contact-list-item__avatar-default--teal {
background-color: $color-conversation-teal;
}
.module-contact-list-item__avatar-default--green {
background-color: $color-conversation-green;
}
.module-contact-list-item__avatar-default--light_green {
background-color: $color-conversation-light_green;
}
.module-contact-list-item__avatar-default--blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-contact-list-item__avatar-default__label {
color: $color-white;
}
.module-contact-list-item__text__verified-icon {
@include color-svg('../images/verified-check.svg', $color-dark-30);
}
@@ -1240,45 +1150,6 @@ body.dark-theme {
@include color-svg('../images/back.svg', $color-dark-05);
}
.module-conversation-header___default-avatar {
background-color: $color-conversation-grey;
color: $color-white;
}
.module-conversation-header___default-avatar--red {
background-color: $color-conversation-red;
}
.module-conversation-header___default-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-conversation-header___default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-conversation-header___default-avatar--pink {
background-color: $color-conversation-pink;
}
.module-conversation-header___default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-conversation-header___default-avatar--indigo {
background-color: $color-conversation-indigo;
}
.module-conversation-header___default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-conversation-header___default-avatar--teal {
background-color: $color-conversation-teal;
}
.module-conversation-header___default-avatar--green {
background-color: $color-conversation-green;
}
.module-conversation-header___default-avatar--light_green {
background-color: $color-conversation-light_green;
}
.module-conversation-header___default-avatar--blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-conversation-header__title {
color: $color-dark-05;
}
@@ -1308,45 +1179,6 @@ body.dark-theme {
border: solid 1px $color-light-35;
}
.module-message-detail__contact__default-avatar {
background-color: $color-conversation-grey;
color: $color-white;
}
.module-message-detail__contact__default-avatar--red {
background-color: $color-conversation-red;
}
.module-message-detail__contact__default-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message-detail__contact__default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-message-detail__contact__default-avatar--pink {
background-color: $color-conversation-pink;
}
.module-message-detail__contact__default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-message-detail__contact__default-avatar--indigo {
background-color: $color-conversation-indigo;
}
.module-message-detail__contact__default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-message-detail__contact__default-avatar--teal {
background-color: $color-conversation-teal;
}
.module-message-detail__contact__default-avatar--green {
background-color: $color-conversation-green;
}
.module-message-detail__contact__default-avatar--light_green {
background-color: $color-conversation-light_green;
}
.module-message-detail__contact__default-avatar--blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-message-detail__contact__error {
color: $color-core-red;
}
@@ -1437,43 +1269,30 @@ body.dark-theme {
background-color: $color-dark-70;
}
.module-conversation-list-item__default-avatar {
color: white;
background-color: $color-conversation-grey;
.module-conversation-list-item__unread-count {
color: $color-white;
background-color: $color-signal-blue;
box-shadow: 0px 0px 0px 1px $color-dark-85;
}
.module-conversation-list-item__default-avatar--red {
background-color: $color-conversation-red;
.module-conversation-list-item__header__name {
color: $color-gray-05;
}
.module-conversation-list-item__default-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
.module-conversation-list-item__header__timestamp {
color: $color-gray-25;
}
.module-conversation-list-item__default-avatar--brown {
background-color: $color-conversation-brown;
.module-conversation-list-item__header__date--has-unread {
color: $color-gray-05;
}
.module-conversation-list-item__default-avatar--pink {
background-color: $color-conversation-pink;
.module-conversation-list-item__message__text {
color: $color-gray-25;
}
.module-conversation-list-item__default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-conversation-list-item__default-avatar--indigo {
background-color: $color-conversation-indigo;
}
.module-conversation-list-item__default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-conversation-list-item__default-avatar--teal {
background-color: $color-conversation-teal;
}
.module-conversation-list-item__default-avatar--green {
background-color: $color-conversation-green;
}
.module-conversation-list-item__default-avatar--light_green {
background-color: $color-conversation-light_green;
}
.module-conversation-list-item__default-avatar--blue_grey {
background-color: $color-conversation-blue_grey;
.module-conversation-list-item__message__text--has-unread {
color: $color-gray-05;
}
.module-conversation-list-item__message__status-icon--sending {
@@ -1492,6 +1311,58 @@ body.dark-theme {
width: 18px;
}
// Module: Avatar
.module-avatar__label {
color: $color-gray-05;
}
.module-avatar__icon--group {
@include color-svg('../images/profile-group.svg', $color-gray-05);
}
.module-avatar__icon--direct {
@include color-svg('../images/profile-individual.svg', $color-gray-05);
}
.module-avatar--no-image {
background-color: $color-conversation-grey-shade;
}
.module-avatar--red {
background-color: $color-conversation-red-shade;
}
.module-avatar--deep_orange {
background-color: $color-conversation-deep_orange-shade;
}
.module-avatar--brown {
background-color: $color-conversation-brown-shade;
}
.module-avatar--pink {
background-color: $color-conversation-pink-shade;
}
.module-avatar--purple {
background-color: $color-conversation-purple-shade;
}
.module-avatar--indigo {
background-color: $color-conversation-indigo-shade;
}
.module-avatar--blue {
background-color: $color-conversation-blue-shade;
}
.module-avatar--teal {
background-color: $color-conversation-teal-shade;
}
.module-avatar--green {
background-color: $color-conversation-green-shade;
}
.module-avatar--light_green {
background-color: $color-conversation-light_green-shade;
}
.module-avatar--blue_grey {
background-color: $color-conversation-blue_grey-shade;
}
// Third-party module: react-contextmenu
.react-contextmenu {