Fixed non-transparent backgrounds for emoji only texts

src/styles/_colors.scss

@@ -14,7 +14,7 @@ $colors: (
     from-me-text: white,
     not-from-me: (
         light: rgb(229,229,234),
-        dark: #3B3B3D
+        dark: #272729
     ),
     not-from-me-text: (
         light: black,
@@ -29,23 +29,23 @@ $colors: (
     active-chat-text: white,
     master-detail-background: (
         light: #F0F0F0,
-        dark: #242424
+        dark: #010001
     ),
     master-detail-border-color: (
         light: #E2E2E2,
-        dark: #424242
+        dark: #2a2a2c
     ),
     chat-sidebar-title: (
         light: #555655,
         dark: white
     ),
     ack-bubble-background: (
         light: rgb(229, 229, 234),
-        dark: rgb(92, 86, 84)
+        dark: rgb(39, 39, 41)
     ),
     ack-glyph-color: (
         light: rgb(124, 124, 124),
-        dark: rgb(206, 206, 210)
+        dark: rgb(129, 129, 128)
     ),
     chat-sidebar-description: #808080,
     blue-text: #2888F6,
@@ -61,7 +61,7 @@ $colors: (
         light: linear-gradient($transcript-business-chat-gradient-stop, $transcript-business-chat-gradient-start),
         dark: linear-gradient($transcript-business-chat-gradient-dark-stop, $transcript-business-chat-gradient-dark-start)
     ),
-    heart-active: #E86895,
+    heart-active: #FA5C99,
     ack-active: white,
     attachment-background: (
         light: #E9E9EB,
@@ -75,7 +75,7 @@ $colors: (
     ),
     composition-placeholder: (
         light: rgba(0, 0, 0, 0.3),
-        dark: rgba(255, 255, 255, 0.3)
+        dark: rgba(70, 71, 75, 255)
     ),
     text: (
         light: black,
@@ -87,12 +87,20 @@ $colors: (
     ),
     background: (
         light: white,
-        dark: #1E1E1E
+        dark: #010001
     ),
     background-secondary: (
         light: rgba(0, 0, 0, 0.1),
         dark: rgba(255, 255, 255, 0.1)
     ),
+    tapback-background: (
+        light: rgba(255, 255, 255, 1),
+        dark: rgba(45, 45, 46, 255)
+    ),
+    to-text: (
+        light: rgba(0, 0, 0, 0.6),
+        dark: rgba(157, 157, 157, 1)
+    ),
     lp-bottom-caption: rgb(142, 142, 145)
 );
 

src/styles/_context-menu.scss

@@ -12,7 +12,7 @@
 
         .react-contexify__item__content {
             padding: 4px 6px;
-            color: white !important;
+            color: var(--not-from-me-text) !important;
         }
     }
 }

src/styles/ack-picker/AcknowledgmentPicker.scss

@@ -13,8 +13,7 @@
     width: 200px;
     column-gap: 5px;
 
-    background: white;
-
+    background: var(--tapback-background);
     border-radius: 25px;
 
     padding: 2.5px 7.5px;
@@ -39,7 +38,7 @@
         }
 
         &::before {
-            background-color: white;
+            background-color: var(--tapback-background);
         }
 
         &[attr-selected=true] {

src/styles/toolbar/_transcript-toolbar.scss

@@ -13,7 +13,7 @@
 
         &::before {
             content: 'To: ';
-            color: rgba(0, 0, 0, 0.6);
+            color: var(--to-text);
         }
     }
 

src/styles/transcript/AcknowledgmentPickerPresenter.scss

@@ -64,7 +64,7 @@ $acknowledgment-button-initial: scale(1, 1) translate(75px, -100px);
     top: 0;
     left: 0;
 
-    background: white;
+    background: var(--tapback-background);
     border-radius: 25px;
 
     width: 100px;

src/styles/transcript/items/IMChatItem.scss

@@ -190,7 +190,7 @@
         margin-left: 1.5em;
         font-size: 10px;
         margin-bottom: 3px;
-        color: #7e7e7e;
+        color: #7E7E7E;
     }
 
     .buddy-name + [data-has-acknowledgments=true] {
@@ -343,10 +343,11 @@
             mask-border-source: none !important;
             mask-border-slice: none !important;
             mask-border-width: none !important;
-            background: none !important;
+            --bubble-background: var(--background) !important;
 
             &[data-item-type=text] {
                 --font-size: 48px !important;
+                --text-color: var(--background).invert !important;
 
                 .item-inner {
                     padding-left: 8px !important;

src/styles/transcript/items/LPRichLink.scss

@@ -8,7 +8,7 @@
         --lp-background-override: var(--dark-lp-background-override);
     }
 
-    background-color: var(--lp-background-override, rgb(229, 230, 233));
+    background-color: var(--lp-background-override, var(--not-from-me));
 
     max-width: 300px;