From 448719cd51e3fe6758af0daffc1c2b84ceee7a5d Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 27 Feb 2023 10:57:12 +0000
Subject: [PATCH] refactor: wizard spacings

---
 .../platforms/wizard/android/step2.svelte     | 10 +++++++++-
 .../platforms/wizard/android/step3.svelte     | 17 +++++++++-------
 .../platforms/wizard/apple/step2.svelte       | 20 +++++++++++++++++--
 .../platforms/wizard/apple/step3.svelte       | 11 +++++++++-
 .../platforms/wizard/flutter/step2.svelte     |  5 ++++-
 .../platforms/wizard/web/step2.svelte         | 14 +++++++++++--
 .../platforms/wizard/web/step3.svelte         | 11 +++++++++-
 7 files changed, 73 insertions(+), 15 deletions(-)

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 37e9f22cf..d7af61922 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
@@ -22,5 +22,13 @@
             noMargin />
     </div>
     <p class="common-section">And add this to your project's build.gradle file:</p>
-    <Code label="Groovy" labelIcon="android" language="kotlin" code={example2} withCopy />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Groovy"
+            labelIcon="android"
+            language="kotlin"
+            code={example2}
+            withCopy
+            noMargin />
+    </div>
 </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 08a6581eb..81d857bb6 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
@@ -21,11 +21,14 @@ val client = Client(context)
         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="Android SDK"
-        labelIcon="android"
-        language="kotlin"
-        {code}
-        withCopy
-        withLineNumbers />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Android SDK"
+            labelIcon="android"
+            language="kotlin"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
 </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 888428881..31d99d5b8 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
@@ -71,9 +71,25 @@
             </ol>
         {:else if method === Method.Swift}
             <p>Add this to your Package.swift file:</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
+            <div class="u-margin-block-start-16">
+                <Code
+                    withCopy
+                    withLineNumbers
+                    label="Swift"
+                    language="swift"
+                    code={example1}
+                    noMargin />
+            </div>
             <p class="common-section">Then add the dependency to your target:</p>
-            <Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
+            <div class="u-margin-block-start-16">
+                <Code
+                    withCopy
+                    withLineNumbers
+                    label="Swift"
+                    language="swift"
+                    code={example2}
+                    noMargin />
+            </div>
         {/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 ca35a8faa..5adcc84eb 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
@@ -20,7 +20,16 @@ let client = Client()
         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 />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Apple SDK"
+            labelIcon="apple"
+            language="swift"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
     <p class="u-margin-block-start-24">
         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 fa2fb7330..b49863fbf 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
@@ -15,8 +15,11 @@
     <div class="u-margin-block-start-16">
         <Code label="YAML" language="yml" code={example1} withCopy noMargin />
     </div>
+
     <p class="common-section">
         You can also install the SDK using the Dart package manager from your terminal:
     </p>
-    <Code label="Bash" language="sh" code={example2} withCopy />
+    <div class="u-margin-block-start-16">
+        <Code label="Bash" language="sh" code={example2} withCopy noMargin />
+    </div>
 </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 aeab08e59..fa0e14493 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
@@ -58,13 +58,23 @@
                     class="link">Rollup</a
                 >), import the Appwrite module when you need it:
             </p>
-            <Code label="Web SDK" labelIcon="code" language="js" code={example1} withCopy />
+            <div class="u-margin-block-start-16">
+                <Code
+                    label="Web SDK"
+                    labelIcon="code"
+                    language="js"
+                    code={example1}
+                    withCopy
+                    noMargin />
+            </div>
         {:else if method === Method.CDN}
             <p>
                 To install with a CDN (content delivery network) add the following scripts to the
                 bottom of your tag, but before you use any Appwrite services:
             </p>
-            <Code label="HTML" language="html" code={example2} withCopy />
+            <div class="u-margin-block-start-16">
+                <Code label="HTML" language="html" code={example2} withCopy noMargin />
+            </div>
         {/if}
     </div>
 </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 c9685da2e..2f2a22296 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
@@ -19,5 +19,14 @@ client
         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 />
+    <div class="u-margin-block-start-16">
+        <Code
+            label="Web SDK"
+            labelIcon="code"
+            language="js"
+            {code}
+            withCopy
+            withLineNumbers
+            noMargin />
+    </div>
 </WizardStep>