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"
>
- Who works with you?
+ Invite your team members
{
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",