feat: huge refactor of the quote styling for theming

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;
 
-// This is related to the quote logic inside messages
+    overflow-x: hidden;
-.module-quote {
+    white-space: nowrap;
-  &--outgoing {
+    text-overflow: ellipsis;
-    .module-quote__primary__author {
+    color: var(--message-bubbles-received-text-color);
-      color: var(--message-bubbles-sent-text-color);
-      font-weight: bold;
 
-      .module-contact-name {
+    .module-contact-name {
-        font-weight: bold;
+      font-weight: bold;
-      }
     }
-    .module-quote__primary__text {
+  }
-      color: var(--message-bubbles-sent-text-color);
+  &__primary__text {
+    font-size: 14px;
+    line-height: 18px;
+    text-align: start;
 
-      a {
+    overflow-wrap: break-word;
-        color: var(--message-bubbles-sent-text-color);
+    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 {
+  /* Icons */
-    .module-quote__primary__author {
+  &__icon-container {
-      color: var(--message-bubbles-sent-text-color);
+    flex: initial;
-      font-weight: bold;
+    min-width: 54px;
-      .module-contact-name {
+    width: 54px;
-        font-weight: bold;
+    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 {
+    &__icon {
-      color: var(--message-bubbles-sent-text-color);
+      width: 24px;
+      height: 24px;
 
-      a {
+      &--file {
-        color: var(--message-bubbles-sent-text-color);
+        @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 {
+  /* Generic Files */
-  position: absolute;
+  &__generic {
-  top: 4px;
+    &-file {
-  right: 4px;
+      display: flex;
-  height: 16px;
+      flex-direction: row;
-  width: 16px;
+      align-items: center;
-
+    }
-  background-color: rgba(255, 255, 255, 0.75);
+    &-file__icon {
-  border-radius: 50%;
+      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 {
+  /* Reference Warning */
-  width: 100%;
+  &__reference {
-  height: 100%;
+    &-warning {
-  cursor: pointer;
+      height: 26px;
-  @include color-svg('../images/x.svg', var(--color-gray-color));
+      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 {
+    &-warning__icon {
-  flex: initial;
+      height: 16px;
-  min-width: 54px;
+      width: 16px;
-  width: 54px;
+      @include color-svg('../images/broken-link.svg', var(--message-bubbles-received-text-color));
-  max-height: 54px;
+    }
-  position: relative;
 
-  img {
+    &-warning__text {
-    width: 100%;
+      margin-inline-start: 6px;
-    height: 100%;
+      color: var(--message-bubbles-received-text-color);
-    object-fit: cover;
+      font-size: var(--font-size-sm);
+      line-height: 18px;
+    }
   }
 
-  &__inner {
+  /* Misc */
-    position: absolute;
+  &--no-click {
-    top: 0;
+    cursor: auto;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 }
 
-.module-quote__icon-container__circle-background {
+/* Outgoing messages */
-  display: flex;
+.module-quote--outgoing {
-  align-items: center;
+  color: var(--message-bubbles-sent-text-color);
-  justify-content: center;
+  .module-quote {
-
+    &__primary__type-label {
-  height: 32px;
+      color: var(--message-bubbles-sent-text-color);
-  width: 32px;
+      border-color: var(--message-bubbles-sent-text-color);
-  border-radius: 50%;
+    }
-  background-color: var(--color-white-color);
+    &__primary__author {
-}
+      color: var(--message-bubbles-sent-text-color);
-
+    }
-.module-quote__icon-container__icon {
+    &__primary__text {
-  width: 24px;
+      color: var(--message-bubbles-sent-text-color);
-  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 {
+      a {
-  &-file {
+        color: var(--message-bubbles-sent-text-color);
-    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);
+    &__generic {
-    overflow-x: hidden;
+      &-file__text {
-    white-space: nowrap;
+        color: var(--message-bubbles-sent-text-color);
-    text-overflow: ellipsis;
+      }
+    }
   }
 }
 
-.module-quote__reference {
+.module-quote-container {
-  &-warning {
+  margin-bottom: 5px;
-    height: 26px;
+  margin-top: 10px;
-    display: flex;
+  padding-left: 10px;
-    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 {
+  /* This is not within the module-quote class so we handle it separately */
-    margin-inline-start: 6px;
+  .module-quote__reference-warning--outgoing {
-    color: var(--color-darkest-gray-color);
+    .module-quote__reference-warning__text {
-    font-size: var(--font-size-sm);
+      color: var(--message-bubbles-sent-text-color);
-    line-height: 18px;
+    }
+    .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% {

ts/components/conversation/message/message-content/Quote.tsx

@@ -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

ts/themes/SessionTheme.tsx

@@ -650,6 +650,7 @@ export const SessionGlobalStyles = createGlobalStyle`
     /* 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);