update: feedback modal.

src/lib/components/feedback/evaluation.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { Tag } from '@appwrite.io/pink-svelte';
+
     export let value: number = null;
 </script>
 
@@ -7,21 +9,17 @@
         <slot />
     </legend>
     <ol
-        class="u-flex u-main-space-between u-margin-block-start-16 u-overflow-x-auto"
+        class="u-flex u-main-space-between u-margin-block-start-24 u-overflow-x-auto u-gap-6"
         style="padding-block: 0.13rem">
         {#each Array(11) as _, i}
             <li>
-                <input
-                    on:click={() => (value = i)}
-                    type="radio"
-                    name="recommend"
-                    class="radio-button"
-                    data-text={i}
-                    checked={value === i} />
+                <Tag size="m" selected={value === i} on:click={() => (value = i)}>
+                    {i}
+                </Tag>
             </li>
         {/each}
     </ol>
-    <div class="u-flex u-main-space-between u-margin-block-start-8">
+    <div class="u-flex u-main-space-between u-margin-block-start-8 u-margin-block-end-24">
         <span class:u-color-text-gray={value === null}>Not at all likely</span>
         <span class:u-color-text-gray={value === null}>Extremely likely</span>
     </div>

src/lib/components/feedback/feedback.svelte

@@ -10,9 +10,12 @@
     import { organization } from '$lib/stores/organization';
     import { addNotification } from '$lib/stores/notifications';
     import { page } from '$app/stores';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     $: $selectedFeedback = feedbackOptions.find((option) => option.type === $feedback.type);
 
+    export let isMobile: boolean = false;
+
     async function submit() {
         try {
             await feedback.submitFeedback(
@@ -39,26 +42,25 @@
     }
 </script>
 
-<section class="drop-section u-padding-24">
-    <header class="u-flex u-main-space-between u-gap-16">
-        <h4 class="label u-bold" style:font-size="var(--font-size-1)">{$selectedFeedback.title}</h4>
-        <button
-            type="button"
-            class="button is-text is-only-icon u-margin-inline-start-auto"
-            style="--button-size:1.5rem;"
-            aria-label="Close feedback"
-            title="Close feedback"
-            on:click={() => feedback.toggleFeedback()}>
-            <span class="icon-x" aria-hidden="true" />
-        </button>
+<section
+    class="u-flex u-flex-vertical u-gap-24"
+    class:drop-section={!isMobile}
+    class:u-padding-24={!isMobile}>
+    <header class="u-flex u-flex-vertical u-gap-4">
+        {#if !isMobile}
+            <Typography.Title size="s">Feedback</Typography.Title>
+        {/if}
+        {#if $selectedFeedback.desc}
+            <Typography.Text variant="m-400" size="m">{$selectedFeedback.desc}</Typography.Text>
+        {/if}
     </header>
-    <div class="u-margin-block-start-8 u-line-height-1-5">
-        {$selectedFeedback.desc}
-    </div>
 
     <Form onSubmit={submit}>
         <svelte:component this={$selectedFeedback.component} />
-        <div class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
+
+        <div
+            class:u-flex-vertical={isMobile}
+            class="u-flex u-main-end u-gap-16 u-margin-block-start-24">
             <Button text on:click={() => feedback.toggleFeedback()}>Cancel</Button>
             <Button secondary submit>Submit</Button>
         </div>

src/lib/components/feedback/feedbackGeneral.svelte

@@ -5,9 +5,9 @@
 
 <FormList>
     <InputTextarea
-        id="feedback"
-        placeholder="Your message here"
-        label="Message"
         required
-        bind:value={$feedbackData.message} />
+        id="feedback"
+        bind:value={$feedbackData.message}
+        label="Tell us more about your experience"
+        placeholder="Share your suggestions and feature requests..." />
 </FormList>

src/lib/components/feedback/feedbackNPS.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
-    import { FormList, InputTextarea } from '$lib/elements/forms';
-    import { feedbackData } from '$lib/stores/feedback';
     import Evaluation from './evaluation.svelte';
+    import { feedbackData } from '$lib/stores/feedback';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { FormList, InputTextarea } from '$lib/elements/forms';
 </script>
 
 <FormList>
     <Evaluation bind:value={$feedbackData.value}>
-        How likely are you to recommend Appwrite to a friend or colleague?
+        <Typography.Text variant="m-400" size="m"
+            >How likely are you to recommend Appwrite to a friend or colleague?</Typography.Text>
     </Evaluation>
     {#if $feedbackData.value !== null}
+        <!-- TODO: @itznotabug, helper is a plain string atm, cannot add html/anchor for Discord link -->
         <InputTextarea
             id="feedback"
-            placeholder="Your message here"
-            label="Message"
-            required
             bind:value={$feedbackData.message}
-            showLabel={false} />
+            label="Tell us more about your experience (optional)"
+            placeholder="Share your suggestions and feature requests..."
+            helper="Need help? Join our Discord for community support" />
     {/if}
 </FormList>

src/lib/components/navbar.svelte

@@ -95,8 +95,8 @@
     <div slot="right" class="only-desktop">
         <div class="right">
             <Layout.Stack gap="l" direction="row">
-                <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
-                    <Button.Button type="button" variant="compact" on:click={toggleFeedback}
+                <DropList show={$feedback.show} class="extended-width">
+                    <Button.Button type="button" variant="compact" on:click={() => toggleFeedback()}
                         >Feedback
                     </Button.Button>
                     <svelte:fragment slot="other">

src/lib/components/sidebar.svelte

@@ -25,10 +25,10 @@
     import { toggleCommandCenter } from '$lib/commandCenter/commandCenter.svelte';
     import { feedback } from '$lib/stores/feedback';
     import { DropList } from '$lib/components/index';
-    import { Feedback } from '$lib/components/feedback';
     import type { ComponentType } from 'svelte';
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
+    import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
 
     type $$Props = HTMLElement & {
         state?: 'closed' | 'open' | 'icons';
@@ -53,6 +53,7 @@
 
     function toggleFeedback() {
         feedback.toggleFeedback();
+
         if ($feedback.notification) {
             feedback.toggleNotification();
             feedback.addVisualization();
@@ -176,12 +177,15 @@
             {:else}
                 <div class="action-buttons">
                     <Layout.Stack direction="column" gap="s">
-                        <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
-                            <Button.Button variant="secondary" size="s" on:click={toggleFeedback}
+                        <DropList show={$feedback.show} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => toggleFeedback()}
                                 >Feedback
                             </Button.Button>
                             <svelte:fragment slot="other">
-                                <Feedback />
+                                <MobileFeedbackModal />
                             </svelte:fragment>
                         </DropList>
 
@@ -221,15 +225,15 @@
                 <div class="only-mobile">
                     <div class="action-buttons">
                         <Layout.Stack direction="column" gap="s">
-                            <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
+                            <DropList show={$feedback.show} scrollable>
                                 <Button.Button
                                     variant="secondary"
                                     size="s"
-                                    on:click={toggleFeedback}
+                                    on:click={() => toggleFeedback()}
                                     >Feedback
                                 </Button.Button>
                                 <svelte:fragment slot="other">
-                                    <Feedback />
+                                    <MobileFeedbackModal />
                                 </svelte:fragment>
                             </DropList>
                             <Button.Button variant="secondary" size="s"

src/lib/elements/forms/inputTextarea.svelte

@@ -13,6 +13,7 @@
     export let autofocus = false;
     export let maxlength: number = null;
     export let rows = 3;
+    export let helper: string = '';
 
     let error: string;
 
@@ -42,7 +43,7 @@
     {nullable}
     {rows}
     autofocus={autofocus || undefined}
-    helper={error}
+    helper={error || helper}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input

src/lib/stores/feedback.ts

@@ -21,22 +21,18 @@ export type FeedbackData = {
 
 export type FeedbackOption = {
     type: Feedback['type'];
-    title: string;
-    desc: string;
+    desc?: string;
     component: typeof SvelteComponent<unknown>;
 };
 
 export const feedbackOptions: FeedbackOption[] = [
     {
         type: 'general',
-        title: 'Help us improve Appwrite',
         desc: 'Appwrite evolves with your input. Share your thoughts and help us improve Appwrite.',
         component: FeedbackGeneral
     },
     {
         type: 'nps',
-        title: 'Help us improve Appwrite',
-        desc: 'Appwrite evolves with your input. Share your thoughts and help us improve Appwrite. If you would like to be contacted regarding your feedback, please share your contact details below.',
         component: FeedbackNps
     }
 ];

src/routes/(console)/wizard/feedback/mobileFeedbackModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import Modal from '$lib/components/modal.svelte';
+    import { isSidebarOpen } from '$lib/stores/sidebar';
+    import { Feedback } from '$lib/components/feedback';
+    import { feedback } from '$lib/stores/feedback';
+
+    $: if ($feedback.show) {
+        $isSidebarOpen = false;
+    }
+</script>
+
+<div class="mobile-feedback-dialog-modal">
+    <Modal title="Feedback" bind:show={$feedback.show} dismissible={false}>
+        <Feedback isMobile />
+    </Modal>
+</div>
+
+<style>
+    :global(.mobile-feedback-dialog-modal dialog) {
+        background-color: #fff;
+    }
+
+    :global(.theme-dark .mobile-feedback-dialog-modal dialog) {
+        background-color: #131315;
+    }
+
+    /* temporary fix until https://github.com/appwrite/pink/pull/261 is merged */
+    :global(.mobile-feedback-dialog-modal dialog section:first-of-type) {
+        max-width: 600px;
+        width: 100% !important; /* important for override */
+    }
+
+    /* pink2 modal doesn't allow removing the header divider yet, temporary fix*/
+    :global(.mobile-feedback-dialog-modal dialog header) {
+        border-bottom: unset !important;
+        padding-bottom: unset !important;
+    }
+
+    /* pink2 modal doesn't remove footer if not used, temporary fix*/
+    :global(.mobile-feedback-dialog-modal dialog footer) {
+        display: none !important;
+    }
+</style>