Merge pull request #10 from appwrite/demo-various

Various style changes

src/lib/elements/forms/inputSearch.svelte

@@ -26,11 +26,14 @@
     };
 </script>
 
-<input
-    {placeholder}
-    {disabled}
-    {required}
-    type="search"
-    class="input-text"
-    on:input={valueChange}
-    bind:this={element} />
+<div class="input-text-wrapper">
+    <input
+        {placeholder}
+        {disabled}
+        {required}
+        type="search"
+        class="input-text"
+        on:input={valueChange}
+        bind:this={element} />
+    <span class="icon-search" aria-hidden="true" />
+</div>

src/lib/elements/pill.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
     export let disabled = false;
-    export let pending = false;
-    export let failed = false;
     export let success = false;
+    export let warning = false;
+    export let danger = false;
+    export let info = false;
 </script>
 
 <div
-    class="pill"
+    class="tag"
     class:is-disabled={disabled}
-    class:is-pending={pending}
-    class:is-failed={failed}
-    class:is-success={success}>
+    class:is-success={success}
+    class:is-warning={warning}
+    class:is-danger={danger}
+    class:is-info={info}>
     <slot />
 </div>

src/lib/elements/table/table.svelte

@@ -1,3 +1,3 @@
-<table class="table is-vertical">
+<table class="table is-vertical common-section">
     <slot />
 </table>

src/lib/layout/header.svelte

@@ -21,7 +21,15 @@
 </nav>
 
 <div class="main-header-end">
-    <nav class="u-flex is-only-desktop" />
+    <nav class="u-flex is-only-desktop">
+        <button class="button is-small is-text"><span class="text">Feedback</span></button>
+        <a
+            href="https://appwrite.io/support"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="button is-small is-text"><span class="text">Support</span></a>
+        <button class="button is-small is-secondary"><span class="text">Upgrade</span></button>
+    </nav>
     <nav class="user-profile">
         {#if $user}
             <DropList bind:show={showDropdown} position="bottom" horizontal="left" arrow={false}>

src/routes/console/[project]/database/collection/[collection]/attributes.svelte

@@ -33,8 +33,8 @@
                         <TableCellText title="Status">
                             <Pill
                                 success={attribute.status === 'available'}
-                                pending={attribute.status === 'processing'}
-                                failed={['deleting', 'stuck', 'failed'].includes(attribute.status)}>
+                                warning={attribute.status === 'processing'}
+                                danger={['deleting', 'stuck', 'failed'].includes(attribute.status)}>
                                 {attribute.status}
                             </Pill>
                         </TableCellText>

src/routes/console/[project]/database/collection/[collection]/indexes.svelte

@@ -36,7 +36,7 @@
                                 <Pill>{attribute} ({index.orders[i]})</Pill>
                             {/each}
                         </TableCellText>
-                        <TableCellText title="Action"><Pill failed>Delete</Pill></TableCellText>
+                        <TableCellText title="Action"><Pill danger>Delete</Pill></TableCellText>
                     </TableRow>
                 {/each}
             </TableBody>

src/routes/console/[project]/settings/domains.svelte

@@ -36,7 +36,7 @@
                 {#each response.domains as domain}
                     <TableRow>
                         <TableCellText title="Scopes">
-                            <Pill failed={!domain.verification} success={domain.verification}>
+                            <Pill danger={!domain.verification} success={domain.verification}>
                                 {domain.verification ? 'Verified' : 'Unverified'}
                             </Pill>
                         </TableCellText>

src/routes/console/[project]/settings/members.svelte

@@ -31,7 +31,7 @@
                                 <Pill>{role}</Pill>
                             {/each}
                             {#if !membership.confirm}
-                                <Pill failed>Pending Approval</Pill>
+                                <Pill danger>Pending Approval</Pill>
                             {/if}
                         </svelte:fragment>
                         <svelte:fragment slot="info">

src/routes/console/[project]/users/index.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { sdkForProject } from '$lib/stores/sdk';
-    import { Card, Empty, Pagination } from '$lib/components';
-    import { Button, InputSearch } from '$lib/elements/forms';
+    import { Empty, Pagination } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
     import {
         Table,
         TableHeader,
@@ -36,9 +36,16 @@
 </script>
 
 <Container>
-    <Card>
-        <InputSearch bind:value={search} />
-    </Card>
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+            <input type="search" class="input-text" bind:value={search} />
+            <span class="icon-search" aria-hidden="true" />
+        </div>
+
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create User</span>
+        </Button>
+    </div>
     {#await request}
         <div aria-busy="true" />
     {:then response}
@@ -81,7 +88,10 @@
                     {/each}
                 </TableBody>
             </Table>
-            <Pagination {limit} bind:offset sum={response.total} />
+            <div class="u-flex common-section u-main-space-between">
+                <p class="text">Total results: {response.total}</p>
+                <Pagination {limit} bind:offset sum={response.total} />
+            </div>
         {:else if search}
             <Empty>
                 <svelte:fragment slot="header"
@@ -94,8 +104,6 @@
             </Empty>
         {/if}
     {/await}
-
-    <Button on:click={() => (showCreate = true)}>Create User</Button>
 </Container>
 
 <Create bind:showCreate on:created={userCreated} />

src/routes/console/[project]/users/teams.svelte

@@ -12,7 +12,7 @@
         TableCell
     } from '$lib/elements/table';
     import { Button, InputSearch } from '$lib/elements/forms';
-    import { Card, Empty, Pagination } from '$lib/components';
+    import { Empty, Pagination } from '$lib/components';
     import Create from './_createTeam.svelte';
     import { goto } from '$app/navigation';
     import type { Models } from 'src/sdk';
@@ -35,15 +35,17 @@
 </script>
 
 <Container>
-    <Card>
+    <div class="u-flex u-space-between common-section">
         <InputSearch bind:value={search} />
-    </Card>
+        <Button on:click={() => (showCreate = true)}>
+            <span class="icon-plus" aria-hidden="true" /> <span class="text">Create Team</span>
+        </Button>
+    </div>
 
     {#await request}
         <div aria-busy="true" />
     {:then response}
         {#if response.total}
-            <p>{response.total} teams found</p>
             <Table>
                 <TableHeader>
                     <TableCellHead width={30} />
@@ -90,8 +92,6 @@
             </Empty>
         {/if}
     {/await}
-
-    <Button on:click={() => (showCreate = true)}>Create Team</Button>
 </Container>
 
 <Create bind:showCreate on:created={teamCreated} />

src/routes/console/__layout.svelte

@@ -2,7 +2,6 @@
     import Shell from '$lib/layout/shell.svelte';
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
-    import Footer from '$lib/layout/footer.svelte';
 </script>
 
 <Shell>
@@ -13,5 +12,4 @@
         <SideNavigation />
     </svelte:fragment>
     <slot />
-    <Footer />
 </Shell>