oxen-io
/
session-desktop
mirror of https://github.com/oxen-io/session-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Move to new colors, switch incoming/outgoing colors

This commit is contained in:
Scott Nonnenberg 2018-09-25 17:26:06 -07:00
parent cd60bdd08a
commit 10c53bddb0
22 changed files with 1116 additions and 1233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/background.js
View File

@ -768,7 +768,6 @@
if (firstRun === true && deviceId !== '1') {
const hasThemeSetting = Boolean(storage.get('theme-setting'));
if (!hasThemeSetting && textsecure.storage.get('userAgent') === 'OWI') {
storage.put('theme-setting', 'ios');
onChangeTheme();
}
const syncRequest = new textsecure.SyncRequest(
@ -961,6 +960,7 @@
const updates = {
name: details.name,
members: details.members,
color: details.color,
type: 'group',
};

8
js/models/conversations.js
View File

@ -37,19 +37,15 @@
const COLORS = [
'red',
'deep_orange',
'brown',
'pink',
'purple',
'deep_purple',
'indigo',
'blue',
'light_blue',
'cyan',
'teal',
'green',
'light_green',
'orange',
'deep_orange',
'amber',
'blue_grey',
];

6
js/models/messages.js
View File

@ -394,7 +394,6 @@
const contact = this.findAndFormatContact(phoneNumber);
const contactModel = this.findContact(phoneNumber);
const authorColor = contactModel ? contactModel.getColor() : null;
const authorAvatar = contactModel ? contactModel.getAvatar() : null;
const authorAvatarPath = authorAvatar ? authorAvatar.url : null;
@ -407,6 +406,7 @@
const conversation = this.getConversation();
const isGroup = conversation && !conversation.isPrivate();
const conversationColor = conversation && conversation.getColor();
const attachments = this.get('attachments');
const firstAttachment = attachments && attachments[0];
@ -421,7 +421,7 @@
authorName: contact.name,
authorProfileName: contact.profileName,
authorPhoneNumber: contact.phoneNumber,
authorColor,
conversationColor,
conversationType: isGroup ? 'group' : 'direct',
attachment: this.getPropsForAttachment(firstAttachment),
quote: this.getPropsForQuote(),
@ -536,7 +536,6 @@
const authorPhoneNumber = author;
const authorProfileName = contact ? contact.getProfileName() : null;
const authorName = contact ? contact.getName() : null;
const authorColor = contact ? contact.getColor() : 'grey';
const isFromMe = contact ? contact.id === this.OUR_NUMBER : false;
const onClick = () => {
this.trigger('scroll-to-message', {
@ -557,7 +556,6 @@
authorPhoneNumber,
authorProfileName,
authorName,
authorColor,
onClick,
referencedMessageNotFound,
};

7
js/views/app_view.js
View File

@ -21,18 +21,11 @@
openInbox: 'openInbox',
},
applyTheme() {
const iOS = storage.get('userAgent') === 'OWI';
const theme = storage.get('theme-setting') || 'light';
this.$el
.removeClass('light-theme')
.removeClass('dark-theme')
.addClass(`${theme}-theme`);
if (iOS) {
this.$el.addClass('ios-theme');
} else {
this.$el.removeClass('ios-theme');
}
},
applyHideMenu() {
const hideMenuBar = storage.get('hide-menu-bar', false);

27
js/views/identicon_svg_view.js
View File

@ -42,20 +42,17 @@
});
const COLORS = {
red: '#EF5350',
pink: '#EC407A',
purple: '#AB47BC',
deep_purple: '#7E57C2',
indigo: '#5C6BC0',
blue: '#2196F3',
light_blue: '#03A9F4',
cyan: '#00BCD4',
teal: '#009688',
green: '#4CAF50',
light_green: '#7CB342',
orange: '#FF9800',
deep_orange: '#FF5722',
amber: '#FFB300',
blue_grey: '#607D8B',
red: '#cc163d',
deep_orange: '#c73800',
brown: '#746c53',
pink: '#a23474',
purple: '#862caf',
indigo: '#5951c8',
blue: '#336ba3',
teal: '#067589',
green: '#3b7845',
light_green: '#895d66',
blue_grey: '#607d8b',
grey: '#6b6b78',
};
})();

6
stylesheets/_index.scss
View File

