From fdf1096494cb86e3265231ee8a5ac3c3c093c347 Mon Sep 17 00:00:00 2001 From: Rajat Dabade Date: Fri, 12 Jul 2024 19:00:22 +0530 Subject: [PATCH] [MM-56873]: Updated Svg's and styling for welcome page (#3084) * [MM-56873]: Updated svg and styling for welcome page * chore: i18n --- i18n/en.json | 14 +- package-lock.json | 2 +- src/renderer/assets/svg/bullseye.svg | 20 --- src/renderer/assets/svg/calls.svg | 64 +++++++++ src/renderer/assets/svg/channels.svg | 24 ---- src/renderer/assets/svg/clipboard.svg | 22 --- src/renderer/assets/svg/collaborate.svg | 72 ++++++++++ src/renderer/assets/svg/integrate.svg | 127 ++++++++++++++++++ .../WelcomeScreen/WelcomeScreen.tsx | 40 +++--- src/renderer/css/components/Carousel.scss | 2 +- .../css/components/WelcomeScreenSlide.scss | 20 +-- 11 files changed, 299 insertions(+), 108 deletions(-) delete mode 100644 src/renderer/assets/svg/bullseye.svg create mode 100644 src/renderer/assets/svg/calls.svg delete mode 100644 src/renderer/assets/svg/channels.svg delete mode 100644 src/renderer/assets/svg/clipboard.svg create mode 100644 src/renderer/assets/svg/collaborate.svg create mode 100644 src/renderer/assets/svg/integrate.svg diff --git a/i18n/en.json b/i18n/en.json index 9a32d17f..2ffb2d05 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -254,13 +254,13 @@ "renderer.components.showCertificateModal.serialNumber": "Serial Number", "renderer.components.showCertificateModal.subjectName": "Subject Name", "renderer.components.welcomeScreen.button.getStarted": "Get Started", - "renderer.components.welcomeScreen.slides.boards.subtitle": "Ship on time, every time, with a project and task management solution built for digital operations.", - "renderer.components.welcomeScreen.slides.boards.title": "Boards", - "renderer.components.welcomeScreen.slides.channels.subtitle": "All of your team’s communication in one place.

