feat: entry item active styles

RSSNext · Jun 1, 2024 · e6038f0 · e6038f0
1 parent 245eab3
commit e6038f0
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -1,4 +1,5 @@
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
+import { views } from "@renderer/lib/constants"
 import { showNativeMenu } from "@renderer/lib/native-menu"
 import { cn } from "@renderer/lib/utils"
 import { apiClient } from "@renderer/queries/api-fetch"
@@ -48,7 +49,8 @@ export function EntryItemWrapper({
       key={entry.entries.id}
       className={cn(
         "rounded-md transition-colors",
-        activeEntry === entry.entries.id && "bg-native-active/40",
+        !views[view || 0].wideMode && activeEntry === entry.entries.id && "bg-native-active/40",
+        views[view || 0].wideMode && !views[view || 0].gridMode && "hover:bg-native-active/30",
         entry.read ? "text-zinc-600 opacity-85" : "text-zinc-900 dark:text-white/90",
       )}
       // ref={ref}

diff --git a/src/renderer/src/components/entry-column/picture-item.tsx b/src/renderer/src/components/entry-column/picture-item.tsx
@@ -12,7 +12,7 @@ export function PictureItem({ entryId, entryPreview }: UniversalItemProps) {
   return (
     <div>
       <div>
-        <div className="flex gap-2 overflow-x-auto">
+        <div className="flex gap-2 overflow-x-auto relative after:rounded-md after:absolute after:transition-colors after:inset-0 hover:after:bg-black/25">
           {entry.entries.images?.slice(0, 1).map((image) => (
             <Image
               key={image}

diff --git a/src/renderer/src/components/entry-column/video-item.tsx b/src/renderer/src/components/entry-column/video-item.tsx
@@ -12,7 +12,7 @@ export function VideoItem({ entryId, entryPreview }: UniversalItemProps) {
   return (
     <div className="flex">
       <div className="w-full">
-        <div className="flex gap-2 overflow-x-auto">
+        <div className="flex gap-2 overflow-x-auto relative after:rounded-md after:absolute after:transition-colors after:inset-0 hover:after:bg-black/25">
           <Image
             key={entry.entries.images?.[0]}
             src={entry.entries.images?.[0]}