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

141
src/renderer/css/_css_variables.scss
View File

@@ -1,28 +1,123 @@
:root {
--away-indicator-dark: #c79e3f;
--button-bg: #166de0;
--button-color: #fff;
--center-channel-bg: #fff;
--center-channel-color: #3d3c40;
--center-channel-text: #3f4350;
--error-text: #d24b4e;
--link-color: #2389d7;
--online-indicator: #06d6a0;
--sidebar-text-active-border: #579eff;
--denim-button-bg: #1c58d9;
--denim-sidebar-active-border: #5d89ea;
--denim-sidebar-header-bg: #192A4D;
--title-color-indigo-500: #1e325c;
/* colors used but not themed */
--indigo-400: #28427B;
--indigo-300: #32539A;
--sand: #CCC4AE;
--neutral-0: #FFFFFF;
--neutral-1200: #090A0B;
--yellow-400: #FFBC1F;
/* Elevation values used for box shadows.
Defined as CSS variables so that both sass and JS can use them.
*/
--elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
--elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
--elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12);
--elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
--elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12);
/* Denim - used for light mode */
--away-indicator-rgb: 255, 188, 31;
--button-bg-rgb: 28, 88, 217;
--button-color-rgb: 255, 255, 255;
--center-channel-bg-rgb: 255, 255, 255;
--center-channel-color-rgb: 61, 60, 64;
--center-channel-text-rgb: 63, 67, 80;
--link-color-inverted-rgb: 129, 163, 239;
--denim-button-bg-rgb: 28, 88, 217;
--denim-sidebar-header-bg-rgb: 25, 42, 77;
--secondary-blue-rgb: 34, 64, 109;
--onyx-center-channel-text-rgb: 221, 223, 228;
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
--center-channel-color-rgb: 63, 67, 80;
--dnd-indicator-rgb: 210, 75, 78;
--error-text-color-rgb: 210, 75, 78;
--link-color-rgb: #386fe5;
--mention-bg-rgb: 255, 255, 255;
--mention-color-rgb: 30, 50, 92;
--mention-highlight-bg-rgb: 255, 212, 112;
--mention-highlight-link-rgb: 27, 29, 34;
--mention-highlight-bg-mixed-rgb: 255, 233, 183;
--pinned-highlight-bg-mixed-rgb: 255, 244, 220;
--own-highlight-bg-rgb: 245, 204, 110;
--new-message-separator-rgb: 204, 143, 0;
--online-indicator-rgb: 61, 184, 135;
--sidebar-bg-rgb: 30, 50, 92;
--sidebar-header-bg-rgb: 25, 42, 77;
--sidebar-teambar-bg-rgb: 22, 37, 69;
--sidebar-header-text-color-rgb: 255, 255, 255;
--sidebar-text-rgb: 255, 255, 255;
--sidebar-text-active-border-rgb: 93, 137, 234;
--sidebar-text-active-color-rgb: 255, 255, 255;
--sidebar-text-hover-bg-rgb: 40, 66, 123;
--sidebar-unread-text-rgb: 255, 255, 255;
--sidebar-bg: #1e325c;
--sidebar-text: #ffffff;
--sidebar-unread-text: #ffffff;
--sidebar-text-hover-bg: #28427b;
--sidebar-text-active-border: #5d89ea;
--sidebar-text-active-color: #ffffff;
--sidebar-header-bg: #192a4d;
--sidebar-teambar-bg: #162545;
--sidebar-header-text-color: #ffffff;
--online-indicator: #3db887;
--away-indicator: #ffbc1f;
--dnd-indicator: #d24b4e;
--mention-bg: #ffffff;
--mention-color: #1e325c;
--center-channel-bg: #ffffff;
--center-channel-color: #3f4350;
--new-message-separator: #cc8f00;
--link-color: #386fe5;
--button-bg: #1c58d9;
--button-color: #ffffff;
--error-text: #d24b4e;
--mention-highlight-bg: #ffd470;
--mention-highlight-link: #1b1d22;
}
.LoadingScreen--darkMode {
/* Onyx - used for dark mode*/
--away-indicator-rgb: 245, 171, 0;
--button-bg-rgb: 74, 124, 232;
--button-color-rgb: 255, 255, 255;
--center-channel-bg-rgb: 25, 27, 31;
--center-channel-color-rgb: 227, 228, 232;
--dnd-indicator-rgb: 210, 75, 78;
--error-text-color-rgb: 218, 108, 110;
--link-color-rgb: #5d89ea;
--mention-bg-rgb: 75, 124, 231;
--mention-color-rgb: 255, 255, 255;
--mention-highlight-bg-rgb: 13, 110, 110;
--mention-highlight-link-rgb: 164, 244, 244;
--mention-highlight-bg-mixed-rgb: 19, 68, 70;
--pinned-highlight-bg-mixed-rgb: 22, 46, 49;
--own-highlight-bg-rgb: 23, 115, 116;
--new-message-separator-rgb: 26, 219, 219;
--online-indicator-rgb: 61, 184, 135;
--sidebar-bg-rgb: 32, 34, 40;
--sidebar-header-bg-rgb: 36, 39, 45;
--sidebar-teambar-bg-rgb: 41, 44, 51;
--sidebar-header-text-color-rgb: 255, 255, 255;
--sidebar-text-rgb: 255, 255, 255;
--sidebar-text-active-border-rgb: 74, 124, 232;
--sidebar-text-active-color-rgb: 255, 255, 255;
--sidebar-text-hover-bg-rgb: 37, 38, 42;
--sidebar-unread-text-rgb: 255, 255, 255;
--sidebar-bg: #202228;
--sidebar-text: #ffffff;
--sidebar-unread-text: #ffffff;
--sidebar-text-hover-bg: #25262a;
--sidebar-text-active-border: #4a7ce8;
--sidebar-text-active-color: #ffffff;
--sidebar-header-bg: #24272d;
--sidebar-teambar-bg: #292c33;
--sidebar-header-text-color: #ffffff;
--online-indicator: #3db887;
--away-indicator: #f5ab00;
--dnd-indicator: #d24b4e;
--mention-bg: #4b7ce7;
--mention-color: #ffffff;
--center-channel-bg: #191b1f;
--center-channel-color: #e3e4e8;
--new-message-separator: #1adbdb;
--link-color: #5d89ea;
--button-bg: #4a7ce8;
--button-color: #ffffff;
--error-text: #da6c6e;
--mention-highlight-bg: #0d6e6e;
--mention-highlight-link: #a4f4f4;
}

