From e3381e13577a02db78dc209c672437c3f0d5dade Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 22 Apr 2022 10:33:26 +0200
Subject: [PATCH] created infoSection component added it to modals

---
 src/lib/components/index.ts                    |  1 +
 src/lib/components/infoSection.svelte          |  4 ++++
 .../[project]/users/_setUserLimit.svelte       | 18 +++++++++---------
 .../[project]/users/_toggleOAuth.svelte        | 13 +++++++------
 4 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/components/infoSection.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 1cf2a6938..aac6c90a5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -17,3 +17,4 @@ export { default as Avatar } from './avatar.svelte';
 export { default as SwitchBox } from './switchBox.svelte';
 export { default as SwitchBoxes } from './switchBoxes.svelte';
 export { default as ElementCount } from './elementCount.svelte';
+export { default as InfoSection } from './infoSection.svelte';
diff --git a/src/lib/components/infoSection.svelte b/src/lib/components/infoSection.svelte
new file mode 100644
index 000000000..8ea26d98e
--- /dev/null
+++ b/src/lib/components/infoSection.svelte
@@ -0,0 +1,4 @@
+<div>
+    <i class="icon-info-circled" />
+    <slot />
+</div>
diff --git a/src/routes/console/[project]/users/_setUserLimit.svelte b/src/routes/console/[project]/users/_setUserLimit.svelte
index ae0f613b8..6ae676868 100644
--- a/src/routes/console/[project]/users/_setUserLimit.svelte
+++ b/src/routes/console/[project]/users/_setUserLimit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
+    import { Modal, InfoSection } from '$lib/components';
     import { Button, InputNumber, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -33,14 +33,14 @@
     <Modal bind:show={showUserLimitModal}>
         <svelte:fragment slot="header">Max Allowed Users</svelte:fragment>
         <InputNumber id="userLimit" label="User Limit" autofocus={true} bind:value={userLimit} />
-        <!-- TODO: create infoCardSection component -->
-        <i class="icon-info-circled" />
-        <p>
-            This limit will prevent new users from signing up for your project, no matter what auth
-            method has been used. You will still be able to create users and team memberships from
-            your Appwrite console. For an unlimited amount of users, set the limit to 0. Max limit
-            is 10,000.
-        </p>
+        <InfoSection>
+            <p>
+                This limit will prevent new users from signing up for your project, no matter what
+                auth method has been used. You will still be able to create users and team
+                memberships from your Appwrite console. For an unlimited amount of users, set the
+                limit to 0. Max limit is 10,000.
+            </p>
+        </InfoSection>
         <svelte:fragment slot="footer">
             <Button submit>Update</Button>
             <Button secondary on:click={() => (showUserLimitModal = false)}>Cancel</Button>
diff --git a/src/routes/console/[project]/users/_toggleOAuth.svelte b/src/routes/console/[project]/users/_toggleOAuth.svelte
index 60a4d509a..6636d598b 100644
--- a/src/routes/console/[project]/users/_toggleOAuth.svelte
+++ b/src/routes/console/[project]/users/_toggleOAuth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Modal, Copy } from '$lib/components';
+    import { Modal, Copy, InfoSection } from '$lib/components';
     import { Button, InputPassword, InputText, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
@@ -42,11 +42,12 @@
             autocomplete={false}
             bind:value={appId} />
         <InputPassword id="secret" label="App Secret" meter={false} bind:value={secret} />
-        <i class="icon-info-circled" />
-        <p>
-            To complete set up, add this OAuth2 redirect URI to your {provider} app configuration.
-        </p>
-        <Copy bind:value={redirectURI} />
+        <InfoSection>
+            <p>
+                To complete set up, add this OAuth2 redirect URI to your {provider} app configuration.
+            </p>
+            <Copy bind:value={redirectURI} />
+        </InfoSection>
         <svelte:fragment slot="footer">
             <Button submit>Update</Button>
             <Button secondary on:click={() => (showModal = false)}>Cancel</Button>