From ceb820f7b2860384dc9dac79074164f1d044c37c Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Wed, 19 Feb 2025 12:57:57 +0100
Subject: [PATCH] design review more design fixes for deployments

---
 src/lib/components/confirm.svelte                      | 10 ++++++----
 .../sites/(components)/deploymentSource.svelte         |  2 +-
 .../project-[project]/sites/redeployModal.svelte       |  9 ++++-----
 .../sites/site-[site]/deployments/table.svelte         |  4 ++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/confirm.svelte b/src/lib/components/confirm.svelte
index c0e552bf1..6faebac89 100644
--- a/src/lib/components/confirm.svelte
+++ b/src/lib/components/confirm.svelte
@@ -28,10 +28,12 @@
         <slot />
         <svelte:fragment slot="footer">
             <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
-                <Button text on:click={() => (open = false)}>Cancel</Button>
-                {#if canDelete}
-                    <Button danger submit {disabled}>{action}</Button>
-                {/if}
+                <slot name="footer">
+                    <Button text on:click={() => (open = false)}>Cancel</Button>
+                    {#if canDelete}
+                        <Button danger submit {disabled}>{action}</Button>
+                    {/if}
+                </slot>
             </Layout.Stack>
         </svelte:fragment>
     </Dialog>
diff --git a/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte b/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte
index 2cd0bca2c..ff94b5d96 100644
--- a/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte
+++ b/src/routes/(console)/project-[project]/sites/(components)/deploymentSource.svelte
@@ -22,7 +22,7 @@
                     e.preventDefault();
                     toggle(e);
                 }}>
-                <Layout.Stack direction="row" gap="xs">
+                <Layout.Stack direction="row" gap="xs" alignItems="center">
                     <Icon icon={IconGithub} size="s" /> GitHub
                 </Layout.Stack>
             </Link>
diff --git a/src/routes/(console)/project-[project]/sites/redeployModal.svelte b/src/routes/(console)/project-[project]/sites/redeployModal.svelte
index 3edeb31e6..ab470db07 100644
--- a/src/routes/(console)/project-[project]/sites/redeployModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/redeployModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Modal } from '$lib/components';
+    import { Confirm, Modal } from '$lib/components';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -32,14 +32,13 @@
     }
 </script>
 
-<Modal title="Redeploy site" bind:show bind:error onSubmit={redeploy}>
+<Confirm title="Redeploy site" bind:open={show} bind:error onSubmit={redeploy}>
     <p class="text">
-        Are you sure you want to redeploy <b>{site.name}</b>? Redeploying may affect your production
-        code.
+        Are you sure you want to redeploy <b>{site.name}</b>? It may affect your production code.
     </p>
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (show = false)}>Cancel</Button>
         <Button submit>Redeploy</Button>
     </svelte:fragment>
-</Modal>
+</Confirm>
diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
index fad7728e1..4fc263b15 100644
--- a/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
+++ b/src/routes/(console)/project-[project]/sites/site-[site]/deployments/table.svelte
@@ -2,7 +2,7 @@
     import { Id, Trim } from '$lib/components';
     import type { PageData } from './$types';
     import { type Models } from '@appwrite.io/console';
-    import { calculateTime } from '$lib/helpers/timeConversion';
+    import { formatTimeDetailed } from '$lib/helpers/timeConversion';
     import DeploymentSource from '../../(components)/deploymentSource.svelte';
     import DeploymentCreatedBy from '../../(components)/deploymentCreatedBy.svelte';
     import { timer } from '$lib/actions/timer';
@@ -91,7 +91,7 @@
                             {#if ['processing', 'building'].includes(deployment.status)}
                                 <span use:timer={{ start: deployment.$createdAt }} />
                             {:else}
-                                {calculateTime(deployment.buildTime)}
+                                {formatTimeDetailed(deployment.buildTime)}
                             {/if}
                         </Table.Cell>
                     {:else if column.id === 'size'}