77
src/renderer/css/components/Button.scss
View File

@@ -39,31 +39,6 @@
}
}
.primary-button-inverted {
background: var(--button-color);
color: var(--denim-button-bg);
&:hover {
background: linear-gradient(0deg, rgba(var(--denim-button-bg-rgb), 0.08), rgba(var(--denim-button-bg-rgb), 0.08)), var(--button-color);
color: var(--denim-button-bg);
}
&:active {
background: linear-gradient(0deg, rgba(var(--denim-button-bg-rgb), 0.16), rgba(var(--denim-button-bg-rgb), 0.16)), var(--button-color);
color: var(--denim-button-bg);
}
&:focus {
border: 2px solid var(--denim-sidebar-active-border);
color: var(--denim-button-bg);
}
&:disabled {
background: rgba(var(--button-color-rgb), 0.08);
color: rgba(var(--button-color-rgb), 0.32);
}
}
.primary-large-button {
height: 48px;
padding: 0 24px;
@@ -109,21 +84,6 @@
}
}
.link-button-inverted {
color: rgb(var(--link-color-inverted-rgb));
&:hover,
&:active,
&:focus {
color: var(--denim-sidebar-active-border);
}
&:disabled {
color: rgba(var(--link-color-inverted-rgb), 0.32);
}
}
.link-small-button {
font-size: 12px;
font-weight: 600;
@@ -138,22 +98,22 @@
border: 0;
background: none;
border-radius: 4px;
color: rgba(var(--center-channel-text-rgb), 0.56);
color: rgba(var(--center-channel-color-rgb), 0.56);
font-weight: 400;
&:hover {
background: rgba(var(--center-channel-text-rgb), 0.08);
color: rgba(var(--center-channel-text-rgb), 0.72);
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.72);
}
&:active {
background: rgba(var(--denim-button-bg-rgb), 0.08);
color: var(--denim-button-bg);
background: rgba(var(--button-bg-rgb), 0.08);
color: var(--button-bg);
}
&:focus-visible {
box-sizing: border-box;
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--denim-button-bg);
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--button-bg);
outline: none;
}
@@ -170,31 +130,6 @@
}
}
.icon-button-inverted {
background: none;
color: rgba(var(--button-color-rgb), 0.64);
&:hover {
background: rgba(var(--button-color-rgb), 0.08);
color: var(--button-color);
}
&:active {
background: rgba(var(--button-color-rgb), 0.16);
color: var(--button-color);
}
&:focus-visible {
box-sizing: border-box;
border-color: linear-gradient(0deg, rgba(var(--button-color-rgb), 0.32), rgba(var(--button-color-rgb), 0.32)), var(--denim-button-bg);
}
&:disabled {
background: none;
color: rgba(var(--button-color-rgb), 0.32);
}
}
.icon-button-small {
height: 28px;
padding: 6px;

2
src/renderer/css/components/Carousel.scss
View File

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

25
src/renderer/css/components/CarouselPaginationIndicator.scss
View File

@@ -25,7 +25,7 @@
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(var(--denim-button-bg-rgb), 0.32);
background: rgba(var(--button-bg-rgb), 0.32);
}
&.active,
@@ -35,10 +35,10 @@
}
&.active {
background: rgba(var(--denim-button-bg-rgb), 0.16);
background: rgba(var(--button-bg-rgb), 0.16);
.dot {
background: var(--denim-button-bg);
background: var(--button-bg);
}
}
@@ -48,23 +48,4 @@
outline: none;
}
}
.indicatorDot-inverted {
.dot {
background: rgba(var(--button-color-rgb), 0.32);
}
&.active {
background: rgba(var(--button-color-rgb), 0.16);
.dot {
background: var(--button-color);
}
}
&:focus-visible {
border: 2px solid var(--denim-sidebar-active-border);
color: var(--denim-button-bg);
}
}
}

