fix: qa feedback - Fixed community invitation theming and icons

patelkaren · Oct 17, 2022 · e28c5e9 · e28c5e9
1 parent 93f814e
commit e28c5e9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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>