From ac8add8c5d801a621270165633eed79199bd3ddd Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Wed, 6 Nov 2024 22:53:21 -0500
Subject: [PATCH] small improvement

---
 components/IconPopover.tsx    | 184 +++++++++++++++++-----------------
 public/locales/en/common.json |   2 +-
 2 files changed, 94 insertions(+), 92 deletions(-)

diff --git a/components/IconPopover.tsx b/components/IconPopover.tsx
index 878cc32..6b13d21 100644
--- a/components/IconPopover.tsx
+++ b/components/IconPopover.tsx
@@ -39,103 +39,105 @@ const IconPopover = ({
       onClose={() => onClose()}
       className={clsx(
         className,
-        "fade-in bg-base-200 border border-neutral-content p-2 w-[22.5rem] rounded-lg shadow-md"
+        "fade-in bg-base-200 border border-neutral-content p-3 w-[22.5rem] rounded-lg shadow-md"
       )}
     >
-      <div className="flex gap-2 h-full w-full">
-        <div className="flex flex-col gap-2 w-full">
-          <TextInput
-            className="p-2 rounded w-full h-7 text-sm"
-            placeholder={t("search")}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
+      <div className="flex flex-col gap-3 w-full h-full">
+        <TextInput
+          className="p-2 rounded w-full h-7 text-sm"
+          placeholder={t("search")}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+
+        <div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
+          <IconGrid
+            query={query}
+            color={color}
+            weight={weight}
+            iconName={iconName}
+            setIconName={setIconName}
+          />
+        </div>
+
+        <div className="flex gap-3 color-picker w-full justify-between">
+          <HexColorPicker
+            color={color}
+            onChange={(e) => setColor(e)}
+            className="border border-neutral-content rounded-lg"
           />
 
-          <div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
-            <IconGrid
-              query={query}
-              color={color}
-              weight={weight}
-              iconName={iconName}
-              setIconName={setIconName}
-            />
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="regular"
+                checked={weight === "regular"}
+                onChange={() => setWeight("regular")}
+              />
+              {t("regular")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="thin"
+                checked={weight === "thin"}
+                onChange={() => setWeight("thin")}
+              />
+              {t("thin")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="light"
+                checked={weight === "light"}
+                onChange={() => setWeight("light")}
+              />
+              {t("light_icon")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="bold"
+                checked={weight === "bold"}
+                onChange={() => setWeight("bold")}
+              />
+              {t("bold")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="fill"
+                checked={weight === "fill"}
+                onChange={() => setWeight("fill")}
+              />
+              {t("fill")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="duotone"
+                checked={weight === "duotone"}
+                onChange={() => setWeight("duotone")}
+              />
+              {t("duotone")}
+            </label>
           </div>
-
-          <div className="flex gap-2 color-picker w-full">
-            <HexColorPicker color={color} onChange={(e) => setColor(e)} />
-
-            <div className="grid grid-cols-2 gap-1 text-sm">
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="radio"
-                  className="radio radio-primary mr-2"
-                  value="regular"
-                  checked={weight === "regular"}
-                  onChange={() => setWeight("regular")}
-                />
-                {t("regular")}
-              </label>
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="radio"
-                  className="radio radio-primary mr-2"
-                  value="thin"
-                  checked={weight === "thin"}
-                  onChange={() => setWeight("thin")}
-                />
-                {t("thin")}
-              </label>
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="radio"
-                  className="radio radio-primary mr-2"
-                  value="light"
-                  checked={weight === "light"}
-                  onChange={() => setWeight("light")}
-                />
-                {t("light_icon")}
-              </label>
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="radio"
-                  className="radio radio-primary mr-2"
-                  value="bold"
-                  checked={weight === "bold"}
-                  onChange={() => setWeight("bold")}
-                />
-                {t("bold")}
-              </label>
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="radio"
-                  className="radio radio-primary mr-2"
-                  value="fill"
-                  checked={weight === "fill"}
-                  onChange={() => setWeight("fill")}
-                />
-                {t("fill")}
-              </label>
-              <label className="flex items-center cursor-pointer">
-                <input
-                  type="radio"
-                  className="radio radio-primary mr-2"
-                  value="duotone"
-                  checked={weight === "duotone"}
-                  onChange={() => setWeight("duotone")}
-                />
-                {t("duotone")}
-              </label>
-            </div>
-          </div>
-          <div className="flex flex-col-reverse gap-2 justify-between items-center mt-2">
-            <p className="text-neutral text-sm">{t("close_to_apply")}</p>
-            <div
-              className="btn btn-ghost btn-sm w-fit"
-              onClick={reset as React.MouseEventHandler<HTMLDivElement>}
-            >
-              {t("reset_defaults")}
-            </div>
+        </div>
+        <div className="flex flex-row gap-2 justify-between items-center mt-2">
+          <div
+            className="btn btn-ghost btn-xs w-fit"
+            onClick={reset as React.MouseEventHandler<HTMLDivElement>}
+          >
+            {t("reset_defaults")}
           </div>
+          <p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
         </div>
       </div>
     </Popover>
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 3334acc..936059d 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -417,5 +417,5 @@
   "remove_user": "Remove User",
   "continue_to_dashboard": "Continue to Dashboard",
   "confirm_user_removal_desc": "They will need to have a subscription to access Linkwarden again.",
-  "close_to_apply": "Close to apply"
+  "click_out_to_apply": "Click outside to apply"
 }
\ No newline at end of file