logos-messaging/OpChan
1
0
Fork 0
mirror of https://github.com/logos-messaging/OpChan.git synced 2026-01-05 22:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: zoom in font

Browse Source
This commit is contained in:
Danish Arora 2025-11-20 15:41:29 -05:00
parent 43b033862a
commit 1165cc23c6
No known key found for this signature in database
GPG Key ID: 1C6EF37CDAE1426E
8 changed files with 80 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/src/components/CommentCard.tsx
View File

@ -88,11 +88,10 @@ const CommentCard: React.FC<CommentCardProps> = ({
<div className="border-b border-border/20 py-3 pl-3 pr-2"> <div className="border-b border-border/20 py-3 pl-3 pr-2">
<div className="flex gap-3"> <div className="flex gap-3">
{/* Vote column */} {/* Vote column */}
<div className="flex flex-col items-center gap-0.5 text-xs min-w-[40px]"> <div className="flex flex-col items-center gap-0.5 text-sm min-w-[40px]">
<button <button
className={`hover:text-primary ${ className={`hover:text-primary text-base ${userUpvoted ? 'text-primary' : 'text-muted-foreground'
userUpvoted ? 'text-primary' : 'text-muted-foreground' }`}
}`}
onClick={() => handleVoteComment(true)} onClick={() => handleVoteComment(true)}
disabled={!permissions.canVote} disabled={!permissions.canVote}
title={ title={
@ -101,13 +100,12 @@ const CommentCard: React.FC<CommentCardProps> = ({
> >
▲ ▲
</button> </button>
<span className={`font-mono text-xs ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}> <span className={`font-mono text-sm ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
{score} {score}
</span> </span>
<button <button
className={`hover:text-blue-400 ${ className={`hover:text-blue-400 text-base ${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'
userDownvoted ? 'text-blue-400' : 'text-muted-foreground' }`}
}`}
onClick={() => handleVoteComment(false)} onClick={() => handleVoteComment(false)}
disabled={!permissions.canVote} disabled={!permissions.canVote}
title={ title={
@ -121,12 +119,12 @@ const CommentCard: React.FC<CommentCardProps> = ({
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 min-w-0 text-xs"> <div className="flex-1 min-w-0 text-sm">
{/* Metadata */} {/* Metadata */}
<div className="flex flex-wrap items-center gap-1 text-[11px] text-muted-foreground mb-2"> <div className="flex flex-wrap items-center gap-1 text-xs text-muted-foreground mb-2">
<AuthorDisplay <AuthorDisplay
address={comment.author} address={comment.author}
className="text-[11px]" className="text-xs"
showBadge={false} showBadge={false}
/> />
<span>·</span> <span>·</span>
@ -138,18 +136,18 @@ const CommentCard: React.FC<CommentCardProps> = ({
{commentVotePending && ( {commentVotePending && (
<> <>
<span>·</span> <span>·</span>
<span className="text-yellow-400 text-[10px]">syncing</span> <span className="text-yellow-400 text-xs">syncing</span>
</> </>
)} )}
</div> </div>
{/* Content */} {/* Content */}
<div className="text-xs text-foreground leading-relaxed mb-2 prose prose-invert max-w-none"> <div className="text-sm text-foreground leading-relaxed mb-2 prose prose-invert max-w-none">
<MarkdownRenderer content={comment.content} /> <MarkdownRenderer content={comment.content} />
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex items-center gap-3 text-[11px] text-muted-foreground"> <div className="flex items-center gap-3 text-xs text-muted-foreground">
<button <button
onClick={handleBookmark} onClick={handleBookmark}
disabled={bookmarkLoading} disabled={bookmarkLoading}

30
app/src/components/FeedSidebar.tsx
View File

@ -51,8 +51,8 @@ const FeedSidebar: React.FC = () => {
{/* User Status Card */} {/* User Status Card */}
{currentUser && ( {currentUser && (
<Card className="bg-transparent"> <Card className="bg-transparent">
<CardHeader className="pb-0 border-b-0 text-[11px] tracking-[0.2em] text-muted-foreground"> <CardHeader className="pb-0 border-b-0 text-xs tracking-[0.2em] text-muted-foreground">
<CardTitle className="text-xs uppercase tracking-[0.2em]">Your Status</CardTitle> <CardTitle className="text-sm uppercase tracking-[0.2em]">Your Status</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="space-y-3"> <CardContent className="space-y-3">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@ -60,7 +60,7 @@ const FeedSidebar: React.FC = () => {
<Users className="w-4 h-4" /> <Users className="w-4 h-4" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-sm font-semibold text-foreground"> <div className="text-base font-semibold text-foreground">
{currentUser?.displayName} {currentUser?.displayName}
</div> </div>
<Badge <Badge
@ -92,30 +92,30 @@ const FeedSidebar: React.FC = () => {
{/* Forum Stats */} {/* Forum Stats */}
<Card className="bg-transparent"> <Card className="bg-transparent">
<CardHeader className="pb-0 border-b-0"> <CardHeader className="pb-0 border-b-0">
<CardTitle className="text-xs uppercase tracking-[0.2em] flex items-center gap-2 text-muted-foreground"> <CardTitle className="text-sm uppercase tracking-[0.2em] flex items-center gap-2 text-muted-foreground">
<TrendingUp className="w-4 h-4" /> <TrendingUp className="w-4 h-4" />
Forum Stats Forum Stats
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="pt-2"> <CardContent className="pt-2">
<div className="grid grid-cols-3 gap-4 text-center text-[11px] uppercase tracking-[0.15em]"> <div className="grid grid-cols-3 gap-4 text-center text-xs uppercase tracking-[0.15em]">
<div className="space-y-1"> <div className="space-y-1">
<div className="text-lg font-semibold text-primary"> <div className="text-xl font-semibold text-primary">
{stats.totalCells} {stats.totalCells}
</div> </div>
<div className="text-[10px] text-muted-foreground">Cells</div> <div className="text-xs text-muted-foreground">Cells</div>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<div className="text-lg font-semibold text-primary"> <div className="text-xl font-semibold text-primary">
{stats.totalPosts} {stats.totalPosts}
</div> </div>
<div className="text-[10px] text-muted-foreground">Posts</div> <div className="text-xs text-muted-foreground">Posts</div>
</div> </div>
<div className="space-y-1"> <div className="space-y-1">
<div className="text-lg font-semibold text-primary"> <div className="text-xl font-semibold text-primary">
{stats.totalComments} {stats.totalComments}
</div> </div>
<div className="text-[10px] text-muted-foreground">Comments</div> <div className="text-xs text-muted-foreground">Comments</div>
</div> </div>
</div> </div>
</CardContent> </CardContent>
@ -124,7 +124,7 @@ const FeedSidebar: React.FC = () => {
{/* Trending Cells */} {/* Trending Cells */}
<Card className="bg-transparent"> <Card className="bg-transparent">
<CardHeader className="pb-0 border-b-0"> <CardHeader className="pb-0 border-b-0">
<CardTitle className="text-xs uppercase tracking-[0.2em]"> <CardTitle className="text-sm uppercase tracking-[0.2em]">
Trending Cells Trending Cells
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
@ -142,10 +142,10 @@ const FeedSidebar: React.FC = () => {
generateUniqueFallback={true} generateUniqueFallback={true}
/> />
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="font-semibold text-sm truncate text-foreground"> <div className="font-semibold text-base truncate text-foreground">
{cell.name} {cell.name}
</div> </div>
<div className="text-[10px] text-muted-foreground uppercase tracking-[0.15em]"> <div className="text-xs text-muted-foreground uppercase tracking-[0.15em]">
{cell.postCount} posts • {cell.activeUsers} members {cell.postCount} posts • {cell.activeUsers} members
</div> </div>
</div> </div>
@ -153,7 +153,7 @@ const FeedSidebar: React.FC = () => {
))} ))}
{trendingCells.length === 0 && ( {trendingCells.length === 0 && (
<div className="text-center text-[10px] uppercase tracking-[0.2em] text-muted-foreground py-4"> <div className="text-center text-xs uppercase tracking-[0.2em] text-muted-foreground py-4">
No active cells yet No active cells yet
</div> </div>
)} )}

2
app/src/components/Footer.tsx
View File

@ -5,7 +5,7 @@ const Footer: React.FC = () => {
return ( return (
<footer className="bg-cyber-dark border-t border-border mt-auto"> <footer className="bg-cyber-dark border-t border-border mt-auto">
<div className="max-w-6xl mx-auto px-2 py-2"> <div className="max-w-6xl mx-auto px-2 py-2">
<div className="text-center text-[10px] text-muted-foreground"> <div className="text-center text-xs text-muted-foreground">
<span>© 2025 OPCHAN</span> <span>© 2025 OPCHAN</span>
<span className="mx-1">|</span> <span className="mx-1">|</span>
<Link to="/terms" className="hover:text-foreground">TERMS</Link> <Link to="/terms" className="hover:text-foreground">TERMS</Link>

14
app/src/components/Header.tsx
View File

@ -79,7 +79,7 @@ const Header = () => {
window.location.reload(); // Reload to reset state window.location.reload(); // Reload to reset state
return; return;
} }
// For wallet users, disconnect wallet // For wallet users, disconnect wallet
await disconnect(); await disconnect();
setHasShownWizard(false); // Reset so wizard can show again on next connection setHasShownWizard(false); // Reset so wizard can show again on next connection
@ -111,7 +111,7 @@ const Header = () => {
if ( if (
currentUser?.verificationStatus === currentUser?.verificationStatus ===
EVerificationStatus.ENS_VERIFIED && EVerificationStatus.ENS_VERIFIED &&
delegationInfo?.isValid delegationInfo?.isValid
) { ) {
return <CheckCircle className="w-4 h-4" />; return <CheckCircle className="w-4 h-4" />;
@ -134,7 +134,7 @@ const Header = () => {
<header className="bg-cyber-dark border-b border-border sticky top-0 z-40"> <header className="bg-cyber-dark border-b border-border sticky top-0 z-40">
<div className="max-w-6xl mx-auto px-2 py-2"> <div className="max-w-6xl mx-auto px-2 py-2">
{/* Single Row - Logo, Nav, Status, User */} {/* Single Row - Logo, Nav, Status, User */}
<div className="flex items-center justify-between text-xs gap-2"> <div className="flex items-center justify-between text-sm gap-2">
{/* Logo & Nav */} {/* Logo & Nav */}
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Link to="/" className="font-semibold text-foreground"> <Link to="/" className="font-semibold text-foreground">
@ -169,7 +169,7 @@ const Header = () => {
</div> </div>
{/* Network Status */} {/* Network Status */}
<div className="hidden md:flex items-center gap-2 text-[10px] text-muted-foreground"> <div className="hidden md:flex items-center gap-2 text-xs text-muted-foreground">
<span>{statusMessage}</span> <span>{statusMessage}</span>
{syncStatus === 'syncing' && syncDetail && syncDetail.missing > 0 && ( {syncStatus === 'syncing' && syncDetail && syncDetail.missing > 0 && (
<span className="text-yellow-400">SYNCING ({syncDetail.missing})</span> <span className="text-yellow-400">SYNCING ({syncDetail.missing})</span>
@ -183,11 +183,11 @@ const Header = () => {
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<button className="text-foreground hover:text-primary text-[10px]"> <button className="text-foreground hover:text-primary text-sm">
{currentUser?.displayName} {currentUser?.displayName}
</button> </button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-48 bg-[#050505] border border-border text-xs"> <DropdownMenuContent align="end" className="w-48 bg-[#050505] border border-border text-sm">
<DropdownMenuItem asChild> <DropdownMenuItem asChild>
<Link to="/profile">Profile</Link> <Link to="/profile">Profile</Link>
</DropdownMenuItem> </DropdownMenuItem>
@ -250,7 +250,7 @@ const Header = () => {
) : ( ) : (
<button <button
onClick={handleConnect} onClick={handleConnect}
className="text-primary hover:underline text-[10px]" className="text-primary hover:underline text-sm"
> >
LOGIN LOGIN
</button> </button>

34
app/src/components/PostCard.tsx
View File

@ -66,22 +66,22 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
}; };
return ( return (
<div className="border-b border-border/30 py-1.5 px-2 text-xs"> <div className="border-b border-border/30 py-3 px-4 text-sm">
<div className="flex items-start gap-2"> <div className="flex items-start gap-3">
{/* Inline vote display */} {/* Inline vote display */}
<button <button
className={`${userUpvoted ? 'text-primary' : 'text-muted-foreground'} hover:text-primary`} className={`${userUpvoted ? 'text-primary' : 'text-muted-foreground'} hover:text-primary text-lg`}
onClick={e => handleVote(e, true)} onClick={e => handleVote(e, true)}
disabled={!permissions.canVote} disabled={!permissions.canVote}
title={permissions.canVote ? 'Upvote' : permissions.reasons.vote} title={permissions.canVote ? 'Upvote' : permissions.reasons.vote}
> >
▲ ▲
</button> </button>
<span className={`font-mono text-xs min-w-[2ch] text-center ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}> <span className={`font-mono text-base min-w-[2ch] text-center ${score > 0 ? 'text-primary' : score < 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
{score} {score}
</span> </span>
<button <button
className={`${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400`} className={`${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400 text-lg`}
onClick={e => handleVote(e, false)} onClick={e => handleVote(e, false)}
disabled={!permissions.canVote} disabled={!permissions.canVote}
title={permissions.canVote ? 'Downvote' : permissions.reasons.vote} title={permissions.canVote ? 'Downvote' : permissions.reasons.vote}
@ -91,10 +91,10 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
{/* Content - all inline */} {/* Content - all inline */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex flex-wrap items-baseline gap-1"> <div className="flex flex-wrap items-baseline gap-1.5">
<Link <Link
to={cellName ? `/cell/${post.cellId}` : '#'} to={cellName ? `/cell/${post.cellId}` : '#'}
className="text-primary hover:underline text-[10px]" className="text-primary hover:underline text-sm font-medium"
onClick={e => { onClick={e => {
if (!cellName) e.preventDefault(); if (!cellName) e.preventDefault();
}} }}
@ -102,34 +102,34 @@ const PostCard: React.FC<PostCardProps> = ({ post }) => {
r/{cellName} r/{cellName}
</Link> </Link>
<span className="text-muted-foreground">·</span> <span className="text-muted-foreground">·</span>
<Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium"> <Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium text-lg">
{post.title} {post.title}
</Link> </Link>
<span className="text-muted-foreground text-[10px]"> <span className="text-muted-foreground text-xs">
by {post.author.slice(0, 6)}...{post.author.slice(-4)} by {post.author.slice(0, 6)}...{post.author.slice(-4)}
</span> </span>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<span className="text-muted-foreground text-[10px]"> <span className="text-muted-foreground text-xs">
{formatDistanceToNow(new Date(post.timestamp), { {formatDistanceToNow(new Date(post.timestamp), {
addSuffix: true, addSuffix: true,
})} })}
</span> </span>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-[10px]"> <Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-xs">
{commentCount} {commentCount === 1 ? 'reply' : 'replies'} {commentCount} {commentCount === 1 ? 'reply' : 'replies'}
</Link> </Link>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<button <button
onClick={handleBookmark} onClick={handleBookmark}
disabled={bookmarkLoading} disabled={bookmarkLoading}
className="text-muted-foreground hover:underline text-[10px]" className="text-muted-foreground hover:underline text-xs"
> >
{isBookmarked ? 'unsave' : 'save'} {isBookmarked ? 'unsave' : 'save'}
</button> </button>
{isPending && ( {isPending && (
<> <>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<span className="text-yellow-400 text-[10px]">syncing</span> <span className="text-yellow-400 text-xs">syncing</span>
</> </>
)} )}
</div> </div>

46
app/src/components/PostList.tsx
View File

@ -130,18 +130,18 @@ const PostList = () => {
return ( return (
<div className="w-full mx-auto px-2 py-2 max-w-4xl"> <div className="w-full mx-auto px-2 py-2 max-w-4xl">
<div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-xs"> <div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Link to="/" className="text-primary hover:underline"> <Link to="/" className="text-primary hover:underline">
← Back ← Back
</Link> </Link>
<span className="text-muted-foreground">|</span> <span className="text-muted-foreground">|</span>
<span className="font-semibold text-foreground">r/{cell.name}</span> <span className="font-semibold text-foreground">r/{cell.name}</span>
<span className="text-muted-foreground text-[10px]">{cell.description}</span> <span className="text-muted-foreground text-xs">{cell.description}</span>
</div> </div>
<button <button
onClick={refresh} onClick={refresh}
className="text-muted-foreground hover:text-foreground text-[10px]" className="text-muted-foreground hover:text-foreground text-xs"
> >
refresh refresh
</button> </button>
@ -150,19 +150,19 @@ const PostList = () => {
{canPost && ( {canPost && (
<div className="mb-2 border-b border-border/30 pb-2"> <div className="mb-2 border-b border-border/30 pb-2">
<form onSubmit={handleCreatePost} onKeyDown={handleKeyDown}> <form onSubmit={handleCreatePost} onKeyDown={handleKeyDown}>
<div className="text-[10px] font-semibold mb-1">NEW THREAD</div> <div className="text-xs font-semibold mb-1">NEW THREAD</div>
<Input <Input
placeholder="Title" placeholder="Title"
value={newPostTitle} value={newPostTitle}
onChange={e => setNewPostTitle(e.target.value)} onChange={e => setNewPostTitle(e.target.value)}
className="mb-1 text-xs h-7" className="mb-1 text-sm h-9"
disabled={isCreatingPost} disabled={isCreatingPost}
/> />
<Textarea <Textarea
placeholder="Content" placeholder="Content"
value={newPostContent} value={newPostContent}
onChange={e => setNewPostContent(e.target.value)} onChange={e => setNewPostContent(e.target.value)}
className="text-xs resize-none h-16" className="text-sm resize-none h-20"
disabled={isCreatingPost} disabled={isCreatingPost}
/> />
<div className="flex justify-end mt-1"> <div className="flex justify-end mt-1">
@ -173,7 +173,7 @@ const PostList = () => {
!newPostContent.trim() || !newPostContent.trim() ||
!newPostTitle.trim() !newPostTitle.trim()
} }
className="text-primary hover:underline text-[10px] disabled:opacity-50" className="text-primary hover:underline text-xs disabled:opacity-50"
> >
{isCreatingPost ? 'posting...' : 'post'} {isCreatingPost ? 'posting...' : 'post'}
</button> </button>
@ -195,20 +195,20 @@ const PostList = () => {
</div> </div>
) : ( ) : (
visiblePosts.map((post: ForumPost) => ( visiblePosts.map((post: ForumPost) => (
<div key={post.id} className="border-b border-border/30 py-1.5 text-xs"> <div key={post.id} className="border-b border-border/30 py-3 text-sm">
<div className="flex items-start gap-2"> <div className="flex items-start gap-3">
<button <button
className={`${getPostVoteType(post.id) === 'upvote' ? 'text-primary' : 'text-muted-foreground'} hover:text-primary`} className={`${getPostVoteType(post.id) === 'upvote' ? 'text-primary' : 'text-muted-foreground'} hover:text-primary text-lg`}
onClick={() => handleVotePost(post.id, true)} onClick={() => handleVotePost(post.id, true)}
disabled={!canVote || isVoting} disabled={!canVote || isVoting}
> >
▲ ▲
</button> </button>
<span className={`font-mono text-xs min-w-[2ch] text-center ${(post.upvotes.length - post.downvotes.length) > 0 ? 'text-primary' : 'text-muted-foreground'}`}> <span className={`font-mono text-base min-w-[2ch] text-center ${(post.upvotes.length - post.downvotes.length) > 0 ? 'text-primary' : 'text-muted-foreground'}`}>
{post.upvotes.length - post.downvotes.length} {post.upvotes.length - post.downvotes.length}
</span> </span>
<button <button
className={`${getPostVoteType(post.id) === 'downvote' ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400`} className={`${getPostVoteType(post.id) === 'downvote' ? 'text-blue-400' : 'text-muted-foreground'} hover:text-blue-400 text-lg`}
onClick={() => handleVotePost(post.id, false)} onClick={() => handleVotePost(post.id, false)}
disabled={!canVote || isVoting} disabled={!canVote || isVoting}
> >
@ -216,27 +216,27 @@ const PostList = () => {
</button> </button>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex flex-wrap items-baseline gap-1"> <div className="flex flex-wrap items-baseline gap-1.5">
<Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium"> <Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium text-lg">
{post.title} {post.title}
</Link> </Link>
<span className="text-muted-foreground text-[10px]"> <span className="text-muted-foreground text-xs">
by {post.author.slice(0, 6)}...{post.author.slice(-4)} by {post.author.slice(0, 6)}...{post.author.slice(-4)}
</span> </span>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<span className="text-muted-foreground text-[10px]"> <span className="text-muted-foreground text-xs">
{formatDistanceToNow(post.timestamp, { addSuffix: true })} {formatDistanceToNow(post.timestamp, { addSuffix: true })}
</span> </span>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-[10px]"> <Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-xs">
{commentsByPost[post.id]?.length || 0} comments {commentsByPost[post.id]?.length || 0} comments
</Link> </Link>
{canModerate(cell.id) && !post.moderated && ( {canModerate(cell.id) && !post.moderated && (
<> <>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<button <button
onClick={() => handleModerate(post.id)} onClick={() => handleModerate(post.id)}
className="text-orange-400 hover:underline text-[10px]" className="text-orange-400 hover:underline text-xs"
> >
moderate moderate
</button> </button>
@ -244,10 +244,10 @@ const PostList = () => {
)} )}
{canModerate(cell.id) && post.moderated && ( {canModerate(cell.id) && post.moderated && (
<> <>
<span className="text-muted-foreground text-[10px]">·</span> <span className="text-muted-foreground text-xs">·</span>
<button <button
onClick={() => handleUnmoderate(post.id)} onClick={() => handleUnmoderate(post.id)}
className="text-green-400 hover:underline text-[10px]" className="text-green-400 hover:underline text-xs"
> >
unmoderate unmoderate
</button> </button>

4
app/src/components/RemixBanner.tsx
View File

@ -12,7 +12,7 @@ const RemixBanner = () => {
<div className="max-w-6xl mx-auto px-2 py-2"> <div className="max-w-6xl mx-auto px-2 py-2">
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
{/* Badge */} {/* Badge */}
<div className="flex items-center gap-2 text-[10px]"> <div className="flex items-center gap-2 text-xs">
<div className="flex items-center gap-1 px-2 py-1 border transition-colors border-primary text-primary bg-primary/10"> <div className="flex items-center gap-1 px-2 py-1 border transition-colors border-primary text-primary bg-primary/10">
<Code className="w-3 h-3" /> <Code className="w-3 h-3" />
<span className="hidden sm:inline">DEVS</span> <span className="hidden sm:inline">DEVS</span>
@ -20,7 +20,7 @@ const RemixBanner = () => {
</div> </div>
{/* Message Content */} {/* Message Content */}
<div className="flex-1 text-[10px] text-foreground"> <div className="flex-1 text-xs text-foreground">
<p> <p>
<span className="text-primary font-semibold">BUILD YOUR OWN:</span>{' '} <span className="text-primary font-semibold">BUILD YOUR OWN:</span>{' '}
<span className="text-muted-foreground"> <span className="text-muted-foreground">

6
app/src/pages/FeedPage.tsx
View File

@ -42,7 +42,7 @@ const FeedPage: React.FC = () => {
<div className="page-container"> <div className="page-container">
<div className="w-full mx-auto px-2 py-2 max-w-4xl"> <div className="w-full mx-auto px-2 py-2 max-w-4xl">
{/* Minimal Header */} {/* Minimal Header */}
<div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-xs"> <div className="mb-2 pb-1 border-b border-border/30 flex items-center justify-between text-sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-primary font-semibold">FEED</span> <span className="text-primary font-semibold">FEED</span>
<ModerationToggle /> <ModerationToggle />
@ -52,7 +52,7 @@ const FeedPage: React.FC = () => {
value={sortOption} value={sortOption}
onValueChange={(value: SortOption) => setSortOption(value)} onValueChange={(value: SortOption) => setSortOption(value)}
> >
<SelectTrigger className="w-24 text-[10px] h-6"> <SelectTrigger className="w-24 text-xs h-8">
<SelectValue /> <SelectValue />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -62,7 +62,7 @@ const FeedPage: React.FC = () => {
</Select> </Select>
<button <button
onClick={content.refresh} onClick={content.refresh}
className="text-muted-foreground hover:text-foreground text-[10px]" className="text-muted-foreground hover:text-foreground text-xs"
> >
refresh refresh
</button> </button>