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

MM-25003_Improve Onboarding screens for the desktop app - Intro Screen (#2220)

Browse Source
This commit is contained in:
Julian Mondragón
2022-08-16 12:33:03 -05:00
committed by GitHub
parent d4282d965e
commit faf2dae74b
50 changed files with 1815 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/css/_css_variables.scss Normal file
View File

@@ -0,0 +1,14 @@
:root {
--button-bg: #166de0;
--button-color: #fff;
--center-channel-text: #3f4350;
--sidebar-text-active-border: #579eff;
--denim-button-bg: #1c58d9;
--denim-sidebar-active-border: #5d89ea;
--title-color-indigo-500: #1e325c;
--button-color-rgb: 255, 255, 255;
--center-channel-color-rgb: 61, 60, 64;
--center-channel-text-rgb: 63, 67, 80;
--denim-button-bg-rgb: 28, 88, 217;
}

177
src/renderer/css/components/Button.scss Normal file
View File

@@ -0,0 +1,177 @@
@import url("../_css_variables.scss");
.primary-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: var(--button-bg);
border-radius: 4px;
color: var(--button-color);
font-weight: 600;
font-family: 'Open Sans';
&:hover {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)), var(--button-bg);
}
&:active {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)), var(--button-bg);
}
&:focus {
box-sizing: border-box;
border: 2px solid var(--sidebar-text-active-border);
outline: none;
}
&:disabled {
background: rgba(var(--center-channel-color-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 0.32);
cursor: not-allowed;
}
i {
display: flex;
font-size: 18px;
}
}
.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(--center-channel-text-rgb), 0.08);
color: rgba(var(--center-channel-text-rgb), 0.32);
}
}
.primary-large-button {
height: 48px;
padding: 0 24px;
font-size: 16px;
line-height: 18px;
&:focus {
padding: 0 22px;
}
}
.primary-medium-button {
height: 40px;
padding: 0 20px;
font-size: 14px;
line-height: 14px;
&:focus {
padding: 0 20px;
}
}
.icon-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: none;
border-radius: 4px;
color: rgba(var(--center-channel-text-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);
}
&:active {
background: rgba(var(--denim-button-bg-rgb), 0.08);
color: var(--denim-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);
outline: none;
}
&:disabled {
background: none;
color: rgba(var(--center-channel-text-rgb), 0.32);
cursor: not-allowed;
}
i {
display: flex;
font-style: normal;
justify-content: center;
}
}
.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;
font-size: 18px;
line-height: 18px;
&:focus:not(:focus-visible) {
padding: 6px 8px;
border: 0;
}
&:focus-visible {
padding: 4px;
border: 2px solid;
}
i {
width: 16px;
height: 16px;
&::before {
line-height: 16px;
}
}
}

94
src/renderer/css/components/Carousel.scss Normal file
View File

