Merge pull request #724 from appwrite/fix-nps-feedback-design-review

fix: nps feedback design review

Author: ArmanNik

src/lib/components/feedback/evaluation.svelte

@@ -2,11 +2,13 @@
     export let value: number = null;
 </script>
 
-<fieldset class="u-margin-block-start-8">
+<fieldset class="u-margin-block-start-8 u-min-width-0">
     <legend class="label is-required u-margin-0 u-line-height-1-5 u-bold">
         <slot />
     </legend>
-    <ul class="u-flex u-main-space-between u-margin-block-start-16">
+    <ol
+        class="u-flex u-main-space-between u-margin-block-start-16 u-overflow-x-auto"
+        style="padding-block: 0.13rem">
         {#each Array(11) as _, i}
             <li>
                 <input
@@ -18,9 +20,9 @@
                     checked={value === i} />
             </li>
         {/each}
-    </ul>
+    </ol>
     <div class="u-flex u-main-space-between u-margin-block-start-8">
-        <span>Not at all likely</span>
-        <span>Extremely likely</span>
+        <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>
 </fieldset>

src/lib/components/feedback/feedback.svelte

@@ -20,7 +20,7 @@
             );
             addNotification({
                 type: 'success',
-                message: 'Feedback submitted successfully'
+                message: 'Thank you for your feedback'
             });
             feedback.toggleFeedback();
             feedbackData.reset();
@@ -33,15 +33,15 @@
     }
 </script>
 
-<section class="drop-section">
+<section class="drop-section u-padding-24">
     <header class="u-flex u-main-space-between u-gap-16">
-        <h4 class="body-text-1 u-bold">{$selectedFeedback.title}</h4>
+        <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 Modal"
-            title="Close Modal"
+            aria-label="Close feedback"
+            title="Close feedback"
             on:click={() => feedback.toggleFeedback()}>
             <span class="icon-x" aria-hidden="true" />
         </button>

src/lib/components/feedback/feedbackNPS.svelte

@@ -4,11 +4,11 @@
     import Evaluation from './evaluation.svelte';
 </script>
 
-<Evaluation bind:value={$feedbackData.value}>
-    How likely are you to recommend Appwrite to a friend or colleague?
-</Evaluation>
-{#if $feedbackData.value}
-    <FormList>
+<FormList>
+    <Evaluation bind:value={$feedbackData.value}>
+        How likely are you to recommend Appwrite to a friend or colleague?
+    </Evaluation>
+    {#if $feedbackData.value !== null}
         <InputTextarea
             id="feedback"
             placeholder="Your message here"
@@ -26,5 +26,5 @@
             id="email"
             bind:value={$feedbackData.email}
             placeholder="Enter email" />
-    </FormList>
-{/if}
+    {/if}
+</FormList>

src/lib/layout/header.svelte

@@ -124,6 +124,11 @@
         {/if}
         <DropList show={$feedback.show} scrollable on:blur={toggleFeedback}>
             <button class="button is-small is-text" on:click={toggleFeedback}>
+                {#if $feedback.notification}
+                    <span
+                        class="notification u-position-absolute u-inset-block-start-8 u-inset-inline-end-8"
+                    ></span>
+                {/if}
                 <span class="text">Feedback</span>
             </button>
             <svelte:fragment slot="other">

src/lib/stores/feedback.ts

@@ -30,14 +30,14 @@ export type FeedbackOption = {
 export const feedbackOptions: FeedbackOption[] = [
     {
         type: 'general',
-        title: 'How can we improve?',
-        desc: 'Your feedback is important to us. Please be honest and tell us what you think.',
+        title: 'Help us improve Appwrite',
+        desc: 'Appwrite evolves with your input. Share your thoughts and help us improve Appwrite.',
         component: FeedbackGeneral
     },
     {
         type: 'nps',
-        title: 'How are we doing?',
-        desc: "At Appwrite, we value the feedback of our users. That means you! We'd love to hear what you think.",
+        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
     }
 ];
@@ -49,7 +49,7 @@ function createFeedbackDataStore() {
         message: '',
         name: '',
         email: '',
-        value: 0
+        value: null
     });
     return {
         set,
@@ -60,7 +60,7 @@ function createFeedbackDataStore() {
                 feedbackData.message = '';
                 feedbackData.name = '';
                 feedbackData.email = '';
-                feedbackData.value = 0;
+                feedbackData.value = null;
                 return feedbackData;
             });
         }
@@ -71,8 +71,8 @@ export const feedbackData = createFeedbackDataStore();
 
 function createFeedbackStore() {
     const { subscribe, update } = writable<Feedback>({
-        elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) : 0,
-        visualized: browser ? parseInt(localStorage.getItem('feedbackVisualized')) : 0,
+        elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) ?? 0 : 0,
+        visualized: browser ? parseInt(localStorage.getItem('feedbackVisualized')) ?? 0 : 0,
         notification: false,
         type: 'general',
         show: false

src/routes/console/+layout.svelte

@@ -236,7 +236,9 @@
     let isOpen = false;
     onMount(async () => {
         loading.set(false);
-
+        if (!localStorage.getItem('feedbackElapsed')) {
+            localStorage.setItem('feedbackElapsed', '0');
+        }
         setInterval(() => {
             checkForFeedback(INTERVAL);
         }, INTERVAL);

src/routes/console/wizard/feedback/step1.svelte

@@ -20,7 +20,7 @@
             );
             addNotification({
                 type: 'success',
-                message: 'Feedback submitted successfully'
+                message: 'Thank you for your feedback'
             });
         } catch (error) {
             addNotification({