leaflet.pub
a tool for shared writing and social publishing
add hover state to interaction buttons in post listing
cozylittle.house
+7
-11
+5
-9
components/InteractionsPreview.tsx
+5
-9
components/InteractionsPreview.tsx
···
40
40
<SpeedyLink
41
41
aria-label="Post quotes"
42
42
href={`${props.postUrl}?interactionDrawer=quotes`}
43
-
className="flex flex-row gap-1 text-sm text-tertiary items-center"
43
+
className="flex flex-row gap-1 text-sm items-center text-accent-contrast!"
44
44
>
45
45
<QuoteTiny /> {props.quotesCount}
46
46
</SpeedyLink>
···
49
49
<SpeedyLink
50
50
aria-label="Post comments"
51
51
href={`${props.postUrl}?interactionDrawer=comments`}
52
-
className="flex flex-row gap-1 text-sm text-tertiary items-center"
52
+
className="relative flex flex-row gap-1 text-sm items-center hover:text-accent-contrast hover:no-underline! text-tertiary"
53
53
>
54
54
<CommentTiny /> {props.commentsCount}
55
55
</SpeedyLink>
···
61
61
<>
62
62
<button
63
63
id={`copy-post-link-${props.postUrl}`}
64
-
className="flex gap-1 items-center hover:font-bold relative"
64
+
className="flex gap-1 items-center hover:text-accent-contrast relative"
65
65
onClick={(e) => {
66
66
e.stopPropagation();
67
67
e.preventDefault();
···
92
92
return (
93
93
<Popover
94
94
className="p-2! max-w-xs"
95
-
asChild
96
95
trigger={
97
-
<button
98
-
aria-label="Post tags"
99
-
className="relative flex gap-1 items-center "
100
-
>
96
+
<div className="relative flex gap-1 items-center hover:text-accent-contrast ">
101
97
<TagTiny /> {props.tags.length}
102
-
</button>
98
+
</div>
103
99
}
104
100
>
105
101
<TagList tags={props.tags} className="text-secondary!" />
+2
-2
components/Tags.tsx
+2
-2
components/Tags.tsx
···
40
40
setSelectedTags: (tags: string[]) => void;
41
41
}) => {
42
42
return (
43
-
<div className="flex flex-col gap-2">
43
+
<div className="flex flex-col gap-2 text-primary">
44
44
<TagSearchInput
45
45
selectedTags={props.selectedTags}
46
46
setSelectedTags={props.setSelectedTags}
···
174
174
document.getElementById("tag-search-input")?.focus();
175
175
}, 100);
176
176
}}
177
-
className="w-full p-2! min-w-xs"
177
+
className="w-full p-2! min-w-xs text-primary"
178
178
sideOffset={-39}
179
179
onOpenAutoFocus={(e) => e.preventDefault()}
180
180
asChild