@@ -0,0 +1,94 @@
.Carousel {
display: flex;
flex: 1;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
.Carousel__slides {
min-height: 380px;
width: 100%;
position: relative;
display: flex;
justify-content: center;
.Carousel__slide {
position: absolute;
bottom: 0;
opacity: 0;
}
.Carousel__slide-current {
opacity: 1;
}
}
.Carousel__pagination {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
margin-top: 22px;
}
}
.inFromRight {
animation: inFromRight 0.4s ease-in-out;
}
.inFromLeft {
animation: inFromLeft 0.4s ease-in-out;
}
.outToRight {
animation: outToRight 0.4s ease-in-out;
}
.outToLeft {
animation: outToLeft 0.4s ease-in-out;
}
@keyframes inFromRight {
0% {
transform: translateX(30%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes inFromLeft {
0% {
transform: translateX(-30%);
opacity: 0;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
@keyframes outToRight {
0% {
transform: translateX(0%);
opacity: 1;
}
100% {
transform: translateX(30%);
opacity: 0;
}
}
@keyframes outToLeft {
0% {
transform: translateX(0%);
opacity: 1;
}
100% {
transform: translateX(-30%);
opacity: 0;
}
}

10
src/renderer/css/components/CarouselButton.scss Normal file
View File

@@ -0,0 +1,10 @@
@import '~@mattermost/compass-icons/css/compass-icons.css';
.CarouselButton {
height: 32px;
padding: 8px;
&:focus {
padding: 6px;
}
}

70
src/renderer/css/components/CarouselPaginationIndicator.scss Normal file
View File

@@ -0,0 +1,70 @@
@import url("../_css_variables.scss");
.CarouselPaginationIndicator {
display: flex;
align-items: center;
justify-content: center;
margin: 0 23px;
.indicatorDot {
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
border-radius: 50%;
background: none;
box-shadow: 0 0 0 3px transparent;
cursor: pointer;
&:not(:first-child) {
margin-left: 4px;
}
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(var(--denim-button-bg-rgb), 0.32);
}
&.active,
&.disabled {
cursor: default;
pointer-events: none;
}
&.active {
background: rgba(var(--denim-button-bg-rgb), 0.16);
.dot {
background: var(--denim-button-bg);
}
}
&:focus-visible {
box-sizing: border-box;
border: 2px solid var(--sidebar-text-active-border);
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);
}
}
}

36
src/renderer/css/components/Header.scss Normal file
View File

@@ -0,0 +1,36 @@
@import url("../_css_variables.scss");
.Header {
position: relative;
display: flex;
width: 100%;
min-height: 100px;
padding: 0 40px;
.Header__main {
display: flex;
width: 100%;
height: 100%;
flex-flow: wrap;
align-items: center;
justify-content: space-between;
.Header__logo {
width: 170px;
path {
fill: var(--center-channel-text);
}
}
}
&.Header--darkMode {
.Header__main {
.Header__logo {
path {
fill: var(--button-color);
}
}
}
}
}

35
src/renderer/css/components/WelcomeScreen.scss Normal file
View File

@@ -0,0 +1,35 @@
.WelcomeScreen {
flex-direction: column;
z-index: 20;
* {
z-index: 21;
}
.WelcomeScreen__body {
display: flex;
flex: 1;
width: 100%;
align-items: center;
justify-content: center;
-webkit-font-smoothing: antialiased;
.WelcomeScreen__content {
display: flex;
flex-direction: column;
width: 100%;
align-items: center;
justify-content: center;
.WelcomeScreen__button {
margin-top: 22px;
}
}
}
.WelcomeScreen__footer {
display: block;
width: 100%;
height: 100px;
}
}

60
src/renderer/css/components/WelcomeScreenSlide.scss Normal file
View File

@@ -0,0 +1,60 @@
@import url("../_css_variables.scss");
@import url("../fonts.css");
.WelcomeScreenSlide {
display: flex;
flex: 1;
max-width: 540px;
flex-flow: column;
justify-content: flex-end;
.WelcomeScreenSlide__image {
align-self: center;
}
.WelcomeScreenSlide__title {
color: var(--title-color-indigo-500);
font-family: 'Metropolis';
font-size: 80px;
font-weight: 600;
letter-spacing: -0.05em;
line-height: 88px;
text-align: center;
}
.WelcomeScreenSlide__subtitle {
color: rgba(var(--center-channel-text-rgb), 0.72);
font-family: Open Sans;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
margin-top: 16px;
}
&.WelcomeScreenSlide--main {
position: relative;
height: 100%;
.WelcomeScreenSlide__title {
font-size: 128px;
line-height: 128px;
}
.WelcomeScreenSlide__image {
position: absolute;
display: block;
bottom: 115px;
}
}
&.WelcomeScreenSlide--darkMode {
.WelcomeScreenSlide__title {
color: var(--button-color);
}
.WelcomeScreenSlide__subtitle {
color: rgba(var(--button-color-rgb), 0.72);
}
}
}

42
src/renderer/css/fonts.css
View File

@@ -39,3 +39,45 @@
font-weight: 600;
src: url('../../assets/fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.woff2') format('woff2');
}
@font-face {
font-family: 'Metropolis';
font-style: normal;
font-weight: 600;
src: url('../../assets/fonts/Metropolis-SemiBold.woff') format('woff');
}
@font-face {
font-family: 'Metropolis';
font-style: italic;
font-weight: 600;
src: url('../../assets/fonts/Metropolis-SemiBoldItalic.woff') format('woff');
}
@font-face {
font-family: 'Metropolis';
font-style: normal;
font-weight: 400;
src: url('../../assets/fonts/Metropolis-Regular.woff') format('woff');
}
@font-face {
font-family: 'Metropolis';
font-style: italic;
font-weight: 400;
src: url('../../assets/fonts/Metropolis-RegularItalic.woff') format('woff');
}
@font-face {
font-family: 'Metropolis';
font-style: normal;
font-weight: 300;
src: url('../../assets/fonts/Metropolis-Light.woff') format('woff');
}
@font-face {
font-family: 'Metropolis';
font-style: italic;
font-weight: 300;
src: url('../../assets/fonts/Metropolis-LightItalic.woff') format('woff');
}

22
src/renderer/css/index.css
View File

@@ -117,6 +117,28 @@ body {
color: rgba(243,243,243,0.7);
}
.topBar .app-title {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 40px;
justify-content: center;
align-items: center;
color: rgba(61,60,64,0.7);
font-family: "Open Sans", sans-serif;
font-weight: 600;
font-size: 14px;
letter-spacing: -0.2px;
z-index: 0;
-webkit-app-region: drag;
}
.topBar.darkMode .app-title {
color: rgba(221,221,221,0.64);
}
.topBar .title-bar-btns {
position: relative;
line-height: 40px;