MM-45981_Desktop: Add Server Screen: Improve Onboarding screens (#2243)

2022-09-16 10:35:37 -05:00
parent c12dc3d6ae
commit c3493b09ff
24 changed files with 1920 additions and 100 deletions
--- a/src/renderer/css/_css_variables.scss
+++ b/src/renderer/css/_css_variables.scss
@@ -1,14 +1,27 @@
 :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;

    --button-color-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);
 }
--- a/src/renderer/css/_mixins.scss
+++ b/src/renderer/css/_mixins.scss
@@ -0,0 +1,81 @@
+@mixin inFromRight($start) {
+    @keyframes inFromRight#{$start} {
+        0% {
+            transform: translateX(#{$start + '%'});
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+    }
+}
+
+@mixin inFromLeft($start) {
+    @keyframes inFromLeft#{$start} {
+        0% {
+            transform: translateX(#{'-' + $start + '%'});
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+    }
+}
+
+@mixin outToLeft($end) {
+    @keyframes outToLeft#{$end} {
+        0% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(#{'-' + $end + '%'});
+            opacity: 0;
+        }
+    }
+}
+
+@mixin outToRight($end) {
+    @keyframes outToRight#{$end} {
+        0% {
+            transform: translateX(0%);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(#{$end + '%'});
+            opacity: 0;
+        }
+    }
+}
+
+@mixin shake-horizontally {
+    animation: shake-horizontally 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    backface-visibility: hidden;
+    perspective: 1000px;
+    transform: translate3d(0, 0, 0);
+}
+
+@keyframes shake-horizontally {
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0);
+    }
+
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0);
+    }
+
+    30%,
+    50%,
+    70% {
+        transform: translate3d(-4px, 0, 0);
+    }
+
+    40%,
+    60% {
+        transform: translate3d(4px, 0, 0);
+    }
+}
--- a/src/renderer/css/components/Button.scss
+++ b/src/renderer/css/components/Button.scss
@@ -58,8 +58,8 @@
    }

    &:disabled {
-        background: rgba(var(--center-channel-text-rgb), 0.08);
-        color: rgba(var(--center-channel-text-rgb), 0.32);
+        background: rgba(var(--button-color-rgb), 0.08);
+        color: rgba(var(--button-color-rgb), 0.32);
    }
 }

@@ -85,6 +85,50 @@
    }
 }

