From 54480b2a35eb3e77b6038a3320653b48dd95d9c3 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 14 Oct 2022 14:31:31 +0200
Subject: [PATCH] fix: all platforms

---
 src/lib/components/code.svelte                | 28 ++++++++++++++-----
 src/lib/components/json.svelte                |  2 +-
 src/lib/layout/wizard.svelte                  |  4 +--
 .../overview/platforms/createAndroid.svelte   |  9 ++++--
 .../overview/platforms/createApple.svelte     |  9 ++++--
 .../overview/platforms/createFlutter.svelte   |  9 ++++--
 .../overview/platforms/createWeb.svelte       |  9 ++++--
 .../platforms/wizard/android/step2.svelte     |  5 ++--
 .../platforms/wizard/android/step3.svelte     | 14 ++++------
 .../platforms/wizard/apple/step2.svelte       |  4 +--
 .../platforms/wizard/apple/step3.svelte       | 14 ++++------
 .../platforms/wizard/flutter/step2.svelte     |  4 +--
 .../platforms/wizard/flutter/step3.svelte     | 14 ++++------
 .../overview/platforms/wizard/step4.svelte    |  4 +--
 .../platforms/wizard/web/step2.svelte         |  7 +++--
 .../platforms/wizard/web/step3.svelte         | 14 ++++------
 16 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 2f6c3b0f9..f3f4cf5de 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -14,10 +14,11 @@
     import { Copy } from '.';
 
     export let label: string = null;
+    export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
     export let code: string;
     export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
