From 52fe06db4e9b0192122a29c5ffa775bc6c1c9dfb Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Wed, 18 Oct 2023 14:14:47 +0500
Subject: [PATCH] MM-54777 - Updating invite modal guest button (#24977)

* MM-54777 - Updating invite modal guest button

* Updating button
---
 .../channel_invite_modal/channel_invite_modal.tsx   |  2 +-
 webapp/channels/src/sass/components/_buttons.scss   | 13 +++++++++++++
 .../src/sass/components/_channel-invite-modal.scss  |  5 +----
 webapp/channels/src/sass/responsive/_tablet.scss    |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
index ad5ed21961..acd278f1d5 100644
--- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
@@ -474,7 +474,7 @@ export default class ChannelInviteModal extends React.PureComponent<Props, State
             return (
                 <ToggleModalButton
                     id='inviteGuest'
-                    className={`${props.inviteAsGuest ? 'invite-as-guest' : ''} btn btn-tertiary`}
+                    className={`${props.inviteAsGuest ? 'invite-as-guest' : ''} btn btn-link`}
                     modalId={ModalIdentifiers.INVITATION}
                     dialogType={InvitationModal}
                     dialogProps={{
diff --git a/webapp/channels/src/sass/components/_buttons.scss b/webapp/channels/src/sass/components/_buttons.scss
index 24936c26d9..8b11f38cbd 100644
--- a/webapp/channels/src/sass/components/_buttons.scss
+++ b/webapp/channels/src/sass/components/_buttons.scss
@@ -179,6 +179,19 @@ button {
         }
     }
 
+    &.btn-link {
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: rgba(var(--button-bg-rgb), 1);
+
+        &:hover,
+        &:focus,
+        &:active {
+            text-decoration: underline;
+        }
+    }
+
     &.btn-primary {
         position: relative;
         border-color: transparent;
diff --git a/webapp/channels/src/sass/components/_channel-invite-modal.scss b/webapp/channels/src/sass/components/_channel-invite-modal.scss
index ae1158f92e..d2552145f9 100644
--- a/webapp/channels/src/sass/components/_channel-invite-modal.scss
+++ b/webapp/channels/src/sass/components/_channel-invite-modal.scss
@@ -168,13 +168,10 @@
     }
 
     .invite-as-guest {
-        width: fit-content;
-        order: 1;
-        padding-top: 8px;
+        margin-top: 8px;
         margin-right: 2.4rem;
         margin-bottom: 22px;
         margin-left: auto;
-        font-weight: 600;
     }
 
     .multi-select__footer {
diff --git a/webapp/channels/src/sass/responsive/_tablet.scss b/webapp/channels/src/sass/responsive/_tablet.scss
index 3825479c61..64daa5c5af 100644
--- a/webapp/channels/src/sass/responsive/_tablet.scss
+++ b/webapp/channels/src/sass/responsive/_tablet.scss
@@ -194,7 +194,7 @@
                 }
 
                 .icon-arrow-collapse {
-                    display: inline-block;
+                    display: inline-flex;
                 }
             }
         }