fix: giphy bg

Author: isekovanic

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -220,12 +220,10 @@ const useStyles = ({
     return StyleSheet.create({
       container: {
         backgroundColor: hasActions
-          ? isMyMessage
-            ? semantics.chatBgAttachmentOutgoing
-            : semantics.chatBgAttachmentIncoming
+          ? semantics.chatBgOutgoing
           : isMyMessage
-            ? semantics.chatBgOutgoing
-            : semantics.chatBgIncoming,
+            ? semantics.chatBgAttachmentOutgoing
+            : semantics.chatBgAttachmentIncoming,
         borderRadius: primitives.radiusLg,
         maxWidth: 256, // TODO: Not sure how to fix this
         overflow: 'hidden',

package/src/components/Attachment/__tests__/Giphy.test.js

@@ -117,37 +117,37 @@ describe('Giphy', () => {
     });
   });
 
-  it('uses the default outgoing bubble background for outgoing giphys', async () => {
+  it('uses the outgoing attachment background for outgoing giphys', async () => {
     render(getAttachmentComponent({ attachment }, { isMyMessage: true }));
 
     await waitFor(() => {
       const style = screen.getByTestId('giphy-attachment').props.style;
       expect(style).toEqual(
         expect.arrayContaining([
           expect.objectContaining({
-            backgroundColor: lightTheme.semantics.chatBgOutgoing,
+            backgroundColor: lightTheme.semantics.chatBgAttachmentOutgoing,
           }),
         ]),
       );
     });
   });
 
-  it('uses the default incoming bubble background for incoming giphys', async () => {
+  it('uses the incoming attachment background for incoming giphys', async () => {
     render(getAttachmentComponent({ attachment }, { isMyMessage: false }));
 
     await waitFor(() => {
       const style = screen.getByTestId('giphy-attachment').props.style;
       expect(style).toEqual(
         expect.arrayContaining([
           expect.objectContaining({
-            backgroundColor: lightTheme.semantics.chatBgIncoming,
+            backgroundColor: lightTheme.semantics.chatBgAttachmentIncoming,
           }),
         ]),
       );
     });
   });
 
-  it('uses the outgoing attachment background for ephemeral giphy previews', async () => {
+  it('uses the outgoing bubble background for ephemeral giphy previews', async () => {
     render(
       getAttachmentComponent(
         {
@@ -156,7 +156,7 @@ describe('Giphy', () => {
             actions,
           },
         },
-        { isMyMessage: true },
+        { isMyMessage: false },
       ),
     );
 
@@ -165,7 +165,7 @@ describe('Giphy', () => {
       expect(style).toEqual(
         expect.arrayContaining([
           expect.objectContaining({
-            backgroundColor: lightTheme.semantics.chatBgAttachmentOutgoing,
+            backgroundColor: lightTheme.semantics.chatBgOutgoing,
           }),
         ]),
       );