Redesign authorize contributor page

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

@@ -1,10 +1,62 @@
 <script>
-    import { Container } from '$lib/layout';
+    import { base } from '$app/paths';
     import { loading } from '$routes/store';
+    import { app } from '$lib/stores/app';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     loading.set(false);
 </script>
 
-<Container>
-    <slot />
-</Container>
+<div class="auth-bg">
+    <section>
+        <div class="console-container">
+            <slot />
+        </div>
+    </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>
+</div>
+
+<style lang="scss">
+    .auth-bg {
+        position: fixed;
+        background: var(--bgcolor-neutral-primary, #fff);
+        background-size: cover;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        justify-content: space-between;
+        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,10 +1,9 @@
 <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;
 
@@ -52,49 +51,18 @@
     }
 </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 class="container" style="display: grid; place-items: center;">
+    <Layout.Stack gap="l" alignItems="center" style="max-width: 500px;">
+        {#if error}
+            <Badge type="error" variant="secondary" content={error} />
+        {/if}
+        {#if success}
+            <Badge type="success" variant="secondary" content={success} />
+        {/if}
+        <Typography.Title size="l" align="center">
+            The deployment for pull request #{providerPullRequestId} 
+            is awaiting approval. When authorized, deployments will be started.
+        </Typography.Title>
+        <Button on:click={approveDeployment} secondary>Approve Deployment</Button>
+    </Layout.Stack>
 </section>