From 4135ff13176773df12eaf5b60c8f53f030d876de Mon Sep 17 00:00:00 2001
From: M-ZubairAhmed <m-zubairahmed@protonmail.com>
Date: Tue, 7 May 2024 08:52:46 +0000
Subject: [PATCH] [MM-57884] Layout issues with initial tool selection and
 invite screens in workspace (#26932)

---
 .../invite_members.test.tsx.snap              |  2 +-
 .../preparing_workspace/invite_members.tsx    |  2 +-
 .../preparing_workspace/mixins.scss           | 10 ++---
 .../preparing_workspace.scss                  | 38 ++++++++-----------
 webapp/channels/src/i18n/en.json              |  2 +-
 5 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap b/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap
index eabb389cb1..cc26552631 100644
--- a/webapp/channels/src/components/preparing_workspace/__snapshots__/invite_members.test.tsx.snap
+++ b/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
diff --git a/webapp/channels/src/components/preparing_workspace/invite_members.tsx b/webapp/channels/src/components/preparing_workspace/invite_members.tsx
index c7b0441f39..6fbf910e35 100644
--- a/webapp/channels/src/components/preparing_workspace/invite_members.tsx
+++ b/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>
diff --git a/webapp/channels/src/components/preparing_workspace/mixins.scss b/webapp/channels/src/components/preparing_workspace/mixins.scss
index 8350418187..95feada8db 100644
--- a/webapp/channels/src/components/preparing_workspace/mixins.scss
+++ b/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;
         }
     }
 }
diff --git a/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss b/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss
index 16cf737a00..67f355dacf 100644
--- a/webapp/channels/src/components/preparing_workspace/preparing_workspace.scss
+++ b/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) {
-    .PreparingWorkspace__roles-illustration,
+@media screen and (max-width: 1200px) {
     .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;
+        }
+    }
+}
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 32c697af57..0c8716e4d2 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/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",