+.link-button {
+    border: none;
+    box-shadow: none;
+    color: var(--link-color);
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
+        text-decoration-line: underline;
+    }
+
+    &:focus-visible {
+        outline: 0;
+    }
+
+    &:disabled {
+        color: rgba(var(--center-channel-color-rgb), 0.32);
+        cursor: not-allowed;
+        text-decoration: none;
+    }
+}
+
+.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;
+    line-height: 16px;
+}
+
 .icon-button {
    position: relative;
    display: inline-flex;
--- a/src/renderer/css/components/Carousel.scss
+++ b/src/renderer/css/components/Carousel.scss
@@ -1,3 +1,5 @@
+@import '../_mixins.scss';
+
 .Carousel {
    display: flex;
    flex: 1;
@@ -34,61 +36,25 @@
 }

 .inFromRight {
-    animation: inFromRight 0.4s ease-in-out;
+    @include inFromRight(30);
+
+    animation: inFromRight30 0.4s ease-in-out;
 }

 .inFromLeft {
-    animation: inFromLeft 0.4s ease-in-out;
+    @include inFromLeft(30);
+
+    animation: inFromLeft30 0.4s ease-in-out;
 }

 .outToRight {
-    animation: outToRight 0.4s ease-in-out;
+    @include outToRight(30);
+
+    animation: outToRight30 0.4s ease-in-out;
 }

 .outToLeft {
-    animation: outToLeft 0.4s ease-in-out;
-}
+    @include outToLeft(30);

-@keyframes inFromRight {
-    0% {
-        transform: translateX(30%);
-        opacity: 0;
-    }
-    100% {
-        transform: translateX(0%);
-        opacity: 1;
-    }
+    animation: outToLeft30 0.4s ease-in-out;
 }
-
-@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;
-    }
-}
--- a/src/renderer/css/components/ConfigureServer.scss
+++ b/src/renderer/css/components/ConfigureServer.scss
@@ -0,0 +1,341 @@
+@import url("../_css_variables.scss");
+@import url("../fonts.css");
+@import '../_mixins.scss';
+
+.alternate-link {
+    margin-left: auto;
+    margin-bottom: 18px;
+    font-family: 'Open Sans';
+
+    .alternate-link__message {
+        color: var(--center-channel-text);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+    }
+
+    .alternate-link__link {
+        padding-left: 4px;
+    }
+
+    &.inFromRight {
+        @include inFromRight(40);
+
+        animation: inFromRight40 0.5s ease-in-out;
+    }
+
+    &.outToLeft {
+        @include outToLeft(40);
+
+        animation: outToLeft40 0.4s ease-in-out;
+        opacity: 0;
+    }
+}
+
+.alternate-link-inverted {
+    .alternate-link__message {
+        color: var(--button-color);
+    }
+}
+
+.ConfigureServer {
+    flex-direction: column;
+    z-index: 20;
+    
+    * {
+        z-index: 21;
+    }
+
+    .ConfigureServer__body {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        font-family: 'Open Sans';
+
+        .ConfigureServer__content {
+            display: flex;
+            height: fit-content;
+            flex: 1;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 42px;
+
+            .ConfigureServer__message {
+                display: flex;
+                width: 540px;
+                flex-flow: column;
+                align-self: flex-start;
+                z-index: 22;
+                -webkit-font-smoothing: antialiased;
+
+                .ConfigureServer__message-title {
+                    padding-right: 60px;
+                    color: var(--title-color-indigo-500);
+                    font-family: 'Metropolis';
+                    font-size: 80px;
+                    font-weight: 600;
+                    letter-spacing: -0.05em;
+                    line-height: 88px;
+                }
+
+                .ConfigureServer__message-subtitle {
+                    color: rgba(var(--center-channel-text-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 {
+                        @include inFromRight(30);
+
+                        animation: inFromRight30 0.5s ease-in-out;
+                    }
+
+                    .ConfigureServer__message-img img {
+                        @include inFromRight(70);
+
+                        animation: inFromRight70 0.5s ease-in-out;
+                    }
+                }
+
+                &.outToLeft {
+                    .ConfigureServer__message-title,
+                    .ConfigureServer__message-subtitle {
+                        @include outToLeft(30);
+
+                        animation: outToLeft30 0.4s ease-in-out;
+                        opacity: 0;
+                    }
+
+                    .ConfigureServer__message-img img {
+                        @include outToLeft(70);
+
+                        animation: outToLeft70 0.4s ease-in-out;
+                        opacity: 0;
+                    }
+                }
+            }
+
+            .ConfigureServer__card {
+                width: 540px;
+                box-sizing: border-box;
+                border: 1px solid rgba(var(--center-channel-text-rgb), 0.08);
+                margin-left: 60px;
+                background-color: var(--center-channel-bg);
+                border-radius: 8px;
+                box-shadow: var(--elevation-5);
+
+                .ConfigureServer__card-content {
+                    display: flex;
+                    flex: 1;
+                    flex-flow: column;
+                    padding: 48px 56px;
+                    border: none;
+                    box-shadow: none;
+
+                    &:focus-visible {
+                        outline: 0;
+                    }
+
+                    .ConfigureServer__card-title {
+                        color: var(--center-channel-text);
+                        font-family: 'Metropolis';
+                        font-size: 22px;
+                        font-style: normal;
+                        font-weight: 600;
+                        line-height: 28px;
+                        margin-bottom: 32px;
+                    }
+
+                    .ConfigureServer__card-form {
+                        .ConfigureServer__card-form-input-container {
+                            margin-top: 22px;
+                        }
+
+                        .ConfigureServer__card-form-button {
+                            width: 100%;
+                            margin-top: 30px;
+                        }
+                    }
+                }
+
+                &.inFromRight {
+                    @include inFromRight(40);
+
+                    animation: inFromRight40 0.5s ease-in-out;
+                }
+
+                &.outToLeft {
+                    @include outToLeft(40);
+
+                    animation: outToLeft40 0.4s ease-in-out;
+                    opacity: 0;
+                }
+
+                &.with-error {
+                    @include shake-horizontally;
+                }
+            }
+        }
+    }
+
+    .ConfigureServer__footer {
+        display: block;
+        width: 100%;
+        height: 100px;
+    }
+}
+
+.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 {
+            .ConfigureServer__message,
+            .ConfigureServer__card {
+                width: 610px;
+            }
+
+            .ConfigureServer__message .ConfigureServer__message-title {
+                padding-right: 130px;
+                margin-top: 48px;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 1199px) {
+    .alternate-link {
+        margin-bottom: 0;
+    }
+
+    .ConfigureServer {
+        .ConfigureServer__body .ConfigureServer__content {
+            flex-direction: column;
+
+            .ConfigureServer__message,
+            .ConfigureServer__card {
+                width: 640px;
+            }
+
+            .ConfigureServer__message {
+                align-self: center;
+                padding: 24px;
+
+                .ConfigureServer__message-title {
+                    padding-right: 210px;
+                    font-size: 64px;
+                    line-height: 76px;
+                }
+
+                .ConfigureServer__message-subtitle {
+                    margin: 0;
+                }
+
+                .ConfigureServer__message-img {
+                    display: none;
+                }
+            }
+
+            .ConfigureServer__card {
+                border: none;
+                margin: 0;
+                background-color: unset;
+                box-shadow: none;
+
+                .ConfigureServer__card-content {
+                    padding: 16px 24px;
+
+                    .ConfigureServer__card-title {
+                        display: none;
+                    }
+
+                    .ConfigureServer__card-form {
+                        .ConfigureServer__card-form-input {
+                            margin-top: 0;
+                            background-color: var(--center-channel-bg);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .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) {
+    .ConfigureServer {
+        .ConfigureServer__body {
+            margin: auto 0;
+
+            .ConfigureServer__content {
+                min-width: 375px;
+
+                .ConfigureServer__card {
+                    width: 100%;
+                }
+
+                .ConfigureServer__message {
+                    width: auto;
+                    align-self: flex-start;
+                    padding: 24px;
+
+                    .ConfigureServer__message-title {
+                        max-width: 271px;
+                        padding-right: 0;
+                        font-size: 45px;
+                        line-height: 56px;
+                    }
+                }
+            }
+        }
+    }
+}
--- a/src/renderer/css/components/Input.scss
+++ b/src/renderer/css/components/Input.scss
@@ -0,0 +1,254 @@
+@import url("../_css_variables.scss");
+@import '~@mattermost/compass-icons/css/compass-icons.css';
+
+.error {
+    color: var(--error-text);
+}
+
+.info {
+    color: var(--sidebar-text-active-border);
+}
+
+.warning {
+    color: var(--away-indicator-dark);
+}
+
+.success {
+    color: var(--online-indicator);
+}
+
+.Input_container {
+    width: 100%;
+
+    .Input {
+        position: relative;
+        z-index: 2;
+        left: 0;
+        width: 100%;
+        padding: 0;
+        border: 0;
+        border-radius: 4px;
+        box-shadow: none;
+        color: var(--center-channel-color);
+        background-color: unset;
+        font-size: 14px;
+        line-height: 20px;
+        outline: 0;
+
+        &::placeholder {
+            color: rgba(var(--center-channel-text-rgb), 0.64);
+        }
+
+        &.Input__focus {
+            box-shadow: none;
+        }
+
+        &.large {
+            height: 42px;
+            font-size: 16px;
+            line-height: 24px;
+        }
+    }
+
+    .Input_wrapper {
+        display: flex;
+        flex: 1;
+        padding: 0 16px;
+        margin: 2px 0;
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    .Input_limit-exceeded {
+        align-self: center;
+        margin-left: 16px;
+        color: var(--error-text);
+        font-size: 14px;
+        line-height: 20px;
+    }
+
+    .Input-border-error {
+        border-color: var(--error-text);
+    }
+
+    .Input___error,
+    .Input___customMessage,
+    .Input___info {
+        margin-top: 5px;
+        font-size: 12px;
+        line-height: 16px;
+        text-align: left;
+
+        i {
+            height: 14px;
+            align-self: baseline;
+            margin-right: 7px;
+            font-size: 14px;
+
+            &::before {
+                margin: 0;
+            }
+        }
+    }
+
+    .Input___error {
+        @extend .error;
+
+        display: flex;
+    }
+
+    .Input___warning {
+        @extend .warning;
+
+        display: flex;
+    }
+
+    .Input___success {
+        @extend .success;
+
+        display: flex;
+    }
+
+    .Input___info {
+        color: rgba(var(--center-channel-color-rgb), 0.56);
+
+        > span.valid {
+            margin-left: 7px;
+        }
+    }
+
+    .Input_fieldset {
+        position: relative;
+        z-index: 3;
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 1px;
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        border-radius: 4px;
+        color: rgba(var(--secondary-blue-rgb), 0.4);
+
+        &:hover {
+            border-color: rgba(var(--center-channel-color-rgb), 0.48);
+        }
+
+        &:focus-within {
+            border-color: var(--button-bg);
+            box-shadow: inset 0 0 0 1px var(--button-bg);
+            color: var(--button-bg);
+
+            .Input_legend {
+                color: var(--button-bg);
+            }
+        }
+    }
+
+    .Input_legend {
+        position: absolute;
+        z-index: 4;
+        top: -8px;
+        display: flex;
+        width: auto;
+        padding: 0 4px;
+        border: none;
+        margin-left: 12px;
+        background-color: var(--center-channel-bg);
+        color: rgba(var(--center-channel-color-rgb), 0.64);
+        font-size: 10px;
+        line-height: 14px;
+        opacity: 0;
+        transform: translateY(8px);
+        transition-duration: 0.15s;
+        transition-property: opacity, transform;
+        transition-timing-function: ease-in-out;
+        white-space: nowrap;
+    }
+
+    .Input_legend___focus {
+        padding: 0 4px;
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    &.disabled {
+        .Input_fieldset {
+            border-color: rgba(var(--center-channel-color-rgb), 0.16);
+            background-color: rgba(var(--center-channel-color-rgb), 0.04);
+        }
+    }
+}
+
+.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);
+        color: var(--error-text);
+
+        &:focus-within {
+            border-color: var(--error-text);
+            box-shadow: inset 0 0 0 1px var(--error-text);
+            color: var(--error-text);
+
+            .Input_legend {
+                color: var(--error-text);
+            }
+        }
+
+        &:hover {
+            border-color: var(--error-text);
+        }
+
+        .Input_legend {
+            color: var(--error-text);
+        }
+    }
+}
--- a/src/renderer/css/components/LoadingSpinner.scss
+++ b/src/renderer/css/components/LoadingSpinner.scss
@@ -0,0 +1,36 @@
+@import url("../fonts.css");
+
+@keyframes spin-fw {
+    0% {
+       transform: rotate(0deg);
+    }
+    100% {
+       transform: rotate(359deg);
+    }
+}
+
+.LoadingSpinner {
+    .spinner {
+        margin-right: 3px;
+        animation: spin-fw 1s infinite steps(8);
+        width: 1.28571429em;
+        text-align: center;
+        display: inline-block;
+        font-family: 'FontAwesome';
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+
+        &::before {
+            content: '\f110';
+            display: inline-block;
+            box-sizing: border-box;
+        }
+    }
+
+    &.with-text {
+        .spinner {
+            margin-right: 5px;
+        }
+    }
+}
--- a/src/renderer/css/components/WelcomeScreen.scss
+++ b/src/renderer/css/components/WelcomeScreen.scss
@@ -1,3 +1,5 @@
+@import '../_mixins.scss';
+
 .WelcomeScreen {
    flex-direction: column;
    z-index: 20;
@@ -25,6 +27,13 @@
                margin-top: 22px;
            }
        }
+
+        &.outToLeft {
+            @include outToLeft(40);
+    
+            animation: outToLeft40 0.4s ease-in-out;
+            opacity: 0;
+        }
    }

    .WelcomeScreen__footer {
--- a/src/renderer/css/fonts.css
+++ b/src/renderer/css/fonts.css
@@ -81,3 +81,10 @@
    font-weight: 300;
    src: url('../../assets/fonts/Metropolis-LightItalic.woff') format('woff');
 }
+
+@font-face {
+  font-family: 'FontAwesome';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../../assets/fonts/fontawesome-webfont.woff') format('woff');
+}