From 63dc89b6df3148884a2f7d8923002992cfcbc481 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Tue, 15 Aug 2023 17:54:19 +0200
Subject: [PATCH] fix: design review fixes

---
 src/lib/components/customId.svelte            |  3 +-
 src/lib/components/innerModal.svelte          |  3 +-
 src/lib/elements/forms/inputFile.svelte       |  9 ++-
 src/lib/elements/forms/inputId.svelte         |  4 +-
 src/lib/elements/forms/label.svelte           |  2 +-
 .../functions/components/repositories.svelte  |  2 +-
 src/lib/wizards/functions/cover.svelte        | 71 +++++++++----------
 .../functions/steps/configuration.svelte      |  6 +-
 .../wizards/functions/steps/details.svelte    |  6 +-
 .../steps/functionConfiguration.svelte        | 12 +++-
 .../functions/steps/gitConfiguration.svelte   | 19 ++---
 .../steps/templateConfiguration.svelte        |  6 +-
 .../functions/wizard/step1.svelte             |  6 +-
 .../uploadVariablesModal.svelte               |  2 +-
 14 files changed, 89 insertions(+), 62 deletions(-)

diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 8691d9f15..dafdb0661 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -7,6 +7,7 @@
     export let name: string;
     export let id: string;
     export let autofocus = true;
+    export let fullWidth = false;
 
     $: if (!show) {
         id = null;
@@ -21,7 +22,7 @@
     }
 </script>
 
-<InnerModal bind:show>
+<InnerModal bind:show {fullWidth}>
     <svelte:fragment slot="title">{name} ID</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Enter a custom {name} ID. Leave blank for a randomly generated one.
diff --git a/src/lib/components/innerModal.svelte b/src/lib/components/innerModal.svelte
index 5cf1e1822..63fde968a 100644
--- a/src/lib/components/innerModal.svelte
+++ b/src/lib/components/innerModal.svelte
@@ -3,11 +3,12 @@
 
     export let show = false;
     export let closable = true;
