MM-54777 - Updating invite modal guest button (#24977)

* MM-54777 - Updating invite modal guest button

* Updating button

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={{

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;

webapp/channels/src/sass/components/_channel-invite-modal.scss

@@ -168,13 +168,10 @@
     }
 
     .invite-as-guest {
-        width: fit-content;
+        margin-top: 8px;
-        order: 1;
-        padding-top: 8px;
         margin-right: 2.4rem;
         margin-bottom: 22px;
         margin-left: auto;
-        font-weight: 600;
     }
 
     .multi-select__footer {

webapp/channels/src/sass/responsive/_tablet.scss

@@ -194,7 +194,7 @@
                 }
 
                 .icon-arrow-collapse {
-                    display: inline-block;
+                    display: inline-flex;
                 }
             }
         }