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

[MM-37090] Update loading screen branding (#1706)

Browse Source 
* update loading screen branding

- background
- logo light mode colour

* linting

* build mac installer on pr

* use the actual branch name
This commit is contained in:
Dean Whillier
2021-08-20 13:50:16 -04:00
committed by GitHub
parent ea14159dcc
commit ac61c66ce4
11 changed files with 142 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/renderer/components/LoadingScreen/LoadingBackground.tsx Normal file
View File

@@ -0,0 +1,78 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
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='../assets/loader/StippleMask.jpg'
/>
</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>
);
}
export default LoadingBackground;

7
src/renderer/components/LoadingScreen.tsx → src/renderer/components/LoadingScreen/LoadingScreen.tsx
View File

@@ -4,9 +4,11 @@
import React from 'react';
import classNames from 'classnames';
import useTransitionEnd from '../hooks/useTransitionEnd';
import useTransitionEnd from '../../hooks/useTransitionEnd';
import LoadingAnimation from './LoadingAnimation';
import LoadingAnimation from '../LoadingAnimation';
import LoadingBackground from './LoadingBackground';
type Props = {
loading?: boolean;
@@ -63,6 +65,7 @@ function LoadingScreen({loading = false, darkMode = false, onFadeOutComplete = (
'LoadingScreen--loaded': loadingIsComplete && loadAnimationIsComplete,
})}
>
<LoadingBackground/>
<LoadingAnimation
loading={loading}
darkMode={darkMode}

4
src/renderer/components/LoadingScreen/index.ts Normal file
View File

@@ -0,0 +1,4 @@
// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
export {default} from './LoadingScreen';