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

2022-08-16 12:33:03 -05:00
parent d4282d965e
commit faf2dae74b
50 changed files with 1815 additions and 42 deletions
--- a/src/renderer/css/components/WelcomeScreenSlide.scss
+++ b/src/renderer/css/components/WelcomeScreenSlide.scss
@@ -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);
+        }
+    }
+}