fix: action styles in memo editor

web/src/components/MemoEditor/ActionButton/LocationSelector.tsx

@@ -86,31 +86,27 @@ const LocationSelector = (props: Props) => {
     setState({ ...state, position });
   };
 
-  const removeLocation = () => {
+  const removeLocation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
     props.onChange(undefined);
   };
 
   return (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
-      {props.location ? (
-        <div className="flex items-center">
-          <PopoverTrigger asChild>
-            <Button variant="ghost" className="rounded-r-none">
-              <MapPinIcon className="size-5 shrink-0" />
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size={props.location ? undefined : "icon"}>
+          <MapPinIcon className="size-5 shrink-0" />
+          {props.location && (
+            <>
               <span className="ml-0.5 text-sm text-ellipsis whitespace-nowrap overflow-hidden max-w-28">{props.location.placeholder}</span>
-            </Button>
-          </PopoverTrigger>
-          <Button variant="ghost" size="icon" className="rounded-l-none opacity-60 hover:opacity-80" onClick={removeLocation}>
-            <XIcon className="size-4 shrink-0" />
-          </Button>
-        </div>
-      ) : (
-        <PopoverTrigger asChild>
-          <Button variant="ghost" size="icon">
-            <MapPinIcon className="size-5 shrink-0" />
-          </Button>
-        </PopoverTrigger>
-      )}
+              <span className="cursor-pointer hover:text-primary" onClick={removeLocation}>
+                <XIcon className="size-4 shrink-0" />
+              </span>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
       <PopoverContent align="center">
         <div className="min-w-80 sm:w-lg p-1 flex flex-col justify-start items-start">
           <LeafletMap key={JSON.stringify(state.initilized)} latlng={state.position} onChange={onPositionChanged} />

web/src/components/Settings/MemoRelatedSettings.tsx

@@ -125,10 +125,12 @@ const MemoRelatedSettings = observer(() => {
             return (
               <Badge key={reactionType} variant="outline" className="flex items-center gap-1">
                 {reactionType}
-                <X
-                  className="w-3 h-3 cursor-pointer hover:text-destructive"
+                <span
+                  className="cursor-pointer text-muted-foreground hover:text-primary"
                   onClick={() => updatePartialSetting({ reactions: memoRelatedSetting.reactions.filter((r) => r !== reactionType) })}
-                />
+                >
+                  <X className="w-4 h-4" />
+                </span>
               </Badge>
             );
           })}
@@ -139,7 +141,9 @@ const MemoRelatedSettings = observer(() => {
               value={editingReaction}
               onChange={(event) => setEditingReaction(event.target.value.trim())}
             />
-            <CheckIcon className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertReaction()} />
+            <span className="text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertReaction()}>
+              <CheckIcon className="w-5 h-5" />
+            </span>
           </div>
         </div>
       </div>
@@ -156,10 +160,12 @@ const MemoRelatedSettings = observer(() => {
             return (
               <Badge key={nsfwTag} variant="outline" className="flex items-center gap-1">
                 {nsfwTag}
-                <X
-                  className="w-3 h-3 cursor-pointer hover:text-destructive"
+                <span
+                  className="cursor-pointer text-muted-foreground hover:text-primary"
                   onClick={() => updatePartialSetting({ nsfwTags: memoRelatedSetting.nsfwTags.filter((r) => r !== nsfwTag) })}
-                />
+                >
+                  <X className="w-4 h-4" />
+                </span>
               </Badge>
             );
           })}
@@ -170,7 +176,9 @@ const MemoRelatedSettings = observer(() => {
               value={editingNsfwTag}
               onChange={(event) => setEditingNsfwTag(event.target.value.trim())}
             />
-            <CheckIcon className="w-5 h-5 text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertNsfwTags()} />
+            <span className="text-muted-foreground cursor-pointer hover:text-primary" onClick={() => upsertNsfwTags()}>
+              <CheckIcon className="w-5 h-5" />
+            </span>
           </div>
         </div>
       </div>