diff --git a/stylesheets/_quote.scss b/stylesheets/_quote.scss index d64219745..f065ad7c5 100644 --- a/stylesheets/_quote.scss +++ b/stylesheets/_quote.scss @@ -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(--text-primary-color); + 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; + + overflow-x: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--message-bubbles-received-text-color); + + .module-contact-name { + font-weight: bold; + } + } + &__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; + + color: var(--message-bubbles-received-text-color); + + a { + color: var(--message-bubbles-received-text-color); + } + } + &__primary__filename-label { + font-size: 12px; + } + + /* 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); + } + } + &__icon { + width: 24px; + height: 24px; + + &--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)); + } + } + } + + /* 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; + } + } + + /* 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; + } + + &-warning__icon { + height: 16px; + width: 16px; + @include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color)); + } + + &-warning__text { + margin-inline-start: 6px; + color: var(--message-bubbles-received-text-color); + font-size: var(--font-size-sm); + line-height: 18px; + } + } + + /* Misc */ + &--no-click { + cursor: auto; } } -// This is related to the quote logic inside messages -.module-quote { - &--outgoing { - .module-quote__primary__author { +/* Outgoing messages */ +.module-quote--outgoing { + color: var(--message-bubbles-sent-text-color); + .module-quote { + &__primary__type-label { color: var(--message-bubbles-sent-text-color); - font-weight: bold; - - .module-contact-name { - font-weight: bold; - } + border-color: var(--message-bubbles-sent-text-color); } - .module-quote__primary__text { + &__primary__author { + color: var(--message-bubbles-sent-text-color); + } + &__primary__text { color: var(--message-bubbles-sent-text-color); a { color: var(--message-bubbles-sent-text-color); } } - } - &--incoming { - .module-quote__primary__author { - color: var(--message-bubbles-sent-text-color); - font-weight: bold; - .module-contact-name { - font-weight: bold; - } - } - .module-quote__primary__text { - color: var(--message-bubbles-sent-text-color); - - a { + &__generic { + &-file__text { color: var(--message-bubbles-sent-text-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%; -} - -.module-quote__close-button { - width: 100%; - height: 100%; - cursor: pointer; - @include color-svg('../images/x.svg', var(--color-gray-color)); -} - -.module-quote__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; + /* 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)); + } } } -.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)); - } -} - -.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); - - max-width: calc(100% - 26px); - overflow-x: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} - -.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)); - } - - &-warning__text { - margin-inline-start: 6px; - color: var(--color-darkest-gray-color); - font-size: var(--font-size-sm); - line-height: 18px; - } -} - -$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% { diff --git a/ts/components/conversation/message/message-content/Quote.tsx b/ts/components/conversation/message/message-content/Quote.tsx index 2169551db..53cc63b9f 100644 --- a/ts/components/conversation/message/message-content/Quote.tsx +++ b/ts/components/conversation/message/message-content/Quote.tsx @@ -316,7 +316,9 @@ export const QuoteReferenceWarning = (