From ac61c66ce402a1168a010b20fcab0f8c3e72119b Mon Sep 17 00:00:00 2001 From: Dean Whillier Date: Fri, 20 Aug 2021 13:50:16 -0400 Subject: [PATCH] [MM-37090] Update loading screen branding (#1706) * update loading screen branding - background - logo light mode colour * linting * build mac installer on pr * use the actual branch name --- .circleci/config.yml | 2 - src/assets/loader/StippleMask.jpg | Bin 0 -> 23980 bytes src/assets/window-background-dots.svg | 148 ------------------ src/assets/window-background-dots_dark.svg | 148 ------------------ src/assets/window-background.svg | 38 ----- src/assets/window-background_dark.svg | 38 ----- .../LoadingScreen/LoadingBackground.tsx | 78 +++++++++ .../{ => LoadingScreen}/LoadingScreen.tsx | 7 +- .../components/LoadingScreen/index.ts | 4 + .../css/components/LoadingAnimation.css | 2 +- src/renderer/css/components/LoadingScreen.css | 100 ++++++------ 11 files changed, 142 insertions(+), 423 deletions(-) create mode 100644 src/assets/loader/StippleMask.jpg delete mode 100644 src/assets/window-background-dots.svg delete mode 100644 src/assets/window-background-dots_dark.svg delete mode 100644 src/assets/window-background.svg delete mode 100644 src/assets/window-background_dark.svg create mode 100644 src/renderer/components/LoadingScreen/LoadingBackground.tsx rename src/renderer/components/{ => LoadingScreen}/LoadingScreen.tsx (92%) create mode 100644 src/renderer/components/LoadingScreen/index.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index 2ffa638d..2c1cdbf5 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -449,8 +449,6 @@ workflows: branches: only: - /^release-\d+(\.\d+){1,2}(-rc.*)?/ - - MM-36793 - - store_artifacts: # for master/PR builds requires: diff --git a/src/assets/loader/StippleMask.jpg b/src/assets/loader/StippleMask.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0edf2b1b46837911a1141a8ca8cdec9875391d20 GIT binary patch literal 23980 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 literal 0 HcmV?d00001 diff --git a/src/assets/window-background-dots.svg b/src/assets/window-background-dots.svg deleted file mode 100644 index 4a17343c..00000000 --- a/src/assets/window-background-dots.svg +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/window-background-dots_dark.svg b/src/assets/window-background-dots_dark.svg deleted file mode 100644 index 83377239..00000000 --- a/src/assets/window-background-dots_dark.svg +++ /dev/null @@ -1,148 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/window-background.svg b/src/assets/window-background.svg deleted file mode 100644 index 4bf54f0a..00000000 --- a/src/assets/window-background.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/window-background_dark.svg b/src/assets/window-background_dark.svg deleted file mode 100644 index 896f13fd..00000000 --- a/src/assets/window-background_dark.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/renderer/components/LoadingScreen/LoadingBackground.tsx b/src/renderer/components/LoadingScreen/LoadingBackground.tsx new file mode 100644 index 00000000..3a99dedf --- /dev/null +++ b/src/renderer/components/LoadingScreen/LoadingBackground.tsx @@ -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 ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} + +export default LoadingBackground; diff --git a/src/renderer/components/LoadingScreen.tsx b/src/renderer/components/LoadingScreen/LoadingScreen.tsx similarity index 92% rename from src/renderer/components/LoadingScreen.tsx rename to src/renderer/components/LoadingScreen/LoadingScreen.tsx index 2f91b4b0..9ee068c0 100644 --- a/src/renderer/components/LoadingScreen.tsx +++ b/src/renderer/components/LoadingScreen/LoadingScreen.tsx @@ -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, })} > + svg +{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.LoadingScreen__backgound { + background: var(--background-color); +} + +.LoadingScreen .Pill__stipple { + fill: var(--stipple-color); + fill-opacity: var(--stipple-opacity); +} + +.LoadingScreen .Pill__gradient { + stop-color: var(--background-color); +} + +.LoadingScreen .Pill__gradientHighlight { + stop-color: var(--background-color-highlight); } .LoadingScreen--loaded { - opacity: 0; - visibility: hidden; - - transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end; + opacity: 0; + visibility: hidden; + + transition: opacity 150ms 0ms ease-in, visibility 150ms 0ms step-end; }