From 116afa8a7b5282db421fab16bdb0f48c89d1b10e Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 30 Jun 2022 10:52:15 +0200
Subject: [PATCH] fix: replace card with cardGrid component
 #discussion_r909418818

---
 .../[project]/users/authentication.svelte     | 76 +++++++++----------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/routes/console/[project]/users/authentication.svelte b/src/routes/console/[project]/users/authentication.svelte
index aae4b4b8b..e4c2350ef 100644
--- a/src/routes/console/[project]/users/authentication.svelte
+++ b/src/routes/console/[project]/users/authentication.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';
@@ -34,54 +34,50 @@
 </script>
 
 <Container>
-    <Card>
-        <div class="common-section grid-1-2">
-            <div class="grid-1-2-col-1">
-                <h2 class="heading-level-7">Auth Methods</h2>
-                <p>Enable the auth methods you wish to use.</p>
-            </div>
-            <div class="grid-1-2-col-2">
-                <form class="form">
-                    <ul class="form-list is-multiple">
-                        {#each $authMethods.list as box}
-                            <li class="form-item ">
-                                <label class="choice-item" for={box.method}>
-                                    <input
-                                        label={box.label}
-                                        id={box.method}
-                                        type="checkbox"
-                                        class="switch"
-                                        role="switch"
-                                        bind:checked={box.value}
-                                        on:change={() => {
-                                            authUpdate(box.method, box.value);
-                                        }} />
-                                    <div class="choice-item-content">
-                                        <div class="choice-item-title">{box.label}</div>
-                                    </div>
-                                </label>
-                            </li>
-                        {/each}
+    <CardGrid>
+        <h2 class="heading-level-7">Auth Methods</h2>
+        <p>Enable the auth methods you wish to use.</p>
+        <svelte:fragment slot="aside">
+            <form class="form">
+                <ul class="form-list is-multiple">
+                    {#each $authMethods.list as box}
                         <li class="form-item ">
-                            <label class="choice-item" for="phone">
+                            <label class="choice-item" for={box.method}>
                                 <input
-                                    label="Phone"
-                                    id="phone"
+                                    label={box.label}
+                                    id={box.method}
                                     type="checkbox"
                                     class="switch"
                                     role="switch"
-                                    disabled />
+                                    bind:checked={box.value}
+                                    on:change={() => {
+                                        authUpdate(box.method, box.value);
+                                    }} />
                                 <div class="choice-item-content">
-                                    <div class="choice-item-title">Phone</div>
-                                    <span class="choice-item-paragraph">(soon)</span>
+                                    <div class="choice-item-title">{box.label}</div>
                                 </div>
                             </label>
                         </li>
-                    </ul>
-                </form>
-            </div>
-        </div>
-    </Card>
+                    {/each}
+                    <li class="form-item ">
+                        <label class="choice-item" for="phone">
+                            <input
+                                label="Phone"
+                                id="phone"
+                                type="checkbox"
+                                class="switch"
+                                role="switch"
+                                disabled />
+                            <div class="choice-item-content">
+                                <div class="choice-item-title">Phone</div>
+                                <span class="choice-item-paragraph">(soon)</span>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </form>
+        </svelte:fragment>
+    </CardGrid>
     <section class="common-section">
         <h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
         <ul class="grid-box common-section">