updates to action button styles and reworked grouping of buttons

webapp/channels/src/components/post_view/channel_intro_message/add_members_button.scss

@@ -6,7 +6,6 @@
     .titleAndButton {
         display: flex;
         flex-direction: column;
-        padding: 20px 5px;
         margin-left: 20px;
 
         > span {

webapp/channels/src/components/post_view/channel_intro_message/add_members_button.tsx

@@ -67,25 +67,23 @@ const LessThanMaxFreeUsers = ({pluginButtons}: {pluginButtons: React.ReactNode})
         <>
             {pluginButtons}
             <div className='LessThanMaxFreeUsers'>
-                <div className='titleAndButton'>
-                    <ToggleModalButton
-                        ariaLabel={localizeMessage('intro_messages.inviteOthers', 'Invite others to the workspace')}
-                        id='introTextInvite'
-                        className='btn btn-sm btn-primary'
-                        modalId={ModalIdentifiers.INVITATION}
-                        dialogType={InvitationModal}
-                        onClick={() => trackEvent('channel_intro_message', 'click_invite_button')}
-                    >
-                        <i
-                            className='icon-email-plus-outline'
-                            title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
-                        />
-                        <FormattedMessage
-                            id='intro_messages.inviteOthersToWorkspace.button'
-                            defaultMessage='Invite others to the workspace'
-                        />
-                    </ToggleModalButton>
-                </div>
+                <ToggleModalButton
+                    ariaLabel={localizeMessage('intro_messages.inviteOthers', 'Invite others to the workspace')}
+                    id='introTextInvite'
+                    className='btn btn-sm btn-primary'
+                    modalId={ModalIdentifiers.INVITATION}
+                    dialogType={InvitationModal}
+                    onClick={() => trackEvent('channel_intro_message', 'click_invite_button')}
+                >
+                    <i
+                        className='icon-email-plus-outline'
+                        title={formatMessage({id: 'generic_icons.add', defaultMessage: 'Add Icon'})}
+                    />
+                    <FormattedMessage
+                        id='intro_messages.inviteOthersToWorkspace.button'
+                        defaultMessage='Invite others to the workspace'
+                    />
+                </ToggleModalButton>
             </div>
         </>
     );

webapp/channels/src/components/post_view/channel_intro_message/channel_intro_message.tsx

@@ -183,6 +183,15 @@ function createGMIntroMessage(
                 />
             ));
 
+        const actionButtons = (
+            <div className='channel-intro__actions'>
+                {createFavoriteButton(isFavorite, toggleFavorite)}
+                {createSetHeaderButton(channel)}
+                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
+                <PluggableIntroButtons channel={channel}/>
+            </div>
+        );
+
         return (
             <div
                 id={channelIntroId}
@@ -201,12 +210,7 @@ function createGMIntroMessage(
                     />
                     {getGMIntroMessageSpecificPart(currentUserProfile, channelMembership)}
                 </div>
-                <div className='channel-intro__actions'>
-                    {createFavoriteButton(isFavorite, toggleFavorite)}
-                    {createSetHeaderButton(channel)}
-                    {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
-                    <PluggableIntroButtons channel={channel}/>
-                </div>
+                {actionButtons}
             </div>
         );
     }
@@ -247,6 +251,14 @@ function createDMIntroMessage(
             setHeaderButton = createSetHeaderButton(channel);
         }
 
+        const actionButtons = (
+            <div className='channel-intro__actions'>
+                {createFavoriteButton(isFavorite, toggleFavorite)}
+                {setHeaderButton}
+                {pluggableButton}
+            </div>
+        );
+
         return (
             <div
                 id={channelIntroId}
@@ -277,11 +289,7 @@ function createDMIntroMessage(
                         }}
                     />
                 </div>
-                <div className='channel-intro__actions'>
-                    {createFavoriteButton(isFavorite, toggleFavorite)}
-                    {pluggableButton}
-                    {setHeaderButton}
-                </div>
+                {actionButtons}
             </div>
         );
     }
