fix: QA smtp templates

package.json

@@ -20,7 +20,8 @@
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
         "@appwrite.io/console": "npm:christy-console@^0.4.0",
-        "@appwrite.io/pink": "^0.0.6-rc.14",
+        "@appwrite.io/pink": "0.1.0-next.3",
+        "@appwrite.io/pink-icons": "^0.1.0-next.3",
         "@analytics/google-tag-manager": "^0.5.3",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",

src/routes/console/project-[project]/auth/security/updatePersonalDataCheck.svelte

@@ -35,7 +35,7 @@
 
 <Form onSubmit={updatePersonalDataCheck}>
     <CardGrid>
-        <Heading tag="h2" size="7">Personal Data</Heading>
+        <Heading tag="h2" size="7">Personal data</Heading>
         <svelte:fragment slot="aside">
             <FormList>
                 <InputSwitch
@@ -44,7 +44,7 @@
                     label="Disallow Personal Data" />
             </FormList>
             <p class="text">
-                Do now allow passwords that contain any part of the user's personal data. This
+                Do not allow passwords that contain any part of the user's personal data. This
                 includes the user's <code>name</code>, <code>email</code>, or <code>phone</code>.
             </p>
         </svelte:fragment>

src/routes/console/project-[project]/settings/+page.svelte

@@ -181,17 +181,17 @@
                 services are not accessible to client SDKs but remain accessible to server SDKs.
             </p>
             <svelte:fragment slot="aside">
-                <ul class="buttons-list u-main-end">
-                    <li class="buttons-list-item">
-                        <Button text={true} on:click={() => toggleAllServices(true)}
-                            >Enable all</Button>
-                    </li>
-                    <li class="buttons-list-item">
-                        <Button text={true} on:click={() => toggleAllServices(false)}
-                            >Disable all</Button>
-                    </li>
-                </ul>
-                <FormList>
+                <div>
+                    <ul class="buttons-list u-main-end">
+                        <li class="buttons-list-item">
+                            <Button text={true} on:click={() => toggleAllServices(true)}
+                                >Enable all</Button>
+                        </li>
+                        <li class="buttons-list-item">
+                            <Button text={true} on:click={() => toggleAllServices(false)}
+                                >Disable all</Button>
+                        </li>
+                    </ul>
                     <form class="form card-separator">
                         <ul class="form-list is-multiple">
                             {#each $services.list as service}
@@ -205,7 +205,7 @@
                             {/each}
                         </ul>
                     </form>
-                </FormList>
+                </div>
             </svelte:fragment>
         </CardGrid>
         <CardGrid>

src/routes/console/project-[project]/settings/smtp/+page.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
     import { CardGrid, Heading } from '$lib/components';
-    import { Button, Form, FormList, InputText, InputChoice } from '$lib/elements/forms';
+    import {
+        Button,
+        Form,
+        FormList,
+        InputText,
+        InputChoice,
+        InputEmail
+    } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { project } from '../../store';
     import { onMount } from 'svelte/internal';
@@ -100,7 +107,7 @@
                     </InputChoice>
 
                     {#if enabled}
-                        <InputText
+                        <InputEmail
                             id="senderEmail"
                             label="Sender email"
                             bind:value={sender}