small improvement

components/IconPopover.tsx

@@ -39,11 +39,10 @@ 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">
+      <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")}
@@ -61,10 +60,14 @@ const IconPopover = ({
           />
         </div>
 
-          <div className="flex gap-2 color-picker w-full">
-            <HexColorPicker color={color} onChange={(e) => setColor(e)} />
+        <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-2 gap-1 text-sm">
+          <div className="grid grid-cols-2 gap-3 text-sm">
             <label className="flex items-center cursor-pointer">
               <input
                 type="radio"
@@ -127,15 +130,14 @@ const IconPopover = ({
             </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="flex flex-row gap-2 justify-between items-center mt-2">
           <div
-              className="btn btn-ghost btn-sm w-fit"
+            className="btn btn-ghost btn-xs w-fit"
             onClick={reset as React.MouseEventHandler<HTMLDivElement>}
           >
             {t("reset_defaults")}
           </div>
-          </div>
+          <p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
         </div>
       </div>
     </Popover>

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"
 }