63
src/renderer/css/components/ConfigureServer.scss
View File

@@ -32,12 +32,6 @@
}
}
.alternate-link-inverted {
.alternate-link__message {
color: var(--button-color);
}
}
.ConfigureServer {
flex-direction: column;
z-index: 20;
@@ -69,8 +63,10 @@
-webkit-font-smoothing: antialiased;
.ConfigureServer__message-title {
margin-top: 24px;
margin-bottom: 24px;
padding-right: 60px;
color: var(--title-color-indigo-500);
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 80px;
font-weight: 600;
@@ -79,24 +75,12 @@
}
.ConfigureServer__message-subtitle {
color: rgba(var(--center-channel-text-rgb), 0.72);
color: rgba(var(--center-channel-color-rgb), 0.72);
font-size: 18px;
font-weight: 400;
line-height: 28px;
}
.ConfigureServer__message-img {
position: relative;
align-self: flex-end;
img {
position: absolute;
bottom: -230px;
left: -225px;
display: block;
}
}
&.inFromRight {
.ConfigureServer__message-title,
.ConfigureServer__message-subtitle {
@@ -152,7 +136,7 @@
}
.ConfigureServer__card-title {
color: var(--center-channel-text);
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 22px;
font-style: normal;
@@ -200,29 +184,6 @@
}
}
.ConfigureServer-inverted {
.ConfigureServer__body .ConfigureServer__content {
.ConfigureServer__message {
.ConfigureServer__message-title {
color: var(--button-color);
}
.ConfigureServer__message-subtitle {
color: rgba(var(--button-color-rgb), 0.72);
}
}
.ConfigureServer__card {
border: 1px solid rgba(var(--button-color-rgb), 0.08);
background-color: var(--denim-sidebar-header-bg);
.ConfigureServer__card-content .ConfigureServer__card-title {
color: var(--button-color);
}
}
}
}
@media screen and (min-width: 1680px) {
.ConfigureServer {
.ConfigureServer__body .ConfigureServer__content {
@@ -295,20 +256,6 @@
}
}
}
.ConfigureServer-inverted {
.ConfigureServer__body .ConfigureServer__content .ConfigureServer__card {
.ConfigureServer__card-content .ConfigureServer__card-form {
.ConfigureServer__card-form-input {
background-color: var(--denim-sidebar-header-bg);
}
.disabled .ConfigureServer__card-form-input {
background-color: rgba(var(--denim-sidebar-header-bg-rgb), 0.54);
}
}
}
}
}
@media screen and (max-width: 699px) {

14
src/renderer/css/components/Header.scss
View File

@@ -17,20 +17,6 @@
.Header__logo {
width: 170px;
path {
fill: var(--center-channel-text);
}
}
}
&.Header--darkMode {
.Header__main {
.Header__logo {
path {
fill: var(--button-color);
}
}
}
}
}

