onboarding: refreshed assets

Author: shakyShane

special-pages/pages/onboarding/app/components/App2.js

@@ -5,7 +5,8 @@ import { useEnv } from '../../../../shared/components/EnvironmentProvider';
 import { usePlatformName } from './SettingsProvider';
 import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary';
 import { Fallback } from '../pages/Fallback';
-import { Background } from './v3/Background';
+import { BackgroundLegacy } from './v3/Background_legacy.js';
+import { Background } from './v3/Background.js';
 import { BeforeAfterProvider } from './v3/BeforeAfterProvider';
 import { SingleStep } from './v3/SingleStep';
 import { Hiker } from './v3/Hiker';
@@ -52,7 +53,7 @@ export function App2({ children }) {
 
     return (
         <main className={styles.main} data-platform-name={platformName || 'macos'} data-app-version="2">
-            <Background />
+            {platformName === 'windows' ? <BackgroundLegacy /> : <Background />}
             {debugState && <Debug state={globalState} />}
             <div
                 className={styles.container}

special-pages/pages/onboarding/app/components/Background.module.css

@@ -47,15 +47,15 @@
     }
 }
 .foreground.layer1 {
-    background-image: url("../../public/assets/img/layer1.svg");
+    background-image: url("../../public/assets/img/layer1_legacy.svg");
     animation-name: slidein1;
 }
 .foreground.layer2 {
-    background-image: url("../../public/assets/img/layer2.svg");
+    background-image: url("../../public/assets/img/layer2_legacy.svg");
     animation-name: slidein2;
 }
 .foreground.layer3 {
-    background-image: url("../../public/assets/img/layer3.svg");
+    background-image: url("../../public/assets/img/layer3_legacy.svg");
     animation-name: slidein3;
 }
 @media only screen and (max-width: 480px) {

special-pages/pages/onboarding/app/components/v3/Background.js

@@ -4,10 +4,10 @@ import cn from 'classnames';
 
 export function Background() {
     return (
-        <div className={styles.background}>
-            <div className={cn(styles.foreground, styles.layer1)} />
-            <div className={cn(styles.foreground, styles.layer2)} />
-            <div className={cn(styles.foreground, styles.layer3)} />
+        <div class={styles.background}>
+            <div class={cn(styles.foreground, styles.animated, styles.clouds)} />
+            <div class={cn(styles.foreground, styles.animated, styles.mountains)} />
+            <div class={cn(styles.foreground, styles.stars)} />
         </div>
     );
 }

special-pages/pages/onboarding/app/components/v3/Background.module.css

@@ -11,7 +11,7 @@
     background-image: url("../../../public/assets/img/grain.png"), url("../../../public/assets/img/background-v3.jpg");
     background-blend-mode: overlay, normal;
     background-repeat: repeat, no-repeat;
-    background-size: 100px, cover;
+    background-size: 50px, cover;
 
     @media only screen and (min-width: 481px) {
         background-size: 100px, 200% 100%;
@@ -24,69 +24,78 @@
         background-image: url("../../../public/assets/img/grain-dark.png"), url("../../../public/assets/img/background-dark-v3.jpg");
         background-blend-mode: overlay, normal;
         background-repeat: repeat, no-repeat;
-        background-size: 100px, cover;
+        background-size: 50px, cover;
     }
 }
 
 .foreground {
     position: absolute;
-    top: 10vh;
+    top: 0;
     left: 0;
     width: 100vw;
-    height: 80vh;
-    background-size: contain;
+    height: 100vh;
     background-repeat: no-repeat;
+}
 
-    animation-duration: 50s;
-
+.animated {
+    animation-duration: 30s;
     animation-fill-mode: both;
     animation-timing-function: linear;
+}
+
+.clouds {
+    background-image: url("../../../public/assets/img/clouds.svg");
+    background-position: top right;
+    animation-name: offscreen-clouds;
+    animation-duration: 50s;
 
     @media (prefers-color-scheme: dark) {
         opacity: .1;
     }
 }
