From dee57326a515d1f1d53a30a8de9d4c287a4af9f5 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 7 Jun 2024 16:09:27 +0530
Subject: [PATCH] [WEB-1535] chore: project logo picker improvement (#4718)

* chore: emoji icon picker improvement

* chore: emoji icon picker improvement
---
 web/components/project/form.tsx | 66 ++++++++++++++++-----------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
index 547aaa61c..e988d395c 100644
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@@ -144,42 +144,40 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
         <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
-            <div className="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90">
-              <Controller
-                control={control}
-                name="logo_props"
-                render={({ field: { value, onChange } }) => (
-                  <CustomEmojiIconPicker
-                    isOpen={isOpen}
-                    handleToggle={(val: boolean) => setIsOpen(val)}
-                    className="flex items-center justify-center"
-                    buttonClassName="flex items-center justify-center"
-                    label={<Logo logo={value} size={28} />}
-                    onChange={(val) => {
-                      let logoValue = {};
+            <Controller
+              control={control}
+              name="logo_props"
+              render={({ field: { value, onChange } }) => (
+                <CustomEmojiIconPicker
+                  isOpen={isOpen}
+                  handleToggle={(val: boolean) => setIsOpen(val)}
+                  className="flex items-center justify-center"
+                  buttonClassName="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-custom-background-90"
+                  label={<Logo logo={value} size={28} />}
+                  onChange={(val) => {
+                    let logoValue = {};
 
-                      if (val?.type === "emoji")
-                        logoValue = {
-                          value: convertHexEmojiToDecimal(val.value.unified),
-                          url: val.value.imageUrl,
-                        };
-                      else if (val?.type === "icon") logoValue = val.value;
+                    if (val?.type === "emoji")
+                      logoValue = {
+                        value: convertHexEmojiToDecimal(val.value.unified),
+                        url: val.value.imageUrl,
+                      };
+                    else if (val?.type === "icon") logoValue = val.value;
 
-                      onChange({
-                        in_use: val?.type,
-                        [val?.type]: logoValue,
-                      });
-                      setIsOpen(false);
-                    }}
-                    defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
-                    defaultOpen={
-                      value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
-                    }
-                    disabled={!isAdmin}
-                  />
-                )}
-              />
-            </div>
+                    onChange({
+                      in_use: val?.type,
+                      [val?.type]: logoValue,
+                    });
+                    setIsOpen(false);
+                  }}
+                  defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
+                  defaultOpen={
+                    value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+                  }
+                  disabled={!isAdmin}
+                />
+              )}
+            />
             <div className="flex flex-col gap-1 truncate text-white">
               <span className="truncate text-lg font-semibold">{watch("name")}</span>
               <span className="flex items-center gap-2 text-sm">