Styling Improvements (#41)

* refactor: update Skeleton component styles for better responsiveness

* refactor: comment out title elements and update TabsList styling for consistency

---------

Co-authored-by: highperfocused <highperfocused@pm.me>
This commit is contained in:
mroxso
2025-04-20 22:17:26 +02:00
committed by GitHub
parent 5d146adf20
commit 0857d4a7ab
4 changed files with 31 additions and 31 deletions

View File

@@ -40,9 +40,9 @@ export default function FeedPage() {
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="py-4 px-2 md:py-6 md:px-6">
<h2 className="text-2xl font-bold mb-4 px-2 md:px-4">Follower Feed</h2>
{/* <h2 className="text-2xl font-bold mb-4 px-2 md:px-4">Follower Feed</h2> */}
<Tabs defaultValue="QuickView">
<TabsList className="mb-4">
<TabsList className="mb-4 w-full grid grid-cols-2">
<TabsTrigger value="QuickView"><GridIcon /></TabsTrigger>
<TabsTrigger value="ProfileFeed"><SectionIcon /></TabsTrigger>
</TabsList>

View File

@@ -14,9 +14,9 @@ export default function GlobalFeedPage() {
return (
<div className="py-4 px-2 md:py-6 md:px-6">
<h2 className="text-2xl font-bold mb-4">Global Feed</h2>
{/* <h2 className="text-2xl font-bold mb-4">Global Feed</h2> */}
<Tabs defaultValue="GlobalQuickViewFeed">
<TabsList className="mb-4">
<TabsList className="mb-4 w-full grid grid-cols-2">
<TabsTrigger value="GlobalQuickViewFeed"><GridIcon /></TabsTrigger>
<TabsTrigger value="GlobalFeed"><SectionIcon /></TabsTrigger>
</TabsList>

View File

@@ -45,23 +45,23 @@ const FollowerQuickViewFeed: React.FC<FollowerQuickViewFeedProps> = ({ pubkey })
<div className="grid grid-cols-3 gap-2">
{events.length === 0 && isLoading ? (
<>
<div>
<Skeleton className="h-[33vh] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[33vh] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[33vh] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[33vh] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[33vh] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[33vh] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
</>
) : (

View File

@@ -30,14 +30,14 @@ const ProfileQuickViewFeed: React.FC<ProfileQuickViewFeedProps> = ({ pubkey }) =
<div className="grid grid-cols-3 gap-2">
{events.length === 0 && isLoading ? (
<>
<div>
<Skeleton className="h-[125px] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[125px] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
<div>
<Skeleton className="h-[125px] rounded-xl" />
<div className="aspect-square w-full">
<Skeleton className="h-full w-full rounded-xl" />
</div>
</>
) : events.some(event => getImageUrl(event.tags)) ? (
@@ -45,15 +45,15 @@ const ProfileQuickViewFeed: React.FC<ProfileQuickViewFeedProps> = ({ pubkey }) =
{events.map((event) => {
const imageUrl = getImageUrl(event.tags);
return imageUrl ? (
<QuickViewKind20NoteCard
key={event.id}
pubkey={event.pubkey}
text={event.content}
image={imageUrl}
event={event}
tags={event.tags}
eventId={event.id}
linkToNote={true}
<QuickViewKind20NoteCard
key={event.id}
pubkey={event.pubkey}
text={event.content}
image={imageUrl}
event={event}
tags={event.tags}
eventId={event.id}
linkToNote={true}
/>
) : null;
})}