+    export let fullWidth = false;
 </script>
 
 {#if show}
     <FormItem>
-        <section class="modal is-inner-modal">
+        <section class="modal is-inner-modal" class:u-width-full-line={fullWidth}>
             <div class="modal-form">
                 <header class="modal-header">
                     <div class="u-flex u-main-space-between u-cross-center u-gap-16">
diff --git a/src/lib/elements/forms/inputFile.svelte b/src/lib/elements/forms/inputFile.svelte
index e85d755e2..5f640db80 100644
--- a/src/lib/elements/forms/inputFile.svelte
+++ b/src/lib/elements/forms/inputFile.svelte
@@ -2,7 +2,7 @@
     import { Trim } from '$lib/components';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { onMount } from 'svelte';
-    import { Helper } from '.';
+    import { Helper, Label } from '.';
 
     export let label: string = null;
     export let files: FileList;
@@ -10,6 +10,8 @@
     export let allowedFileExtensions: string[] = [];
     export let maxSize: number = null;
     export let required = false;
+    export let optionalText: string = null;
+    export let tooltip: string = null;
     export let error: string = null;
 
     let input: HTMLInputElement;
@@ -89,11 +91,14 @@
 
 <div>
     {#if label}
-        <p class="text">{label}</p>
+        <Label {required} {optionalText} {tooltip} hide={!label}>
+            {label}
+        </Label>
     {/if}
     <div
         class="box is-no-shadow u-padding-24"
         style="--box-border-radius:var(--border-radius-xsmall); z-index: 1"
+        class:u-margin-block-start-8={!!label}
         class:is-border-dashed={!hovering}
         class:is-hover-with-file={hovering}
         on:drop|preventDefault={dropHandler}
diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index 954b4cf16..ea1dc166b 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -47,12 +47,12 @@
     </div>
 </FormItem>
 <div
-    class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center"
+    class="u-flex u-gap-4 u-margin-block-start-8 u-small"
     class:u-color-text-warning={icon === 'exclamation'}>
     <span
         class:icon-info={icon === 'info'}
         class:icon-exclamation={icon === 'exclamation'}
-        class="u-cross-center u-line-height-1 u-icon-small u-color-text-gray"
+        class="u-cross-center u-line-height-1 u-color-text-gray"
         aria-hidden="true" />
     <span class="text u-line-height-1-5">
         Allowed characters: alphanumeric, non-leading hyphen, underscore, period
diff --git a/src/lib/elements/forms/label.svelte b/src/lib/elements/forms/label.svelte
index 2f542bfd4..d841a72f9 100644
--- a/src/lib/elements/forms/label.svelte
+++ b/src/lib/elements/forms/label.svelte
@@ -23,7 +23,7 @@
 
 {#if tooltip}
     <button class="tooltip" aria-label="variables info">
-        <span class="icon-info" aria-hidden="true" />
+        <span class="icon-info" aria-hidden="true" style="font-size: var(--icon-size-small)" />
         <span class="tooltip-popup" role="tooltip">
             <p class="text">
                 {tooltip}
diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index c38e9f651..eff73528c 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -204,7 +204,7 @@
     <div class="u-flex u-cross-center u-flex-vertical u-gap-16">
         <Button href={connectGitHub().toString()} fullWidth secondary>
             <span class="icon-github" aria-hidden="true" />
-            <span class="text">Continue with GitHub</span>
+            <span class="text">GitHub</span>
         </Button>
         <Button disabled fullWidth secondary>
             <span class="icon-gitlab" aria-hidden="true" />
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 27998624a..4c8ff26b6 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -60,29 +60,31 @@
 <WizardCover>
     <svelte:fragment slot="title">Create function</svelte:fragment>
     <div class="wizard-container container">
-        <div class="u-text-center">
-            <Heading size="5" tag="h1">Choose your source</Heading>
-            <p class="u-margin-block-start-8">
-                Connect your function to a Git repository or use a template to get started. You can
-                also create a function <span
-                    class="link"
-                    on:keyup={clickOnEnter}
-                    on:click={() => wizard.start(CreateManual)}>manually</span
-                >.
-            </p>
-        </div>
-        <div class="grid-1-1 u-gap-24 u-margin-block-start-48">
-            <div class="card u-cross-child-start">
-                <Heading size="6" tag="h2">Import Git repository</Heading>
-                <p class="u-margin-block-start-8">
-                    Create and deploy a function with a connected git repository.
+        <div class="grid-1-1 u-gap-24">
+            <div>
+                <div class="card u-cross-child-start">
+                    <Heading size="6" tag="h2">Connect Git repository</Heading>
+                    <p class="u-margin-block-start-8">
+                        Create and deploy a function with a connected git repository.
+                    </p>
+                    <div class="u-margin-block-start-24">
+                        <Repositories
+                            bind:hasInstallations
+                            bind:selectedRepository
+                            action="button"
+                            on:connect={connect} />
+                    </div>
+                </div>
+                <p class="u-margin-block-start-16">
+                    You can also create a function <span
+                        class="link"
+                        on:keyup={clickOnEnter}
+                        on:click={() => wizard.start(CreateManual)}>manually</span>
+                    or using the CLI.
+                    <a href="http://#" target="_blank" rel="noopener noreferrer" class="link"
+                        >Learn more</a
+                    >.
                 </p>
-                <div class="u-margin-block-start-24" />
-                <Repositories
-                    bind:hasInstallations
-                    bind:selectedRepository
-                    action="button"
-                    on:connect={connect} />
             </div>
             <div class="card">
                 <section class="common-section">
@@ -107,10 +109,10 @@
                                 <li>
                                     <button
                                         on:click={() => connectTemplate(quickStart, runtime.name)}
-                                        class="box u-width-full-line u-flex-vertical u-cross-center u-gap-8"
+                                        class="box u-width-full-line u-flex u-cross-center u-gap-8"
                                         style:--box-padding="1rem"
                                         style:--box-border-radius="var(--border-radius-small)">
-                                        <div class="avatar">
+                                        <div class="avatar is-size-small">
                                             <img
                                                 style:--p-text-size="1.25rem"
                                                 src={`${base}/icons/${$app.themeInUse}/color/${
@@ -126,16 +128,16 @@
                             {#if quickStart.runtimes.length < 6}
                                 <li>
                                     <div
-                                        class="box u-width-full-line u-flex-vertical u-cross-center u-gap-8"
+                                        class="box u-width-full-line u-flex u-cross-center u-gap-8"
                                         style:--box-padding="1rem"
                                         style:--box-border-radius="var(--border-radius-small)">
-                                        <div class="avatar">
+                                        <div class="avatar is-size-small">
                                             <img
                                                 style:--p-text-size="1.25rem"
                                                 src={`${base}/icons/${$app.themeInUse}/grayscale/dotnet.svg`}
                                                 alt="dotnet-7.0" />
                                         </div>
-                                        <div class="body-text-2">Coming soon</div>
+                                        <div class="body-text-2 u-trim">Coming soon</div>
                                     </div>
                                 </li>
                             {/if}
@@ -144,24 +146,21 @@
                 </section>
                 <section class="common-section">
                     <h2 class="heading-level-6">Templates</h2>
-                    <p class="u-margin-block-start-8">
-                        Choose from a selection of templates to find the right one for your use
-                        case.
+                    <p class="text u-margin-block-start-8">
+                        Find the right template for your use case.
                     </p>
 
-                    <ul class="u-flex-vertical u-gap-8 u-margin-block-start-16">
+                    <ul class="clickable-list u-margin-block-start-16">
                         {#each templates as template}
-                            <li>
+                            <li class="clickable-list-item">
                                 <button
                                     on:click={() => connectTemplate(template)}
-                                    class="box u-width-full-line u-flex u-gap-8"
-                                    style:--box-padding="1rem"
-                                    style:--box-border-radius="var(--border-radius-small)">
+                                    class="clickable-list-button u-width-full-line u-flex u-gap-12">
                                     <div class="avatar is-size-small" style:--p-text-size="1.25rem">
                                         <span class={template.icon} />
                                     </div>
                                     <div>
-                                        <div class="body-text-2 u-trim">{template.name}</div>
+                                        <div class="body-text-2 u-bold u-trim">{template.name}</div>
                                         <div class="u-trim-1 u-color-text-gray">
                                             {template.tagline}
                                         </div>
diff --git a/src/lib/wizards/functions/steps/configuration.svelte b/src/lib/wizards/functions/steps/configuration.svelte
index e24a9e99b..0e8a4f3c8 100644
--- a/src/lib/wizards/functions/steps/configuration.svelte
+++ b/src/lib/wizards/functions/steps/configuration.svelte
@@ -8,8 +8,9 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Function configuration</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-        >Set your deployment configuration and any build commands here.</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set your deployment configuration and any build commands here.
+    </svelte:fragment>
     <FormList>
         <InputFile
             label="Upload a zip file (tar.gz) containing your function source code"
@@ -32,6 +33,7 @@
                         label="Commands"
                         placeholder="Enter a build commad (e.g. 'npm install')"
                         id="build"
+                        tooltip="Enter a single command or chain multiple commands with the && operator"
                         bind:value={$createFunction.commands} />
                 </FormList>
             </CollapsibleItem>
diff --git a/src/lib/wizards/functions/steps/details.svelte b/src/lib/wizards/functions/steps/details.svelte
index 2e0eaa71a..4b706dcad 100644
--- a/src/lib/wizards/functions/steps/details.svelte
+++ b/src/lib/wizards/functions/steps/details.svelte
@@ -47,7 +47,11 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.$id} />
+            <CustomId
+                bind:show={showCustomId}
+                name="Function"
+                bind:id={$createFunction.$id}
+                fullWidth />
         {/if}
     </FormList>
 </WizardStep>
diff --git a/src/lib/wizards/functions/steps/functionConfiguration.svelte b/src/lib/wizards/functions/steps/functionConfiguration.svelte
index 11f5961f2..bfeae1f95 100644
--- a/src/lib/wizards/functions/steps/functionConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/functionConfiguration.svelte
@@ -52,8 +52,9 @@
 
 <WizardStep>
     <svelte:fragment slot="title">Function configuration</svelte:fragment>
-    <svelte:fragment slot="subtitle"
-        >Set your deployment configuration and any build commands here.</svelte:fragment>
+    <svelte:fragment slot="subtitle">
+        Set your deployment configuration and any build commands here.
+    </svelte:fragment>
     <FormList>
         <InputText
             label="Name"
@@ -69,7 +70,11 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.$id} />
+            <CustomId
+                bind:show={showCustomId}
+                name="Function"
+                bind:id={$createFunction.$id}
+                fullWidth />
         {/if}
 
         {#if detectingRuntime}
@@ -107,6 +112,7 @@
                         label="Commands"
                         placeholder="Enter a build commad (e.g. 'npm install')"
                         id="build"
+                        tooltip="Enter a single command or chain multiple commands with the && operator"
                         bind:value={$createFunction.commands} />
                 </FormList>
             </CollapsibleItem>
diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte
index e8d8a2e4b..192057c07 100644
--- a/src/lib/wizards/functions/steps/gitConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/gitConfiguration.svelte
@@ -38,16 +38,9 @@
 </script>
 
 <WizardStep>
-    <svelte:fragment slot="title">Execute access</svelte:fragment>
+    <svelte:fragment slot="title">Git configuration</svelte:fragment>
     <svelte:fragment slot="subtitle">
-        Choose who can execute this function using the client API. For more information, check out
-        the <a
-            href="https://appwrite.io/docs/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions Guide
-        </a>.
+        Configure the Git repository that will trigger your function deployments when updated.
     </svelte:fragment>
 
     <div class="box" style:--box-border-radius="var(--border-radius-small)">
@@ -97,4 +90,12 @@
             </div>
         {/await}
     </div>
+    <p class="text u-margin-block-start-8">
+        View your configuration in <a
+            href={$repository.html_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">{$repository.provider}</a
+        >.
+    </p>
 </WizardStep>
diff --git a/src/lib/wizards/functions/steps/templateConfiguration.svelte b/src/lib/wizards/functions/steps/templateConfiguration.svelte
index 17f9d109e..048bc67d4 100644
--- a/src/lib/wizards/functions/steps/templateConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/templateConfiguration.svelte
@@ -100,7 +100,11 @@
                     </Pill>
                 </div>
             {:else}
-                <CustomId bind:show={showCustomId} name="Function" bind:id={$templateConfig.$id} />
+                <CustomId
+                    bind:show={showCustomId}
+                    name="Function"
+                    bind:id={$templateConfig.$id}
+                    fullWidth />
             {/if}
         </FormList>
 
diff --git a/src/routes/console/project-[project]/functions/wizard/step1.svelte b/src/routes/console/project-[project]/functions/wizard/step1.svelte
index b7deed5c9..fd0c3a118 100644
--- a/src/routes/console/project-[project]/functions/wizard/step1.svelte
+++ b/src/routes/console/project-[project]/functions/wizard/step1.svelte
@@ -54,7 +54,11 @@
                 </Pill>
             </div>
         {:else}
-            <CustomId bind:show={showCustomId} name="Function" bind:id={$createFunction.id} />
+            <CustomId
+                bind:show={showCustomId}
+                name="Function"
+                bind:id={$createFunction.id}
+                fullWidth />
         {/if}
     </FormList>
 </WizardStep>
diff --git a/src/routes/console/project-[project]/uploadVariablesModal.svelte b/src/routes/console/project-[project]/uploadVariablesModal.svelte
index e31009182..7473b4a5e 100644
--- a/src/routes/console/project-[project]/uploadVariablesModal.svelte
+++ b/src/routes/console/project-[project]/uploadVariablesModal.svelte
@@ -81,6 +81,6 @@
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button submit>Import</Button>
+        <Button submit disabled={!files?.length}>Import</Button>
     </svelte:fragment>
 </Modal>