[MM-57884] Layout issues with initial tool selection and invite screens in workspace (#26932)

webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`InviteMembers component should match snapshot when it is cloud 1`] = `
           class="PreparingWorkspaceTitle"
         >
           <span>
-            Who works with you?
+            Invite your team members
           </span>
         </h1>
         <p

webapp/channels/src/components/preparing_workspace/invite_members.tsx

@@ -167,7 +167,7 @@ const InviteMembers = (props: Props) => {
                 <Title>
                     <FormattedMessage
                         id={'onboarding_wizard.invite_members_cloud.title'}
-                        defaultMessage='Who works with you?'
+                        defaultMessage='Invite your team members'
                     />
                 </Title>
                 <Description>

webapp/channels/src/components/preparing_workspace/mixins.scss

@@ -11,24 +11,24 @@
     }
 }
 
-@mixin sideIllustrationKeyframe($name, $rightPx) {
+@mixin sideIllustrationKeyframe($name, $startOffsetPx, $endOffsetPx) {
     @keyframes #{$name}SlideInRight {
         from {
-            right: -#{$rightPx}px;
+            right: #{$startOffsetPx}px;
         }
 
         to {
-            right: 0;
+            right: #{$endOffsetPx}px;
         }
     }
 
     @keyframes #{$name}SlideOutRight {
         from {
-            right: 0;
+            right: #{$endOffsetPx}px;
         }
 
         to {
-            right: -#{$rightPx}px;
+            right: #{$startOffsetPx}px;
         }
     }
 }

webapp/channels/src/components/preparing_workspace/preparing_workspace.scss

@@ -95,7 +95,7 @@
         animation-fill-mode: forwards;
         animation-timing-function: ease-in-out;
 
-        @include sideIllustrationKeyframe(invitation, 651);
+        @include sideIllustrationKeyframe(invitation, -651, 0);
 
         &.enter {
             animation-name: invitationSlideInRight;
@@ -105,25 +105,6 @@
             animation-name: invitationSlideOutRight;
         }
     }
-
-    &__roles-illustration {
-        position: absolute;
-        right: -295px;
-        bottom: 0;
-        animation-duration: 0.3s;
-        animation-fill-mode: forwards;
-        animation-timing-function: ease-in-out;
-
-        @include sideIllustrationKeyframe(roles, 295);
-
-        &.enter {
-            animation-name: rolesSlideInRight;
-        }
-
-        &.exit {
-            animation-name: rolesSlideOutRight;
-        }
-    }
 }
 
 .PreparingWorkspacePageContainer {
@@ -149,9 +130,22 @@
     }
 }
 
-@media screen and (max-width: 1199px) {
+@media screen and (max-width: 1200px) {
-    .PreparingWorkspace__roles-illustration,
     .PreparingWorkspace__invite-members-illustration {
         display: none;
     }
 }
+
+@media screen and (min-width: 1200px) and (max-width: 1500px) {
+    .PreparingWorkspace__invite-members-illustration {
+        @include sideIllustrationKeyframe(invitation, -651, -200);
+
+        &.enter {
+            animation-name: invitationSlideInRight;
+        }
+
+        &.exit {
+            animation-name: invitationSlideOutRight;
+        }
+    }
+}

webapp/channels/src/i18n/en.json

@@ -4278,7 +4278,7 @@
   "notify_here.question": "By using **@here** you are about to send notifications to up to **{totalMembers} other people**. Are you sure you want to do this?",
   "notify_here.question_timezone": "By using **@here** you are about to send notifications to up to **{totalMembers} other people** in **{timezones, number} {timezones, plural, one {timezone} other {timezones}}**. Are you sure you want to do this?",
   "numMembers": "{num, number} {num, plural, one {member} other {members}}",
-  "onboarding_wizard.invite_members_cloud.title": "Who works with you?",
+  "onboarding_wizard.invite_members_cloud.title": "Invite your team members",
   "onboarding_wizard.invite_members.copied_link": "Link Copied",
   "onboarding_wizard.invite_members.copy_link": "Copy Link",
   "onboarding_wizard.invite_members.copy_link_input": "team invite link",