@ -19,14 +19,14 @@
}
.gutter {
background-color: $color-black-008-no-tranparency;
background-color: $color-gray-02;
::-webkit-scrollbar-track {
background: $color-black-008-no-tranparency;
background: $color-gray-02;
}
::-webkit-scrollbar-thumb {
border: 2px solid $color-black-008-no-tranparency;
border: 2px solid $color-gray-02;
}
float: left;

440
stylesheets/_ios.scss
View File

@ -1,440 +0,0 @@
// When paired with an iOS device, this stylesheet will apply
.ios-theme {
// _modules
.module-message__container--outgoing {
background-color: $color-signal-blue;
color: $color-white;
}
.module-message__container--incoming {
background-color: $color-light-10;
color: $color-light-90;
}
.module-message__container--incoming-grey {
background-color: $color-light-10;
}
.module-message__container--incoming-blue {
background-color: $color-light-10;
}
.module-message__container--incoming-cyan {
background-color: $color-light-10;
}
.module-message__container--incoming-deep_orange {
background-color: $color-light-10;
}
.module-message__container--incoming-green {
background-color: $color-light-10;
}
.module-message__container--incoming-indigo {
background-color: $color-light-10;
}
.module-message__container--incoming-pink {
background-color: $color-light-10;
}
.module-message__container--incoming-purple {
background-color: $color-light-10;
}
.module-message__container--incoming-red {
background-color: $color-light-10;
}
.module-message__container--incoming-teal {
background-color: $color-light-10;
}
.module-message__author {
color: $color-light-90;
}
.module-message__text {
color: $color-white;
font-size: 14px;
a {
text-decoration: underline;
color: $color-white;
}
}
.module-message__text--incoming {
color: $color-light-90;
a {
text-decoration: underline;
color: $color-light-90;
}
}
.module-message__metadata__date {
color: $color-white-07;
}
.module-message__metadata__date--incoming {
color: $color-light-45;
}
.module-message__metadata__date--with-image-no-caption {
color: $color-white;
}
.module-message__metadata__status-icon--sending {
@include color-svg('../images/sending.svg', $color-white);
}
.module-message__metadata__status-icon--sent {
@include color-svg('../images/check-circle-outline.svg', $color-white-07);
}
.module-message__metadata__status-icon--delivered {
@include color-svg('../images/double-check.svg', $color-white-07);
}
.module-message__metadata__status-icon--read {
@include color-svg('../images/read.svg', $color-white-07);
}
.module-message__metadata__status-icon--with-image-no-caption {
background-color: $color-white;
}
.module-message__broken-image {
color: $color-white;
}
.module-message__broken-image--incoming {
color: $color-light-90;
}
.module-message__broken-video-screenshot {
color: $color-white;
}
.module-message__broken-video-screenshot--incoming {
color: $color-light-90;
}
.module-message__generic-attachment__file-name {
color: $color-white;
}
.module-message__generic-attachment__file-name--incoming {
color: $color-light-90;
}
.module-message__generic-attachment__file-size {
color: $color-white;
}
.module-message__generic-attachment__file-size--incoming {
color: $color-light-90;
}
.module-expire-timer {
background-color: $color-white-07;
}
.module-expire-timer--incoming {
background-color: $color-light-45;
}
.module-quote--incoming {
background-color: $color-signal-blue-025;
border-left-color: $color-signal-blue;
}
.module-quote--outgoing-you {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-grey {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-blue {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-cyan {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-deep_orange {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-green {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-indigo {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-pink {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-purple {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-red {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-teal {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote__primary__author--grey {
color: $color-light-90;
}
.module-quote__primary__author--blue {
color: $color-light-90;
}
.module-quote__primary__author--cyan {
color: $color-light-90;
}
.module-quote__primary__author--deep_orange {
color: $color-light-90;
}
.module-quote__primary__author--green {
color: $color-light-90;
}
.module-quote__primary__author--indigo {
color: $color-light-90;
}
.module-quote__primary__author--pink {
color: $color-light-90;
}
.module-quote__primary__author--purple {
color: $color-light-90;
}
.module-quote__primary__author--red {
color: $color-light-90;
}
.module-quote__primary__author--teal {
color: $color-light-90;
}
.module-quote__reference-warning--incoming {
background-color: $color-signal-blue-mix;
}
// When you're composing a new quote
.bottom-bar {
.module-quote {
background-color: $color-signal-blue-025;
border-left-color: $color-signal-blue;
}
}
.module-embedded-contact__contact-name {
color: $color-white;
}
.module-embedded-contact__contact-method {
color: $color-white-07;
}
.module-embedded-contact__contact-name--incoming {
color: $color-light-90;
}
.module-embedded-contact__contact-method--incoming {
color: $color-light-60;
}
&.dark-theme {
// _modules
.module-message__container--incoming {
background-color: $color-dark-70;
color: $color-white;
}
.module-message__container--incoming-grey {
background-color: $color-dark-70;
}
.module-message__container--incoming-blue {
background-color: $color-dark-70;
}
.module-message__container--incoming-cyan {
background-color: $color-dark-70;
}
.module-message__container--incoming-deep_orange {
background-color: $color-dark-70;
}
.module-message__container--incoming-green {
background-color: $color-dark-70;
}
.module-message__container--incoming-indigo {
background-color: $color-dark-70;
}
.module-message__container--incoming-pink {
background-color: $color-dark-70;
}
.module-message__container--incoming-purple {
background-color: $color-dark-70;
}
.module-message__container--incoming-red {
background-color: $color-dark-70;
}
.module-message__container--incoming-teal {
background-color: $color-dark-70;
}
.module-message__author {
color: $color-white;
}
.module-message__text--incoming {
color: $color-white;
a {
text-decoration: underline;
color: $color-white;
}
}
.module-message__metadata__date--incoming {
color: $color-white-07;
}
.module-message__broken-image--incoming {
color: $color-white;
}
.module-message__broken-video-screenshot--incoming {
color: $color-white;
}
.module-message__generic-attachment__file-name--incoming {
color: $color-white;
}
.module-message__generic-attachment__file-size--incoming {
color: $color-white;
}
.module-expire-timer--incoming {
background-color: $color-white-07;
}
.module-quote__primary__author {
color: $color-light-90;
}
.module-quote__primary__author--grey {
color: $color-light-90;
}
.module-quote__primary__author--blue {
color: $color-light-90;
}
.module-quote__primary__author--cyan {
color: $color-light-90;
}
.module-quote__primary__author--deep_orange {
color: $color-light-90;
}
.module-quote__primary__author--green {
color: $color-light-90;
}
.module-quote__primary__author--indigo {
color: $color-light-90;
}
.module-quote__primary__author--pink {
color: $color-light-90;
}
.module-quote__primary__author--purple {
color: $color-light-90;
}
.module-quote__primary__author--red {
color: $color-light-90;
}
.module-quote__primary__author--teal {
color: $color-light-90;
}
.module-quote__primary__text {
color: $color-light-90;
a {
color: $color-light-90;
}
}
.module-quote__primary__type-label {
color: $color-light-90;
}
.module-quote__primary__type-label--incoming {
color: $color-white;
}
.module-quote__primary__author--incoming {
color: $color-white;
}
.module-quote__primary__text--incoming {
color: $color-white;
a {
color: $color-white;
}
}
.module-quote__generic-file__text {
color: $color-light-90;
}
.module-quote__generic-file__text--incoming {
color: $color-white;
}
.module-quote__reference-warning {
background-color: $color-white-04;
}
.module-quote__reference-warning--incoming {
background-color: $color-signal-blue-050;
}
.module-quote__reference-warning__text {
color: $color-light-90;
}
.module-quote__reference-warning__text--incoming {
color: $color-white;
}
.module-quote__reference-warning__icon {
@include color-svg('../images/broken-link.svg', $color-light-60);
}
.module-quote__reference-warning__icon--incoming {
@include color-svg('../images/broken-link.svg', $color-white-085);
}
// When you're composing a new quote
.bottom-bar {
.module-quote__primary__author {
color: $color-white;
}
.module-quote__primary__type-label {
color: $color-white;
}
.module-quote__generic-file__text {
color: $color-white;
}
.module-quote__primary__text {
color: $color-white;
a {
color: $color-white;
}
}
}
.module-embedded-contact__contact-name--incoming {
color: $color-white;
}
.module-embedded-contact__contact-method--incoming {
color: $color-white-07;
}
}
}

410
stylesheets/_modules.scss
View File

@ -156,45 +156,48 @@
padding-bottom: 10px;
}
.module-message__container--outgoing {
.module-message__container--incoming {
background-color: $color-light-10;
}
// In case the color gets messed up
.module-message__container--incoming {
.module-message__container--outgoing {
background-color: $color-conversation-grey;
}
.module-message__container--incoming-grey {
background-color: $color-conversation-grey;
}
.module-message__container--incoming-blue {
background-color: $color-conversation-blue;
}
.module-message__container--incoming-cyan {
background-color: $color-conversation-cyan;
}
.module-message__container--incoming-deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__container--incoming-green {
background-color: $color-conversation-green;
}
.module-message__container--incoming-indigo {
background-color: $color-conversation-indigo;
}
.module-message__container--incoming-pink {
background-color: $color-conversation-pink;
}
.module-message__container--incoming-purple {
background-color: $color-conversation-purple;
}
.module-message__container--incoming-red {
.module-message__container--outgoing-red {
background-color: $color-conversation-red;
}
.module-message__container--incoming-teal {
.module-message__container--outgoing-deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__container--outgoing-brown {
background-color: $color-conversation-brown;
}
.module-message__container--outgoing-pink {
background-color: $color-conversation-pink;
}
.module-message__container--outgoing-purple {
background-color: $color-conversation-purple;
}
.module-message__container--outgoing-indigo {
background-color: $color-conversation-indigo;
}
.module-message__container--outgoing-blue {
background-color: $color-conversation-blue;
}
.module-message__container--outgoing-teal {
background-color: $color-conversation-teal;
}
.module-message__container--outgoing-green {
background-color: $color-conversation-green;
}
.module-message__container--outgoing-light_green {
background-color: $color-conversation-light_green;
}
.module-message__container--outgoing-blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-message__attachment-container {
// Entirely to ensure that images are centered if they aren't full width of bubble
@ -233,7 +236,7 @@
left: 0;
right: 0;
border-radius: 16px;
box-shadow: inset 0px 0px 0px 1px $color-black-02;
box-shadow: inset 0px 0px 0px 1px $color-black-015;
}
.module-message__img-border-overlay--with-content-below {
@ -383,7 +386,7 @@
}
.module-message__generic-attachment__file-name {
color: $color-light-90;
color: $color-white;
font-size: 14px;
line-height: 18px;
font-weight: 300;
@ -396,11 +399,11 @@
}
.module-message__generic-attachment__file-name--incoming {
color: $color-white;
color: $color-light-90;
}
.module-message__generic-attachment__file-size {
color: $color-light-90;
color: $color-white;
font-size: 11px;
line-height: 16px;
letter-spacing: 0.3px;
@ -408,11 +411,11 @@
}
.module-message__generic-attachment__file-size--incoming {
color: $color-white;
color: $color-light-90;
}
.module-message__author {
color: $color-white;
color: $color-light-90;
font-size: 13px;
font-weight: 300;
line-height: 18px;
@ -428,7 +431,7 @@
}
.module-message__text {
color: $color-light-90;
color: $color-white;
font-size: 14px;
line-height: 18px;
text-align: start;
@ -440,15 +443,15 @@
a {
text-decoration: underline;
color: $color-light-90;
color: $color-white;
}
}
.module-message__text--incoming {
color: $color-white;
color: $color-light-90;
a {
text-decoration: underline;
color: $color-white;
color: $color-light-90;
}
}
@ -480,11 +483,11 @@
font-size: 11px;
line-height: 16px;
letter-spacing: 0.3px;
color: $color-light-60;
color: $color-white-08;
text-transform: uppercase;
}
.module-message__metadata__date--incoming {
color: $color-white-07;
color: $color-light-60;
}
.module-message__metadata__date--with-image-no-caption {
color: $color-white;
@ -515,14 +518,14 @@
}
.module-message__metadata__status-icon--sent {
@include color-svg('../images/check-circle-outline.svg', $color-light-35);
@include color-svg('../images/check-circle-outline.svg', $color-white-08);
}
.module-message__metadata__status-icon--delivered {
@include color-svg('../images/double-check.svg', $color-light-35);
@include color-svg('../images/double-check.svg', $color-white-08);
width: 18px;
}
.module-message__metadata__status-icon--read {
@include color-svg('../images/read.svg', $color-light-35);
@include color-svg('../images/read.svg', $color-white-08);
width: 18px;
}
@ -579,25 +582,19 @@
flex-direction: row;
align-items: center;
text-align: center;
}
.module-message__author-default-avatar--grey {
// Default, in case we have no color
background-color: $color-conversation-grey;
}
.module-message__author-default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-message__author-default-avatar--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-message__author-default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-message__author-default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-message__author-default-avatar--pink {
background-color: $color-conversation-pink;
@ -605,12 +602,24 @@
.module-message__author-default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-message__author-default-avatar--red {
background-color: $color-conversation-red;
.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 {
width: 100%;
@ -722,53 +731,90 @@
}
.module-quote--incoming {
background-color: $color-white-075;
border-left-color: $color-white;
border-left-color: $color-conversation-grey;
background-color: $color-conversation-grey-tint;
}
.module-quote--incoming-red {
border-left-color: $color-conversation-red;
background-color: $color-conversation-red-tint;
}
.module-quote--incoming-deep_orange {
border-left-color: $color-conversation-deep_orange;
background-color: $color-conversation-deep_orange-tint;
}
.module-quote--incoming-brown {
border-left-color: $color-conversation-brown;
background-color: $color-conversation-brown-tint;
}
.module-quote--incoming-pink {
border-left-color: $color-conversation-pink;
background-color: $color-conversation-pink-tint;
}
.module-quote--incoming-purple {
border-left-color: $color-conversation-purple;
background-color: $color-conversation-purple-tint;
}
.module-quote--incoming-indigo {
border-left-color: $color-conversation-indigo;
background-color: $color-conversation-indigo-tint;
}
.module-quote--incoming-blue {
border-left-color: $color-conversation-blue;
background-color: $color-conversation-blue-tint;
}
.module-quote--incoming-teal {
border-left-color: $color-conversation-teal;
background-color: $color-conversation-teal-tint;
}
.module-quote--incoming-green {
border-left-color: $color-conversation-green;
background-color: $color-conversation-green-tint;
}
.module-quote--incoming-light_green {
border-left-color: $color-conversation-light_green;
background-color: $color-conversation-light_green-tint;
}
.module-quote--incoming-blue_grey {
border-left-color: $color-conversation-blue_grey;
background-color: $color-conversation-blue_grey-tint;
}
.module-quote--outgoing-you {
border-left-color: $color-light-35;
background-color: $color-light-02;
}
.module-quote--outgoing-grey {
border-left-color: $color-conversation-grey;
background-color: rgba($color-conversation-grey, 0.25);
}
.module-quote--outgoing-blue {
border-left-color: $color-conversation-blue;
background-color: rgba($color-conversation-blue, 0.25);
}
.module-quote--outgoing-cyan {
border-left-color: $color-conversation-cyan;
background-color: rgba($color-conversation-cyan, 0.25);
}
.module-quote--outgoing-deep_orange {
border-left-color: $color-conversation-deep_orange;
background-color: rgba($color-conversation-deep_orange, 0.25);
}
.module-quote--outgoing-green {
border-left-color: $color-conversation-green;
background-color: rgba($color-conversation-green, 0.25);
}
.module-quote--outgoing-indigo {
border-left-color: $color-conversation-indigo;
background-color: rgba($color-conversation-indigo, 0.25);
}
.module-quote--outgoing-pink {
border-left-color: $color-conversation-pink;
background-color: rgba($color-conversation-pink, 0.25);
}
.module-quote--outgoing-purple {
border-left-color: $color-conversation-purple;
background-color: rgba($color-conversation-purple, 0.25);
.module-quote--outgoing {
border-left-color: $color-white;
background-color: $color-conversation-grey-tint;
}
.module-quote--outgoing-red {
border-left-color: $color-conversation-red;
background-color: rgba($color-conversation-red, 0.25);
background-color: $color-conversation-red-tint;
}
.module-quote--outgoing-deep_orange {
background-color: $color-conversation-deep_orange-tint;
}
.module-quote--outgoing-brown {
background-color: $color-conversation-brown-tint;
}
.module-quote--outgoing-pink {
background-color: $color-conversation-pink-tint;
}
.module-quote--outgoing-purple {
background-color: $color-conversation-purple-tint;
}
.module-quote--outgoing-indigo {
background-color: $color-conversation-indigo-tint;
}
.module-quote--outgoing-blue {
background-color: $color-conversation-blue-tint;
}
.module-quote--outgoing-teal {
border-left-color: $color-conversation-teal;
background-color: rgba($color-conversation-teal, 0.25);
background-color: $color-conversation-teal-tint;
}
.module-quote--outgoing-green {
background-color: $color-conversation-green-tint;
}
.module-quote--outgoing-light_green {
background-color: $color-conversation-light_green-tint;
}
.module-quote--outgoing-blue_grey {
background-color: $color-conversation-blue_grey-tint;
}
.module-quote__primary {
@ -792,37 +838,6 @@
text-overflow: ellipsis;
}
.module-quote__primary__author--grey {
color: $color-conversation-grey;
}
.module-quote__primary__author--blue {
color: $color-conversation-blue;
}
.module-quote__primary__author--cyan {
color: $color-conversation-cyan;
}
.module-quote__primary__author--deep_orange {
color: $color-conversation-deep_orange;
}
.module-quote__primary__author--green {
color: $color-conversation-green;
}
.module-quote__primary__author--indigo {
color: $color-conversation-indigo;
}
.module-quote__primary__author--pink {
color: $color-conversation-pink;
}
.module-quote__primary__author--purple {
color: $color-conversation-purple;
}
.module-quote__primary__author--red {
color: $color-conversation-red;
}
.module-quote__primary__author--teal {
color: $color-conversation-teal;
}
.module-quote__primary__profile-name {
font-style: italic;
}
@ -1053,7 +1068,7 @@
line-height: 18px;
font-weight: 300;
margin-top: 6px;
color: $color-light-90;
color: $color-white;
max-width: 100%;
white-space: nowrap;
@ -1062,7 +1077,7 @@
}
.module-embedded-contact__contact-name--incoming {
color: $color-white;
color: $color-light-90;
}
.module-embedded-contact__contact-method {
@ -1070,7 +1085,7 @@
line-height: 16px;
letter-spacing: 0.3px;
margin-top: 3px;
color: $color-light-60;
color: $color-white-07;
max-width: 100%;
white-space: nowrap;
@ -1079,7 +1094,7 @@
}
.module-embedded-contact__contact-method--incoming {
color: $color-white-07;
color: $color-light-60;
}
// Module: Contact Detail
@ -1374,23 +1389,14 @@
background-color: $color-conversation-grey;
}
.module-contact-list-item__avatar-default--grey {
background-color: $color-conversation-grey;
}
.module-contact-list-item__avatar-default--blue {
background-color: $color-conversation-blue;
}
.module-contact-list-item__avatar-default--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-contact-list-item__avatar-default--indigo {
background-color: $color-conversation-indigo;
.module-contact-list-item__avatar-default--brown {
background-color: $color-conversation-brown;
}
.module-contact-list-item__avatar-default--pink {
background-color: $color-conversation-pink;
@ -1398,12 +1404,24 @@
.module-contact-list-item__avatar-default--purple {
background-color: $color-conversation-purple;
}
.module-contact-list-item__avatar-default--red {
background-color: $color-conversation-red;
.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 {
width: 100%;
@ -1504,20 +1522,14 @@
text-align: center;
}
.module-conversation-header___default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-conversation-header___default-avatar--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-conversation-header___default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-conversation-header___default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-conversation-header___default-avatar--pink {
background-color: $color-conversation-pink;
@ -1525,12 +1537,24 @@
.module-conversation-header___default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-conversation-header___default-avatar--red {
background-color: $color-conversation-red;
.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 {
margin-left: 8px;
@ -1666,20 +1690,14 @@
text-align: center;
}
.module-message-detail__contact__default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-message-detail__contact__default-avatar--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-message-detail__contact__default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-message-detail__contact__default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-message-detail__contact__default-avatar--pink {
background-color: $color-conversation-pink;
@ -1687,12 +1705,24 @@
.module-message-detail__contact__default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-message-detail__contact__default-avatar--red {
background-color: $color-conversation-red;
.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__text {
margin-left: 10px;
@ -1968,7 +1998,7 @@
cursor: pointer;
&:hover {
background-color: $color-black-016-no-tranparency;
background-color: $color-gray-05;
}
}
@ -1978,7 +2008,7 @@
}
.module-conversation-list-item--is-selected {
background-color: $color-black-016-no-tranparency;
background-color: $color-gray-05;
}
.module-conversation-list-item__avatar {
@ -2000,20 +2030,14 @@
background-color: $color-conversation-grey;
}
.module-conversation-list-item__default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-conversation-list-item__default-avatar--cyan {
background-color: $color-conversation-cyan;
.module-conversation-list-item__default-avatar--red {
background-color: $color-conversation-red;
}
.module-conversation-list-item__default-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-conversation-list-item__default-avatar--green {
background-color: $color-conversation-green;
}
.module-conversation-list-item__default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-conversation-list-item__default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-conversation-list-item__default-avatar--pink {
background-color: $color-conversation-pink;
@ -2021,12 +2045,24 @@
.module-conversation-list-item__default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-conversation-list-item__default-avatar--red {
background-color: $color-conversation-red;
.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__content {
flex-grow: 1;
@ -2094,6 +2130,8 @@
font-size: 13px;
line-height: 18px;
color: $color-gray-60;
height: 1.3em;
overflow: hidden;
white-space: nowrap;

399
stylesheets/_theme_dark.scss
View File

@ -2,18 +2,18 @@
body.dark-theme {
background-color: $color-black;
color: $color-dark-05;
color: $color-gray-95;
}
.dark-theme {
// _conversation
.conversation {
background-color: $color-black;
background-color: $color-gray-95;
}
.discussion-container {
background-color: $color-black;
background-color: $color-gray-95;
}
.key-verification {
@ -42,7 +42,7 @@ body.dark-theme {
}
form.send {
background-color: $color-black;
background-color: $color-gray-95;
&.video-attachment {
.outer {
@ -90,7 +90,7 @@ body.dark-theme {
}
.conversation-loading-screen {
background-color: $color-black;
background-color: $color-gray-95;
}
.module-last-seen-indicator__bar {
@ -157,7 +157,7 @@ body.dark-theme {
// _emoji
.ep-emojies {
background-color: $color-black;
background-color: $color-gray-95;
}
.ep-categories {
@ -200,7 +200,7 @@ body.dark-theme {
}
.dark-overlay {
background-color: $color-black;
background-color: $color-gray-95;
}
.title-bar {
@ -341,7 +341,7 @@ body.dark-theme {
}
.app-loading-screen {
background-color: $color-black;
background-color: $color-gray-95;
.dot {
border: 3px solid $blue;
@ -498,7 +498,7 @@ body.dark-theme {
input.search {
border: 1px solid $color-light-60;
color: $color-dark-05;
background-color: $color-black;
background-color: $color-gray-95;
&:focus {
outline: solid 1px $blue;
@ -587,7 +587,7 @@ body.dark-theme {
background-color: rgba(0, 0, 0, 0.3);
.content {
background-color: $color-black;
background-color: $color-gray-95;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}
}
@ -621,52 +621,55 @@ body.dark-theme {
@include color-svg('../images/error.svg', $color-core-red);
}
.module-message__container--outgoing {
.module-message__container--incoming {
background-color: $color-dark-70;
}
// In case the color gets messed up
.module-message__container--incoming {
.module-message__container--outgoing {
background-color: $color-conversation-grey;
}
.module-message__container--incoming-grey {
background-color: $color-conversation-grey;
}
.module-message__container--incoming-blue {
background-color: $color-conversation-blue;
}
.module-message__container--incoming-cyan {
background-color: $color-conversation-cyan;
}
.module-message__container--incoming-deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__container--incoming-green {
background-color: $color-conversation-green;
}
.module-message__container--incoming-indigo {
background-color: $color-conversation-indigo;
}
.module-message__container--incoming-pink {
background-color: $color-conversation-pink;
}
.module-message__container--incoming-purple {
background-color: $color-conversation-purple;
}
.module-message__container--incoming-red {
.module-message__container--outgoing-red {
background-color: $color-conversation-red;
}
.module-message__container--incoming-teal {
.module-message__container--outgoing-deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-message__container--outgoing-brown {
background-color: $color-conversation-brown;
}
.module-message__container--outgoing-pink {
background-color: $color-conversation-pink;
}
.module-message__container--outgoing-purple {
background-color: $color-conversation-purple;
}
.module-message__container--outgoing-indigo {
background-color: $color-conversation-indigo;
}
.module-message__container--outgoing-blue {
background-color: $color-conversation-blue;
}
.module-message__container--outgoing-teal {
background-color: $color-conversation-teal;
}
.module-message__container--outgoing-green {
background-color: $color-conversation-green;
}
.module-message__container--outgoing-light_green {
background-color: $color-conversation-light_green;
}
.module-message__container--outgoing-blue_grey {
background-color: $color-conversation-blue_grey;
}
.module-message__attachment-container {
background-color: $color-black;
background-color: $color-gray-95;
}
.module-message__img-border-overlay {
box-shadow: inset 0px 0px 0px 1px rgba($color-dark-30, 0.25);
box-shadow: inset 0px 0px 0px 1px $color-white-015;
}
.module-message__img-overlay {
@ -758,29 +761,29 @@ body.dark-theme {
}
.module-message__metadata__date {
color: $color-dark-30;
color: $color-white-08;
}
.module-message__metadata__date--incoming {
color: $color-white-07;
color: $color-white-08;
}
.module-message__metadata__date--with-image-no-caption {
color: $color-dark-05;
color: $color-white-08;
}
.module-message__metadata__status-icon--sending {
@include color-svg('../images/sending.svg', $color-light-35);
@include color-svg('../images/sending.svg', $color-white-08);
}
.module-message__metadata__status-icon--sent {
@include color-svg('../images/check-circle-outline.svg', $color-light-35);
@include color-svg('../images/check-circle-outline.svg', $color-white-08);
}
.module-message__metadata__status-icon--delivered {
@include color-svg('../images/double-check.svg', $color-light-35);
@include color-svg('../images/double-check.svg', $color-white-08);
}
.module-message__metadata__status-icon--read {
@include color-svg('../images/read.svg', $color-light-35);
@include color-svg('../images/read.svg', $color-white-08);
}
// When status indicators are overlaid on top of an image, they use different colors
@ -794,23 +797,14 @@ body.dark-theme {
border: 1px solid $color-dark-60;
}
.module-message__author-default-avatar--grey {
background-color: $color-conversation-grey;
}
.module-message__author-default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-message__author-default-avatar--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-message__author-default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-message__author-default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-message__author-default-avatar--pink {
background-color: $color-conversation-pink;
@ -818,12 +812,24 @@ body.dark-theme {
.module-message__author-default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-message__author-default-avatar--red {
background-color: $color-conversation-red;
.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;
@ -884,87 +890,127 @@ body.dark-theme {
// Module: Quoted Reply
.module-quote--incoming {
background-color: $color-black-04;
border-left-color: $color-black;
border-left-color: $color-conversation-grey;
background-color: $color-conversation-grey-shade;
}
.module-quote--incoming-red {
border-left-color: $color-conversation-red;
background-color: $color-conversation-red-shade;
}
.module-quote--incoming-deep_orange {
border-left-color: $color-conversation-deep_orange;
background-color: $color-conversation-deep_orange-shade;
}
.module-quote--incoming-brown {
border-left-color: $color-conversation-brown;
background-color: $color-conversation-brown-shade;
}
.module-quote--incoming-pink {
border-left-color: $color-conversation-pink;
background-color: $color-conversation-pink-shade;
}
.module-quote--incoming-purple {
border-left-color: $color-conversation-purple;
background-color: $color-conversation-purple-shade;
}
.module-quote--incoming-indigo {
border-left-color: $color-conversation-indigo;
background-color: $color-conversation-indigo-shade;
}
.module-quote--incoming-blue {
border-left-color: $color-conversation-blue;
background-color: $color-conversation-blue-shade;
}
.module-quote--incoming-teal {
border-left-color: $color-conversation-teal;
background-color: $color-conversation-teal-shade;
}
.module-quote--incoming-green {
border-left-color: $color-conversation-green;
background-color: $color-conversation-green-shade;
}
.module-quote--incoming-light_green {
border-left-color: $color-conversation-light_green;
background-color: $color-conversation-light_green-shade;
}
.module-quote--incoming-blue_grey {
border-left-color: $color-conversation-blue_grey;
background-color: $color-conversation-blue_grey-shade;
}
.module-quote--outgoing-you {
border-left-color: $color-light-35;
background-color: $color-dark-60;
}
.module-quote--outgoing-grey {
border-left-color: $color-conversation-grey;
background-color: rgba($color-conversation-grey, 0.6);
}
.module-quote--outgoing-blue {
border-left-color: $color-conversation-blue;
background-color: rgba($color-conversation-blue, 0.6);
}
.module-quote--outgoing-cyan {
border-left-color: $color-conversation-cyan;
background-color: rgba($color-conversation-cyan, 0.6);
}
.module-quote--outgoing-deep_orange {
border-left-color: $color-conversation-deep_orange;
background-color: rgba($color-conversation-deep_orange, 0.6);
}
.module-quote--outgoing-green {
border-left-color: $color-conversation-green;
background-color: rgba($color-conversation-green, 0.6);
}
.module-quote--outgoing-indigo {
border-left-color: $color-conversation-indigo;
background-color: rgba($color-conversation-indigo, 0.6);
}
.module-quote--outgoing-pink {
border-left-color: $color-conversation-pink;
background-color: rgba($color-conversation-pink, 0.6);
}
.module-quote--outgoing-purple {
border-left-color: $color-conversation-purple;
background-color: rgba($color-conversation-purple, 0.6);
.module-quote--outgoing {
border-left-color: $color-black;
background-color: $color-conversation-grey-shade;
}
.module-quote--outgoing-red {
border-left-color: $color-conversation-red;
background-color: rgba($color-conversation-red, 0.6);
background-color: $color-conversation-red-shade;
}
.module-quote--outgoing-deep_orange {
background-color: $color-conversation-deep_orange-shade;
}
.module-quote--outgoing-brown {
background-color: $color-conversation-brown-shade;
}
.module-quote--outgoing-pink {
background-color: $color-conversation-pink-shade;
}
.module-quote--outgoing-purple {
background-color: $color-conversation-purple-shade;
}
.module-quote--outgoing-indigo {
background-color: $color-conversation-indigo-shade;
}
.module-quote--outgoing-blue {
background-color: $color-conversation-blue-shade;
}
.module-quote--outgoing-teal {
border-left-color: $color-conversation-teal;
background-color: rgba($color-conversation-teal, 0.6);
background-color: $color-conversation-teal-shade;
}
.module-quote--outgoing-green {
background-color: $color-conversation-green-shade;
}
.module-quote--outgoing-light_green {
background-color: $color-conversation-light_green-shade;
}
.module-quote--outgoing-blue_grey {
background-color: $color-conversation-blue_grey-shade;
}
.module-quote__primary__author {
color: $color-dark-05;
}
.module-quote__primary__author--grey {
.module-quote__primary__author-red {
color: $color-dark-05;
}
.module-quote__primary__author--blue {
.module-quote__primary__author-deep_orange {
color: $color-dark-05;
}
.module-quote__primary__author--cyan {
.module-quote__primary__author-brown {
color: $color-dark-05;
}
.module-quote__primary__author--deep_orange {
.module-quote__primary__author-pink {
color: $color-dark-05;
}
.module-quote__primary__author--green {
.module-quote__primary__author-purple {
color: $color-dark-05;
}
.module-quote__primary__author--indigo {
.module-quote__primary__author-indigo {
color: $color-dark-05;
}
.module-quote__primary__author--pink {
.module-quote__primary__author-blue {
color: $color-dark-05;
}
.module-quote__primary__author--purple {
.module-quote__primary__author-teal {
color: $color-dark-05;
}
.module-quote__primary__author--red {
.module-quote__primary__author-green {
color: $color-dark-05;
}
.module-quote__primary__author--teal {
.module-quote__primary__author-light_green {
color: $color-dark-05;
}
.module-quote__primary__author-blue_grey {
color: $color-dark-05;
}
@ -1044,7 +1090,7 @@ body.dark-theme {
}
.module-embedded-contact__contact-method {
color: $color-dark-30;
color: $color-white-07;
}
.module-embedded-contact__contact-method--incoming {
@ -1140,23 +1186,14 @@ body.dark-theme {
background-color: $color-conversation-grey;
}
.module-contact-list-item__avatar-default--grey {
background-color: $color-conversation-grey;
}
.module-contact-list-item__avatar-default--blue {
background-color: $color-conversation-blue;
}
.module-contact-list-item__avatar-default--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-contact-list-item__avatar-default--indigo {
background-color: $color-conversation-indigo;
.module-contact-list-item__avatar-default--brown {
background-color: $color-conversation-brown;
}
.module-contact-list-item__avatar-default--pink {
background-color: $color-conversation-pink;
@ -1164,12 +1201,24 @@ body.dark-theme {
.module-contact-list-item__avatar-default--purple {
background-color: $color-conversation-purple;
}
.module-contact-list-item__avatar-default--red {
background-color: $color-conversation-red;
.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;
@ -1183,7 +1232,7 @@ body.dark-theme {
.module-conversation-header {
color: $color-dark-05;
background-color: $color-black;
background-color: $color-gray-95;
border-bottom: 1px solid $color-light-60;
}
@ -1196,20 +1245,14 @@ body.dark-theme {
color: $color-white;
}
.module-conversation-header___default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-conversation-header___default-avatar--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-conversation-header___default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-conversation-header___default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-conversation-header___default-avatar--pink {
background-color: $color-conversation-pink;
@ -1217,12 +1260,24 @@ body.dark-theme {
.module-conversation-header___default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-conversation-header___default-avatar--red {
background-color: $color-conversation-red;
.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;
@ -1258,20 +1313,14 @@ body.dark-theme {
color: $color-white;
}
.module-message-detail__contact__default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-message-detail__contact__default-avatar--cyan {
background-color: $color-conversation-cyan;
.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--green {
background-color: $color-conversation-green;
}
.module-message-detail__contact__default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-message-detail__contact__default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-message-detail__contact__default-avatar--pink {
background-color: $color-conversation-pink;
@ -1279,12 +1328,24 @@ body.dark-theme {
.module-message-detail__contact__default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-message-detail__contact__default-avatar--red {
background-color: $color-conversation-red;
.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;
@ -1381,20 +1442,14 @@ body.dark-theme {
background-color: $color-conversation-grey;
}
.module-conversation-list-item__default-avatar--blue {
background-color: $color-conversation-blue;
}
.module-conversation-list-item__default-avatar--cyan {
background-color: $color-conversation-cyan;
.module-conversation-list-item__default-avatar--red {
background-color: $color-conversation-red;
}
.module-conversation-list-item__default-avatar--deep_orange {
background-color: $color-conversation-deep_orange;
}
.module-conversation-list-item__default-avatar--green {
background-color: $color-conversation-green;
}
.module-conversation-list-item__default-avatar--indigo {
background-color: $color-conversation-indigo;
.module-conversation-list-item__default-avatar--brown {
background-color: $color-conversation-brown;
}
.module-conversation-list-item__default-avatar--pink {
background-color: $color-conversation-pink;
@ -1402,12 +1457,24 @@ body.dark-theme {
.module-conversation-list-item__default-avatar--purple {
background-color: $color-conversation-purple;
}
.module-conversation-list-item__default-avatar--red {
background-color: $color-conversation-red;
.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__status-icon--sending {
@include color-svg('../images/sending.svg', $color-light-35);

103
stylesheets/_variables.scss
View File

@ -35,11 +35,64 @@ $color-signal-blue-025: rgba($color-signal-blue, 0.25);
$color-signal-blue-050: rgba($color-signal-blue, 0.5);
$color-white: #ffffff;
$color-gray-02: #f8f9f9;
$color-gray-05: #eeefef;
$color-gray-15: #d5d6d6;
$color-gray-25: #bbbdbe;
$color-gray-45: #898a8c;
$color-gray-60: #636467;
$color-gray-75: #3d3e44;
$color-gray-85: #23252a;
$color-gray-90: #17191d;
$color-gray-95: #0f1012;
$color-black: #000000;
$color-crimson: #cc163d;
$color-vermilion: #c73800;
$color-burlap: #746c53;
$color-forest: #3b7845;
$color-wintergreen: #1c8260;
$color-teal: #067589;
$color-blue: #336ba3;
$color-indigo: #5951c8;
$color-violet: #862caf;
$color-plum: #a23474;
$color-taupe: #895d66;
$color-steel: #6b6b78;
$color-crimson-tint: #eda6ae;
$color-vermilion-tint: #eba78e;
$color-burlap-tint: #c4b997;
$color-forest-tint: #8fcc9a;
$color-wintergreen-tint: #9bcfbd;
$color-teal-tint: #a5cad5;
$color-blue-tint: #adc8e1;
$color-indigo-tint: #c2c1e7;
$color-violet-tint: #cdaddc;
$color-plum-tint: #dcb2ca;
$color-taupe-tint: #cfb5bb;
$color-steel-tint: #bebec6;
$color-crimson-shade: #8a0f29;
$color-vermilion-shade: #872600;
$color-burlap-shade: #58513c;
$color-forest-shade: #2b5934;
$color-wintergreen-shade: #36544a;
$color-teal-shade: #055968;
$color-blue-shade: #285480;
$color-indigo-shade: #4840a0;
$color-violet-shade: #6b248a;
$color-plum-shade: #881b5b;
$color-taupe-shade: #6a4e54;
$color-steel-shade: #5a5a63;
$color-white-015: rgba($color-white, 0.15);
$color-white-02: rgba($color-white, 0.2);
$color-white-04: rgba($color-white, 0.4);
$color-white-06: rgba($color-white, 0.6);
$color-white-07: rgba($color-white, 0.7);
$color-white-075: rgba($color-white, 0.75);
$color-white-08: rgba($color-white, 0.8);
$color-white-085: rgba($color-white, 0.85);
$color-light-02: #f9fafa;
$color-light-10: #eeefef;
@ -54,27 +107,55 @@ $color-dark-55: #88898c;
$color-dark-60: #797a7c;
$color-dark-70: #414347;
$color-dark-85: #1a1c20;
$color-black: #000000;
$color-black-008: rgba($color-black, 0.08);
$color-black-008-no-tranparency: #ededed;
$color-black-016-no-tranparency: #d9d9d9;
$color-black-012: rgba($color-black, 0.12);
$color-black-015: rgba($color-black, 0.15);
$color-black-02: rgba($color-black, 0.2);
$color-black-04: rgba($color-black, 0.4);
$color-black-06: rgba($color-black, 0.6);
$color-signal-blue-mix: mix($color-signal-blue-025, $color-white-04);
$color-conversation-grey: #757575;
$color-conversation-blue: #1976d2;
$color-conversation-cyan: #00838f;
$color-conversation-deep_orange: #bf360c;
$color-conversation-green: #2e7d32;
$color-conversation-indigo: #3949ab;
$color-conversation-pink: #d81b60;
$color-conversation-purple: #8e24aa;
$color-conversation-red: #d32f2f;
$color-conversation-teal: #00796b;
$color-conversation-red: $color-crimson;
$color-conversation-deep_orange: $color-vermilion;
$color-conversation-brown: $color-burlap;
$color-conversation-pink: $color-plum;
$color-conversation-purple: $color-violet;
$color-conversation-indigo: $color-indigo;
$color-conversation-blue: $color-blue;
$color-conversation-teal: $color-teal;
$color-conversation-green: $color-forest;
$color-conversation-light_green: $color-wintergreen;
$color-conversation-blue_grey: $color-taupe;
$color-conversation-grey: $color-steel;
$color-conversation-red-tint: $color-crimson-tint;
$color-conversation-deep_orange-tint: $color-vermilion-tint;
$color-conversation-brown-tint: $color-burlap-tint;
$color-conversation-pink-tint: $color-plum-tint;
$color-conversation-purple-tint: $color-violet-tint;
$color-conversation-indigo-tint: $color-indigo-tint;
$color-conversation-blue-tint: $color-blue-tint;
$color-conversation-teal-tint: $color-teal-tint;
$color-conversation-green-tint: $color-forest-tint;
$color-conversation-light_green-tint: $color-wintergreen-tint;
$color-conversation-blue_grey-tint: $color-taupe-tint;
$color-conversation-grey-tint: $color-steel-tint;
$color-conversation-red-shade: $color-crimson-shade;
$color-conversation-deep_orange-shade: $color-vermilion-shade;
$color-conversation-brown-shade: $color-burlap-shade;
$color-conversation-pink-shade: $color-plum-shade;
$color-conversation-purple-shade: $color-violet-shade;
$color-conversation-indigo-shade: $color-indigo-shade;
$color-conversation-blue-shade: $color-blue-shade;
$color-conversation-teal-shade: $color-teal-shade;
$color-conversation-green-shade: $color-forest-shade;
$color-conversation-light_green-shade: $color-wintergreen-shade;
$color-conversation-blue_grey-shade: $color-taupe-shade;
$color-conversation-grey-shade: $color-steel-shade;
// Old colors

1
stylesheets/manifest.scss
View File

@ -18,7 +18,6 @@
// Themes
@import 'theme_dark';
@import 'ios';
// New CSS
@import 'modules';

86
ts/components/conversation/EmbeddedContact.md
View File

@ -22,10 +22,10 @@ const contact = {
onSendMessage: () => console.log('onSendMessage'),
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -34,6 +34,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -43,7 +44,7 @@ const contact = {
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -53,6 +54,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -84,19 +86,24 @@ const contact = {
},
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li><Message
authorColor="green"
<util.ConversationContext theme={util.theme}>
<li>
<Message
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}/></li>
<li><Message
contact={contact}/>
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
timestamp={Date.now()}
contact={contact}/></li>
contact={contact}/>
</li>
</util.ConversationContext>;
```
@ -120,10 +127,10 @@ const contact = {
},
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
<util.ConversationContext theme={util.theme} type="group">
<li>
<Message
authorColor="green"
conversationColor="green"
conversationType="group"
authorName="Mr. Fire"
authorAvatarPath={util.gifObjectUrl}
@ -135,7 +142,7 @@ const contact = {
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
authorName="Mr. Fire"
conversationType="group"
@ -147,6 +154,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
conversationType="group"
authorName="Mr. Fire"
@ -179,10 +187,10 @@ const contact = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -191,6 +199,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -200,7 +209,7 @@ const contact = {
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -210,6 +219,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -239,10 +249,10 @@ const contact = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -251,6 +261,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -260,7 +271,7 @@ const contact = {
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -270,6 +281,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -301,10 +313,10 @@ const contact = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -313,6 +325,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -322,7 +335,7 @@ const contact = {
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -332,6 +345,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -358,10 +372,10 @@ const contact = {
],
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -370,6 +384,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -379,7 +394,7 @@ const contact = {
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -389,6 +404,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -404,10 +420,10 @@ const contact = {
```jsx
const contact = {};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -416,6 +432,7 @@ const contact = {};
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -425,7 +442,7 @@ const contact = {};
</li>
<li>
<Message
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -435,6 +452,7 @@ const contact = {};
</li>
<li>
<Message
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -483,11 +501,11 @@ const contactWithoutAccount = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
text="I want to introduce you to Someone..."
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -497,6 +515,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -507,7 +526,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
authorColor="green"
conversationColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -517,6 +536,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -527,7 +547,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -538,6 +558,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -549,7 +570,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
authorColor="green"
conversationColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -560,6 +581,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
direction="outgoing"
collapseMetadata
status="delivered"

45
ts/components/conversation/ExpireTimer.md
View File

@ -1,11 +1,12 @@
### Countdown at different rates
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="cyan"
direction="incoming"
conversationColor="blue"
direction="outgoing"
status="delivered"
text="10 second timer"
i18n={util.i18n}
timestamp={Date.now() + 10 * 1000}
@ -15,8 +16,9 @@
</li>
<li>
<Message
direction="incoming"
authorColor="cyan"
direction="outgoing"
status="delivered"
conversationColor="blue"
text="30 second timer"
i18n={util.i18n}
timestamp={Date.now() + 30 * 1000}
@ -26,8 +28,9 @@
</li>
<li>
<Message
authorColor="cyan"
direction="incoming"
conversationColor="blue"
direction="outgoing"
status="delivered"
text="1 minute timer"
i18n={util.i18n}
timestamp={Date.now() + 55 * 1000}
@ -37,8 +40,9 @@
</li>
<li>
<Message
authorColor="cyan"
direction="incoming"
conversationColor="blue"
direction="outgoing"
status="delivered"
text="5 minute timer"
i18n={util.i18n}
timestamp={Date.now() + 5 * 60 * 1000}
@ -52,10 +56,10 @@
### Timer calculations
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<util.ConversationContext theme={util.theme}>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="Full timer"
i18n={util.i18n}
@ -66,6 +70,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="Full timer"
@ -77,7 +82,7 @@
</li>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="55 timer"
i18n={util.i18n}
@ -88,6 +93,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="55 timer"
@ -99,7 +105,7 @@
</li>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="30 timer"
i18n={util.i18n}
@ -110,6 +116,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="30 timer"
@ -121,7 +128,7 @@
</li>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="5 timer"
i18n={util.i18n}
@ -132,6 +139,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="5 timer"
@ -143,7 +151,7 @@
</li>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="Expired timer"
i18n={util.i18n}
@ -154,6 +162,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="Expired timer"
@ -165,7 +174,7 @@
</li>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="Expiration is too far away"
i18n={util.i18n}
@ -176,6 +185,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="Expiration is too far away"
@ -187,7 +197,7 @@
</li>
<li>
<Message
authorColor="cyan"
conversationColor="blue"
direction="incoming"
text="Already expired"
i18n={util.i18n}
@ -198,6 +208,7 @@
</li>
<li>
<Message
conversationColor="blue"
direction="outgoing"
status="delivered"
text="Already expired"

358
ts/components/conversation/Message.md
View File

File diff suppressed because it is too large Load Diff

23
ts/components/conversation/Message.tsx
View File

@ -66,7 +66,7 @@ export interface Props {
authorProfileName?: string;
/** Note: this should be formatted for display */
authorPhoneNumber: string;
authorColor: Color;
conversationColor: Color;
conversationType: 'group' | 'direct';
attachment?: Attachment;
quote?: {
@ -76,7 +76,6 @@ export interface Props {
authorPhoneNumber: string;
authorProfileName?: string;
authorName?: string;
authorColor: Color;
onClick?: () => void;
referencedMessageNotFound: boolean;
};
@ -551,7 +550,13 @@ export class Message extends React.Component<Props, State> {
}
public renderQuote() {
const { conversationType, direction, i18n, quote } = this.props;
const {
conversationType,
conversationColor,
direction,
i18n,
quote,
} = this.props;
if (!quote) {
return null;
@ -570,7 +575,7 @@ export class Message extends React.Component<Props, State> {
authorPhoneNumber={quote.authorPhoneNumber}
authorProfileName={quote.authorProfileName}
authorName={quote.authorName}
authorColor={quote.authorColor}
conversationColor={conversationColor}
referencedMessageNotFound={quote.referencedMessageNotFound}
isFromMe={quote.isFromMe}
withContentAbove={withContentAbove}
@ -632,7 +637,7 @@ export class Message extends React.Component<Props, State> {
authorPhoneNumber,
authorProfileName,
authorAvatarPath,
authorColor,
conversationColor,
collapseMetadata,
conversationType,
direction,
@ -658,7 +663,7 @@ export class Message extends React.Component<Props, State> {
<div
className={classNames(
'module-message__author-default-avatar',
`module-message__author-default-avatar--${authorColor}`
`module-message__author-default-avatar--${conversationColor}`
)}
>
<div className="module-message__author-default-avatar__label">
@ -864,7 +869,7 @@ export class Message extends React.Component<Props, State> {
public render() {
const {
authorPhoneNumber,
authorColor,
conversationColor,
direction,
id,
timestamp,
@ -893,8 +898,8 @@ export class Message extends React.Component<Props, State> {
className={classNames(
'module-message__container',
`module-message__container--${direction}`,
direction === 'incoming'
? `module-message__container--incoming-${authorColor}`
direction === 'outgoing'
? `module-message__container--outgoing-${conversationColor}`
: null
)}
>

8
ts/components/conversation/MessageDetail.md
View File

@ -6,7 +6,7 @@
disableMenu: true,
direction: 'incoming',
timestamp: Date.now(),
authorColor: 'grey',
conversationColor: 'pink',
text:
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
onDelete: () => console.log('onDelete'),
@ -31,7 +31,7 @@
disableMenu: true,
direction: 'outgoing',
timestamp: Date.now(),
authorColor: 'grey',
conversationColor: 'pink',
text:
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
status: 'read',
@ -68,7 +68,7 @@
disableMenu: true,
direction: 'outgoing',
timestamp: Date.now(),
authorColor: 'grey',
conversationColor: 'pink',
text:
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
status: 'sending',
@ -94,7 +94,7 @@
disableMenu: true,
direction: 'outgoing',
timestamp: Date.now(),
authorColor: 'grey',
conversationColor: 'pink',
text:
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
status: 'error',

266
ts/components/conversation/Quote.md
View File

File diff suppressed because it is too large Load Diff

14
ts/components/conversation/Quote.tsx
View File

@ -15,7 +15,7 @@ interface Props {
authorPhoneNumber: string;
authorProfileName?: string;
authorName?: string;
authorColor: Color;
conversationColor: Color;
i18n: Localizer;
isFromMe: boolean;
isIncoming: boolean;
@ -254,7 +254,6 @@ export class Quote extends React.Component<Props> {
authorProfileName,
authorPhoneNumber,
authorName,
authorColor,
i18n,
isFromMe,
isIncoming,
@ -264,7 +263,6 @@ export class Quote extends React.Component<Props> {
<div
className={classNames(
'module-quote__primary__author',
!isFromMe ? `module-quote__primary__author--${authorColor}` : null,
isIncoming ? 'module-quote__primary__author--incoming' : null
)}
>
@ -320,8 +318,7 @@ export class Quote extends React.Component<Props> {
public render() {
const {
authorColor,
isFromMe,
conversationColor,
isIncoming,
onClick,
referencedMessageNotFound,
@ -345,10 +342,9 @@ export class Quote extends React.Component<Props> {
className={classNames(
'module-quote',
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
!isIncoming && !isFromMe
? `module-quote--outgoing-${authorColor}`
: null,
!isIncoming && isFromMe ? 'module-quote--outgoing-you' : null,
isIncoming
? `module-quote--incoming-${conversationColor}`
: `module-quote--outgoing-${conversationColor}`,
!onClick ? 'module-quote--no-click' : null,
withContentAbove ? 'module-quote--with-content-above' : null,
referencedMessageNotFound

80
ts/components/conversation/Timestamp.md
View File

@ -21,8 +21,9 @@ function getDecember1159() {
<util.ConversationContext theme={util.theme}>
<li>
<Message
direction="incoming"
authorColor="red"
direction="outgoing"
status="delivered"
conversationColor="red"
timestamp={Date.now() - 500}
text="500ms ago - all below 1 minute are 'now'"
i18n={util.i18n}
@ -30,8 +31,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 5 * 1000}
text="Five seconds ago"
i18n={util.i18n}
@ -39,8 +41,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 30 * 1000}
text="30 seconds ago"
i18n={util.i18n}
@ -48,8 +51,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="red"
direction="outgoing"
status="delivered"
conversationColor="red"
timestamp={Date.now() - 60 * 1000}
text="One minute ago - in minutes"
i18n={util.i18n}
@ -57,8 +61,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 30 * 60 * 1000}
text="30 minutes ago"
i18n={util.i18n}
@ -66,8 +71,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 45 * 60 * 1000}
text="45 minutes ago (used to round up to 1 hour with moment)"
i18n={util.i18n}
@ -75,8 +81,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="red"
direction="outgoing"
status="delivered"
conversationColor="red"
timestamp={Date.now() - 60 * 60 * 1000}
text="One hour ago - in hours"
i18n={util.i18n}
@ -84,8 +91,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={get1201()}
text="12:01am today"
i18n={util.i18n}
@ -93,8 +101,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="red"
direction="outgoing"
status="delivered"
conversationColor="red"
timestamp={getYesterday1159()}
text="11:59pm yesterday - adds day name"
i18n={util.i18n}
@ -102,8 +111,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 24 * 60 * 60 * 1000}
text="24 hours ago"
i18n={util.i18n}
@ -111,8 +121,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
text="Two days ago"
i18n={util.i18n}
@ -120,8 +131,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="red"
direction="outgoing"
status="delivered"
conversationColor="red"
timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
text="Seven days ago - adds month"
i18n={util.i18n}
@ -129,8 +141,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
text="Thirty days ago"
i18n={util.i18n}
@ -138,8 +151,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={getJanuary1201()}
text="January 1st at 12:01am"
i18n={util.i18n}
@ -147,8 +161,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="red"
direction="outgoing"
status="delivered"
conversationColor="red"
timestamp={getDecember1159()}
text="December 31st at 11:59pm - adds year"
i18n={util.i18n}
@ -156,8 +171,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="incoming"
authorColor="teal"
direction="outgoing"
status="delivered"
conversationColor="teal"
timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
text="One year ago"
i18n={util.i18n}

7
ts/styleguide/ConversationContext.tsx
View File

@ -7,7 +7,6 @@ interface Props {
*/
theme: 'light-theme' | 'dark-theme';
type: 'private' | 'group';
ios: boolean;
}
/**
@ -16,12 +15,10 @@ interface Props {
*/
export class ConversationContext extends React.Component<Props> {
public render() {
const { theme, type, ios } = this.props;
const { theme, type } = this.props;
return (
<div
className={classNames(theme || 'light-theme', ios ? 'ios-theme' : null)}
>
<div className={classNames(theme || 'light-theme')}>
<div className={classNames('conversation', type || 'private')}>
<div className="discussion-container" style={{ padding: '0.5em' }}>
<ul className="message-list">{this.props.children}</ul>

3
ts/styleguide/StyleGuideUtil.ts
View File

@ -82,7 +82,6 @@ export {
const query = window.location.search.replace(/^\?/, '');
const urlOptions = QueryString.parse(query);
const theme = urlOptions.theme || 'light-theme';
const ios = urlOptions.ios || false;
const locale = urlOptions.locale || 'en';
// @ts-ignore
@ -92,7 +91,7 @@ import localeMessages from '../../_locales/en/messages.json';
import { setup } from '../../js/modules/i18n';
const i18n = setup(locale, localeMessages);
export { theme, ios, locale, i18n };
export { theme, locale, i18n };
// Telling Lodash to relinquish _ for use by underscore
// @ts-ignore

50
ts/util/migrateColor.ts
View File

@ -22,22 +22,28 @@ type OldColor =
| 'yellow';
type NewColor =
| 'blue'
| 'cyan'
| 'red'
| 'deep_orange'
| 'grey'
| 'green'
| 'indigo'
| 'brown'
| 'pink'
| 'purple'
| 'red'
| 'teal';
| 'indigo'
| 'blue'
| 'teal'
| 'green'
| 'light_green'
| 'blue_grey'
| 'grey';
export function migrateColor(color: OldColor): NewColor {
switch (color) {
// These colors no longer exist
case 'brown':
return 'red';
case 'orange':
case 'amber':
return 'deep_orange';
case 'yellow':
return 'brown';
case 'deep_purple':
return 'purple';
@ -45,29 +51,25 @@ export function migrateColor(color: OldColor): NewColor {
case 'light_blue':
return 'blue';
case 'blue_grey':
return 'cyan';
case 'cyan':
return 'teal';
case 'light_green':
case 'lime':
return 'green';
case 'orange':
case 'amber':
case 'yellow':
return 'deep_orange';
return 'light_green';
// These can stay as they are
case 'blue':
case 'cyan':
case 'red':
case 'deep_orange':
case 'green':
case 'grey':
case 'indigo':
case 'brown':
case 'pink':
case 'purple':
case 'red':
case 'indigo':
case 'blue':
case 'teal':
case 'green':
case 'light_green':
case 'blue_grey':
case 'grey':
return color;
// Can uncomment this to ensure that we've covered all potential cases