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

Merge branch 'theming_main_panel' into theming

Browse Source
pull/2521/head
William Grant 3 years ago
parent f505427bee dd58d29450
commit 27a05a4e00
37 changed files with 732 additions and 940 deletions
Show Stats Download Patch File Download Diff File

8
stylesheets/_conversation.scss
Unescape Escape View File

@ -16,10 +16,10 @@
}
.group-invitation {
background: var(--color-received-message-background);
background-color: var(--message-bubbles-received-background-color);
&.invitation-outgoing {
background: var(--color-sent-message-background);
background-color: var(--message-bubbles-sent-background-color);
align-self: flex-end;
}
@ -62,12 +62,12 @@
.group-invitation {
.group-details {
color: var(--color-received-message-text);
color: var(--message-bubbles-received-text-color);
}
}
.group-invitation.invitation-outgoing {
.group-details {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
}
}

67
stylesheets/_index.scss
Unescape Escape View File

@ -80,70 +80,3 @@
.left-pane-wrapper {
flex: 1;
}
.hint {
margin: 10px;
padding: 1em;
border-radius: $border-radius;
color: white;
border: 2px dashed white;
h3 {
margin-top: 5px;
}
&.firstRun {
position: absolute;
top: 0;
left: 302px;
width: 225px;
&:before,
&:after {
content: ' ';
display: block;
position: absolute;
top: 8px;
left: -35px;
width: 0;
height: 0;
border: solid 10px white;
border-color: transparent white transparent transparent;
transform: scaleX(2.5) scaleY(0.75);
}
&:after {
border-color: transparent var(--color-dark-blue-color) transparent transparent;
left: -30px;
}
}
}
.contact.placeholder {
position: absolute;
top: 50px;
left: 0;
background: transparent;
color: white;
border: 2px dashed white;
overflow: visible;
p {
color: white;
}
&:before,
&:after {
content: ' ';
display: block;
position: absolute;
top: -35px;
left: 15px;
width: 0;
height: 0;
border: solid 10px white;
border-color: transparent transparent white transparent;
transform: scaleY(2.5) scaleX(0.75);
}
&:after {
border-color: transparent transparent var(--color-dark-blue-color) transparent;
top: -30px;
}
}

210
stylesheets/_modules.scss
Unescape Escape View File

@ -104,7 +104,7 @@
white-space: nowrap;
text-overflow: clip;
color: var(--color-darkest-gray-color);
color: var(--black-color);
}
.module-message__generic-attachment__text {
@ -115,7 +115,6 @@
}
.module-message__generic-attachment__file-name {
color: var(--color-darkest-gray-color);
font-size: 14px;
line-height: 18px;
font-weight: 300;
@ -126,13 +125,9 @@
white-space: nowrap;
text-overflow: ellipsis;
}
.module-message__generic-attachment__file-size,
.module-message__generic-attachment__file-name--outgoing,
.module-message__generic-attachment__file-size--incoming,
.module-message__generic-attachment__file-size--outgoing,
.module-message__generic-attachment__file-name--incoming {
color: var(--color-text);
.module-message__generic-attachment__file-name,
.module-message__generic-attachment__file-size {
color: var(--text-primary-color);
}
.module-message__generic-attachment__file-size {
@ -143,6 +138,18 @@
white-space: nowrap;
}
.module-message__generic-attachment__file-name--incoming,
.module-message__generic-attachment__file-size--incoming,
.module-message__link-preview--incoming {
color: var(--message-bubbles-received-text-color);
}
.module-message__generic-attachment__file-name--outgoing,
.module-message__generic-attachment__file-size--outgoing,
.module-message__link-preview--outgoing {
color: var(--message-bubbles-sent-text-color);
}
.module-message__link-preview {
cursor: pointer;
border-top-left-radius: $session_message-container-border-radius;
@ -151,11 +158,9 @@
.module-message__link-preview__content {
padding: 8px;
background-color: var(--color-white-color);
display: flex;
flex-direction: row;
align-items: flex-start;
border: 1px solid var(--color-lighter-black-color);
}
.module-message__link-preview__image_container {
@ -200,7 +205,7 @@
height: 32px;
width: 32px;
border-radius: 50%;
background-color: var(--color-lighter-gray-color);
background-color: var(--message-link-preview-background-color);
}
.module-message__link-preview__text--with-icon {
@ -208,9 +213,8 @@
}
.module-message__link-preview__title {
color: var(--color-darkest-gray-color);
font-size: 16px;
font-weight: 300;
font-weight: 500;
letter-spacing: 0.15px;
line-height: 22px;
@ -222,13 +226,12 @@
.module-message__link-preview__location {
margin-top: 4px;
color: var(--color-gray-color);
font-size: 12px;
height: 16px;
letter-spacing: 0.4px;
line-height: 16px;
text-transform: uppercase;
}
.module-conversation__user,
.module-message__author {
margin-top: var(--margins-sm);
@ -241,6 +244,7 @@
white-space: nowrap;
text-overflow: ellipsis;
}
.module-conversation__user__profile-name,
.module-message__author__profile-name {
font-style: italic;
@ -255,7 +259,7 @@
flex-direction: row;
align-items: center;
color: var(--color-gray-color);
color: var(--conversation-tab-text-color);
}
.module-contact-list-item--with-click-handler {
@ -347,8 +351,7 @@
}
.module-conversation-header__expiration__clock-icon {
// TODO Theming update
@include color-svg('../images/timer.svg', var(--color-gray-color));
@include color-svg('../images/timer.svg', var(--button-icon-stroke-color));
height: 20px;
width: 20px;
display: inline-block;
@ -389,19 +392,11 @@
.module-message-detail__delete-button-container {
text-align: center;
margin-top: 10px;
}
.module-message-detail__delete-button {
@include button-reset;
background-color: var(--danger-color);
color: var(--color-white-color);
box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7);
border-radius: 5px;
border: solid 1px var(--color-light-gray-color);
cursor: pointer;
margin: 1em auto;
padding: 1em;
.session-button {
width: 160px;
margin: 1em auto;
}
}
.module-message-detail__contact-container {
@ -494,7 +489,7 @@
}
.module-document-list-item--with-separator {
border-bottom: 1px solid var(--color-lightest-gray-color);
border-bottom: 1px solid var(--border-color);
}
.module-document-list-item__content {
@ -511,7 +506,7 @@
width: 48px;
height: 48px;
@include color-svg('../images/file.svg', var(--color-light-gray-color));
@include color-svg('../images/file.svg', var(--button-icon-stroke-color));
}
.module-document-list-item__metadata {
@ -547,7 +542,7 @@
height: 94px;
width: 94px;
cursor: pointer;
background-color: var(--color-lighter-gray-color);
background-color: var(--message-link-preview-background-color);
margin-inline-end: 4px;
margin-bottom: 4px;
position: relative;
@ -568,7 +563,7 @@
}
.module-media-grid-item__icon-image {
@include color-svg('../images/image.svg', var(--color-light-gray-color));
@include color-svg('../images/image.svg', var(--button-icon-stroke-color));
}
.module-media-grid-item__image-container {
@ -585,8 +580,12 @@
width: 42px;
height: 42px;
background-color: var(--color-white-color);
background-color: var(--chat-buttons-background-color);
border-radius: 21px;
&:hover {
background-color: var(--chat-buttons-background-hover-color);
}
}
.module-media-grid-item__play-overlay {
@ -597,15 +596,15 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', var(--primary-color));
@include color-svg('../images/play.svg', var(--chat-buttons-icon-color));
}
.module-media-grid-item__icon-video {
@include color-svg('../images/movie.svg', var(--color-light-gray-color));
@include color-svg('../images/movie.svg', var(--button-icon-stroke-color));
}
.module-media-grid-item__icon-generic {
@include color-svg('../images/file.svg', var(--color-light-gray-color));
@include color-svg('../images/file.svg', var(--button-icon-stroke-color));
}
/* Module: Empty State*/
@ -616,7 +615,6 @@
align-items: center;
flex-grow: 1;
font-size: 28px;
color: var(--color-light-gray-color);
}
// Module: Conversation List Item
@ -663,8 +661,6 @@
min-width: 16px;
line-height: 16px;
border-radius: 8px;
// TODO Theming Should we remove this?
box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
}
.module-conversation-list-item__content {
@ -772,14 +768,15 @@
}
.module-image__border-overlay--dark {
background-color: var(--color-light-black-color);
// TODO Theming - Is this correct?
background-color: var(--message-link-preview-background-color);
}
.module-image__loading-placeholder {
display: inline-flex;
flex-direction: row;
align-items: center;
background-color: var(--color-lighter-black-color);
background-color: var(--message-link-preview-background-color);
}
.module-image__image {
@ -791,12 +788,13 @@
}
}
// NOTE This isn't currently used anywhere
.module-image__bottom-overlay {
height: 48px;
background-image: linear-gradient(
to bottom,
var(--color-transparent-color),
/* TODO does this work */ var(--color-transparent-color) 9%,
var(--color-transparent-color) 9%,
rgba(0, 0, 0, 0.6)
);
position: absolute;
@ -814,8 +812,13 @@
width: 48px;
height: 48px;
background-color: var(--color-white-color);
background-color: var(--chat-buttons-background-color);
border-radius: 24px;
z-index: 1;
&:hover {
background-color: var(--chat-buttons-background-hover-color);
}
}
.module-image__play-overlay__icon {
@ -826,7 +829,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/play.svg', var(--primary-color));
@include color-svg('../images/play.svg', var(--chat-buttons-icon-color));
}
.module-image__text-container {
@ -837,7 +840,7 @@
bottom: 0;
z-index: 2;
color: var(--color-white-color);
color: var(--white-color);
font-size: 20px;
font-weight: normal;
@ -969,7 +972,7 @@
// Module: Attachments
.module-attachments {
border-top: 1px solid var(--color-lighter-black-color);
border-top: 1px solid var(--border-color);
}
.module-attachments__header {
@ -987,7 +990,7 @@
height: 20px;
z-index: 2;
@include color-svg('../images/x-16.svg', var(--color-black-color));
@include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
}
.module-attachments__rail {
@ -1010,8 +1013,8 @@
display: inline-block;
position: relative;
border-radius: 4px;
box-shadow: inset 0px 0px 0px 1px var(--color-lighter-black-color);
background-color: var(--color-lighter-gray-color);
box-shadow: inset 0px 0px 0px 1px var(--border-color);
background-color: var(--message-link-preview-background-color);
vertical-align: middle;
}
@ -1023,7 +1026,7 @@
width: 16px;
height: 16px;
z-index: 2;
@include color-svg('../images/x-16.svg', var(--color-black-color));
@include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
}
.module-staged-generic-attachment__icon {
@ -1059,7 +1062,7 @@
white-space: nowrap;
text-overflow: clip;
color: var(--color-darkest-gray-color);
color: var(--black-color);
}
.module-staged-generic-attachment__filename {
@ -1067,7 +1070,7 @@
margin-top: 5px;
text-align: center;
font-family: $session-font-default;
font-family: var(--font-default);
font-size: 14px;
overflow: hidden;
@ -1079,7 +1082,7 @@
}
// Module: Caption Editor
// TODO Theming We don't seem to use this can we delete?
.module-caption-editor {
background-color: rgba(0, 0, 0, 0.8);
z-index: 20;
@ -1110,9 +1113,8 @@
height: 30px;
z-index: 2;
// the background of the lightbox is dark
@include color-svg('../images/x-16.svg', white);
@include color-svg('../images/x-16.svg', var(--white-color));
}
.module-caption-editor__media-container {
flex-grow: 1;
flex-shrink: 1;
@ -1121,7 +1123,6 @@
overflow: hidden;
height: 100%;
}
.module-caption-editor__image {
width: 100%;
height: 100%;
@ -1146,12 +1147,13 @@
flex-grow: 1;
flex-shrink: 1;
}
// Module: Staged Placeholder Attachment
.module-staged-placeholder-attachment {
margin: 1px;
border-radius: 4px;
border: 1px solid var(--color-light-gray-color);
border: 1px solid var(--border-color);
height: 120px;
width: 120px;
display: inline-block;
@ -1160,7 +1162,7 @@
position: relative;
&:hover {
background: var(--color-lighter-gray-color);
background-color: var(--background-secondary-color);
}
}
@ -1174,7 +1176,7 @@
height: 36px;
width: 36px;
@include color-svg('../images/plus-36.svg', var(--color-light-gray-color));
@include color-svg('../images/plus-36.svg', var(--button-icon-stroke-color));
}
// Module: Staged Link Preview
@ -1188,20 +1190,18 @@
min-height: 65px;
margin: var(--margins-xs);
}
.module-staged-link-preview--is-loading {
align-items: center;
justify-content: center;
}
.module-staged-link-preview__loading {
color: var(--color-text);
color: var(--text-primary-color);
font-size: 14px;
text-align: center;
flex-grow: 1;
flex-shrink: 1;
}
.module-staged-link-preview__icon-container {
margin-inline-end: 8px;
padding: var(--margins-sm);
@ -1211,8 +1211,7 @@
padding: var(--margins-sm);
}
.module-staged-link-preview__title {
color: var(--color-darkest-gray-color);
font-weight: 300;
font-weight: 500;
font-size: 14px;
line-height: 18px;
@ -1223,7 +1222,6 @@
}
.module-staged-link-preview__location {
margin-top: 4px;
color: var(--color-gray-color);
font-size: var(--font-size-xs);
height: 16px;
letter-spacing: 0.25px;
@ -1238,7 +1236,7 @@
height: 16px;
width: 16px;
@include color-svg('../images/x-16.svg', var(--color-gray-color));
@include color-svg('../images/x-16.svg', var(--button-icon-stroke-color));
}
// Module: Left Pane
@ -1253,3 +1251,77 @@
.module-left-pane__virtual-list {
outline: none;
}
// TODO Theming - Needs Improvement
// Module H5AudioPlayer
.module-message__container--outgoing {
.rhap_container {
.rhap_play-pause-button,
.session-button {
color: var(--message-bubbles-sent-text-color);
&:hover {
color: var(--message-bubbles-sent-text-color);
}
}
}
.rhap_volume-button {
color: var(--message-bubbles-sent-text-color);
}
.rhap_time {
color: var(--message-bubbles-sent-text-color);
}
.rhap_progress-bar {
background-color: var(--button-icon-stroke-color);
}
.rhap_progress-filled {
background-color: var(--button-icon-stroke-hover-color);
}
.rhap_download-progress {
background-color: var(--button-icon-stroke-hover-color);
}
.rhap_progress-indicator {
background: var(--primary-color);
}
}
.module-message__container--incoming {
.rhap_container {
.rhap_play-pause-button,
.session-button {
color: var(--message-bubbles-received-text-color);
&:hover {
color: var(--message-bubbles-received-text-color);
}
}
}
.rhap_volume-button {
color: var(--message-bubbles-received-text-color);
}
.rhap_time {
color: var(--message-bubbles-received-text-color);
}
.rhap_progress-bar {
background-color: var(--button-icon-stroke-color);
}
.rhap_progress-filled {
background-color: var(--button-icon-stroke-hover-color);
}
.rhap_download-progress {
background-color: var(--button-icon-stroke-hover-color);
}
.rhap_progress-indicator {
background: var(--primary-color);
}
}

