From a5b18cbb72a0d3db5a7fe3b1802f06e714e7fec5 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Sat, 6 Jul 2024 01:02:48 +0800
Subject: [PATCH] misc/make-a-wish-ui-improvement

---
 .../AppLayout/components/WishForm/WishForm.tsx  | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx b/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
index 641230bf2a..bf87d0672a 100644
--- a/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
+++ b/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
@@ -2,7 +2,6 @@ import { useForm } from "react-hook-form";
 import { faRocketchat } from "@fortawesome/free-brands-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
@@ -72,7 +71,7 @@ export const WishForm = () => {
       <PopoverContent
         hideCloseBtn
         align="start"
-        alignOffset={25}
+        alignOffset={20}
         className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
         sticky="always"
       >
@@ -83,23 +82,19 @@ export const WishForm = () => {
             errorText={errors?.text?.message}
           >
             <TextArea
-              className="border border-mineshaft-600 text-sm focus:ring-0"
-              variant="plain"
-              placeholder="Wish for anything! Help us improve the platform"
+              className="border border-mineshaft-600 bg-black/10 text-sm focus:ring-0"
+              variant="outline"
+              placeholder="Wish for anything! Help us improve the platform."
               reSize="none"
               rows={6}
               cols={40}
               {...register("text")}
             />
           </FormControl>
-          <div className="mt-2 flex justify-between border-t border-mineshaft-500 pt-4">
-            <PopoverPrimitive.Close asChild>
-              <Button className="mr-2 w-min" colorSchema="secondary">
-                Cancel
-              </Button>
-            </PopoverPrimitive.Close>
+          <div className="flex justify-end pt-2">
             <Button
               className="w-min"
+              colorSchema="secondary"
               type="submit"
               isLoading={isSubmitting}
               disabled={isSubmitting}