Change feedback popup design

pnpm-lock.yaml

@@ -20,12 +20,12 @@ dependencies:
   '@nanostores/preact':
     specifier: ^0.5.0
     version: 0.5.0(nanostores@0.9.2)(preact@10.15.1)
-  '@otterlord/astro-compress':
-    specifier: ^1.1.48
-    version: 1.1.48
   astro:
     specifier: ^2.6.6
     version: 2.6.6
+  astro-compress:
+    specifier: ^2.0.8
+    version: 2.0.8
   jose:
     specifier: ^4.14.4
     version: 4.14.4
@@ -1009,20 +1009,6 @@ packages:
       - supports-color
     dev: false
 
-  /@otterlord/astro-compress@1.1.48:
-    resolution: {integrity: sha512-1AUSUMk0WMSMOg/qSmJ7K/0xUsl4hYrAlmcpxzunVFen2r6QmvQDE+51nrPJljzYcXPil+aFrzGe+jfWVChz6A==}
-    dependencies:
-      '@types/csso': 5.0.0
-      '@types/html-minifier-terser': 7.0.0
-      csso: 5.0.5
-      deepmerge-ts: 5.1.0
-      fast-glob: 3.2.12
-      html-minifier-terser: 7.2.0
-      sharp: 0.32.4
-      svgo: 3.0.2
-      terser: 5.19.2
-    dev: false
-
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1254,6 +1240,10 @@ packages:
     resolution: {integrity: sha512-8e2HYcg7ohnTUbHk8focoklEQYvemQmu9M/f43DZVx43kHn0tE3BY/6gSDxS7k0SprtS0NHvj+L80cGLnoOUcQ==}
     dev: true
 
+  /@types/node@20.5.0:
+    resolution: {integrity: sha512-Mgq7eCtoTjT89FqNoTzzXg2XvCi5VMhRV6+I2aYanc6kQCBImeNaAYRs/DyoVqk1YEUJK5gN9VO7HRIdz4Wo3Q==}
+    dev: false
+
   /@types/parse5@6.0.3:
     resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
     dev: false
@@ -1418,6 +1408,19 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /astro-compress@2.0.8:
+    resolution: {integrity: sha512-LY6bexsurw/1lKfTgvBKiKAXmfOZ2v3p/xFAmsnnGCviJdyrIa9t3bq4sqR209VLxGKU9eJ2Vuf813FA3ysRCQ==}
+    dependencies:
+      '@types/csso': 5.0.0
+      '@types/html-minifier-terser': 7.0.0
+      csso: 5.0.5
+      files-pipe: 2.0.12
+      html-minifier-terser: 7.2.0
+      sharp: 0.32.4
+      svgo: 3.0.2
+      terser: 5.19.2
+    dev: false
+
   /astro@2.6.6:
     resolution: {integrity: sha512-npeTXVaSOWKYYF6Znj6Yfxfq+WIFZ9u/Q+vtFP3nXbl7/XimvE+LbmWoK+hPFBOXC/KRLHxqQSltXJX5ALFmFg==}
     engines: {node: '>=16.12.0', npm: '>=6.14.0'}
@@ -2426,17 +2429,6 @@ packages:
     resolution: {integrity: sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==}
     dev: false
 
-  /fast-glob@3.2.12:
-    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
-    engines: {node: '>=8.6.0'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.5
-    dev: false
-
   /fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -2470,6 +2462,14 @@ packages:
       trim-repeated: 1.0.0
     dev: true
 
+  /files-pipe@2.0.12:
+    resolution: {integrity: sha512-j71KGMZZeJad8kFVhiHVZdWVVn4MC7oC+h6Uoi8SYU3QHKv52QsCmKRgAK1fj3th3Acs8O3nqQpVocKXJVS27A==}
+    dependencies:
+      '@types/node': 20.5.0
+      deepmerge-ts: 5.1.0
+      fast-glob: 3.3.1
+    dev: false
+
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}

src/components/Feedback/SubmitFeedbackPopup.tsx

@@ -53,7 +53,6 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
       return;
     }
 
-    toast.success('Team feedback submitted successfully');
     setIsSuccess(true);
   };
 
@@ -74,16 +73,17 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
         >
           {!isSuccess && (
             <>
-              <h2 class="text-2xl font-semibold text-black">
+              <h2 class="text-xl font-semibold mb-1 text-black">
                 Enter your feedback
               </h2>
+              <p className={'text-sm text-gray-500'}>Help us improve your experience.</p>
               <form onSubmit={handleSubmit}>
                 <div className="my-4">
                   <textarea
                     ref={inputEl}
                     name="submit-feedback"
                     id="submit-feedback"
-                    className="mt-2 block min-h-[150px] w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                    className="mt-2 block min-h-[150px] w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 resize-none"
                     placeholder="Enter your feedback"
                     required
                     autoFocus
@@ -93,7 +93,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
                     }
                   />
                   {error && (
-                    <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+                    <p className="mt-2 rounded-md bg-red-100 p-2 text-red-700">
                       {error}
                     </p>
                   )}
@@ -104,14 +104,14 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
                     type="button"
                     disabled={isLoading}
                     onClick={handleClosePopup}
-                    className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                    className="flex-grow cursor-pointer rounded-md bg-gray-200 py-2 text-center"
                   >
                     Cancel
                   </button>
                   <button
                     disabled={isLoading}
                     type="submit"
-                    className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
+                    className="flex-grow cursor-pointer rounded-md bg-black py-2 text-white disabled:opacity-40"
                   >
                     {isLoading ? 'Please wait ..' : 'Send'}
                   </button>
@@ -122,7 +122,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
 
           {isSuccess && (
             <div className="flex w-full flex-col items-center">
-              <CheckIcon additionalClasses="w-16 h-16 text-green-500" />
+              <CheckIcon additionalClasses="w-14 h-14 text-green-500 mt-4" />
               <h1 className="mt-4 text-xl font-semibold text-black sm:text-2xl">
                 Feedback Submitted
               </h1>
@@ -132,7 +132,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
               <button
                 type="button"
                 onClick={handleClosePopup}
-                className="mt-8 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+                className="mt-4 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 Close
               </button>