Mirror/vega
1
0
Fork 0
mirror of https://github.com/hoornet/vega.git synced 2026-07-25 01:38:11 -07:00
Code Issues Packages Projects Releases Wiki Activity

polish: capitalise sidebar labels, rounded avatars, stronger article titles

Browse Source 
- sidebar nav labels Title Case; follows -> People, dm -> Messages
- NoteCard + ArticleCard avatars rounded-sm -> rounded-md
- ArticleCard title 14px/medium -> 15px/semibold; larger tag pills
This commit is contained in:
Jure
2026-05-18 18:17:13 +02:00
parent 2250e2daf6
commit 9051c14205
3 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/article/ArticleCard.tsx
+4 -4
View File
@@ -52,7 +52,7 @@ export const ArticleCard = memo(function ArticleCard({ event }: { event: NDKEven
{/* Text content */}
<div className="flex-1 min-w-0">
{/* Title */}
<h3 className="text-text text-[14px] font-medium leading-snug mb-1 line-clamp-2">
<h3 className="text-text text-[15px] font-semibold leading-snug mb-1.5 line-clamp-2">
{title || "Untitled"}
</h3>
@@ -73,11 +73,11 @@ export const ArticleCard = memo(function ArticleCard({ event }: { event: NDKEven
<img
src={profile.picture}
alt={`${authorName}'s avatar`}
className="w-5 h-5 rounded-sm object-cover"
className="w-5 h-5 rounded-md object-cover"
onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
/>
) : (
<div className="w-5 h-5 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-[9px]">
<div className="w-5 h-5 rounded-md bg-bg-raised border border-border flex items-center justify-center text-text-dim text-[9px]">
{authorName.charAt(0).toUpperCase()}
</div>
)}
@@ -96,7 +96,7 @@ export const ArticleCard = memo(function ArticleCard({ event }: { event: NDKEven
{tags.length > 0 && (
<div className="flex flex-wrap gap-1">
{tags.slice(0, 5).map((tag) => (
<span key={tag} className="px-1.5 py-0 text-[9px] border border-border text-text-dim">
<span key={tag} className="px-2 py-0.5 text-[10px] border border-border text-text-dim rounded-sm">
#{tag}
</span>
))}
src/components/feed/NoteCard.tsx
+2 -2
View File
@@ -86,14 +86,14 @@ export const NoteCard = memo(function NoteCard({ event, focused, onReplyInThread
alt={`${name}'s avatar`}
width={36}
height={36}
className="w-9 h-9 rounded-sm object-cover bg-bg-raised ring-1 ring-transparent hover:ring-accent/40 transition-all"
className="w-9 h-9 rounded-md object-cover bg-bg-raised ring-1 ring-transparent hover:ring-accent/40 transition-all"
loading="lazy"
onError={(e) => {
(e.target as HTMLImageElement).style.display = "none";
}}
/>
) : (
<div className="w-9 h-9 rounded-sm bg-bg-raised border border-border flex items-center justify-center text-text-dim text-xs hover:border-accent/40 transition-colors">
<div className="w-9 h-9 rounded-md bg-bg-raised border border-border flex items-center justify-center text-text-dim text-xs hover:border-accent/40 transition-colors">
{name.charAt(0).toUpperCase()}
</div>
)}
src/components/sidebar/Sidebar.tsx
+16 -16
View File
@@ -9,20 +9,20 @@ import pkg from "../../../package.json";
// Items marked `requiresSigner: true` are hidden in read-only mode
// because they're account-bound and have no useful content without a signer.
const NAV_ITEMS = [
{ id: "feed" as const, label: "feed", icon: "◈" },
{ id: "articles" as const, label: "articles", icon: "☰" },
{ id: "media" as const, label: "media", icon: "▶" },
{ id: "podcasts" as const, label: "podcasts", icon: "🎙" },
{ id: "search" as const, label: "search", icon: "⌕" },
{ id: "bookmarks" as const, label: "bookmarks", icon: "★", requiresSigner: true },
{ id: "dm" as const, label: "messages", icon: "✉", requiresSigner: true },
{ id: "notifications" as const, label: "notifications", icon: "🔔", requiresSigner: true },
{ id: "follows" as const, label: "follows", icon: "👥" },
{ id: "zaps" as const, label: "zaps", icon: "⚡", requiresSigner: true },
{ id: "v4v" as const, label: "v4v", icon: "📡", requiresSigner: true },
{ id: "relays" as const, label: "relays", icon: "⟐" },
{ id: "settings" as const, label: "settings", icon: "⚙" },
{ id: "about" as const, label: "support", icon: "♥" },
{ id: "feed" as const, label: "Feed", icon: "◈" },
{ id: "articles" as const, label: "Articles", icon: "☰" },
{ id: "media" as const, label: "Media", icon: "▶" },
{ id: "podcasts" as const, label: "Podcasts", icon: "🎙" },
{ id: "search" as const, label: "Search", icon: "⌕" },
{ id: "bookmarks" as const, label: "Bookmarks", icon: "★", requiresSigner: true },
{ id: "dm" as const, label: "Messages", icon: "✉", requiresSigner: true },
{ id: "notifications" as const, label: "Notifications", icon: "🔔", requiresSigner: true },
{ id: "follows" as const, label: "People", icon: "👥" },
{ id: "zaps" as const, label: "Zaps", icon: "⚡", requiresSigner: true },
{ id: "v4v" as const, label: "Value 4 Value", icon: "📡", requiresSigner: true },
{ id: "relays" as const, label: "Relays", icon: "⟐" },
{ id: "settings" as const, label: "Settings", icon: "⚙" },
{ id: "about" as const, label: "Support", icon: "♥" },
] as const;
export function Sidebar() {
@@ -57,7 +57,7 @@ export function Sidebar() {
/* Expanded: brand on left, collapse chevron on right */
<>
<div className="flex flex-col">
<span className="text-sm font-bold tracking-widest text-text select-none">VEGA</span>
<span className="text-sm font-bold tracking-[0.2em] text-text select-none">VEGA</span>
<span className="text-text-dim text-[9px] font-mono opacity-50">v{pkg.version}</span>
</div>
<button
@@ -91,7 +91,7 @@ export function Sidebar() {
<span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-accent" />
)}
</span>
{!c && <span>write article</span>}
{!c && <span>Write Article</span>}
{!c && draftCount > 0 && (
<span className="ml-auto text-[10px] bg-accent/20 text-accent px-1.5 py-0.5 rounded-sm">{draftCount}</span>
)}