From e28c5e98853849bb1449548d4fbdd86427e9335e Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 17 Oct 2022 14:49:21 +1100
Subject: [PATCH] fix: qa feedback - Fixed community invitation theming and
 icons

---
 stylesheets/_conversation.scss                |  6 ++++
 .../message/message-item/GroupInvitation.tsx  | 28 +++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index a6915236d..145cd05c1 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -21,6 +21,12 @@
   &.invitation-outgoing {
     background-color: var(--message-bubbles-sent-background-color);
     align-self: flex-end;
+
+    .contents {
+      .session-icon-button {
+        background-color: var(--transparent-color);
+      }
+    }
   }
 
   display: inline-block;
diff --git a/ts/components/conversation/message/message-item/GroupInvitation.tsx b/ts/components/conversation/message/message-item/GroupInvitation.tsx
index 8fafccf9f..ca11c53fd 100644
--- a/ts/components/conversation/message/message-item/GroupInvitation.tsx
+++ b/ts/components/conversation/message/message-item/GroupInvitation.tsx
@@ -4,6 +4,12 @@ import { PropsForGroupInvitation } from '../../../../state/ducks/conversations';
 import { acceptOpenGroupInvitation } from '../../../../interactions/messageInteractions';
 import { SessionIconButton } from '../../../icon';
 import { ReadableMessage } from './ReadableMessage';
+import styled from 'styled-components';
+
+const StyledIconContainer = styled.div`
+  background-color: var(--message-link-preview-background-color);
+  border-radius: 100%;
+`;
 
 export const GroupInvitation = (props: PropsForGroupInvitation) => {
   const { messageId, receivedAt, isUnread } = props;
@@ -24,14 +30,20 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
       <div className="group-invitation-container" id={`msg-${props.messageId}`}>
         <div className={classNames(classes)}>
           <div className="contents">
-            <SessionIconButton
-              iconColor="var(--background-secondary-color)"
-              iconType="plus"
-              iconSize={'large'}
-              onClick={() => {
-                acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
-              }}
-            />
+            <StyledIconContainer>
+              <SessionIconButton
+                iconColor={
+                  props.direction === 'outgoing'
+                    ? 'var(--message-bubbles-sent-text-color)'
+                    : 'var(--message-bubbles-received-text-color)'
+                }
+                iconType={props.direction === 'outgoing' ? 'communities' : 'plus'}
+                iconSize={'large'}
+                onClick={() => {
+                  acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
+                }}
+              />
+            </StyledIconContainer>
             <span className="group-details">
               <span className="group-name">{props.serverName}</span>
               <span className="group-type">{openGroupInvitation}</span>