From 93a9c2042594736e2fd6d36ba0746f5fe11f583e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 13 Oct 2022 14:16:52 +0200
Subject: [PATCH] fix: numbered list and code examples

---
 package-lock.json                             | 28 +++++++++----------
 package.json                                  |  4 +--
 src/lib/components/code.svelte                | 27 ++++++------------
 .../platforms/wizard/apple/step2.svelte       | 26 +++++++++--------
 4 files changed, 39 insertions(+), 46 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0e9b8d8d5..41a4a2977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
             "version": "0.0.1",
             "dependencies": {
                 "@aw-labs/appwrite-console": "^6.0.0",
-                "@aw-labs/icons": "0.0.0-61",
-                "@aw-labs/ui": "0.0.0-61",
+                "@aw-labs/icons": "0.0.0-62",
+                "@aw-labs/ui": "0.0.0-62",
                 "echarts": "^5.4.0",
                 "prismjs": "^1.29.0",
                 "tippy.js": "^6.3.7",
@@ -79,14 +79,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
-            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-62.tgz",
+            "integrity": "sha512-fehLk+DDor3IlIKaAx2UypUggO/0b3Btsq/HC6f5FfkMbjbjwKvKvYXG4c4C3KoDW6kESttccQZqEnm2krVn+A=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
-            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-62.tgz",
+            "integrity": "sha512-gU59XQNDeeXOqDPGxkQxDJIq70sCUxTafnDcDJlMFiAnz7yGLTgB2dO/6dv0KlNJ7u+9XC7UtsHWs0vFtVkICw==",
             "dependencies": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
@@ -7788,14 +7788,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-61.tgz",
-            "integrity": "sha512-kZdiDF+ywVvcoC8R+lZNnxwuxNeCmMNwyoqoFL+VANNeRL6pfABYDUwTRG4cZmY4n/oswe5FeILjl/HlSSf5/w=="
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-62.tgz",
+            "integrity": "sha512-fehLk+DDor3IlIKaAx2UypUggO/0b3Btsq/HC6f5FfkMbjbjwKvKvYXG4c4C3KoDW6kESttccQZqEnm2krVn+A=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-61",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-61.tgz",
-            "integrity": "sha512-v0+4CWP7x7cNo0sqZlZOeqp3RK45fS+LMg/lVEpyByaluMqXDIPe7p522vp0hgsN2YKtpilbxg0vlqLCIvEa8w==",
+            "version": "0.0.0-62",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-62.tgz",
+            "integrity": "sha512-gU59XQNDeeXOqDPGxkQxDJIq70sCUxTafnDcDJlMFiAnz7yGLTgB2dO/6dv0KlNJ7u+9XC7UtsHWs0vFtVkICw==",
             "requires": {
                 "@aw-labs/icons": "*",
                 "normalize.css": "^8.0.1",
diff --git a/package.json b/package.json
index 5d2bde148..0c6478d22 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@aw-labs/appwrite-console": "^6.0.0",
-        "@aw-labs/icons": "0.0.0-61",
-        "@aw-labs/ui": "0.0.0-61",
+        "@aw-labs/icons": "0.0.0-62",
+        "@aw-labs/ui": "0.0.0-62",
         "echarts": "^5.4.0",
         "prismjs": "^1.29.0",
         "tippy.js": "^6.3.7",
diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index e0c0be09c..24d6c99e9 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -24,35 +24,27 @@
     });
 </script>
 
-<div class="code">
-    <div class="controls">
+<section class="box u-overflow-hidden u-min-height-100">
+    <div class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
             <Pill>{label}</Pill>
         {/if}
         {#if showCopy}
             <Copy value={code}>
-                <span class="icon-duplicate" aria-hidden="true" style="cursor: pointer;" />
+                <button class="button is-small is-text is-only-icon" aria-label="copy code">
+                    <span class="icon-duplicate" aria-hidden="true" />
+                </button>
             </Copy>
         {/if}
     </div>
+
     <pre class={`language-${language}`} class:line-numbers={showLineNumbers}><code
             >{code}</code></pre>
-</div>
+</section>
 
 <style lang="scss" global>
     @import 'prismjs/themes/prism.css';
 
-    div.code {
-        position: relative;
-
-        div.controls {
-            position: absolute;
-            right: 0.5rem;
-            top: 0.5rem;
-            z-index: 1;
-        }
-    }
-
     code,
     pre {
         &[class*='language-'] {
@@ -80,10 +72,7 @@
 
     :not(pre) > code[class*='language-'],
     pre[class*='language-'] {
-        background: #1b1b28;
-        body.theme-light & {
-            background: #fcfcff;
-        }
+        background: hsl(var(--p-box-background-color));
     }
     .token {
         &.comment,
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 0b206e879..3fb7f0fd2 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
@@ -40,25 +40,29 @@
     </div>
     <div class="common-section">
         {#if method === Method.Xcode}
-            <ol class="list ">
-                <li class="list-item">
-                    <span class="text">Select File > Swift Packages > Add Package Dependency</span>
-                </li>
-                <li class="list-item">
+            <ol class="numeric-list">
+                <li class="numeric-list-item">
                     <span class="text">
-                        Search for the Appwrite SDK with the URL
-                        https://github.com/appwrite/sdk-for-apple
+                        Select File > Swift Packages > Add Package Dependency
                     </span>
                 </li>
-                <li class="list-item">
-                    <span class="text">Add version rules</span>
+                <li class="numeric-list-item">
+                    <span class="text">
+                        Search for the Appwrite SDK with the URL
+                        <a class="link" href="https://github.com/appwrite/sdk-for-apple">
+                            https://github.com/appwrite/sdk-for-apple
+                        </a>
+                    </span>
                 </li>
-                <li class="list-item">
+                <li class="numeric-list-item">
+                    <span class="text"> Add version rules </span>
+                </li>
+                <li class="numeric-list-item">
                     <span class="text">
                         Select next and wait for package resolution to complete
                     </span>
                 </li>
-                <li class="list-item">
+                <li class="numeric-list-item">
                     <span class="text">
                         Make sure `Appwrite` is selected to add to your target and select finish
                     </span>