Secure collaboration, built for developers.", - "renderer.components.welcomeScreen.slides.channels.title": "Channels", - "renderer.components.welcomeScreen.slides.palybooks.subtitle": "Move faster and make fewer mistakes with checklists, automations, and tool integrations that power your team’s workflows.", - "renderer.components.welcomeScreen.slides.playbooks.title": "Playbooks", - "renderer.components.welcomeScreen.slides.welcome.subtitle": "Mattermost is an open source platform for developer collaboration. Secure, flexible, and integrated with the tools you love.", + "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.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.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.welcome.title": "Welcome", "renderer.downloadsDropdown.ClearAll": "Clear All", "renderer.downloadsDropdown.Downloads": "Downloads", diff --git a/package-lock.json b/package-lock.json index 6c5e714d..f68c0b08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,7 +88,7 @@ }, "api-types": { "name": "@mattermost/desktop-api", - "version": "5.8.0-5", + "version": "5.9.0-1", "dev": true, "license": "MIT", "peerDependencies": { diff --git a/src/renderer/assets/svg/bullseye.svg b/src/renderer/assets/svg/bullseye.svg deleted file mode 100644 index 89ebe33e..00000000 --- a/src/renderer/assets/svg/bullseye.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/src/renderer/assets/svg/calls.svg b/src/renderer/assets/svg/calls.svg new file mode 100644 index 00000000..3a4251f8 --- /dev/null +++ b/src/renderer/assets/svg/calls.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/assets/svg/channels.svg b/src/renderer/assets/svg/channels.svg deleted file mode 100644 index b8c95232..00000000 --- a/src/renderer/assets/svg/channels.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/renderer/assets/svg/clipboard.svg b/src/renderer/assets/svg/clipboard.svg deleted file mode 100644 index c7c395d1..00000000 --- a/src/renderer/assets/svg/clipboard.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/renderer/assets/svg/collaborate.svg b/src/renderer/assets/svg/collaborate.svg new file mode 100644 index 00000000..62a01a61 --- /dev/null +++ b/src/renderer/assets/svg/collaborate.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/assets/svg/integrate.svg b/src/renderer/assets/svg/integrate.svg new file mode 100644 index 00000000..5573cf0e --- /dev/null +++ b/src/renderer/assets/svg/integrate.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/renderer/components/WelcomeScreen/WelcomeScreen.tsx b/src/renderer/components/WelcomeScreen/WelcomeScreen.tsx index ee9aaf0a..3e7351b1 100644 --- a/src/renderer/components/WelcomeScreen/WelcomeScreen.tsx +++ b/src/renderer/components/WelcomeScreen/WelcomeScreen.tsx @@ -6,10 +6,10 @@ import React, {useState, useEffect, useMemo} from 'react'; import {useIntl, FormattedMessage} from 'react-intl'; import {MODAL_TRANSITION_TIMEOUT} from 'common/utils/constants'; -import bullseye from 'renderer/assets/svg/bullseye.svg'; -import channels from 'renderer/assets/svg/channels.svg'; +import calls from 'renderer/assets/svg/calls.svg'; import chat2 from 'renderer/assets/svg/chat2.svg'; -import clipboard from 'renderer/assets/svg/clipboard.svg'; +import collaborate from 'renderer/assets/svg/collaborate.svg'; +import integrate from 'renderer/assets/svg/integrate.svg'; import Carousel from 'renderer/components/Carousel'; import Header from 'renderer/components/Header'; import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground'; @@ -44,7 +44,7 @@ function WelcomeScreen({ title: formatMessage({id: 'renderer.components.welcomeScreen.slides.welcome.title', defaultMessage: 'Welcome'}), subtitle: formatMessage({ id: 'renderer.components.welcomeScreen.slides.welcome.subtitle', - defaultMessage: 'Mattermost is an open source platform for developer collaboration. Secure, flexible, and integrated with the tools you love.', + defaultMessage: 'Mattermost is an open source collaboration platform for mission-critical work. Secure, flexible, and integrated with the tools you love.', }), image: ( (<>
{x}), }} @@ -68,40 +68,40 @@ function WelcomeScreen({ ), image: ( ), }, { - key: 'playbooks', - title: formatMessage({id: 'renderer.components.welcomeScreen.slides.playbooks.title', defaultMessage: 'Playbooks'}), + key: 'calls', + title: formatMessage({id: 'renderer.components.welcomeScreen.slides.calls.title', defaultMessage: 'Start secure calls instantly'}), subtitle: formatMessage({ - id: 'renderer.components.welcomeScreen.slides.palybooks.subtitle', - defaultMessage: 'Move faster and make fewer mistakes with checklists, automations, and tool integrations that power your team’s workflows.', + id: 'renderer.components.welcomeScreen.slides.calls.subtitle', + defaultMessage: 'When typing isn’t fast enough, seamlessly move from chat to audio calls and screenshare without switching tools.', }), image: ( ), }, { - key: 'boards', - title: formatMessage({id: 'renderer.components.welcomeScreen.slides.boards.title', defaultMessage: 'Boards'}), + key: 'integrate', + title: formatMessage({id: 'renderer.components.welcomeScreen.slides.integrate.title', defaultMessage: 'Integrate with tools you love'}), subtitle: formatMessage({ - id: 'renderer.components.welcomeScreen.slides.boards.subtitle', - defaultMessage: 'Ship on time, every time, with a project and task management solution built for digital operations.', + id: 'renderer.components.welcomeScreen.slides.integrate.subtitle', + defaultMessage: 'Execute and automate workflows with flexible, custom integrations with popular technical tools like GitHub, GitLab, and ServiceNow.', }), image: ( ), }, - ], []); + ], [formatMessage]); const handleOnGetStartedClick = () => { setTransition('outToLeft'); diff --git a/src/renderer/css/components/Carousel.scss b/src/renderer/css/components/Carousel.scss index 1f167118..1a744143 100644 --- a/src/renderer/css/components/Carousel.scss +++ b/src/renderer/css/components/Carousel.scss @@ -31,7 +31,7 @@ flex: 1; align-items: center; justify-content: center; - margin-top: 22px; + margin-top: 16px; } } diff --git a/src/renderer/css/components/WelcomeScreenSlide.scss b/src/renderer/css/components/WelcomeScreenSlide.scss index f34a0d98..d242a1f4 100644 --- a/src/renderer/css/components/WelcomeScreenSlide.scss +++ b/src/renderer/css/components/WelcomeScreenSlide.scss @@ -4,7 +4,6 @@ .WelcomeScreenSlide { display: flex; flex: 1; - max-width: 540px; flex-flow: column; justify-content: flex-end; @@ -17,9 +16,10 @@ font-family: 'Metropolis'; font-size: 80px; font-weight: 600; - letter-spacing: -0.05em; + letter-spacing: -1.6px; line-height: 88px; text-align: center; + margin: 16px 0; } .WelcomeScreenSlide__subtitle { @@ -29,22 +29,16 @@ font-weight: 400; line-height: 24px; text-align: center; - margin-top: 16px; + max-width: 580px; + margin: auto; } &.WelcomeScreenSlide--main { - position: relative; - height: 100%; + max-width: 582px; .WelcomeScreenSlide__title { - font-size: 128px; - line-height: 128px; - } - - .WelcomeScreenSlide__image { - position: absolute; - display: block; - bottom: 115px; + font-size: 80px; + line-height: normal; } }