From ae2838fe0c22d64f67a13cbf74b5dd8eddd0e5eb Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Sun, 20 Aug 2023 17:09:28 +0200
Subject: [PATCH] feat: new create git design

---
 src/lib/components/numericListItem.svelte     |  6 ++-
 .../function-[function]/createGit.svelte      | 47 +++++++++++++++----
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/numericListItem.svelte b/src/lib/components/numericListItem.svelte
index 36978c439..74aec648d 100644
--- a/src/lib/components/numericListItem.svelte
+++ b/src/lib/components/numericListItem.svelte
@@ -1,3 +1,7 @@
+<script lang="ts">
+    export let fullWidth = false;
+</script>
+
 <li class="numeric-list-item">
-    <p class="text u-margin-block-start-8"><slot /></p>
+    <div class="u-margin-block-start-8" class:u-width-full-line={fullWidth}><slot /></div>
 </li>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte b/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
index ebf4b5d40..9a66958c3 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createGit.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Modal, NumericList, NumericListItem } from '$lib/components';
+    import { Box, Code, Modal, NumericList, NumericListItem } from '$lib/components';
     import { func } from './store';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
@@ -20,16 +20,45 @@
                 class="link">documentation</a
             >.
         </p>
-        <div class="box">
+        <Box>
             <NumericList>
-                <NumericListItem>Checkout your production branch.</NumericListItem>
-                <NumericListItem>Create a new commit</NumericListItem>
-                <NumericListItem>Push your new commit</NumericListItem>
-                <NumericListItem>A new deployment will be triggered automatically.</NumericListItem>
+                <NumericListItem fullWidth>
+                    <span class="text">Checkout your production branch.</span>
+                    <div class="u-margin-block-start-16">
+                        <Code
+                            language="sh"
+                            withCopy
+                            noMargin
+                            code={`git checkout ${$func.providerBranch}`} />
+                    </div>
+                </NumericListItem>
+                <NumericListItem>
+                    <span class="text"> Create a new commit </span>
+                    <div class="u-margin-block-start-16">
+                        <Code
+                            language="sh"
+                            withCopy
+                            noMargin
+                            code={`git commit -m "deploying with Appwrite"`} />
+                    </div>
+                </NumericListItem>
+                <NumericListItem>
+                    <span class="text"> Push your new commit </span>
+                    <div class="u-margin-block-start-16">
+                        <Code
+                            language="sh"
+                            withCopy
+                            noMargin
+                            code={`git push ${$func.providerBranch}`} />
+                    </div>
+                </NumericListItem>
+                <NumericListItem>
+                    <span class="text"> A new deployment will be triggered automatically. </span>
+                </NumericListItem>
             </NumericList>
-        </div>
+        </Box>
     {:else}
-        <div class="box">
+        <Box>
             <div class="u-flex u-gap-16">
                 <span class=" icon-lightning-bolt" aria-hidden="true" />
                 <div class="alert-content" data-private>
@@ -48,7 +77,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </Box>
     {/if}
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Close</Button>