From 26707ab9e3866ea4e32a4a9ed2e265f603e091fb Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Mon, 23 Mar 2026 17:02:57 +0530
Subject: [PATCH] design changes

---
 .../user-[user]/updateImpersonation.svelte    | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateImpersonation.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateImpersonation.svelte
index 31c327ed3..73f481f17 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateImpersonation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/updateImpersonation.svelte
@@ -4,9 +4,10 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
+    import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
-    import { Alert, Layout, Link, Selector } from '@appwrite.io/pink-svelte';
+    import { Alert, Layout, Link, Selector, Typography } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
     import { user } from './store';
 
@@ -61,30 +62,40 @@
     }
 </script>
 
-<CardGrid hideFooter>
-    <svelte:fragment slot="title">User impersonation</svelte:fragment>
-    Control whether this user can impersonate other users through your app using the Appwrite Client SDK&apos;s
-    impersonation support.
-    <Link.Anchor
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://appwrite.io/docs/products/auth">
-        Documentation
-    </Link.Anchor>
-    <svelte:fragment slot="aside">
-        <Layout.Stack gap="m">
-            <Selector.Switch
-                id="user-impersonation"
-                bind:checked={impersonation}
-                label="Impersonation capability"
-                description={`This user ${impersonation ? 'can' : 'cannot'} impersonate others`}
-                on:change={updateImpersonation} />
+<Form onSubmit={updateImpersonation}>
+    <CardGrid>
+        <svelte:fragment slot="title">User impersonation</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <Layout.Stack gap="m">
+                <Selector.Switch
+                    id="user-impersonation"
+                    bind:checked={impersonation}
+                    label="User impersonation">
+                    <svelte:fragment slot="description">
+                        <div class="u-margin-block-start-8">
+                            <Typography.Text variant="m-400">
+                                Enabling this option allows this user to impersonate other users
+                                through your app using the Appwrite Client SDK.
+                                <Link.Anchor
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    href="https://appwrite.io/docs/products/auth">
+                                    Learn more.
+                                </Link.Anchor>
+                            </Typography.Text>
+                        </div>
+                    </svelte:fragment>
+                </Selector.Switch>
 
-            <Alert.Inline status="info" title="Note">
-                Grant this only for trusted operator or support-style accounts. Audit logs still
-                attribute actions to the account that started impersonation, not only the
-                impersonated user.
-            </Alert.Inline>
-        </Layout.Stack>
-    </svelte:fragment>
-</CardGrid>
+                <Alert.Inline status="info">
+                    Only grant this permission to trusted operator or support accounts. Actions are
+                    logged under the account that initiated impersonation.
+                </Alert.Inline>
+            </Layout.Stack>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={impersonation === currentImpersonation} submit>Update</Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>