[MM-69551] Update desktop onboarding for DISC audience

e2e/specs/policy/policy.test.ts

@@ -300,7 +300,7 @@ test.describe('policy', () => {
             }
             await welcomeWindow.waitForLoadState('domcontentloaded');
             const buttonText = await welcomeWindow.innerText('.WelcomeScreen .WelcomeScreen__button');
-            expect(buttonText).toBe('Get Started');
+            expect(buttonText).toBe('Get started');
         } finally {
             await closePolicyApp(app, userDataDir);
         }

e2e/specs/startup/app.test.ts

@@ -94,7 +94,7 @@ test.describe('startup/app', () => {
                 }
                 await welcomeModal.waitForLoadState('domcontentloaded');
                 const text = await welcomeModal.innerText('.WelcomeScreen .WelcomeScreen__button');
-                expect(text).toBe('Get Started');
+                expect(text).toBe('Get started');
             } finally {
                 await emptyApp?.close().catch(() => {});
                 if (userDataDir) {

e2e/specs/startup/welcome_screen_modal.test.ts

@@ -65,7 +65,7 @@ test.describe('startup/welcome_screen_modal', () => {
                     'welcome',
                     'collaborate in real time',
                     'start secure calls instantly',
-                    'integrate with tools you love',
+                    'integrate with your systems',
                 ]);
             } finally {
                 await app?.close().catch(() => {});

i18n/en.json

@@ -169,8 +169,8 @@
   "renderer.components.configureServer.error.preAuthRequired": "This server requires an authentication secret. You will be prompted to enter it when you connect to the server.",
   "renderer.components.configureServer.name.info": "The name that will be displayed in your server list",
   "renderer.components.configureServer.name.placeholder": "Server display name",
-  "renderer.components.configureServer.subtitle": "Set up your first server to connect to your<br></br>team’s communication hub",
-  "renderer.components.configureServer.title": "Let’s connect to a server",
+  "renderer.components.configureServer.subtitle": "Enter your server details to get started.",
+  "renderer.components.configureServer.title": "Connect securely to your server",
   "renderer.components.configureServer.url.info": "The URL of your Mattermost server",
   "renderer.components.configureServer.url.insecure": "Your server URL is potentially insecure. For best results, use a URL with the HTTPS protocol.",
   "renderer.components.configureServer.url.notMattermost": "The server URL provided does not appear to point to a valid Mattermost server. Please verify the URL and check your connection.",
@@ -313,14 +313,14 @@
   "renderer.components.showCertificateModal.subjectName": "Subject Name",
   "renderer.components.showCertificateModal.title": "Certificate information",
   "renderer.components.tabBar.newTab.tooltip": "New tab",
-  "renderer.components.welcomeScreen.button.getStarted": "Get Started",
-  "renderer.components.welcomeScreen.slides.calls.subtitle": "When typing isn’t fast enough, seamlessly move from chat to audio calls and screenshare without switching tools.",
+  "renderer.components.welcomeScreen.button.getStarted": "Get started",
+  "renderer.components.welcomeScreen.slides.calls.subtitle": "Seamlessly move from chat to audio calls and screen sharing without switching tools or losing context.",
   "renderer.components.welcomeScreen.slides.calls.title": "Start secure calls instantly",
-  "renderer.components.welcomeScreen.slides.collaborate.subtitle": "Collaborate effectively with persistent channels, file and code snippet sharing, and workflow automation purpose-built for technical teams.",
+  "renderer.components.welcomeScreen.slides.collaborate.subtitle": "Coordinate across teams with persistent mission channels, secure file sharing, and automated workflows.",
   "renderer.components.welcomeScreen.slides.collaborate.title": "Collaborate in real time",
-  "renderer.components.welcomeScreen.slides.integrate.subtitle": "Execute and automate workflows with flexible, custom integrations with popular technical tools like GitHub, GitLab, and ServiceNow.",
-  "renderer.components.welcomeScreen.slides.integrate.title": "Integrate with tools you love",
-  "renderer.components.welcomeScreen.slides.welcome.subtitle": "Mattermost is an open source collaboration platform for mission-critical work. Secure, flexible, and integrated with the tools you love.",
+  "renderer.components.welcomeScreen.slides.integrate.subtitle": "Integrate with the tools and systems powering your operations — ticketing, conferencing, alerting, or custom integrations.",
+  "renderer.components.welcomeScreen.slides.integrate.title": "Integrate with your systems",
+  "renderer.components.welcomeScreen.slides.welcome.subtitle": "Mattermost is a sovereign collaboration platform, purpose-built for operational environments. Secure by design.",
   "renderer.components.welcomeScreen.slides.welcome.title": "Welcome",
   "renderer.downloadsDropdown.ClearAll": "Clear All",
   "renderer.downloadsDropdown.Downloads": "Downloads",

src/renderer/components/Carousel/Carousel.scss

@@ -31,7 +31,7 @@
         flex: 1;
         align-items: center;
         justify-content: center;
-        margin-top: 40px;
+        margin-top: 24px;
     }
 }
 

src/renderer/components/ConfigureServer/ConfigureServer.scss

@@ -45,40 +45,44 @@
         flex-direction: column;
         margin: auto;
         font-family: 'Open Sans';