@@ -308,13 +316,16 @@ function createOffTopicIntroMessage(
     isMobileView: boolean,
     currentUser: UserProfileType,
     toggleFavorite: () => void,
-    stats: any, usersLimit: number,
+    stats: any,
+    usersLimit: number,
 ) {
     const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
     const children = createSetHeaderButton(channel);
     const totalUsers = stats.total_users_count;
+    const inviteUsers = totalUsers < usersLimit;
 
     let setHeaderButton = null;
+    let actionButtons = null;
 
     if (children) {
         setHeaderButton = (
@@ -337,6 +348,23 @@ function createOffTopicIntroMessage(
         />
     );
 
+    if (inviteUsers) {
+        actionButtons = (
+            <div className='channel-intro__actions'>
+                {actionButtons = channelInviteButton}
+            </div>
+        );
+    } else {
+        actionButtons = (
+            <div className='channel-intro__actions'>
+                {createFavoriteButton(isFavorite, toggleFavorite)}
+                {channelInviteButton}
+                {setHeaderButton}
+                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
+            </div>
+        );
+    }
+
     return (
         <div
             id='channelIntro'
@@ -355,12 +383,7 @@ function createOffTopicIntroMessage(
                     }}
                 />
             </div>
-            <div className='channel-intro__actions'>
-                {createFavoriteButton(isFavorite, toggleFavorite)}
-                {channelInviteButton}
-                {setHeaderButton}
-                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
-            </div>
+            {actionButtons}
         </div>
     );
 }
@@ -381,9 +404,12 @@ function createDefaultIntroMessage(
     let teamInviteLink = null;
     const totalUsers = stats.total_users_count;
     const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
+    const inviteUsers = totalUsers < usersLimit;
 
     let setHeaderButton = null;
     let pluginButtons = null;
+    let actionButtons = null;
+
     if (!isReadOnly) {
         pluginButtons = <PluggableIntroButtons channel={channel}/>;
         const children = createSetHeaderButton(channel);
@@ -439,6 +465,24 @@ function createDefaultIntroMessage(
         );
     }
 
+    if (inviteUsers) {
+        actionButtons = (
+            <div className='channel-intro__actions'>
+                {actionButtons = teamInviteLink}
+            </div>
+        );
+    } else {
+        actionButtons = (
+            <div className='channel-intro__actions'>
+                {createFavoriteButton(isFavorite, toggleFavorite)}
+                {teamInviteLink}
+                {setHeaderButton}
+                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
+                {teamIsGroupConstrained && pluginButtons}
+            </div>
+        );
+    }
+
     return (
         <div
             id='channelIntro'
@@ -468,13 +512,7 @@ function createDefaultIntroMessage(
                     />
                 }
             </div>
-            <div className='channel-intro__actions'>
-                {createFavoriteButton(isFavorite, toggleFavorite)}
-                {teamInviteLink}
-                {teamIsGroupConstrained && pluginButtons}
-                {teamIsGroupConstrained && setHeaderButton}
-                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
-            </div>
+            {actionButtons}
         </div>
     );
 }
@@ -493,8 +531,10 @@ function createStandardIntroMessage(
 ) {
     const uiName = channel.display_name;
     let memberMessage;
+    let teamInviteLink = null;
     const channelIsArchived = channel.delete_at !== 0;
     const totalUsers = stats.total_users_count;
+    const inviteUsers = totalUsers < usersLimit;
 
     if (channelIsArchived) {
         memberMessage = '';
@@ -599,6 +639,7 @@ function createStandardIntroMessage(
 
     const isPrivate = channel.type === Constants.PRIVATE_CHANNEL;
     let setHeaderButton = null;
+    let actionButtons = null;
     const children = createSetHeaderButton(channel);
     if (children) {
         setHeaderButton = (
@@ -612,7 +653,7 @@ function createStandardIntroMessage(
         );
     }
 
-    const channelInviteButton = (
+    teamInviteLink = (
         <AddMembersButton
             totalUsers={totalUsers}
             usersLimit={usersLimit}
@@ -621,6 +662,24 @@ function createStandardIntroMessage(
         />
     );
 
+    if (inviteUsers) {
+        actionButtons = (
+            <div className='channel-intro__actions'>
+                {actionButtons = teamInviteLink}
+            </div>
+        );
+    } else {
+        actionButtons = (
+            <div className='channel-intro__actions'>
+                {createFavoriteButton(isFavorite, toggleFavorite)}
+                {teamInviteLink}
+                {setHeaderButton}
+                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
+                <PluggableIntroButtons channel={channel}/>
+            </div>
+        );
+    }
+
     return (
         <div
             id='channelIntro'
@@ -638,12 +697,7 @@ function createStandardIntroMessage(
                 {memberMessage}
                 {purposeMessage}
             </div>
-            <div className='channel-intro__actions'>
-                {createFavoriteButton(isFavorite, toggleFavorite)}
-                {channelInviteButton}
-                {setHeaderButton}
-                {!isMobileView && createNotificationPreferencesButton(channel, currentUser)}
-            </div>
+            {actionButtons}
         </div>
     );
 }

webapp/channels/src/components/post_view/channel_intro_message/pluggable_intro_buttons/pluggable_intro_buttons.tsx

@@ -23,7 +23,7 @@ const PluggableIntroButtons = React.memo((props: Props) => {
         return (
             <button
                 key={buttonProps.id}
-                className={'intro-links color--link channelIntroButton style--none'}
+                className={'action-button'}
                 onClick={() => buttonProps.action?.(props.channel, props.channelMember)}
             >
                 {buttonProps.icon}

webapp/channels/src/sass/components/_action-button.scss

@@ -17,7 +17,8 @@
     outline: none !important;
     transition: all 0.15s ease;
 
-    &.active {
+    &.active,
+    &:active {
         background-color: rgba(var(--button-bg-rgb), 0.04);
         color: var(--button-bg);