fix: design for cover screen

src/lib/components/avatarGroup.svelte

@@ -7,6 +7,7 @@
     export let size = 40;
     export let avatarSize: keyof typeof Sizes = 'medium';
     export let bordered = false;
+    export let color = '';
 
     enum Sizes {
         xsmall = 'is-size-x-small',
@@ -28,13 +29,13 @@
 
     {#each icons as icon}
         <li class="avatars-group-item">
-            <span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
+            <span class="avatar {Sizes[avatarSize]} {color}"><span class={`icon-${icon}`} /></span>
         </li>
     {/each}
 
     {#if total > 2}
         <li class="avatars-group-item">
-            <div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
+            <div class="avatar {Sizes[avatarSize]} {color}">+{total - 2}</div>
         </li>
     {/if}
 </ul>

src/lib/components/emptySearch.svelte

@@ -20,7 +20,7 @@
 </article>
 
 {#if !hidePagination}
-    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+    <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
         <p class="text">Total results: 0</p>
         <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
     </div>

src/lib/wizards/functions/components/repositories.svelte

@@ -117,7 +117,7 @@
             </div>
         </div>
     {/await}
-    <p class="text common-section">
+    <p class="text u-margin-block-start-16">
         Manage organization configuration in your <a
             class="link"
             href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
@@ -160,7 +160,7 @@
                                                 alt={repo.name} />
                                         {/if}
                                     </div>
-                                    <div class="u-flex u-gap-8">
+                                    <div class="u-flex u-gap-8 u-cross-center">
                                         <span class="text u-trim-1">{repo.name}</span>
                                         {#if repo.private}
                                             <span
@@ -196,28 +196,12 @@
                             <p>There are no repositories that match your search.</p>
                         </div>
                         <div class="u-flex u-gap-16 common-section u-main-center">
-                            <Button external href="https://appwrite.io/docs/client/teams" text
-                                >Documentation</Button>
                             <Button secondary on:click={() => (search = '')}>Clear search</Button>
                         </div>
                     </div>
                 </EmptySearch>
             {:else}
-                <EmptySearch hidePages>
-                    <div class="common-section">
-                        <div class="u-text-center common-section">
-                            <p class="text u-line-height-1-5">You have no repositories.</p>
-                            <p class="text u-line-height-1-5">
-                                Need a hand? Learn more in our <a
-                                    href="https://appwrite.io/docs/client/teams"
-                                    target="_blank"
-                                    rel="noopener noreferrer">
-                                    documentation</a
-                                >.
-                            </p>
-                        </div>
-                    </div>
-                </EmptySearch>
+                <EmptySearch hidePages />
             {/if}
         {/await}
     {/if}

src/lib/wizards/functions/cover.svelte

@@ -85,9 +85,7 @@
             <div class="card u-height-100-percent">
                 <section class="common-section">
                     <h2 class="heading-level-6">Quick start</h2>
-                    <p class="u-margin-block-start-8">
-                        Use a starter templates to begin with the basics.
-                    </p>
+                    <p class="u-margin-block-start-8">Use a starter template.</p>
                     <ul
                         class="grid-box u-margin-block-start-16"
                         style:--grid-item-size="8rem"
@@ -154,6 +152,7 @@
                                             icons={['dotnet', 'deno']}
                                             total={4}
                                             avatarSize="small"
+                                            color="u-color-text-gray"
                                             bordered />
                                     </Box>
                                 </li>
@@ -197,6 +196,7 @@
                 </section>
                 <Button
                     text
+                    noMargin
                     class="u-margin-inline-start-auto u-margin-block-start-16"
                     href={`${base}/console/project-${$page.params.project}/functions/templates`}>
                     <span> All templates </span>