-    export let showLineNumbers = false;
-    export let showCopy = false;
+    export let withLineNumbers = false;
+    export let withCopy = false;
 
     afterUpdate(async () => {
         Prism.highlightAll();
@@ -28,9 +29,14 @@
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
-            <Pill>{label}</Pill>
+            <Pill>
+                {#if labelIcon}
+                    <span class={`icon-${labelIcon}`} aria-hidden="true" />
+                {/if}
+                {label}
+            </Pill>
         {/if}
-        {#if showCopy}
+        {#if withCopy}
             <Copy value={code}>
                 <button class="button is-small is-text is-only-icon" aria-label="copy code">
                     <span class="icon-duplicate" aria-hidden="true" />
@@ -39,15 +45,23 @@
         {/if}
     </div>
 
-    <pre class={`language-${language}`} class:line-numbers={showLineNumbers}><code
+    <pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
             >{code}</code></pre>
 </section>
 
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
 
-    .controls {
-        z-index: 2;
+    .box {
+        --p-box-background-color: var(--color-neutral-300) !important;
+
+        body.theme-light & {
+            --p-box-background-color: var(--color-neutral-5) !important;
+        }
+
+        .controls {
+            z-index: 2;
+        }
     }
 
     code,
diff --git a/src/lib/components/json.svelte b/src/lib/components/json.svelte
index 47d8326f5..4286cdb6e 100644
--- a/src/lib/components/json.svelte
+++ b/src/lib/components/json.svelte
@@ -4,4 +4,4 @@
     export let code: string;
 </script>
 
-<Code showLineNumbers showCopy language="json" {code} />
+<Code withLineNumbers withCopy language="json" {code} />
diff --git a/src/lib/layout/wizard.svelte b/src/lib/layout/wizard.svelte
index 53be0048a..ee46327de 100644
--- a/src/lib/layout/wizard.svelte
+++ b/src/lib/layout/wizard.svelte
@@ -113,8 +113,8 @@
             {/each}
             <div class="form-footer">
                 <div class="u-flex u-main-end u-gap-12">
-                    {#if sortedSteps[currentStep - 1][1].optional}
-                        <Button text on:click={() => (isLastStep = true)} submit
+                    {#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
+                        <Button text on:click={() => dispatch('finish')}
                             >Skip optional steps</Button>
                     {/if}
                     {#if currentStep === 1}
diff --git a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
index de371face..a2eed23ec 100644
--- a/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createApple.svelte b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
index 67f98323d..d1157ef05 100644
--- a/src/routes/console/project-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createApple.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
index cc4c624f1..889f1c4e5 100644
--- a/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
index ed06d3b47..cff74706f 100644
--- a/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/createWeb.svelte
@@ -29,15 +29,18 @@
     });
     stepsComponents.set(2, {
         label: 'Get the SDK',
-        component: Step2
+        component: Step2,
+        optional: true
     });
     stepsComponents.set(3, {
         label: "Let's get coding",
-        component: Step3
+        component: Step3,
+        optional: true
     });
     stepsComponents.set(4, {
         label: 'All set',
-        component: Step4
+        component: Step4,
+        optional: true
     });
 </script>
 
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
index c2e075d22..f246663aa 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
@@ -11,11 +11,12 @@
 <WizardStep>
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
     <p>First, add this to your root level build.gradle file:</p>
-    <Code label="Groovy" language="kotlin" code={example1} showCopy />
+    <Code label="Groovy" language="kotlin" code={example1} withCopy />
     <p class="common-section">And add this to your project's build.gradle file:</p>
     <Code
         label="Groovy"
+        labelIcon="android"
         language="kotlin"
         code={`implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`}
-        showCopy />
+        withCopy />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
index a7b5bbf3e..e13329c53 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
@@ -14,12 +14,10 @@ appwrite
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
index 2a41b6d77..2be3f3c62 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
@@ -70,9 +70,9 @@
             </ol>
         {:else if method === Method.Swift}
             <p>Add this to your Package.swift file:</p>
-            <Code showCopy showLineNumbers label="Swift" language="swift" code={example1} />
+            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
             <p class="common-section">Then add the dependency to your target:</p>
-            <Code showCopy showLineNumbers label="Swift" language="swift" code={example2} />
+            <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
         {/if}
     </div>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
index 1fd933866..fe5be13fc 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
@@ -15,14 +15,12 @@ let client = Client()
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Apple SDK" language="swift" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
     <p>
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
index 0a22eef07..b0b075502 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
@@ -11,9 +11,9 @@
     <svelte:fragment slot="title">Get the SDK</svelte:fragment>
 
     <p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
-    <Code label="YAML" language="yml" code={example1} showCopy />
+    <Code label="YAML" language="yml" code={example1} withCopy />
     <p class="common-section">
         You can also install the SDK using the Dart package manager from your terminal:
     </p>
-    <Code label="Web SDK" language="js" code={`import { Appwrite } from 'appwrite';`} showCopy />
+    <Code label="Bash" language="sh" code={`pub get appwrite`} withCopy />
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
index afebcaa6c..6f46f657d 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
@@ -16,15 +16,13 @@ client
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
     <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
+    <p class="common-section">
         Before sending any API calls to your new Appwrite project, make sure your device or emulator
         has network access to your Appwrite project's hostname or IP address.
     </p>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
index 3b74bbf9d..c6cbb6d17 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
@@ -4,9 +4,9 @@
 
 <WizardStep>
     <svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
-    <svelte:fragment slot="subtitle">
+    <p>
         Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
         give it a go? Why not add a database to your project, or start uploading files? The choice
         is up to you.
-    </svelte:fragment>
+    </p>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
index 68f73c970..d94f989ca 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
@@ -31,7 +31,7 @@
             Use <a href="https://npmjs.org" target="_blank" class="link"
                 >NPM (node package manager)</a> from your command line to add Appwrite SDK to your project.
         </p>
-        <Code label="Bash" language="sh" code="npm install appwrite" showCopy />
+        <Code label="Bash" language="sh" code="npm install appwrite" withCopy />
         <p class="common-section">
             When you're using a bundler (like <a
                 href="https://vitejs.dev"
@@ -42,9 +42,10 @@
         </p>
         <Code
             label="Web SDK"
+            labelIcon="code"
             language="js"
             code={`import { Appwrite } from 'appwrite';`}
-            showCopy />
+            withCopy />
     {:else if method === Method.CDN}
         <p>
             To install with a CDN (content delivery network) add the following scripts to the bottom
@@ -54,6 +55,6 @@
             label="HTML"
             language="html"
             code={`<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script>`}
-            showCopy />
+            withCopy />
     {/if}
 </WizardStep>
diff --git a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
index a7b5bbf3e..e13329c53 100644
--- a/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
+++ b/src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
@@ -14,12 +14,10 @@ appwrite
 <WizardStep>
     <svelte:fragment slot="title">Let's get coding</svelte:fragment>
 
-    <div class="common-section">
-        <h2 class="heading-level-7">Init your SDK</h2>
-        <p>
-            Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
-            which can be found in your project settings page.
-        </p>
-        <Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
-    </div>
+    <h2 class="heading-level-7">Init your SDK</h2>
+    <p>
+        Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
+        can be found in your project settings page.
+    </p>
+    <Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
 </WizardStep>