-.foreground.layer1 {
-    background-image: url("../../../public/assets/img/layer1.svg");
-    animation-name: slidein1;
-}
-.foreground.layer2 {
-    background-image: url("../../../public/assets/img/layer2.svg");
-    animation-name: slidein2;
+
+.mountains {
+    background-image: url("../../../public/assets/img/mountains.svg");
+    background-position: bottom right;
+
+    @media (prefers-color-scheme: dark) {
+        opacity: .15;
+    }
 }
-.foreground.layer3 {
-    background-image: url("../../../public/assets/img/layer3.svg");
-    animation-name: slidein3;
+
+.stars {
+    background-image: url("../../../public/assets/img/stars.svg");
+    background-position: top right;
+    display: none;
+
+    @media screen and (prefers-color-scheme: dark) {
+        display: block;
+    }
 }
+
 @media only screen and (max-width: 480px) {
     .foreground {
         display: none
     }
 }
-@keyframes slidein1 {
-    from {
-        transform: translateX(110vw);
-    }
 
-    to {
-        transform: translateX(40vw);
-    }
-}
-@keyframes slidein2 {
+@keyframes offscreen {
     from {
         transform: translateX(100vw);
     }
 
     to {
-        transform: translateX(40vw);
+        transform: translateX(0vw);
     }
 }
-@keyframes slidein3 {
+
+@keyframes offscreen-clouds {
     from {
-        transform: translateX(120vw);
+        /* this accounts for clouds SVG having some 'whitespace' + being pinned to the top right  */
+        transform: translateX(830px);
     }
 
     to {
-        transform: translateX(40vw);
+        transform: translateX(0vw);
     }
 }

special-pages/pages/onboarding/app/components/v3/Background_legacy.js

@@ -0,0 +1,13 @@
+import { h } from 'preact';
+import styles from './Background_legacy.module.css';
+import cn from 'classnames';
+
+export function BackgroundLegacy() {
+    return (
+        <div className={styles.background}>
+            <div className={cn(styles.foreground, styles.layer1)} />
+            <div className={cn(styles.foreground, styles.layer2)} />
+            <div className={cn(styles.foreground, styles.layer3)} />
+        </div>
+    );
+}

special-pages/pages/onboarding/app/components/v3/Background_legacy.module.css

@@ -0,0 +1,92 @@
+.background {
+    position: fixed;
+    z-index: 0;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+
+    /* Modern browsers support multiple `background-size` so add grain */
+    background-color: #FDEDE5;
+    background-image: url("../../../public/assets/img/grain.png"), url("../../../public/assets/img/background-v3_legacy.jpg");
+    background-blend-mode: overlay, normal;
+    background-repeat: repeat, no-repeat;
+    background-size: 100px, cover;
+
+    @media only screen and (min-width: 481px) {
+        background-size: 100px, 200% 100%;
+    }
+    @media only screen and (min-width: 801px) {
+        background-size: 100px, 100% 100%;
+    }
+    @media (prefers-color-scheme: dark) {
+        background-color: #37214F;
+        background-image: url("../../../public/assets/img/grain-dark.png"), url("../../../public/assets/img/background-dark-v3_legacy.jpg");
+        background-blend-mode: overlay, normal;
+        background-repeat: repeat, no-repeat;
+        background-size: 100px, cover;
+    }
+}
+
+.foreground {
+    position: absolute;
+    top: 10vh;
+    left: 0;
+    width: 100vw;
+    height: 80vh;
+    background-size: contain;
+    background-repeat: no-repeat;
+
+    animation-duration: 50s;
+
+    animation-fill-mode: both;
+    animation-timing-function: linear;
+
+    @media (prefers-color-scheme: dark) {
+        opacity: .1;
+    }
+}
+.foreground.layer1 {
+    background-image: url("../../../public/assets/img/layer1_legacy.svg");
+    animation-name: slidein1;
+}
+.foreground.layer2 {
+    background-image: url("../../../public/assets/img/layer2_legacy.svg");
+    animation-name: slidein2;
+}
+.foreground.layer3 {
+    background-image: url("../../../public/assets/img/layer3_legacy.svg");
+    animation-name: slidein3;
+}
+@media only screen and (max-width: 480px) {
+    .foreground {
+        display: none
+    }
+}
+@keyframes slidein1 {
+    from {
+        transform: translateX(110vw);
+    }
+
+    to {
+        transform: translateX(40vw);
+    }
+}
+@keyframes slidein2 {
+    from {
+        transform: translateX(100vw);
+    }
+
+    to {
+        transform: translateX(40vw);
+    }
+}
+@keyframes slidein3 {
+    from {
+        transform: translateX(120vw);
+    }
+
+    to {
+        transform: translateX(40vw);
+    }
+}

special-pages/pages/onboarding/app/components/v3/Heading.module.css

@@ -76,6 +76,8 @@
     mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="40" fill="none"><path fill="%23000" d="M21.627 34.502c-4.4-3.677-14.05-12.309-21.115-22.728-1.63-2.403.911-5.248 3.657-4.457 11.207 3.226 16.613-.79 18.715-3.195.828-.948 1.103-2.221 1.103-3.495L24 0v40l-.013-.497a6.54 6.54 0 0 0-2.36-5.001z"/></svg>');
     mask-position: right var(--sp-8);
     mask-repeat: no-repeat;
+    position: relative;
+    left: 1px; /* nudge it over to handle pixel rounding gaps */
 
     @media (prefers-color-scheme: dark) {
         background: linear-gradient(180deg, #333 0%, rgba(51, 51, 51, 0.72) 100%);