created infoSection component added it to modals

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';

src/lib/components/infoSection.svelte

@@ -0,0 +1,4 @@
+<div>
+    <i class="icon-info-circled" />
+    <slot />
+</div>

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>

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>