Merge pull request #2406 from appwrite/hmacr/ser-213

Author: ItzNotABug

src/routes/(authenticated)/git/+layout.svelte

@@ -1,10 +1,51 @@
 <script>
-    import { Container } from '$lib/layout';
+    import { base } from '$app/paths';
     import { loading } from '$routes/store';
+    import { app } from '$lib/stores/app';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     loading.set(false);
 </script>
 
-<Container>
-    <slot />
-</Container>
+<Layout.Stack
+    height="100vh"
+    direction="column"
+    alignItems="center"
+    justifyContent="center"
+    style="background: var(--bgcolor-neutral-primary, #fff);">
+    <section class="console-container">
+        <slot />
+    </section>
+    <footer>
+        <Typography.Eyebrow color="--fgcolor-neutral-secondary">POWERED BY</Typography.Eyebrow>
+        {#if $app.themeInUse === 'dark'}
+            <img
+                src="{base}/images/appwrite-logo-dark.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {:else}
+            <img
+                src="{base}/images/appwrite-logo-light.svg"
+                width="120"
+                height="22"
+                alt="Appwrite Logo" />
+        {/if}
+    </footer>
+</Layout.Stack>
+
+<style lang="scss">
+    section {
+        flex: 1;
+        display: flex;
+        align-items: center;
+    }
+    footer {
+        padding: 2rem 1rem;
+        display: flex;
+        gap: 0.5rem;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+</style>

src/routes/(authenticated)/git/authorize-contributor/+page.svelte

@@ -1,30 +1,21 @@
 <script lang="ts">
-    import { app } from '$lib/stores/app';
-    import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
-    import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import { Vcs, Client } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { getApiEndpoint } from '$lib/stores/sdk';
+    import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
 
-    export let data;
+    const { data } = $props();
 
     const endpoint = getApiEndpoint();
     const client = new Client();
     const vcs = new Vcs(client);
 
-    let installationId: string;
-    let repositoryId: string;
-    let providerPullRequestId: string;
-
-    let error = '';
-    let success = '';
-    let loading = false;
+    let error = $state('');
+    let success = $state('');
+    let loading = $state(false);
 
     onMount(async () => {
-        repositoryId = data.repositoryId;
-        installationId = data.installationId;
-        providerPullRequestId = data.providerPullRequestId;
-
         client.setEndpoint(endpoint).setProject(data.projectId).setMode('admin');
     });
 
@@ -39,9 +30,9 @@
 
         try {
             await vcs.updateExternalDeployments({
-                installationId,
-                repositoryId,
-                providerPullRequestId
+                installationId: data.installationId,
+                repositoryId: data.repositoryId,
+                providerPullRequestId: data.providerPullRequestId
             });
             success = 'Deployment approved successfully! Build will start soon.';
         } catch (e) {
@@ -52,49 +43,15 @@
     }
 </script>
 
-<section class="container" style="display: grid; place-items: center; min-height: 100vh;">
-    <div class="u-flex u-flex-vertical u-cross-center" style="width: 100%">
-        <div class="card" style="min-width: 600px; max-width: 100%;">
-            <h1 class="heading-level-2">Authorize External Deployment</h1>
-            <small style="margin-block-start: 8px;display: block;"
-                >The deployment for pull request <code class="inline-code"
-                    >#{providerPullRequestId}</code> is awaiting approval. When authorized, deployments
-                will be started.
-            </small>
-
-            <div class="with-borders" style="margin-block-start: 1rem;display: block;">
-                <button disabled={loading} on:click={approveDeployment} class="button" type="button"
-                    >Approve Deployment</button>
-            </div>
-
-            {#if error}
-                <p style="margin-block-start: 1rem" class="u-color-text-danger">{error}</p>
-            {/if}
-
-            {#if success}
-                <p style="margin-block-start: 1rem" class="u-color-text-success">{success}</p>
-            {/if}
-        </div>
-        <div class="u-gap-4 u-flex u-main-center u-cross-center" style="margin-block-start: 2rem;">
-            <span class="text">Powered by</span>
-            <a
-                href="https://appwrite.io/"
-                target="_blank"
-                style="display: grid;place-items: center;">
-                {#if $app.themeInUse === 'dark'}
-                    <img
-                        src={AppwriteLogoDark}
-                        width="120"
-                        class="u-block u-only-dark"
-                        alt="Appwrite Logo" />
-                {:else}
-                    <img
-                        src={AppwriteLogoLight}
-                        width="120"
-                        class="u-block u-only-light"
-                        alt="Appwrite Logo" />
-                {/if}
-            </a>
-        </div>
-    </div>
-</section>
+<Layout.Stack gap="l" alignItems="center" style="max-width: 500px;">
+    {#if success}
+        <Badge type="success" variant="secondary" content={success} />
+    {:else if error}
+        <Badge type="error" variant="secondary" content={error} />
+    {/if}
+    <Typography.Title size="l" align="center">
+        The deployment for pull request #{data.providerPullRequestId}
+        is awaiting approval. When authorized, deployments will be started.
+    </Typography.Title>
+    <Button on:click={approveDeployment} secondary>Approve Deployment</Button>
+</Layout.Stack>