+        width: 100%;
 
         .ConfigureServer__content {
             display: flex;
             height: fit-content;
             flex: 1;
             align-items: center;
             justify-content: center;
-            margin-bottom: 42px;
+            margin: auto;
+            max-width: 1280px;
+            padding: 0 40px;
+            gap: 32px;
 
             .ConfigureServer__message {
                 display: flex;
-                width: 540px;
+                width: 100%;
                 flex-flow: column;
                 align-self: flex-start;
                 z-index: 22;
                 -webkit-font-smoothing: antialiased;
 
                 .ConfigureServer__message-title {
                     margin-top: 24px;
-                    margin-bottom: 24px;
-                    padding-right: 60px;
+                    margin-bottom: 20px;
                     color: var(--center-channel-color);
                     font-family: 'Metropolis';
-                    font-size: 80px;
+                    font-size: 64px;
                     font-weight: 600;
                     letter-spacing: -0.05em;
-                    line-height: 88px;
+                    line-height: 68px;
                 }
 
                 .ConfigureServer__message-subtitle {
                     color: rgba(var(--center-channel-color-rgb), 0.72);
                     font-size: 18px;
                     font-weight: 400;
                     line-height: 28px;
+                    margin-top: 0;
                 }
 
                 &.inFromRight {
@@ -115,10 +119,9 @@
             }
 
             .ConfigureServer__card {
-                width: 540px;
+                width: 100%;
                 box-sizing: border-box;
                 border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
-                margin-left: 60px;
                 background-color: var(--center-channel-bg);
                 border-radius: 8px;
                 box-shadow: var(--elevation-5);
@@ -127,7 +130,7 @@
                     display: flex;
                     flex: 1;
                     flex-flow: column;
-                    padding: 48px 56px;
+                    padding: 48px;
                     border: none;
                     box-shadow: none;
 
@@ -185,44 +188,22 @@
     }
 }
 
-@media screen and (min-width: 1680px) {
-    .ConfigureServer {
-        .ConfigureServer__body .ConfigureServer__content {
-            .ConfigureServer__message,
-            .ConfigureServer__card {
-                width: 610px;
-            }
-
-            .ConfigureServer__message .ConfigureServer__message-title {
-                padding-right: 130px;
-                margin-top: 48px;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 1199px) {
+@media screen and (max-width: 1080px) {
     .alternate-link {
         margin-bottom: 0;
     }
 
     .ConfigureServer {
         .ConfigureServer__body .ConfigureServer__content {
             flex-direction: column;
-
-            .ConfigureServer__message,
-            .ConfigureServer__card {
-                width: 640px;
-            }
+            max-width: 640px;
 
             .ConfigureServer__message {
                 align-self: center;
                 padding: 24px;
 
                 .ConfigureServer__message-title {
-                    padding-right: 210px;
-                    font-size: 64px;
-                    line-height: 76px;
+                    padding-right: 24px;
                 }
 
                 .ConfigureServer__message-subtitle {
@@ -241,7 +222,7 @@
                 box-shadow: none;
 
                 .ConfigureServer__card-content {
-                    padding: 16px 24px;
+                    padding: 0;
 
                     .ConfigureServer__card-title {
                         display: none;
@@ -261,25 +242,22 @@
 
 @media screen and (max-width: 699px) {
     .ConfigureServer {
+
         .ConfigureServer__body {
-            margin: auto 0;
+            padding: 24px;
+            width: auto;
 
             .ConfigureServer__content {
-                min-width: 375px;
-
-                .ConfigureServer__card {
-                    width: 100%;
-                }
+                min-width: 320px;
+                padding: 0;
 
                 .ConfigureServer__message {
-                    width: auto;
                     align-self: flex-start;
-                    padding: 24px;
+                    padding: 0;
 
                     .ConfigureServer__message-title {
-                        max-width: 271px;
-                        padding-right: 0;
-                        font-size: 45px;
+                        padding-right: 24px;
+                        font-size: 48px;
                         line-height: 56px;
                     }
                 }

src/renderer/components/ConfigureServer/ConfigureServer.tsx

@@ -3,7 +3,7 @@
 
 import classNames from 'classnames';
 import React, {useState, useCallback, useEffect, useRef} from 'react';
-import {useIntl, FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import {MODAL_TRANSITION_TIMEOUT, URLValidationStatus} from 'common/utils/constants';
 import Header from 'renderer/components/Header';
@@ -336,18 +336,20 @@ function ConfigureServer({
                                 <ServerImage/>
                             </div>
                             <h1 className='ConfigureServer__message-title'>
-                                {messageTitle || formatMessage({id: 'renderer.components.configureServer.title', defaultMessage: 'Let’s connect to a server'})}
+                                {messageTitle || (
+                                    <FormattedMessage
+                                        id='renderer.components.configureServer.title'
+                                        defaultMessage='Connect securely to your server'
+                                    />
+                                )}
                             </h1>
                             <p className='ConfigureServer__message-subtitle'>
                                 {messageSubtitle || (
                                     <FormattedMessage
                                         id='renderer.components.configureServer.subtitle'
-                                        defaultMessage='Set up your first server to connect to your<br></br>team’s communication hub'
-                                        values={{
-                                            br: (x: React.ReactNode) => (<><br/>{x}</>),
-                                        }}
-                                    />)
-                                }
+                                        defaultMessage='Enter your server details to get started.'
+                                    />
+                                )}
                             </p>
                         </div>
                         <div className={classNames('ConfigureServer__card', transition, {'with-error': nameError || urlError?.type === STATUS.ERROR})}>