feat: platform wizard media

src/lib/layout/wizard.svelte

@@ -103,7 +103,9 @@
             {currentStep} />
     </aside>
     <div class="wizard-media">
-        <slot name="media" />
+        {#if $wizard.media}
+            <img src={$wizard.media} alt="wizard media" loading="lazy" />
+        {/if}
     </div>
     <div class="wizard-main">
         <Form noStyle on:submit={submit}>

src/lib/stores/wizard.ts

@@ -3,23 +3,27 @@ import { writable } from 'svelte/store';
 
 export type WizardStore = {
     show: boolean;
+    media?: string;
     component?: typeof SvelteComponent;
     interceptor?: () => Promise<void>;
 };
 
 function createWizardStore() {
-    const { subscribe, update } = writable<WizardStore>({
+    const { subscribe, update, set } = writable<WizardStore>({
         show: false,
         component: null,
-        interceptor: null
+        interceptor: null,
+        media: null
     });
 
     return {
         subscribe,
-        start: (component: typeof SvelteComponent) =>
+        set,
+        start: (component: typeof SvelteComponent, media: string = null) =>
             update((n) => {
                 n.show = true;
                 n.component = component;
+                n.media = media;
 
                 return n;
             }),
@@ -34,6 +38,7 @@ function createWizardStore() {
             update((n) => {
                 n.show = false;
                 n.component = null;
+                n.media = null;
 
                 return n;
             })

src/routes/console/project-[project]/overview/onboard.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { Card, CardGrid } from '$lib/components';
     import { addPlatform, Platform } from './platforms/+page.svelte';
     import OnboardDarkIntro from './intro-dark.svg';
     import OnboardDark1 from './onboard-1-dark.svg';

src/routes/console/project-[project]/overview/platforms/wizard/android/step1.svelte

@@ -4,6 +4,12 @@
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
     const projectId = $page.params.project;
 

src/routes/console/project-[project]/overview/platforms/wizard/apple/step1.svelte

@@ -5,6 +5,12 @@
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
     enum Platform {
         iOS = 'apple-ios',

src/routes/console/project-[project]/overview/platforms/wizard/flutter/step1.svelte

@@ -6,6 +6,12 @@
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createPlatform } from '../store';
+    import { wizard } from '$lib/stores/wizard';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
+
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
 
     enum Platform {
         Android = 'flutter-android',

src/routes/console/project-[project]/overview/platforms/wizard/web/step1.svelte

@@ -5,11 +5,16 @@
     import { FormList, InputText } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
+    import { wizard } from '$lib/stores/wizard';
     import { createPlatform } from '../store';
+    import { app } from '$lib/stores/app';
+    import Light from './light.svg';
+    import Dark from './dark.svg';
 
     const projectId = $page.params.project;
     const suggestions = ['*.vercel.app', '*.netlify.app', '*.gitpod.app'];
 
+    $wizard.media = $app.themeInUse === 'dark' ? Dark : Light;
     async function beforeSubmit() {
         if ($createPlatform.$id) {
             await sdkForConsole.projects.updatePlatform(
@@ -32,7 +37,6 @@
             undefined,
             $createPlatform.hostname
         );
-
         $createPlatform.$id = platform.$id;
     }
 </script>