432
stylesheets/_quote.scss
Unescape Escape View File

@ -10,275 +10,233 @@
border-left-width: 4px;
border-left-style: solid;
/* Primary */
&__primary {
flex-grow: 1;
padding-inline-start: 8px;
padding-inline-end: 8px;
max-width: 100%;
}
&__primary__profile-name {
font-style: italic;
}
&__primary__type-label {
border-color: var(--color-text);
font-style: italic;
font-size: var(--font-size-sm);
line-height: 18px;
color: var(--message-bubbles-received-text-color);
border-color: var(--message-bubbles-received-text-color);
}
}
&__primary__author {
font-size: var(--font-size-sm);
font-weight: bold;
line-height: 18px;
margin-bottom: 5px;
// This is related to the quote logic inside messages
.module-quote {
&--outgoing {
.module-quote__primary__author {
color: var(--color-sent-message-text);
font-weight: bold;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--message-bubbles-received-text-color);
.module-contact-name {
font-weight: bold;
}
.module-contact-name {
font-weight: bold;
}
.module-quote__primary__text {
color: var(--color-sent-message-text);
}
&__primary__text {
font-size: 14px;
line-height: 18px;
text-align: start;
a {
color: var(--color-sent-message-text);
}
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
color: var(--message-bubbles-received-text-color);
a {
color: var(--message-bubbles-received-text-color);
}
}
&__primary__filename-label {
font-size: 12px;
}
&--incoming {
.module-quote__primary__author {
color: var(--color-received-message-text);
font-weight: bold;
.module-contact-name {
font-weight: bold;
/* Icons */
&__icon-container {
flex: initial;
min-width: 54px;
width: 54px;
max-height: 54px;
position: relative;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
&__circle-background {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
border-radius: 50%;
background-color: var(--chat-buttons-background-color);
&:hover {
background-color: var(--chat-buttons-background-hover-color);
}
}
.module-quote__primary__text {
color: var(--color-received-message-text);
&__icon {
width: 24px;
height: 24px;
a {
color: var(--color-received-message-text);
&--file {
@include color-svg('../images/file.svg', var(--button-icon-stroke-color));
}
&--image {
@include color-svg('../images/image.svg', var(--button-icon-stroke-color));
}
&--microphone {
@include color-svg('../images/microphone.svg', var(--button-icon-stroke-color));
}
&--play {
@include color-svg('../images/play.svg', var(--chat-buttons-icon-color));
}
&--movie {
@include color-svg('../images/movie.svg', var(--button-icon-stroke-color));
}
}
}
}
.module-quote__icon-container__icon--file {
@include color-svg('../images/file.svg', var(--primary-color));
}
.module-quote__icon-container__icon--image {
@include color-svg('../images/image.svg', var(--primary-color));
}
.module-quote__icon-container__icon--microphone {
@include color-svg('../images/microphone.svg', var(--primary-color));
}
.module-quote__icon-container__icon--play {
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-quote__icon-container__icon--movie {
@include color-svg('../images/movie.svg', var(--primary-color));
}
.module-quote__generic-file__text {
color: var(--color-lighter-gray-color);
}
.module-quote__reference-warning {
background-color: var(--color-darkest-black-color);
}
.module-quote__reference-warning__icon {
@include color-svg('../images/broken-link.svg', var(--color-light-gray-color));
}
.module-quote__reference-warning__text {
color: var(--color-lighter-gray-color);
}
.module-quote-container {
margin-bottom: 5px;
margin-top: 10px;
padding-left: 10px;
}
.module-quote--no-click {
cursor: auto;
}
.module-quote__primary {
flex-grow: 1;
padding-inline-start: 8px;
padding-inline-end: 8px;
max-width: 100%;
}
.module-quote__primary__author {
font-size: var(--font-size-sm);
line-height: 18px;
font-weight: 300;
color: var(--color-darkest-gray-color);
margin-bottom: 5px;
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.module-quote__primary__profile-name {
font-style: italic;
}
.module-quote__primary__text {
font-size: 14px;
line-height: 18px;
text-align: start;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
white-space: pre-wrap;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.module-quote__primary__type-label {
font-style: italic;
color: var(--color-darkest-gray-color);
font-size: var(--font-size-sm);
line-height: 18px;
}
.module-quote__primary__filename-label {
font-size: 12px;
}
.module-quote__close-container {
position: absolute;
top: 4px;
right: 4px;
height: 16px;
width: 16px;
background-color: rgba(255, 255, 255, 0.75);
border-radius: 50%;
}
/* Generic Files */
&__generic {
&-file {
display: flex;
flex-direction: row;
align-items: center;
}
&-file__icon {
background: url('../images/file-gradient.svg');
background-size: 75%;
background-repeat: no-repeat;
height: 28px;
width: 36px;
margin-inline-start: -4px;
margin-inline-end: -6px;
margin-bottom: 5px;
}
&-file__text {
font-size: 14px;
line-height: 18px;
color: var(--message-bubbles-received-text-color);
max-width: calc(100% - 26px);
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.module-quote__close-button {
width: 100%;
height: 100%;
cursor: pointer;
@include color-svg('../images/x.svg', var(--color-gray-color));
}
/* Reference Warning */
&__reference {
&-warning {
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--message-link-preview-background-color);
padding-inline-start: 8px;
padding-inline-end: 8px;
margin-inline-end: 8px;
}
.module-quote__icon-container {
flex: initial;
min-width: 54px;
width: 54px;
max-height: 54px;
position: relative;
&-warning__icon {
height: 16px;
width: 16px;
@include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color));
}
img {
width: 100%;
height: 100%;
object-fit: cover;
&-warning__text {
margin-inline-start: 6px;
color: var(--message-bubbles-received-text-color);
font-size: var(--font-size-sm);
line-height: 18px;
}
}
&__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
/* Misc */
&--no-click {
cursor: auto;
}
}
.module-quote__icon-container__circle-background {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
width: 32px;
border-radius: 50%;
background-color: var(--color-white-color);
}
.module-quote__icon-container__icon {
width: 24px;
height: 24px;
&--file {
@include color-svg('../images/file.svg', var(--primary-color));
}
&--image {
@include color-svg('../images/image.svg', var(--primary-color));
}
&--microphone {
@include color-svg('../images/microphone.svg', var(--primary-color));
}
&--play {
@include color-svg('../images/play.svg', var(--primary-color));
}
&--movie {
@include color-svg('../images/movie.svg', var(--primary-color));
}
}
/* Outgoing messages */
.module-quote--outgoing {
color: var(--message-bubbles-sent-text-color);
.module-quote {
&__primary__type-label {
color: var(--message-bubbles-sent-text-color);
border-color: var(--message-bubbles-sent-text-color);
}
&__primary__author {
color: var(--message-bubbles-sent-text-color);
}
&__primary__text {
color: var(--message-bubbles-sent-text-color);
.module-quote__generic {
&-file {
display: flex;
flex-direction: row;
align-items: center;
}
&-file__icon {
background: url('../images/file-gradient.svg');
background-size: 75%;
background-repeat: no-repeat;
height: 28px;
width: 36px;
margin-inline-start: -4px;
margin-inline-end: -6px;
margin-bottom: 5px;
}
&-file__text {
font-size: 14px;
line-height: 18px;
color: var(--color-darkest-gray-color);
a {
color: var(--message-bubbles-sent-text-color);
}
}
max-width: calc(100% - 26px);
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&__generic {
&-file__text {
color: var(--message-bubbles-sent-text-color);
}
}
}
}
.module-quote__reference {
&-warning {
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--color-darkest-white-color);
padding-inline-start: 8px;
padding-inline-end: 8px;
margin-inline-end: 8px;
}
&-warning__icon {
height: 16px;
width: 16px;
@include color-svg('../images/broken-link.svg', var(--color-gray-color));
}
.module-quote-container {
margin-bottom: 5px;
margin-top: 10px;
padding-left: 10px;
&-warning__text {
margin-inline-start: 6px;
color: var(--color-darkest-gray-color);
font-size: var(--font-size-sm);
line-height: 18px;
/* This is not within the module-quote class so we handle it separately */
.module-quote__reference-warning--outgoing {
.module-quote__reference-warning__text {
color: var(--message-bubbles-sent-text-color);
}
.module-quote__reference-warning__icon {
@include color-svg('../images/broken-link.svg', var(--message-bubbles-sent-text-color));
}
}
}
$session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color);
$session-highlight-message-shadow: 0px 0px 10px 1px var(--button-icon-stroke-color);
@keyframes remove-box-shadow {
0% {
@ -295,7 +253,7 @@ $session-highlight-message-shadow: 0px 0px 10px 1px var(--primary-color);
}
}
.flash-green-once {
.flash-primary-once {
animation-name: remove-box-shadow;
animation-timing-function: linear;
animation-duration: 2s;

41
stylesheets/_session.scss
Unescape Escape View File

@ -372,13 +372,13 @@ label {
justify-content: space-between;
height: 50px;
padding: 0px var(--margins-md);
font-size: $session-font-sm;
font-size: var(--font-size-md);
color: var(--color-text);
background: var(--color-cell-background);
background-color: var(--right-panel-item-background-color);
color: var(--right-panel-item-text-color);
&:hover {
background: var(--color-clickable-hovered);
background: var(--right-panel-item-background-hover-color);
}
}
@ -403,22 +403,18 @@ label {
justify-content: center;
height: 35px;
padding: 0 var(--margins-md);
background: var(--color-cell-background);
color: var(--color-text);
background: var(--right-panel-item-background-color);
color: var(--right-panel-item-text-color);
font-size: 0.8rem;
width: -webkit-fill-available;
transition: var(--default-duration);
&:first-child {
border-top: var(--border-session);
border-top: var(--border-color);
}
&:last-child {
border-top: var(--border-session);
}
&:hover {
background: var(--color-clickable-hovered);
border-top: var(--border-color);
}
.session-icon {
@ -430,16 +426,16 @@ label {
&.active,
&:hover {
background: var(--color-clickable-hovered);
background: var(--right-panel-item-background-hover-color);
}
&.danger {
color: var(--color-destructive);
color: var(--danger-color);
}
}
&:hover {
background: var(--color-clickable-hovered);
background: var(--right-panel-item-background-hover-color);
}
}
@ -469,14 +465,14 @@ label {
display: flex;
justify-content: center;
background: var(--color-white-color);
background: var(--white-color);
padding: 0.5rem;
svg {
width: 135px;
height: 135px;
border-radius: 3px;
padding: var(--margins-xs);
background-color: var(--color-white-color);
background-color: var(--white-color);
}
}
@ -640,17 +636,6 @@ input {
}
}
.messages-container {
.session-icon-button {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
}
}
.group-member-list {
&__selection {
height: 100%;

41
stylesheets/_session_conversation.scss
Unescape Escape View File

@ -20,9 +20,10 @@
@keyframes pulseLight {
0% {
box-shadow: 0px 0px 0px 0px var(--color-destructive-alt);
box-shadow: 0px 0px 0px 0px var(--danger-color);
}
// TODO Theming - Needs fixing
50% {
box-shadow: 0px 0px 12px 0px rgba(var(--color-destructive-alt-rgb), 1);
}
@ -144,17 +145,6 @@
}
}
.messages-container {
display: flex;
flex-grow: 1;
flex-direction: column-reverse;
position: relative;
overflow-x: hidden;
min-width: 370px;
scrollbar-width: 4px;
padding: var(--margins-sm) var(--margins-lg) var(--margins-lg);
}
.composition-container {
display: flex;
justify-content: center;
@ -341,10 +331,10 @@
height: var(--margins-sm);
width: var(--margins-sm);
border-radius: 50%;
background-color: var(--color-destructive-alt);
background-color: var(--danger-color);
margin: 0 var(--margins-sm);
@include pulse-color(var(--color-destructive-alt), 1s, infinite);
@include pulse-color(var(--danger-color), 1s, infinite);
}
}
}
@ -352,8 +342,7 @@
/* ************ */
/* AUDIO PLAYER */
/* ************ */
$rhap_theme-color: #212121 !default;
$rhap_background-color: var(--color-transparent-color) !default;
$rhap_background-color: var(--transparent-color) !default;
$rhap_font-family: inherit !default;
.rhap_container,
@ -374,10 +363,6 @@ $rhap_font-family: inherit !default;
svg {
transition: fill var(--default-duration);
&:hover path {
fill: var(--color-white-color);
}
}
}
@ -400,17 +385,11 @@ $rhap_font-family: inherit !default;
display: none;
}
.rhap_volume-button {
color: subtle(var(--color-text));
}
.rhap_volume-container div[role='progressbar'] {
display: none;
}
.rhap_time {
color: subtle(var(--color-text));
font-size: 12px;
}
@ -420,14 +399,10 @@ $rhap_font-family: inherit !default;
z-index: 0;
width: 100%;
height: 5px;
background-color: var(--color-text);
border-radius: 2px;
}
.rhap_progress-filled {
background-color: rgba(var(--color-accent-rgb), 0.6);
padding-left: 5px;
}
@ -435,8 +410,6 @@ $rhap_font-family: inherit !default;
height: 100%;
position: absolute;
z-index: 1;
background-color: subtle(var(--color-text));
border-radius: 2px;
}
@ -446,9 +419,7 @@ $rhap_font-family: inherit !default;
height: 15px;
top: -5px;
margin-left: -10px;
background: var(--primary-color);
box-shadow: none;
box-shadow: rgba($rhap_theme-color, 0.5) 0 0 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
}
.rhap_controls-section {

27
stylesheets/_session_theme.scss
Unescape Escape View File

@ -33,15 +33,15 @@
&__container--incoming {
&--opaque {
background: var(--color-received-message-background);
background: var(--message-bubbles-received-background-color);
}
&--transparent {
background: none;
background: var(--transparent-color);
}
.module-message__text {
color: var(--color-received-message-text);
color: var(--message-bubbles-received-text-color);
display: flex;
flex-direction: row;
align-items: center;
@ -52,26 +52,26 @@
a {
text-decoration: underline;
color: var(--color-received-message-text);
color: var(--message-bubbles-received-text-color);
}
}
}
&__container--outgoing {
&--opaque {
background: var(--color-sent-message-background);
background: var(--message-bubbles-sent-background-color);
}
&--transparent {
background: none;
background: var(--transparent-color);
}
.module-message__text {
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
a {
text-decoration: underline;
color: var(--color-sent-message-text);
color: var(--message-bubbles-sent-text-color);
}
}
}
@ -90,20 +90,21 @@
@include fontAccentBold();
}
// TODO Theming - Confirm this works
h1 {
@include session-h-title;
color: var(--color-light-gray-color);
color: var(--text-secondary-color);
font-size: 25px;
margin: 0;
&.active {
color: var(--color-text);
color: var(--text-primary-color);
}
}
h2 {
@include session-h-title;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 22px;
text-align: center;
@ -111,7 +112,7 @@ h2 {
h3 {
@include session-h-title;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 18px;
padding-top: 22px;
@ -119,7 +120,7 @@ h3 {
h4 {
@include session-h-title;
color: var(--color-text);
color: var(--text-primary-color);
font-size: 17px;
text-align: center;

330
stylesheets/_theme_dark.scss
Unescape Escape View File

@ -63,49 +63,42 @@
}
}
input.search {
border: 1px solid var(--color-gray-color);
color: var(--color-lighter-gray-color);
background-color: var(--color-darkest-gray-color);
&:focus {
outline: solid 1px var(--color-dark-blue-color);
}
}
.hint {
color: var(--color-white-color);
border: 2px dashed var(--color-white-color);
&.firstRun {
&:before,
&:after {
border: solid 10px var(--color-white-color);
border-color: transparent var(--color-white-color) transparent transparent;
}
&:after {
border-color: transparent var(--color-dark-blue-color) transparent transparent;
}
}
}
// TODO Theming - Do we use this anywhere?
// .hint {
// color: var(--color-white-color);
// border: 2px dashed var(--color-white-color);
// &.firstRun {
// &:before,
// &:after {
// border: solid 10px var(--color-white-color);
// border-color: transparent var(--color-white-color) transparent transparent;
// }
// &:after {
// border-color: transparent var(--color-dark-blue-color) transparent transparent;
// }
// }
// }
.contact.placeholder {
color: var(--color-white-color);
border: 2px dashed var(--color-white-color);
p {
color: var(--color-white-color);
}
&:before,
&:after {
border: solid 10px var(--color-white-color);
border-color: transparent transparent var(--color-white-color) transparent;
}
&:after {
border-color: transparent transparent var(--color-dark-blue-color) transparent;
}
}
// TODO Theming - I don't think we use this.
// .contact.placeholder {
// color: var(--color-white-color);
// border: 2px dashed var(--color-white-color);
// p {
// color: var(--color-white-color);
// }
// &:before,
// &:after {
// border: solid 10px var(--color-white-color);
// border-color: transparent transparent var(--color-white-color) transparent;
// }
// &:after {
// border-color: transparent transparent var(--color-dark-blue-color) transparent;
// }
// }
// _modal
// TODO Theming
.modal {
background-color: rgba(var(--color-black-color-rgb), 0.3);
@ -114,261 +107,4 @@
box-shadow: 0px 3px 5px 0px var(--color-light-black-color);
}
}
// _modules
// Module: Message
.module-message__error {
@include color-svg('../images/error.svg', var(--color-destructive));
}
.module-message__img-border-overlay {
box-shadow: inset 0px 0px 0px 1px var(--color-lighter-white-color);
}
.module-message__img-overlay {
/* TODO does this work? */
background-image: linear-gradient(
to bottom,
var(--color-transparent-color),
var(--color-transparent-color) 9%,
rgba(var(--color-black-color-rgb), 0.02) 17%,
rgba(var(--color-black-color-rgb), 0.05) 24%,
rgba(var(--color-black-color-rgb), 0.08) 31%,
rgba(var(--color-black-color-rgb), 0.12) 37%,
rgba(var(--color-black-color-rgb), 0.16) 44%,
rgba(var(--color-black-color-rgb), 0.2) 50%,
rgba(var(--color-black-color-rgb), 0.24) 56%,
rgba(var(--color-black-color-rgb), 0.28) 63%,
rgba(var(--color-black-color-rgb), 0.32) 69%,
rgba(var(--color-black-color-rgb), 0.35) 76%,
rgba(var(--color-black-color-rgb), 0.38) 83%,
rgba(var(--color-black-color-rgb), 0.4) 91%,
rgba(var(--color-black-color-rgb), 0.4)
);
}
.module-message__broken-image {
color: var(--color-lighter-gray-color);
}
.module-message__broken-image--incoming {
color: var(--color-white-color);
}
.module-message__video-overlay__circle {
background-color: var(--color-white-color);
}
.module-message__video-overlay__play-icon {
@include color-svg('../images/play.svg', var(--primary-color));
}
.module-message__broken-video-screenshot {
color: var(--color-lighter-gray-color);
}
.module-message__link-preview__content {
background-color: var(--color-darkest-gray-color);
border: 1px solid var(--color-gray-color);
}
.module-message__link-preview__title {
color: var(--color-lighter-gray-color);
}
.module-message__link-preview__location {
color: var(--color-light-gray-color);
}
// Module: Contact Detail
.module-contact-detail__send-message {
background-color: var(--color-dark-blue-color);
color: var(--color-white-color);
}
.module-contact-detail__additional-contact {
border-top: 1px solid var(--color-dark-gray-color);
}
.module-contact-detail__additional-contact__type {
color: var(--color-light-gray-color);
}
// Module: Contact List Item
.module-contact-list-item {
color: var(--color-light-gray-color);
}
// Module: Message Detail
.module-message-detail__delete-button {
background-color: var(--color-destructive);
color: var(--color-white-color);
box-shadow: 0 0 10px -3px var(--color-gray-color-rgb);
border: solid 1px var(--color-light-gray-color);
}
.module-message-detail__contact__error {
color: var(--color-destructive);
}
// Module: Media Gallery
.module-media-gallery__tab {
background-color: var(--color-darkest-gray-color);
}
.module-media-gallery__tab--active {
border-bottom: 2px solid var(--primary-color);
}
// Module: Document List Item
.module-document-list-item--with-separator {
border-bottom: 1px solid var(--color-dark-gray-color);
}
.module-document-list-item__icon {
@include color-svg('../images/file.svg', var(--color-gray-color));
}
// Module: Media Grid Item
.module-media-grid-item {
background-color: var(--color-darkest-gray-color);
}
.module-media-grid-item__icon-image {
@include color-svg('../images/image.svg', var(--color-gray-color));
}
.module-media-grid-item__icon-video {
@include color-svg('../images/movie.svg', var(--color-gray-color));
}
.module-media-grid-item__icon-generic {
@include color-svg('../images/file.svg', var(--color-gray-color));
}
// Module: Empty State
.module-empty-state {
color: var(--color-light-gray-color);
}
// TODO Theming Remove
// Module: Conversation List Item
// .module-conversation-list-item--is-selected {
// background-color: var(--color-dark-gray-color);
// }
// .module-conversation-list-item__unread-count {
// color: var(--color-white-color);
// background-color: var(--primary-color);
// box-shadow: 0px 0px 0px 1px var(--color-darkest-gray-color);
// }
// .module-conversation-list-item__header__name {
// color: var(--color-lighter-gray-color);
// }
// .module-conversation-list-item__header__date--has-unread {
// color: var(--color-lighter-gray-color);
// }
// .module-conversation-list-item__message__text {
// color: var(--color-light-gray-color);
// }
// .module-conversation-list-item__message__text--has-unread {
// color: var(--color-lighter-gray-color);
// }
// Module: Image
.module-image {
background: none;
}
.module-image__loading-placeholder {
background-color: var(--color-lighter-white-color);
}
// Module: Typing Animation
.module-typing-animation__dot {
background-color: var(--color-white-color);
}
.module-typing-animation__dot--light {
background-color: var(--color-white-color);
}
// Module: Attachments
.module-attachments {
border-top: 1px solid var(--color-dark-gray-color);
}
.module-attachments__close-button {
@include color-svg('../images/x-16.svg', var(--color-light-gray-color));
}
// Module: Staged Generic Attachment
.module-staged-generic-attachment {
box-shadow: inset 0px 0px 0px 1px var(--color-light-gray-color);
background-color: var(--color-dark-gray-color);
color: var(--color-lighter-gray-color);
}
.module-staged-generic-attachment__close-button {
@include color-svg('../images/x.svg', var(--color-light-gray-color));
}
.module-staged-generic-attachment__icon {
background: url('../images/file-gradient.svg') no-repeat center;
}
.module-staged-generic-attachment__icon__extension {
color: var(--color-darkest-gray-color);
}
// Module: Staged Placeholder Attachment
.module-staged-placeholder-attachment {
border: 1px solid var(--color-gray-color);
&:hover {
background: var(--color-dark-gray-color);
}
}
.module-staged-placeholder-attachment__plus-icon {
@include color-svg('../images/plus-36.svg', var(--color-gray-color));
}
// Module: Staged Link Preview
.module-staged-link-preview__close-button {
@include color-svg('../images/x-16.svg', var(--color-light-gray-color));
}
// Module: Message Search Result
// TODO Theming remove
// .module-message-search-result {
// &:hover {
// background-color: var(--color-dark-gray-color);
// }
// }
.module-message__link-preview__icon-container__circle-background {
background-color: var(--color-light-gray-color);
}
}

16
ts/components/SessionContextMenuContainer.tsx
Unescape Escape View File

@ -7,27 +7,25 @@ export const SessionContextMenuContainer = styled.div.attrs({
// be sure it is more than the one set for the More Informations screen of messages
z-index: 30;
min-width: 200px;
/* TODO Theming Update */
box-shadow: 0 10px 16px 0 rgba(var(--color-black-color-rgb), 0.2),
0 6px 20px 0 rgba(var(--color-black-color-rgb), 0.19) !important;
background-color: var(--color-received-message-background);
box-shadow: 0px 0px 10px var(--context-menu-shadow-color) !important;
background-color: var(--context-menu-background-color);
&.react-contexify__theme--dark {
background-color: var(--color-received-message-background);
background-color: var(--context-menu-background-color);
}
.react-contexify__item {
background: var(--color-received-message-background);
background: var(--context-menu-background-color);
}
.react-contexify__item:not(.react-contexify__item--disabled):hover
> .react-contexify__item__content {
background: var(--color-accent);
color: var(--color-text-menu-highlighted);
background: var(--context-menu-background-hover-color);
color: var(--context-menu-text-hover-color);
}
.react-contexify__item__content {
transition: var(--default-duration);
color: var(--color-text);
color: var(--context-menu-text-color);
}
&.react-contexify__submenu {

4
ts/components/SessionScrollButton.tsx
Unescape Escape View File

@ -10,6 +10,10 @@ const SessionScrollButtonDiv = styled.div`
z-index: 2;
right: 60px;
animation: fadein var(--default-duration);
.session-icon-button {
background-color: var(--message-bubbles-received-background-color);
}
`;
export const SessionScrollButton = (props: { onClickScrollBottom: () => void }) => {

4
ts/components/SplitViewContainer.tsx
Unescape Escape View File

@ -17,7 +17,7 @@ const Divider = styled.div`
width: 100%;
cursor: row-resize;
height: 5px;
background-color: var(--color-cell-background);
background-color: var(--background-primary-color);
margin-top: 2px;
`;
@ -25,7 +25,7 @@ const DividerHandle = styled.div`
width: 10%;
height: 5px;
cursor: row-resize;
background-color: var(--color-text);
background-color: var(--text-primary-color);
flex-shrink: 0;
position: relative;
left: 50%;

38
ts/components/conversation/ConversationHeader.tsx
Unescape Escape View File

@ -141,6 +141,12 @@ const SelectionOverlay = () => {
);
};
const TripleDotContainer = styled.div`
user-select: none;
flex-grow: 0;
flex-shrink: 0;
`;
const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) => {
const { showBackButton } = props;
if (showBackButton) {
@ -162,12 +168,6 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
);
};
const TripleDotContainer = styled.div`
user-select: none;
flex-grow: 0;
flex-shrink: 0;
`;
const ExpirationLength = (props: { expirationSettingName?: string }) => {
const { expirationSettingName } = props;
@ -281,6 +281,19 @@ export type ConversationHeaderTitleProps = {
currentNotificationSetting?: ConversationNotificationSettingType;
};
/**
* The subtitle beneath a conversation title when looking at a conversation screen.
* @param props props for subtitle. Text to be displayed
* @returns JSX Element of the subtitle of conversation header
*/
export const ConversationHeaderSubtitle = (props: { text?: string | null }): JSX.Element | null => {
const { text } = props;
if (!text) {
return null;
}
return <span className="module-conversation-header__title-text">{text}</span>;
};
const ConversationHeaderTitle = () => {
const headerTitleProps = useSelector(getConversationHeaderTitleProps);
const notificationSetting = useSelector(getCurrentNotificationSettingText);
@ -344,19 +357,6 @@ const ConversationHeaderTitle = () => {
);
};
/**
* The subtitle beneath a conversation title when looking at a conversation screen.
* @param props props for subtitle. Text to be displayed
* @returns JSX Element of the subtitle of conversation header
*/
export const ConversationHeaderSubtitle = (props: { text?: string | null }): JSX.Element | null => {
const { text } = props;
if (!text) {
return null;
}
return <span className="module-conversation-header__title-text">{text}</span>;
};
export const ConversationHeaderWithDetails = () => {
const isSelectionMode = useSelector(isMessageSelectionMode);
const isMessageDetailOpened = useSelector(isMessageDetailView);

30
ts/components/conversation/ConversationRequestButtons.tsx
Unescape Escape View File

@ -24,6 +24,21 @@ const handleAcceptConversationRequest = async (convoId: string) => {
await approveConvoAndSendResponse(convoId, true);
};
const ConversationRequestBanner = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--margins-lg);
gap: var(--margins-lg);
`;
const ConversationBannerRow = styled.div`
display: flex;
flex-direction: row;
gap: var(--margins-lg);
justify-content: center;
`;
export const ConversationMessageRequestButtons = () => {
const selectedConversation = useSelector(getSelectedConversation);
@ -61,18 +76,3 @@ export const ConversationMessageRequestButtons = () => {
</ConversationRequestBanner>
);
};
const ConversationBannerRow = styled.div`
display: flex;
flex-direction: row;
gap: var(--margins-lg);
justify-content: center;
`;
const ConversationRequestBanner = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--margins-lg);
gap: var(--margins-lg);
`;

27
ts/components/conversation/ConversationRequestInfo.tsx
Unescape Escape View File

@ -7,6 +7,20 @@ import {
hasSelectedConversationIncomingMessages,
} from '../../state/selectors/conversations';
const ConversationRequestTextBottom = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
padding: var(--margins-lg);
`;
// TODO Theming - Confirm this is correct?
const ConversationRequestTextInner = styled.div`
color: var(--text-secondary-color);
text-align: center;
max-width: 390px;
`;
export const ConversationRequestinfo = () => {
const selectedConversation = useSelector(getSelectedConversation);
const isIncomingMessageRequest = useIsRequest(selectedConversation?.id);
@ -26,16 +40,3 @@ export const ConversationRequestinfo = () => {
</ConversationRequestTextBottom>
);
};
const ConversationRequestTextBottom = styled.div`
display: flex;
flex-direction: row;
justify-content: center;
padding: var(--margins-lg);
`;
const ConversationRequestTextInner = styled.div`
color: var(--color-text-subtle);
text-align: center;
max-width: 390px;
`;

4
ts/components/conversation/ExpireTimer.tsx
Unescape Escape View File

@ -32,7 +32,7 @@ const ExpireTimerBucket = styled.div`
letter-spacing: 0.3px;
text-transform: uppercase;
user-select: none;
color: var(--color-text);
color: var(--text-primary-color);
`;
export const ExpireTimer = (props: Props) => {
@ -57,7 +57,7 @@ export const ExpireTimer = (props: Props) => {
return null;
}
const expireTimerColor = 'var(--color-text)';
const expireTimerColor = 'var(--primary-text-color)';
if (timeLeft <= 60) {
return <ExpireTimerCount color={expireTimerColor}>{timeLeft}</ExpireTimerCount>;

14
ts/components/conversation/H5AudioPlayer.tsx
Unescape Escape View File

@ -16,13 +16,8 @@ import { SessionIcon } from '../icon';
const StyledSpeedButton = styled.div`
padding: var(--margins-xs);
opacity: 0.6;
transition: none;
:hover {
opacity: 1;
}
.session-button {
transition: none;
width: 34px;
@ -80,6 +75,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
dispatch(setNextMessageToPlayId(undefined));
return;
}
// justEndedMessageIndex cannot be -1 nor 0, so it is >= 1
const nextMessageIndex = justEndedMessageIndex - 1;
// stop auto-playing when the audio messages change author.
@ -128,12 +124,8 @@ export const AudioPlayerWithEncryptedFile = (props: {
</StyledSpeedButton>,
]}
customIcons={{
play: (
<SessionIcon iconType="play" iconSize="small" iconColor={'var(--color-text-subtle)'} />
),
pause: (
<SessionIcon iconType="pause" iconSize="small" iconColor={'var(--color-text-subtle)'} />
),
play: <SessionIcon iconType="play" iconSize="small" />,
pause: <SessionIcon iconType="pause" iconSize="small" />,
}}
/>
);

6
ts/components/conversation/SessionFileDropzone.tsx
Unescape Escape View File

@ -12,8 +12,8 @@ const DropZoneContainer = styled.div`
`;
const DropZoneWithBorder = styled.div`
border: dashed 4px var(--color-accent);
background-color: var(--color-clickable-hovered);
border: dashed 4px var(--primary-color);
background-color: var(--message-link-preview-background-color);
position: absolute;
top: 0;
bottom: 0;
@ -29,7 +29,7 @@ export const SessionFileDropzone = () => {
<DropZoneContainer>
<DropZoneWithBorder>
<Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
<SessionIcon iconSize={'max'} iconType="circlePlus" />
<SessionIcon iconColor="var(--primary-color)" iconSize={'max'} iconType="circlePlus" />
</Flex>
</DropZoneWithBorder>
</DropZoneContainer>

35
ts/components/conversation/SessionLastSeenIndicator.tsx
Unescape Escape View File

@ -2,21 +2,11 @@ import React, { useContext, useLayoutEffect } from 'react';
import { useSelector } from 'react-redux';
import styled from 'styled-components';
import { getQuotedMessageToAnimate } from '../../state/selectors/conversations';
import { getTheme } from '../../state/selectors/theme';
import { ScrollToLoadedMessageContext } from './SessionMessagesListContainer';
const LastSeenBarContainer = styled.div`
padding-bottom: 35px;
max-width: 300px;
align-self: center;
padding-top: 28px;
display: flex;
flex-direction: row;
align-items: center;
`;
const LastSeenBar = styled.div`
height: 2px;
background-color: var(--color-last-seen-indicator);
flex-grow: 1;
min-width: 60px;
flex-shrink: 0;
@ -25,14 +15,32 @@ const LastSeenBar = styled.div`
const LastSeenText = styled.div`
margin-top: 3px;
font-size: var(--font-size-xs);
font-weight: 500;
line-height: 26px;
letter-spacing: 0.3px;
text-transform: uppercase;
text-align: center;
flex-shrink: 0;
margin-inline: 1rem;
`;
const LastSeenBarContainer = styled.div<{ darkMode?: boolean }>`
padding-bottom: 35px;
max-width: 300px;
align-self: center;
padding-top: 28px;
display: flex;
flex-direction: row;
align-items: center;
${LastSeenBar} {
background-color: ${props =>
props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)'};
}
color: var(--color-last-seen-indicator);
${LastSeenText} {
color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')};
}
`;
export const SessionLastSeenIndicator = (props: {
@ -40,6 +48,7 @@ export const SessionLastSeenIndicator = (props: {
didScroll: boolean;
setDidScroll: (scroll: boolean) => void;
}) => {
const darkMode = useSelector(getTheme).includes('dark');
// if this unread-indicator is not unique it's going to cause issues
const quotedMessageToAnimate = useSelector(getQuotedMessageToAnimate);
const scrollToLoadedMessage = useContext(ScrollToLoadedMessageContext);
@ -64,7 +73,7 @@ export const SessionLastSeenIndicator = (props: {
});
return (
<LastSeenBarContainer id="unread-indicator">
<LastSeenBarContainer id="unread-indicator" darkMode={darkMode}>
<LastSeenBar />
<LastSeenText>{window.i18n('unreadMessages')}</LastSeenText>

2
ts/components/conversation/SessionMessagesListContainer.tsx
Unescape Escape View File

@ -173,7 +173,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
if (messageId !== undefined) {
this.timeoutResetQuotedScroll = global.setTimeout(() => {
window.inboxStore?.dispatch(quotedMessageToAnimate(undefined));
}, 2000); // should match .flash-green-once
}, 2000); // should match .flash-primary-once
}
}

2
ts/components/conversation/message/message-content/ClickToTrustSender.tsx
Unescape Escape View File

@ -38,7 +38,7 @@ export const ClickToTrustSender = (props: { messageId: string }) => {
message: window.i18n('trustThisContactDialogDescription', [
convo.getContactProfileNameOrShortenedPubKey(),
]),
okTheme: SessionButtonColor.Green,
closeTheme: SessionButtonColor.Danger,
onClickOk: async () => {
convo.set({ isTrustedForAttachmentDownload: true });
await convo.commit();

74
ts/components/conversation/message/message-content/MessageBody.tsx
Unescape Escape View File

@ -88,43 +88,6 @@ const JsxSelectable = (jsx: JSX.Element): JSX.Element => {
);
};
export const MessageBody = (props: Props) => {
const { text, disableJumbomoji, disableLinks, isGroup } = props;
const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
if (disableLinks) {
return JsxSelectable(
renderEmoji({
text,
sizeClass,
key: 0,
renderNonEmoji: renderNewLines,
isGroup,
})
);
}
if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) {
return <pre className="text-selectable">{text.substring(4, text.length - 3)}</pre>;
}
return JsxSelectable(
<Linkify
text={text}
isGroup={isGroup}
renderNonLink={({ key, text: nonLinkText }) => {
return renderEmoji({
text: nonLinkText,
sizeClass,
key,
renderNonEmoji: renderNewLines,
isGroup,
});
}}
/>
);
};
type LinkifyProps = {
text: string;
/** Allows you to customize now non-links are rendered. Simplest is just a <span>. */
@ -184,3 +147,40 @@ const Linkify = (props: LinkifyProps): JSX.Element => {
return <>{results}</>;
};
export const MessageBody = (props: Props) => {
const { text, disableJumbomoji, disableLinks, isGroup } = props;
const sizeClass: SizeClassType = disableJumbomoji ? 'default' : getEmojiSizeClass(text);
if (disableLinks) {
return JsxSelectable(
renderEmoji({
text,
sizeClass,
key: 0,
renderNonEmoji: renderNewLines,
isGroup,
})
);
}
if (text && text.startsWith('```') && text.endsWith('```') && text.length > 6) {
return <pre className="text-selectable">{text.substring(4, text.length - 3)}</pre>;
}
return JsxSelectable(
<Linkify
text={text}
isGroup={isGroup}
renderNonLink={({ key, text: nonLinkText }) => {
return renderEmoji({
text: nonLinkText,
sizeClass,
key,
renderNonEmoji: renderNewLines,
isGroup,
});
}}
/>
);
};

64
ts/components/conversation/message/message-content/MessageContent.tsx
Unescape Escape View File

@ -88,6 +88,37 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
}
}
function getWidth(
props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
): number | undefined {
const { attachments, previews } = props;
if (attachments && attachments.length) {
const dimensions = getGridDimensions(attachments);
if (dimensions) {
return dimensions.width;
}
}
if (previews && previews.length) {
const first = previews[0];
if (!first || !first.image) {
return;
}
const { width } = first.image;
if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) {
const dimensions = getImageDimensionsInAttachment(first.image);
if (dimensions) {
return dimensions.width;
}
}
}
return;
}
const StyledMessageContent = styled.div`
border-radius: 18px;
`;
@ -187,7 +218,7 @@ export const MessageContent = (props: Props) => {
? `module-message__container--${direction}--transparent`
: `module-message__container--${direction}--opaque`,
flashGreen && 'flash-green-once'
flashGreen && 'flash-primary-once'
)}
style={{
width: isShowingImage ? width : undefined,
@ -229,34 +260,3 @@ export const MessageContent = (props: Props) => {
</StyledMessageContent>
);
};
function getWidth(
props: Pick<MessageRenderingProps, 'attachments' | 'previews'>
): number | undefined {
const { attachments, previews } = props;
if (attachments && attachments.length) {
const dimensions = getGridDimensions(attachments);
if (dimensions) {
return dimensions.width;
}
}
if (previews && previews.length) {
const first = previews[0];
if (!first || !first.image) {
return;
}
const { width } = first.image;
if (isImageAttachment(first.image) && width && width >= MINIMUM_LINK_PREVIEW_IMAGE_WIDTH) {
const dimensions = getImageDimensionsInAttachment(first.image);
if (dimensions) {
return dimensions.width;
}
}
}
return;
}

9
ts/components/conversation/message/message-content/MessagePreview.tsx
Unescape Escape View File

@ -10,7 +10,10 @@ import { SessionIcon } from '../../../icon';
import { MINIMUM_LINK_PREVIEW_IMAGE_WIDTH } from '../message-item/Message';
import { showLinkVisitWarningDialog } from '../../../dialog/SessionConfirm';
export type MessagePreviewSelectorProps = Pick<MessageRenderingProps, 'attachments' | 'previews'>;
export type MessagePreviewSelectorProps = Pick<
MessageRenderingProps,
'direction' | 'attachments' | 'previews'
>;
type Props = {
handleImageError: () => void;
@ -24,7 +27,7 @@ export const MessagePreview = (props: Props) => {
if (!selected) {
return null;
}
const { attachments, previews } = selected;
const { direction, attachments, previews } = selected;
// Attachments take precedence over Link Previews
if (attachments && attachments.length) {
@ -53,7 +56,7 @@ export const MessagePreview = (props: Props) => {
return (
<div
role="button"
className={classNames('module-message__link-preview')}
className={classNames(`module-message__link-preview--${direction}`)}
onClick={openLinkFromPreview}
>
{first.image && previewHasImage && isFullSizeImage ? (

2
ts/components/conversation/message/message-content/MessageReactions.tsx
Unescape Escape View File

@ -36,7 +36,7 @@ const StyledReactionOverflow = styled.button`
margin-bottom: var(--margins-sm);
span {
background-color: var(--color-received-message-background);
background-color: var(--message-bubbles-received-background-color);
border: 1px solid var(--border-color);
border-radius: 50%;
overflow: hidden;

4
ts/components/conversation/message/message-content/Quote.tsx
Unescape Escape View File

@ -316,7 +316,9 @@ export const QuoteReferenceWarning = (
<div
className={classNames(
'module-quote__reference-warning',
isIncoming ? 'module-quote__reference-warning--incoming' : null
isIncoming
? 'module-quote__reference-warning--incoming'
: 'module-quote__reference-warning--outgoing'
)}
>
<div

2
ts/components/conversation/message/message-item/DateBreak.tsx
Unescape Escape View File

@ -12,7 +12,7 @@ const DateBreakText = styled.div`
font-weight: bold;
text-align: center;
color: var(--color-text);
color: var(--text-primary-color);
`;
export const MessageDateBreak = (props: { timestamp: number; messageId: string }) => {

9
ts/components/conversation/message/message-item/GenericReadableMessage.tsx
Unescape Escape View File

@ -102,7 +102,7 @@ type Props = {
const highlightedMessageAnimation = keyframes`
1% {
background-color: #00f782;
background-color: var(--primary-color);
}
`;
@ -123,7 +123,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
${props =>
props.isRightClicked &&
`
background-color: var(--color-compose-view-button-background);
background-color: var(--conversation-tab-background-selected-color);
`}
${props =>
@ -132,7 +132,7 @@ const StyledReadableMessage = styled(ReadableMessage)<{
&.message-selected {
.module-message {
&__container {
box-shadow: var(--color-session-shadow);
box-shadow: var(--drop-shadow);
}
}
}
@ -229,8 +229,7 @@ export const GenericReadableMessage = (props: Props) => {
isRightClicked={isRightClicked}
className={classNames(
selected && 'message-selected',
isGroup && 'public-chat-message-wrapper',
isIncoming ? 'session-message-wrapper-incoming' : 'session-message-wrapper-outgoing'
isGroup && 'public-chat-message-wrapper'
)}
onContextMenu={handleContextMenu}
receivedAt={receivedAt}

11
ts/components/conversation/message/message-item/MessageDetail.tsx
Unescape Escape View File

@ -17,6 +17,7 @@ import {
import { ContactName } from '../../ContactName';
// tslint:disable-next-line: no-submodule-imports
import useKey from 'react-use/lib/useKey';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../../../basic/SessionButton';
const AvatarItem = (props: { pubkey: string }) => {
const { pubkey } = props;
@ -29,14 +30,14 @@ const DeleteButtonItem = (props: { messageId: string; convoId: string; isDeletab
return props.isDeletable ? (
<div className="module-message-detail__delete-button-container">
<button
<SessionButton
text={i18n('delete')}
buttonColor={SessionButtonColor.Danger}
buttonType={SessionButtonType.Solid}
onClick={async () => {
await deleteMessagesById([props.messageId], props.convoId);
}}
className="module-message-detail__delete-button"
>
{i18n('delete')}
</button>
/>
</div>
) : null;
};

2
ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx
Unescape Escape View File

@ -21,7 +21,7 @@ const style: StyleType = {
'missed-call': {
notificationTextKey: 'callMissed',
iconType: 'callMissed',
iconColor: 'var(--color-destructive)',
iconColor: 'var(--danger-color)',
},
'started-call': {
notificationTextKey: 'startedACall',

4
ts/components/conversation/message/message-item/notification-bubble/NotificationBubble.tsx
Unescape Escape View File

@ -4,8 +4,8 @@ import { SessionIcon, SessionIconType } from '../../../../icon';
const NotificationBubbleFlex = styled.div`
display: flex;
background: var(--color-fake-chat-bubble-background);
color: var(--color-text);
background: var(--message-bubbles-received-background-color);
color: var(--text-primary-color);
width: 90%;
max-width: 700px;
margin: 10px auto;

4
ts/components/conversation/message/reactions/Reaction.tsx
Unescape Escape View File

@ -14,10 +14,10 @@ const StyledReaction = styled.button<{ selected: boolean; inModal: boolean; show
justify-content: ${props => (props.showCount ? 'flex-start' : 'center')};
align-items: center;
background-color: var(--color-received-message-background);
background-color: var(--message-bubbles-received-background-color);
border-width: 1px;
border-style: solid;
border-color: ${props => (props.selected ? 'var(--color-accent)' : 'transparent')};
border-color: ${props => (props.selected ? 'var(--primary-color)' : 'var(--transparent-color)')};
border-radius: 11px;
box-sizing: border-box;
padding: 0 7px;

8
ts/components/conversation/message/reactions/ReactionPopup.tsx
Unescape Escape View File

@ -18,8 +18,8 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
height: 72px;
z-index: 5;
background-color: var(--color-received-message-background);
color: var(--color-pill-divider-text);
background-color: var(--message-bubbles-received-background-color);
color: var(--message-bubbles-received-text-color);
box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.51);
font-size: 12px;
font-weight: 600;
@ -45,7 +45,7 @@ export const StyledPopupContainer = styled.div<{ tooltipPosition: TipPosition }>
}};
width: 22px;
height: 22px;
background-color: var(--color-received-message-background);
background-color: var(--message-bubbles-received-background-color);
transform: rotate(45deg);
border-radius: 3px;
transform: scaleY(1.4) rotate(45deg);
@ -66,7 +66,7 @@ const StyledContacts = styled.span`
`;
const StyledOthers = styled.span<{ darkMode: boolean }>`
color: ${props => (props.darkMode ? 'var(--color-accent)' : 'var(--color-text)')};
color: ${props => (props.darkMode ? 'var(--primary-color)' : 'var(--text-primary-color)')};
`;
const generateContactsString = async (

6
ts/components/icon/Icons.tsx
Unescape Escape View File

@ -306,8 +306,8 @@ export const icons = {
},
moon: {
path:
'M11.1441877,12.8180303 C8.90278993,10.5766325 8.24397847,7.29260898 9.27752593,4.437982 C6.09633644,5.5873034 3.89540402,8.67837285 4.00385273,12.2078365 C4.13368986,16.4333868 7.52883112,19.8285281 11.7543814,19.9583652 C15.2838451,20.0668139 18.3749145,17.8658815 19.5242359,14.684692 C16.669609,15.7182395 13.3855854,15.059428 11.1441877,12.8180303 Z M21.9576498,12.8823459 C21.4713729,18.1443552 16.9748949,22.1197182 11.692957,21.9574217 C6.41101918,21.7951253 2.16709261,17.5511988 2.00479619,12.2692609 C1.84249977,6.98732307 5.81786273,2.49084501 11.0798721,2.00456809 C11.9400195,1.92507947 12.4895134,2.90008536 11.9760569,3.59473245 C10.2106529,5.98311963 10.4582768,9.30369233 12.5584012,11.4038167 C14.6585256,13.5039411 17.9790983,13.7515651 20.3674855,11.986161 C21.0621326,11.4727046 22.0371385,12.0221984 21.9576498,12.8823459',
viewBox: '0.5 0.5 22 22',
'M15.72 14.4723C13.3767 14.439 11.14 13.4593 9.49209 11.7444C7.84421 10.0296 6.91721 7.7169 6.91097 5.3051C6.92029 3.79321 7.29571 2.30757 8.00328 0.982563C8.06586 0.867604 8.09359 0.735993 8.08286 0.604685C8.07213 0.473378 8.02344 0.348388 7.94309 0.245798C7.86273 0.143207 7.75438 0.0677123 7.63197 0.0290483C7.50957 -0.00961566 7.37872 -0.00968327 7.25627 0.0288491C5.60062 0.574051 4.10352 1.53621 2.90088 2.82796C1.69824 4.11972 0.828148 5.70015 0.369624 7.42578C-0.088901 9.15141 -0.121348 10.9676 0.275232 12.7094C0.671811 14.4512 1.48485 16.0635 2.64054 17.3998C3.79623 18.7362 5.25797 19.7544 6.89303 20.3618C8.52809 20.9693 10.2847 21.1468 12.0033 20.8783C13.722 20.6099 15.3483 19.9039 16.7345 18.8244C18.1208 17.745 19.2231 16.3263 19.9413 14.6972C19.9949 14.5772 20.0124 14.4435 19.9913 14.3133C19.9703 14.183 19.9118 14.0623 19.8234 13.9666C19.735 13.8709 19.6207 13.8048 19.4954 13.7766C19.3701 13.7485 19.2394 13.7597 19.1203 13.8087C18.0407 14.2592 16.885 14.4847 15.72 14.4723Z',
viewBox: '0 0 20 21',
ratio: 1,
},
mute: {
@ -408,7 +408,7 @@ export const icons = {
sun: {
path:
'M16.6209 7.62069C11.8081 7.62069 7.89156 11.5372 7.89156 16.35C7.89156 21.1628 11.8081 25.0793 16.6209 25.0793C21.4337 25.0793 25.3502 21.1628 25.3502 16.35C25.3502 11.5372 21.4337 7.62069 16.6209 7.62069ZM16.6209 22.5852C13.1768 22.5852 10.3856 19.794 10.3856 16.35C10.3856 12.906 13.1768 10.1148 16.6209 10.1148C20.0649 10.1148 22.8561 12.906 22.8561 16.35C22.8561 19.794 20.0649 22.5852 16.6209 22.5852ZM16.6209 5.1266C17.3093 5.1266 17.8679 4.568 17.8679 3.87956V1.38547C17.8679 0.697025 17.3093 0.138428 16.6209 0.138428C15.9324 0.138428 15.3738 0.697025 15.3738 1.38547V3.87956C15.3738 4.568 15.9324 5.1266 16.6209 5.1266ZM16.6209 27.5734C15.9324 27.5734 15.3738 28.132 15.3738 28.8204V31.3145C15.3738 32.0029 15.9324 32.5615 16.6209 32.5615C17.3093 32.5615 17.8679 32.0029 17.8679 31.3145V28.8204C17.8679 28.132 17.3093 27.5734 16.6209 27.5734ZM26.3196 8.4131L28.083 6.64971C28.5701 6.16258 28.5701 5.37344 28.083 4.88631C27.5959 4.39918 26.8067 4.39918 26.3196 4.88631L24.5562 6.64971C24.0691 7.13683 24.0691 7.92598 24.5562 8.4131C25.0433 8.90023 25.8325 8.90023 26.3196 8.4131ZM6.92214 24.2869L5.15874 26.0503C4.67162 26.5374 4.67162 27.3265 5.15874 27.8137C5.64587 28.3008 6.43501 28.3008 6.92214 27.8137L8.68554 26.0503C9.17266 25.5616 9.17266 24.774 8.68554 24.2869C8.19849 23.7997 7.40927 23.7981 6.92214 24.2869ZM5.39747 16.35C5.39747 15.6615 4.83888 15.1029 4.15043 15.1029H1.65634C0.967899 15.1029 0.409302 15.6615 0.409302 16.35C0.409302 17.0384 0.967899 17.597 1.65634 17.597H4.15043C4.83888 17.597 5.39747 17.0384 5.39747 16.35ZM31.5854 15.1029H29.0913C28.4028 15.1029 27.8442 15.6615 27.8442 16.35C27.8442 17.0384 28.4028 17.597 29.0913 17.597H31.5854C32.2738 17.597 32.8324 17.0384 32.8324 16.35C32.8324 15.6615 32.2738 15.1029 31.5854 15.1029ZM6.9205 8.4131C7.40771 8.90023 8.19685 8.90023 8.6839 8.4131C9.1711 7.92598 9.1711 7.13683 8.6839 6.64971L6.9205 4.88631C6.43338 4.39918 5.64431 4.39918 5.15711 4.88631C4.66998 5.37344 4.66998 6.16258 5.15711 6.64971L6.9205 8.4131ZM26.3212 24.2852C25.8325 23.7981 25.0449 23.7981 24.5578 24.2852C24.0706 24.7724 24.0691 25.5615 24.5578 26.0486L26.3212 27.812C26.8083 28.2992 27.5974 28.2992 28.0845 27.812C28.5717 27.3249 28.5717 26.5358 28.0845 26.0486L26.3212 24.2852Z',
viewBox: '0 0 33 33',
viewBox: '0 0 33 34',
ratio: 1,
},
qr: {

1
ts/components/menu/ConversationListItemContextMenu.tsx
Unescape Escape View File

@ -29,7 +29,6 @@ export type PropsContextConversationItem = {
const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {
const { triggerId } = props;
// TODO Theming - Waiting on Session Components for correct colors
return (
<SessionContextMenuContainer>
<Menu id={triggerId} animation={animation.fade}>

1
ts/state/selectors/conversations.ts
Unescape Escape View File

@ -954,6 +954,7 @@ export const getMessagePreviewProps = createSelector(getMessagePropsByMessageId,
}
const msgProps: MessagePreviewSelectorProps = pick(props.propsForMessage, [
'direction',
'attachments',
'previews',
]);

25
ts/themes/SessionTheme.tsx
Unescape Escape View File

@ -505,6 +505,8 @@ export const SessionGlobalStyles = createGlobalStyle`
/* Chat (Interaction) Buttons */
/* Also used for Reaction Bar Buttons */
/* Used for Link Preview Attachment Icons */
/* Used for Media Grid Item Play Button */
--chat-buttons-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
--chat-buttons-icon-color: var(--text-primary-color);
@ -553,7 +555,7 @@ export const SessionGlobalStyles = createGlobalStyle`
/* TODO Theming Consolidate with code */
/* Conversation Tab */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item etc. */
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
--conversation-tab-background-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
--conversation-tab-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--conversation-tab-background-selected-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
@ -625,6 +627,7 @@ export const SessionGlobalStyles = createGlobalStyle`
--toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
/* Right Panel Items */
/* Also used for Session Dropdown */
--right-panel-item-background-color: var(--background-secondary-color);
--right-panel-item-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
--right-panel-item-text-color: var(--text-primary-color);
@ -635,6 +638,26 @@ export const SessionGlobalStyles = createGlobalStyle`
--session-logo-text-dark-filter: none;
--session-logo-text-current-filter: var(--session-logo-text-light-filter);
/* Right Click / Context Menu) */
--context-menu-background-color: var(--background-primary-color);
--context-menu-background-hover-color: var(--primary-color);
--context-menu-text-color: var(--text-primary-color);
--context-menu-text-hover-color: var(--black-color);
--context-menu-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
/* Message Link Preview */
/* Also used for Images */
/* Also used for the Media Grid Items */
/* Also used for Staged Generic Attachments */
/* Also used for FileDropZone */
/* Used for Quote References Not Found */
/* Same for all Themes */
--message-link-preview-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
/* Shadows */
/* Used across all themes */
--shadow-color: var(--black-color);
--drop-shadow: 0 0 4px 0 var(--shadow-color);
};
`;

108
ts/themes/switchTheme.tsx
Unescape Escape View File

@ -357,6 +357,32 @@ function loadClassicLight(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
function loadClassicDark(primaryColor?: PrimaryColorStateType) {
@ -686,11 +712,11 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
document.documentElement.style.setProperty(
'--right-panel-item-background-color',
'var(--background-secondary-color)'
THEMES.CLASSIC_DARK.COLOR2
);
document.documentElement.style.setProperty(
'--right-panel-item-background-hover-color',
THEMES.CLASSIC_DARK.COLOR4
THEMES.CLASSIC_DARK.COLOR3
);
document.documentElement.style.setProperty(
'--right-panel-item-text-color',
@ -703,6 +729,32 @@ function loadClassicDark(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
function loadOceanLight(primaryColor?: PrimaryColorStateType) {
@ -1055,6 +1107,32 @@ function loadOceanLight(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
function loadOceanDark(primaryColor?: PrimaryColorStateType) {
@ -1397,6 +1475,32 @@ function loadOceanDark(primaryColor?: PrimaryColorStateType) {
'--session-logo-text-current-filter',
'var(--session-logo-text-light-filter)'
);
document.documentElement.style.setProperty(
'--context-menu-background-color',
'var(--background-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-background-hover-color',
'var(--primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-color',
'var(--text-primary-color)'
);
document.documentElement.style.setProperty(
'--context-menu-text-hover-color',
'var(--black-color)'
);
document.documentElement.style.setProperty(
'--context-menu-shadow-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`
);
document.documentElement.style.setProperty(
'--message-link-preview-background-color',
`rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`
);
}
export async function switchTheme(theme: ThemeStateType) {

Write Preview
Loading…
Cancel
Save