51
src/renderer/css/components/Input.scss
View File

@@ -36,7 +36,7 @@
outline: 0;
&::placeholder {
color: rgba(var(--center-channel-text-rgb), 0.64);
color: rgba(var(--center-channel-color-rgb), 0.64);
}
&.Input__focus {
@@ -179,55 +179,6 @@
}
}
.Input_container-inverted {
.Input {
color: var(--button-color);
background-color: unset;
&::placeholder {
color: rgba(var(--button-color-rgb), 0.56);
}
}
.Input_wrapper {
color: rgba(var(--button-color-rgb), 0.56);
}
.Input___info {
color: rgba(var(--button-color-rgb), 0.56);
}
.Input_fieldset {
background-color: var(--denim-sidebar-header-bg);
border: 1px solid rgba(var(--onyx-center-channel-text-rgb), 0.16);
&:hover {
border-color: rgba(var(--onyx-center-channel-text-rgb), 0.48);
}
&:focus-within {
border-color: var(--onyx-center-channel-text-rgb);
box-shadow: inset 0 0 0 1px var(--onyx-center-channel-text-rgb);
color: var(--button-color);
.Input_legend {
color: var(--button-color);
}
}
}
.Input_legend {
background-color: var(--denim-sidebar-header-bg);
color: rgba(var(--button-color-rgb), 0.64);
}
&.disabled {
.Input_fieldset {
background: rgba(var(--button-color-rgb), 0.08);
}
}
}
.Input_container {
.Input_fieldset___error {
border-color: var(--error-text);

34
src/renderer/css/components/LoadingScreen.css
View File

@@ -3,11 +3,6 @@ body {
}
.LoadingScreen {
--background-color: #F4F4F6;
--background-color-highlight: #FFFFFF;
--stipple-color: #1E325C;
--stipple-opacity: 0.08;
display: flex;
justify-content: center;
align-items: center;
@@ -25,38 +20,19 @@ body {
transition: opacity 150ms 0ms ease-out, visibility 150ms 0ms step-start;
}
.LoadingScreen--darkMode {
--background-color-highlight: #28427B;
--background-color: #1E325C;
--stipple-color: #14213E;
--stipple-opacity: 0.8;
.LoadingScreen--darkMode .LoadingScreen__background {
background-image: url('renderer/assets/svg/background-dark.svg');
}
.LoadingScreen__backgound,
.LoadingScreen__backgound > svg
.LoadingScreen__background
{
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);
background-size: cover;
background-image: url('renderer/assets/svg/background-light.svg');
}
.LoadingScreen--loaded {

9
src/renderer/css/components/WelcomeScreenSlide.scss
View File

@@ -12,9 +12,9 @@
}
.WelcomeScreenSlide__title {
color: var(--title-color-indigo-500);
color: var(--center-channel-color);
font-family: 'Metropolis';
font-size: 80px;
font-size: 64px;
font-weight: 600;
letter-spacing: -1.6px;
line-height: 88px;
@@ -29,7 +29,7 @@
font-weight: 400;
line-height: 24px;
text-align: center;
max-width: 580px;
max-width: 628px;
margin: auto;
}
@@ -37,8 +37,7 @@
max-width: 582px;
.WelcomeScreenSlide__title {
font-size: 80px;
line-height: normal;
font-size: 93px;
}
}