phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[MM-62232] Update loading and welcome screens, theming fixes (#3279)

Browse Source 
* Replace images with new SVG components, replace backgrounds

* Add Denim and Onyx themes, fix associated themeing issues

* Add back elevation variables

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
This commit is contained in:
Devin Binnie
2025-01-13 09:42:27 -05:00
committed by GitHub
parent 453b79a451
commit 34b5f52f0c
31 changed files with 1869 additions and 1063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/Carousel/Carousel.tsx
View File

@@ -113,7 +113,6 @@ function Carousel({
<CarouselButton
direction={ButtonDirection.PREV}
disabled={disableNavigation}
darkMode={darkMode}
onClick={handleOnPrevButtonClick}
/>
<CarouselPaginationIndicator
@@ -126,7 +125,6 @@ function Carousel({
<CarouselButton
direction={ButtonDirection.NEXT}
disabled={disableNavigation}
darkMode={darkMode}
onClick={handleOnNextButtonClick}
/>
</div>

3
src/renderer/components/Carousel/CarouselButton.tsx
View File

@@ -15,14 +15,12 @@ export enum ButtonDirection {
type CarouselButtonProps = {
direction: ButtonDirection;
disabled?: boolean;
darkMode?: boolean;
onClick?: () => void;
};
function CarouselButton({
direction = ButtonDirection.NEXT,
disabled = false,
darkMode = false,
onClick = () => null,
}: CarouselButtonProps) {
const handleOnClick = () => {
@@ -36,7 +34,6 @@ function CarouselButton({
'CarouselButton',
'icon-button icon-button-small',
{
'icon-button-inverted': darkMode,
disabled,
},
)}

1
src/renderer/components/Carousel/CarouselPaginationIndicator.tsx
View File

@@ -45,7 +45,6 @@ function CarouselPaginationIndicator({
className={classNames(
'indicatorDot',
{
'indicatorDot-inverted': darkMode,
active: activePage === pageIndex,
disabled,
},

19
src/renderer/components/ConfigureServer.tsx
View File

@@ -6,7 +6,6 @@ import React, {useState, useCallback, useEffect, useRef} from 'react';
import {useIntl, FormattedMessage} from 'react-intl';
import {MODAL_TRANSITION_TIMEOUT, URLValidationStatus} from 'common/utils/constants';
import womanLaptop from 'renderer/assets/svg/womanLaptop.svg';
import Header from 'renderer/components/Header';
import Input, {STATUS, SIZE} from 'renderer/components/Input';
import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground';
@@ -18,6 +17,8 @@ import 'renderer/css/components/Button.scss';
import 'renderer/css/components/ConfigureServer.scss';
import 'renderer/css/components/LoadingScreen.css';
import ServerImage from './Images/server';
type ConfigureServerProps = {
server?: UniqueServer;
prefillURL?: string;
@@ -266,14 +267,13 @@ function ConfigureServer({
}
return (
<div className={classNames('alternate-link', transition, {'alternate-link-inverted': darkMode})}>
<div className={classNames('alternate-link', transition)}>
<span className='alternate-link__message'>
{alternateLinkMessage}
</span>
<a
className={classNames(
'link-button link-small-button alternate-link__link',
{'link-button-inverted': darkMode},
)}
href={alternateLinkURL}
target='_blank'
@@ -291,7 +291,6 @@ function ConfigureServer({
'LoadingScreen',
{'LoadingScreen--darkMode': darkMode},
'ConfigureServer',
{'ConfigureServer-inverted': darkMode},
)}
>
<LoadingBackground/>
@@ -304,6 +303,9 @@ function ConfigureServer({
{!mobileView && getAlternateLink()}
<div className='ConfigureServer__content'>
<div className={classNames('ConfigureServer__message', transition)}>
<div className='ConfigureServer__message-img'>
<ServerImage/>
</div>
<h1 className='ConfigureServer__message-title'>
{messageTitle || formatMessage({id: 'renderer.components.configureServer.title', defaultMessage: 'Let’s connect to a server'})}
</h1>
@@ -318,12 +320,6 @@ function ConfigureServer({
/>)
}
</p>
<div className='ConfigureServer__message-img'>
<img
src={womanLaptop}
draggable={false}
/>
</div>
</div>
<div className={classNames('ConfigureServer__card', transition, {'with-error': nameError || urlError?.type === STATUS.ERROR})}>
<div
@@ -348,7 +344,6 @@ function ConfigureServer({
})}
placeholder={formatMessage({id: 'renderer.components.configureServer.url.placeholder', defaultMessage: 'Server URL'})}
disabled={waiting}
darkMode={darkMode}
/>
<Input
name='name'
@@ -367,7 +362,6 @@ function ConfigureServer({
})}
placeholder={formatMessage({id: 'renderer.components.configureServer.name.placeholder', defaultMessage: 'Server display name'})}
disabled={waiting}
darkMode={darkMode}
/>
<SaveButton
id='connectConfigureServer'
@@ -380,7 +374,6 @@ function ConfigureServer({
}
savingMessage={formatMessage({id: 'renderer.components.configureServer.connect.saving', defaultMessage: 'Connecting…'})}
disabled={!canSave}
darkMode={darkMode}
/>
</div>
</div>

243
src/renderer/components/Images/calls.tsx Normal file
View File

@@ -0,0 +1,243 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const CallsImage = () => (
<svg
width='293'
height='174'
viewBox='0 0 195 116'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<rect
x='-0.000488281'
y='24'
width='195'
height='67'
rx='3'
fill='var(--center-channel-color)'
fillOpacity='0.12'
/>
<path
d='M187.5 36L187.5 63L161 63'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<circle
cx='2.5'
cy='2.5'
r='2.5'
transform='matrix(-1 -8.74228e-08 -8.74228e-08 1 190 31)'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M187.5 102L187.5 75H161'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<circle
cx='187.5'
cy='104.5'
r='2.5'
transform='rotate(180 187.5 104.5)'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M6.49951 20L6.49951 47L32.9995 47'
stroke='var(--center-channel-color)'
strokeOpacity='0.32'
strokeLinecap='round'
/>
<circle
cx='6.49951'
cy='17.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<rect
x='51.9995'
y='15'
width='123'
height='80.6667'
rx='4'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4'
/>
<path
d='M53.9995 18.5C53.9995 17.6716 54.6711 17 55.4995 17H171.5C172.328 17 173 17.6716 173 18.5V26H53.9995V18.5Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='58.4995'
cy='21.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='66.4995'
cy='21.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='74.4995'
cy='21.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<rect
opacity='0.32'
x='60.4995'
y='31.5'
width='107'
height='43'
rx='1.5'
stroke='var(--center-channel-color)'
/>
<circle
cx='101'
cy='85'
r='3'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<circle
cx='113'
cy='85'
r='6'
fill='var(--online-indicator)'
/>
<circle
cx='125'
cy='85'
r='3'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M92.9995 39V66H136'
stroke='var(--center-channel-color)'
strokeLinejoin='round'
/>
<rect
x='99.9995'
y='44'
width='3'
height='19'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='105'
y='45'
width='3'
height='18'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='110'
y='53'
width='3'
height='10'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='115'
y='52'
width='3'
height='11'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='120'
y='48'
width='3'
height='15'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<rect
x='125'
y='46'
width='3'
height='17'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M113 81.5C113.194 81.5 113.371 81.5501 113.53 81.6503C113.696 81.7504 113.827 81.8859 113.924 82.0568C114.021 82.2218 114.07 82.4045 114.07 82.6048V84.8144C114.07 85.0147 114.021 85.2003 113.924 85.3712C113.827 85.5362 113.696 85.6688 113.53 85.7689C113.371 85.8691 113.194 85.9192 113 85.9192C112.805 85.9192 112.626 85.8691 112.46 85.7689C112.3 85.6688 112.172 85.5362 112.075 85.3712C111.978 85.2003 111.929 85.0147 111.929 84.8144V82.6048C111.929 82.4045 111.978 82.2218 112.075 82.0568C112.172 81.8859 112.3 81.7504 112.46 81.6503C112.626 81.5501 112.805 81.5 113 81.5ZM115.5 84.8144C115.5 85.2386 115.405 85.6393 115.217 86.0164C115.029 86.3758 114.772 86.6763 114.446 86.9179C114.121 87.1595 113.759 87.3098 113.359 87.3687V88.5H112.64V87.3687C112.24 87.3098 111.878 87.1595 111.553 86.9179C111.227 86.6763 110.97 86.3758 110.782 86.0164C110.594 85.6393 110.5 85.2386 110.5 84.8144H111.219C111.219 85.0619 111.261 85.2976 111.347 85.5215C111.438 85.7454 111.567 85.9457 111.732 86.1225C111.904 86.2933 112.098 86.4259 112.315 86.5202C112.531 86.6145 112.76 86.6616 113 86.6616C113.239 86.6616 113.468 86.6145 113.684 86.5202C113.901 86.4259 114.093 86.2933 114.258 86.1225C114.429 85.9457 114.558 85.7454 114.643 85.5215C114.735 85.2976 114.78 85.0619 114.78 84.8144H115.5Z'
fill='var(--center-channel-bg)'
/>
<rect
x='23.8995'
y='2.5001'
width='60.2'
height='110.6'
rx='10.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4.2'
/>
<path
d='M25.9995 10.9001C25.9995 7.4207 28.8201 4.6001 32.2995 4.6001H75.6995C79.1789 4.6001 81.9995 7.4207 81.9995 10.9001V14.4001H25.9995V10.9001Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='53.9995'
cy='57.8'
r='16.8'
fill='var(--online-indicator)'
/>
<rect
x='42.7995'
y='8.79999'
width='22.4'
height='1.4'
rx='0.7'
fill='var(--center-channel-color)'
/>
<path
d='M55.8662 58.5C55.8662 58.0346 55.7498 57.6102 55.5171 57.2269C55.2844 56.8299 54.9696 56.5151 54.5726 56.2824C54.1893 56.0497 53.7649 55.9333 53.2995 55.9333V54.2291C54.0798 54.2291 54.7916 54.4207 55.435 54.804C56.092 55.1873 56.6122 55.7075 56.9955 56.3645C57.3788 57.0079 57.5704 57.7197 57.5704 58.5H55.8662ZM59.2952 58.5C59.2952 57.4186 59.0215 56.4124 58.4739 55.4816C57.94 54.5781 57.2214 53.8595 56.3179 53.3256C55.3871 52.778 54.3809 52.5043 53.2995 52.5043V50.8C54.6958 50.8 55.9894 51.1491 57.1803 51.8472C58.3439 52.5316 59.2679 53.4488 59.9523 54.5987C60.6504 55.8033 60.9995 57.1037 60.9995 58.5H59.2952ZM60.1371 61.4979C60.3698 61.4979 60.5683 61.58 60.7326 61.7443C60.9105 61.9085 60.9995 62.107 60.9995 62.3397V65.3376C60.9995 65.5703 60.9105 65.7688 60.7326 65.9331C60.5683 66.111 60.3698 66.2 60.1371 66.2C58.1659 66.2 56.2768 65.8167 54.4699 65.0501C52.7314 64.3246 51.1914 63.2911 49.8499 61.9496C48.5084 60.6081 47.4749 59.0681 46.7494 57.3296C45.9828 55.5227 45.5995 53.6336 45.5995 51.6624C45.5995 51.4297 45.6816 51.2312 45.8459 51.0669C46.0239 50.889 46.2292 50.8 46.4619 50.8H49.4598C49.6925 50.8 49.891 50.889 50.0552 51.0669C50.2195 51.2312 50.3016 51.4297 50.3016 51.6624C50.3016 52.6754 50.4659 53.6883 50.7944 54.7013C50.8492 54.8519 50.856 55.0093 50.815 55.1736C50.7739 55.3242 50.6986 55.4611 50.5891 55.5843L48.7 57.4733C49.316 58.6779 50.1032 59.7662 51.0614 60.7381C52.0333 61.6963 53.1216 62.4835 54.3262 63.0995L56.2152 61.2104C56.3384 61.1009 56.4753 61.0256 56.6259 60.9845C56.7902 60.9435 56.9476 60.9503 57.0982 61.0051C58.1112 61.3336 59.1241 61.4979 60.1371 61.4979Z'
fill='var(--center-channel-bg)'
/>
<path
d='M99.8745 103L91.9995 103'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M89.3745 103L85.8745 103'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M83.2495 103L56.9995 103'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M102.5 103L113 103L113 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
strokeLinejoin='round'
/>
</svg>
);
export default CallsImage;

305
src/renderer/components/Images/collaborate.tsx Normal file
View File

@@ -0,0 +1,305 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const CollaborateImage = () => (
<svg
width='303'
height='176'
viewBox='0 0 202 117'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<rect
x='202'
y='13'
width='66'
height='193'
rx='2'
transform='rotate(90 202 13)'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
x='36'
y='2'
width='123'
height='80.6667'
rx='4'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='4'
/>
<path
d='M38 5.5C38 4.67157 38.6716 4 39.5 4H155.5C156.328 4 157 4.67157 157 5.5V13H38V5.5Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<rect
x='69.8184'
y='8.5'
width='50.4281'
height='65.5541'
rx='1.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
/>
<path
d='M76.6321 14.5824H85.4085'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9009 49.2251H100.036'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9009 60.3896H104.424'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M76.6321 18.239H92.7221'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9007 65.7776H113.2'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M76.6321 22.6271H83.2144'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M75.9009 55.0015H89.7968'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M84.6769 22.6271H91.2592'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M93.4536 55.0015H103.454'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M106.454 55.0015H111.454'
stroke='var(--center-channel-color)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<rect
x='91.2593'
y='29.9409'
width='21.9409'
height='11.7018'
rx='1'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<g clipPath='url(#clip0_4216_119972)'>
<path
d='M81.7521 35.792L87.5055 36.8605C88.0891 33.6847 85.9851 30.6307 82.8085 30.0407C79.6304 29.4507 76.5808 31.5461 75.9987 34.7235C75.4151 37.8993 77.519 40.9534 80.6957 41.5433C81.656 41.7217 82.6046 41.6548 83.4778 41.3858L81.7521 35.792Z'
fill='var(--center-channel-bg)'
/>
<path
d='M83.4778 41.3858L87.5055 36.8605C88.0891 33.6847 85.9851 30.6307 82.8085 30.0407C79.6304 29.4507 76.5823 31.5461 75.9987 34.7235C75.4151 37.8993 77.519 40.9534 80.6957 41.5433C81.656 41.7217 82.6046 41.6548 83.4778 41.3858Z'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M83.4773 41.3856C85.4912 40.7659 87.0987 39.0762 87.505 36.8603L81.7516 35.7918L83.4773 41.3856Z'
fill='var(--center-channel-color)'
fillOpacity='0.64'
/>
<path
d='M83.6678 37.8343C84.7897 36.7699 84.8412 34.9922 83.7829 33.8638C82.7246 32.7354 80.9573 32.6836 79.8354 33.748C78.7136 34.8125 78.662 36.5902 79.7203 37.7186C80.7786 38.847 82.546 38.8988 83.6678 37.8343Z'
fill='var(--center-channel-bg)'
/>
</g>
<path
d='M50.1064 105.143L62.1126 117V56C62.1126 54.8954 61.2171 54 60.1126 54H1.9999C0.895332 54 -9.91821e-05 54.8954 -9.91821e-05 56V102.566C-9.91821e-05 103.67 0.895332 104.566 1.9999 104.566H48.701C49.2272 104.566 49.7321 104.773 50.1064 105.143Z'
fill='var(--indigo-400)'
/>
<circle
opacity='0.48'
cx='15.9713'
cy='70.8593'
r='7.98592'
fill='var(--neutral-0)'
/>
<path
opacity='0.48'
d='M29.2805 67.3098H43.4777'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M8.87207 89.6087H38.1538'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M8.87207 95.0869H28.3932'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M29.2805 72.6336H51.4636'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M8.87207 83.2818H23.9566'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
opacity='0.48'
d='M27.507 83.2818H43.4788'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<rect
x='148.5'
y='20.5'
width='43'
height='79'
rx='7.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='3'
/>
<path
d='M150 27.5C150 24.4624 152.462 22 155.5 22H184.5C187.538 22 190 24.4624 190 27.5V29H150V27.5Z'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<circle
cx='159.831'
cy='64.831'
r='5.83099'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M169.549 63H179.915'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M155 74H181'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M155 82H175'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M169.549 67H185.746'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M155 78H171'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M174 78L186 78'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<rect
x='162'
y='25'
width='16'
height='1'
rx='0.5'
fill='var(--center-channel-color)'
/>
<circle
cx='42.5'
cy='8.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<circle
cx='50.5'
cy='8.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<circle
cx='58.5'
cy='8.5'
r='1.5'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M112 90L121 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M124 90L128 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M131 90L161 90'
stroke='var(--center-channel-color)'
strokeLinecap='round'
/>
<path
d='M109 90L97 90L97 70'
stroke='var(--center-channel-color)'
strokeLinecap='round'
strokeLinejoin='round'
/>
<defs>
<clipPath id='clip0_4216_119972'>
<rect
width='11.7018'
height='11.7018'
fill='var(--center-channel-bg)'
transform='translate(75.9007 29.9409)'
/>
</clipPath>
</defs>
</svg>
);
export default CollaborateImage;

464
src/renderer/components/Images/server.tsx Normal file
View File

@@ -0,0 +1,464 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const ServerImage = () => (
<svg
width='260'
height='147'
viewBox='0 0 260 147'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<rect
x='0.998535'
y='58'
width='243'
height='52'
rx='3'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<path
d='M259.001 36.5002H160.17C160.073 36.5002 159.982 36.4483 159.934 36.364C159.885 36.2797 159.882 36.1759 159.927 36.0916C162.122 32.0314 166.12 29.2846 170.66 28.7009C170.628 28.2728 170.611 27.8707 170.611 27.475C170.611 18.1839 178.154 10.6278 187.427 10.6278C189.772 10.6278 192.042 11.1045 194.178 12.045C196.688 5.12772 203.261 0.5 210.628 0.5C218.521 0.5 225.404 5.76334 227.499 13.3454C230.846 11.2634 234.694 10.1673 238.654 10.1673C250.333 10.1673 259.834 19.6886 259.834 31.3893C259.834 33.04 259.643 34.6874 259.267 36.2862C259.238 36.4094 259.127 36.5002 258.998 36.5002H259.001Z'
fill='var(--center-channel-color)'
fillOpacity='0.16'
/>
<rect
x='42.2072'
y='25.7087'
width='166.583'
height='109.249'
rx='5.41732'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='5.41732'
/>
<g clipPath='url(#clip0_4284_240815)'>
<rect
width='153'
height='95'
transform='translate(48.9985 33)'
fill='var(--center-channel-bg)'
/>
<rect
opacity='0.5'
x='48.9985'
y='33'
width='45.6761'
height='98.3792'
fill='var(--button-bg)'
fillOpacity='0.16'
/>
<path
d='M64.8101 40.0273L81.4994 40.0273'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M64.8101 42.6621L74.4723 42.6621'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M99.9449 40.4665H121.026'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M53.3901 51.4463H66.5659'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='57.3433'
cy='41.3443'
r='4.83112'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<ellipse
cx='55.476'
cy='58.6028'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.24'
/>
<path
d='M60.4174 58.4732H85.0122'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='115.756'
cy='55.8377'
r='5.27031'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M125.804 55.8243H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.804 60.2299H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.418 51.4463H138.594'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='115.756'
cy='76.9192'
r='5.27031'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M125.804 76.9057H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.804 81.3112H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.418 72.5272H138.594'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<circle
cx='115.756'
cy='98.0008'
r='5.27031'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M125.804 97.9866H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.804 102.393H178.861'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<path
d='M125.418 93.6086H138.594'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='66.7812'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 66.3786H79.7419'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='74.9594'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 75.1622H87.6474'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='83.1377'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 83.0078H85.0122'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='91.316'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 90.9735H79.7419'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
<ellipse
cx='55.476'
cy='99.4943'
rx='2.15927'
ry='2.15927'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M60.4174 99.7576H87.6474'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeWidth='0.878386'
strokeLinecap='round'
/>
</g>
<path
d='M233.499 118L233.499 91H206.999'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
<circle
cx='233.499'
cy='120.5'
r='2.5'
transform='rotate(180 233.499 120.5)'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M73.164 74.5576H33.6597V90.0298H73.164V74.5576Z'
stroke='var(--center-channel-bg)'
strokeWidth='1.31879'
strokeLinecap='round'
/>
<path
opacity='0.5'
d='M58.6602 85.0711C60.195 85.0711 61.4391 83.8268 61.4391 82.2919C61.4391 80.757 60.195 79.5127 58.6602 79.5127C57.1255 79.5127 55.8813 80.757 55.8813 82.2919C55.8813 83.8268 57.1255 85.0711 58.6602 85.0711Z'
fill='var(--center-channel-bg)'
/>
<path
d='M66.5147 85.0711C68.0495 85.0711 69.2936 83.8268 69.2936 82.2919C69.2936 80.757 68.0495 79.5127 66.5147 79.5127C64.98 79.5127 63.7358 80.757 63.7358 82.2919C63.7358 83.8268 64.98 85.0711 66.5147 85.0711Z'
fill='var(--center-channel-bg)'
/>
<path
d='M50.8038 85.0711C52.3385 85.0711 53.5827 83.8268 53.5827 82.2919C53.5827 80.757 52.3385 79.5127 50.8038 79.5127C49.2691 79.5127 48.0249 80.757 48.0249 82.2919C48.0249 83.8268 49.2691 85.0711 50.8038 85.0711Z'
fill='var(--center-channel-bg)'
/>
<path
d='M16.4985 57L16.4985 84L42.9985 84'
stroke='var(--center-channel-color)'
strokeOpacity='0.24'
strokeLinecap='round'
/>
<circle
cx='16.4985'
cy='54.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<rect
x='26.9985'
y='72'
width='85'
height='23'
rx='3'
fill='var(--indigo-400)'
/>
<path
opacity='0.48'
d='M107.999 76H30.9985V91H107.999V76Z'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
d='M47.9985 87C49.6554 87 50.9985 85.6569 50.9985 84C50.9985 82.3431 49.6554 81 47.9985 81C46.3417 81 44.9985 82.3431 44.9985 84C44.9985 85.6569 46.3417 87 47.9985 87Z'
fill='var(--neutral-0)'
/>
<path
d='M56.9985 87C58.6554 87 59.9985 85.6569 59.9985 84C59.9985 82.3431 58.6554 81 56.9985 81C55.3417 81 53.9985 82.3431 53.9985 84C53.9985 85.6569 55.3417 87 56.9985 87Z'
fill='var(--neutral-0)'
/>
<path
opacity='0.5'
d='M38.9985 87C40.6554 87 41.9985 85.6569 41.9985 84C41.9985 82.3431 40.6554 81 38.9985 81C37.3417 81 35.9985 82.3431 35.9985 84C35.9985 85.6569 37.3417 87 38.9985 87Z'
fill='var(--neutral-0)'
/>
<rect
x='26.9985'
y='98'
width='85'
height='23'
rx='3'
fill='var(--indigo-400)'
/>
<path
opacity='0.48'
d='M107.999 102H30.9985V117H107.999V102Z'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
d='M47.9985 113C49.6554 113 50.9985 111.657 50.9985 110C50.9985 108.343 49.6554 107 47.9985 107C46.3417 107 44.9985 108.343 44.9985 110C44.9985 111.657 46.3417 113 47.9985 113Z'
fill='var(--neutral-0)'
/>
<path
d='M56.9985 113C58.6554 113 59.9985 111.657 59.9985 110C59.9985 108.343 58.6554 107 56.9985 107C55.3417 107 53.9985 108.343 53.9985 110C53.9985 111.657 55.3417 113 56.9985 113Z'
fill='var(--neutral-0)'
/>
<path
opacity='0.5'
d='M38.9985 113C40.6554 113 41.9985 111.657 41.9985 110C41.9985 108.343 40.6554 107 38.9985 107C37.3417 107 35.9985 108.343 35.9985 110C35.9985 111.657 37.3417 113 38.9985 113Z'
fill='var(--neutral-0)'
/>
<rect
x='26.9985'
y='124'
width='85'
height='23'
rx='3'
fill='var(--indigo-400)'
/>
<path
opacity='0.48'
d='M107.999 128H30.9985V143H107.999V128Z'
stroke='var(--neutral-0)'
strokeLinecap='round'
/>
<path
d='M47.9985 139C49.6554 139 50.9985 137.657 50.9985 136C50.9985 134.343 49.6554 133 47.9985 133C46.3417 133 44.9985 134.343 44.9985 136C44.9985 137.657 46.3417 139 47.9985 139Z'
fill='var(--neutral-0)'
/>
<path
d='M56.9985 139C58.6554 139 59.9985 137.657 59.9985 136C59.9985 134.343 58.6554 133 56.9985 133C55.3417 133 53.9985 134.343 53.9985 136C53.9985 137.657 55.3417 139 56.9985 139Z'
fill='var(--neutral-0)'
/>
<path
opacity='0.5'
d='M38.9985 139C40.6554 139 41.9985 137.657 41.9985 136C41.9985 134.343 40.6554 133 38.9985 133C37.3417 133 35.9985 134.343 35.9985 136C35.9985 137.657 37.3417 139 38.9985 139Z'
fill='var(--neutral-0)'
/>
<rect
x='176.288'
y='58.499'
width='47.2105'
height='87'
rx='7.5'
fill='var(--center-channel-bg)'
stroke='var(--center-channel-color)'
strokeWidth='3'
/>
<path
d='M177.788 64.499C177.788 62.0137 179.802 59.999 182.288 59.999H217.498C219.983 59.999 221.998 62.0137 221.998 64.499V67.7359H177.788V64.499Z'
fill='#1C58D9'
fillOpacity='0.16'
/>
<circle
cx='188.653'
cy='107.339'
r='6.44477'
fill='var(--center-channel-color)'
fillOpacity='0.4'
/>
<path
d='M199.394 104.475H210.851'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M182.924 121.894H213.187'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M182.924 126.315H205.31'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M199.394 108.771H217.296'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M182.924 117.364H201.729'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<rect
x='191.051'
y='63.3149'
width='17.6842'
height='1.10526'
rx='0.552632'
fill='var(--center-channel-color)'
/>
<defs>
<clipPath id='clip0_4284_240815'>
<rect
width='153'
height='95'
fill='white'
transform='translate(48.9985 33)'
/>
</clipPath>
</defs>
</svg>
);
export default ServerImage;

168
src/renderer/components/Images/threads-empty.tsx Normal file
View File

@@ -0,0 +1,168 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
const ThreadsEmptyImage = () => (
<svg
width='189'
height='146'
viewBox='0 0 125 97'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<g clipPath='url(#clip0_4210_74752)'>
<rect
opacity='0.08'
x='0.00390625'
width='50'
height='50'
rx='2'
fill='var(--button-bg)'
/>
<rect
opacity='0.12'
x='30.0039'
y='50'
width='95'
height='28'
rx='2'
fill='var(--button-bg)'
/>
<circle
cx='95.5039'
cy='32.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='109.004'
cy='32.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<circle
cx='122.504'
cy='32.5'
r='2.5'
fill='var(--center-channel-color)'
fillOpacity='0.48'
/>
<path
d='M95.0482 87.1199L105.004 97V46C105.004 44.8954 104.108 44 103.004 44H55.0039C53.8993 44 53.0039 44.8954 53.0039 46V84.5395C53.0039 85.644 53.8993 86.5395 55.0039 86.5395H93.6394C94.1672 86.5395 94.6736 86.7481 95.0482 87.1199Z'
fill='var(--indigo-400)'
/>
<path
d='M67.0039 65H97.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M67.0039 72H86.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M67.0039 59H77.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M80.0039 59H93.0039'
stroke='var(--neutral-0)'
strokeOpacity='0.56'
strokeLinecap='round'
/>
<path
d='M27.6089 69.5638L14.0039 83V14C14.0039 12.8954 14.8993 12 16.0039 12H82.0039C83.1085 12 84.0039 12.8954 84.0039 14V66.9868C84.0039 68.0914 83.1085 68.9868 82.0039 68.9868H29.0142C28.4881 68.9868 27.9832 69.1941 27.6089 69.5638Z'
fill='var(--center-channel-bg)'
/>
<path
d='M27.2575 69.2081L14.5039 81.8035V14C14.5039 13.1716 15.1755 12.5 16.0039 12.5H82.0039C82.8323 12.5 83.5039 13.1716 83.5039 14V66.9868C83.5039 67.8153 82.8323 68.4868 82.0039 68.4868H29.0142C28.3566 68.4868 27.7254 68.746 27.2575 69.2081Z'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
/>
<circle
cx='32.0039'
cy='31'
r='9'
fill='var(--center-channel-color)'
fillOpacity='0.32'
/>
<path
d='M47.0039 27H63.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M24.0039 51H74.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M24.0039 58H46.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M47.0039 33H72.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M24.0039 45H41.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M45.0039 45H63.0039'
stroke='var(--center-channel-color)'
strokeOpacity='0.48'
strokeLinecap='round'
/>
<path
d='M9.0039 39.5L9.0039 58L19.5039 58'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M9.00391 36.5L9.00391 30.5'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
strokeLinejoin='round'
/>
<path
d='M9.00391 27.5L9.00391 25.5'
stroke='var(--center-channel-color)'
strokeOpacity='0.8'
strokeLinecap='round'
strokeLinejoin='round'
/>
</g>
<defs>
<clipPath id='clip0_4210_74752'>
<rect
width='125'
height='97'
fill='white'
transform='translate(0.00390625)'
/>
</clipPath>
</defs>
</svg>
);
export default ThreadsEmptyImage;

527
src/renderer/components/Images/tools.tsx Normal file
View File

File diff suppressed because one or more lines are too long

3
src/renderer/components/Input.tsx
View File

@@ -40,7 +40,6 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
useLegend?: boolean;
customMessage?: CustomMessageInputType;
inputSize?: SIZE;
darkMode?: boolean;
}
const Input = React.forwardRef((
@@ -65,7 +64,6 @@ const Input = React.forwardRef((
maxLength,
inputSize = SIZE.MEDIUM,
disabled,
darkMode,
onFocus,
onBlur,
onChange,
@@ -128,7 +126,6 @@ const Input = React.forwardRef((
containerClassName,
{
disabled,
'Input_container-inverted': darkMode,
},
)}
>

70
src/renderer/components/LoadingScreen/LoadingBackground.tsx
View File

@@ -3,77 +3,9 @@
import React from 'react';
import StippleMask from 'renderer/assets/StippleMask.jpg';
function LoadingBackground() {
return (
<div className='LoadingScreen__backgound'>
<svg
viewBox='0 0 1366 728'
xmlns='http://www.w3.org/2000/svg'
preserveAspectRatio='xMidYMid slice'
>
<g style={{transform: 'translate(676px, -200px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(45deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(125px, 0px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(-135deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(700px, 330px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(-135deg)'}}>
<use href='#pill'/>
</g>
</g>
<g style={{transform: 'translate(-280px, 190px)'}}>
<g style={{transformOrigin: '450px 267.5px', transform: 'rotate(45deg)'}}>
<use href='#pill'/>
</g>
</g>
<defs>
<mask id='stippleMask'>
<image
width='900'
height='535'
href={StippleMask}
/>
</mask>
<g
id='pill'
className='Pill'
>
<rect
className='Pill__stipple'
x='0'
y='0'
width='900'
height='535'
mask='url(#stippleMask)'
/>
<path
className='Pill__shape'
d='M600 40H0V490H600C724.264 490 825 389.264 825 265C825 140.736 724.264 40 600 40Z'
fill='url(#pillGradient)'
/>
</g>
<linearGradient id='pillGradient'>
<stop
className='Pill__gradient'
offset='20%'
stopOpacity='1'
/>
<stop
className='Pill__gradientHighlight'
offset='95%'
stopOpacity='1'
/>
</linearGradient>
</defs>
</svg>
</div>
<div className='LoadingScreen__background'/>
);
}

4
src/renderer/components/Logo.tsx
View File

File diff suppressed because one or more lines are too long

5
src/renderer/components/SaveButton/SaveButton.tsx
View File

@@ -17,7 +17,6 @@ type Props = {
savingMessage?: React.ReactNode;
defaultMessage?: React.ReactNode;
extraClasses?: string;
darkMode?: boolean;
}
const SaveButton = ({
@@ -37,7 +36,6 @@ const SaveButton = ({
defaultMessage='Saving'
/>
),
darkMode,
onClick,
}: Props) => {
const handleOnClick = (e: React.MouseEvent) => {
@@ -53,9 +51,6 @@ const SaveButton = ({
id={id}
className={classNames(
'primary-button primary-large-button',
{
'primary-button-inverted': darkMode,
},
extraClasses && extraClasses,
)}
disabled={disabled}

29
src/renderer/components/WelcomeScreen/WelcomeScreen.tsx
View File

@@ -6,12 +6,12 @@ import React, {useState, useEffect, useMemo} from 'react';
import {useIntl, FormattedMessage} from 'react-intl';
import {MODAL_TRANSITION_TIMEOUT} from 'common/utils/constants';
import calls from 'renderer/assets/svg/calls.svg';
import chat2 from 'renderer/assets/svg/chat2.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 CallsImage from 'renderer/components/Images/calls';
import CollaborateImage from 'renderer/components/Images/collaborate';
import ThreadsEmptyImage from 'renderer/components/Images/threads-empty';
import ToolsImage from 'renderer/components/Images/tools';
import LoadingBackground from 'renderer/components/LoadingScreen/LoadingBackground';
import WelcomeScreenSlide from './WelcomeScreenSlide';
@@ -47,10 +47,7 @@ function WelcomeScreen({
defaultMessage: 'Mattermost is an open source collaboration platform for mission-critical work. Secure, flexible, and integrated with the tools you love.',
}),
image: (
<img
src={chat2}
draggable={false}
/>
<ThreadsEmptyImage/>
),
main: true,
},
@@ -67,10 +64,7 @@ function WelcomeScreen({
/>
),
image: (
<img
src={collaborate}
draggable={false}
/>
<CollaborateImage/>
),
},
{
@@ -81,10 +75,7 @@ function WelcomeScreen({
defaultMessage: 'When typing isn’t fast enough, seamlessly move from chat to audio calls and screenshare without switching tools.',
}),
image: (
<img
src={calls}
draggable={false}
/>
<CallsImage/>
),
},
{
@@ -95,10 +86,7 @@ function WelcomeScreen({
defaultMessage: 'Execute and automate workflows with flexible, custom integrations with popular technical tools like GitHub, GitLab, and ServiceNow.',
}),
image: (
<img
src={integrate}
draggable={false}
/>
<ToolsImage/>
),
},
], [formatMessage]);
@@ -145,7 +133,6 @@ function WelcomeScreen({
className={classNames(
'WelcomeScreen__button',
'primary-button primary-medium-button',
{'primary-button-inverted': darkMode},
)}
onClick={handleOnGetStartedClick}
>