logos-messaging/OpChan
1
0
Fork 0
mirror of https://github.com/logos-messaging/OpChan.git synced 2026-01-02 12:53:10 +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="flex gap-3">
{/* 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
className={`hover:text-primary ${
userUpvoted ? 'text-primary' : 'text-muted-foreground'
}`}
className={`hover:text-primary text-base ${userUpvoted ? 'text-primary' : 'text-muted-foreground'
}`}
onClick={() => handleVoteComment(true)}
disabled={!permissions.canVote}
title={
@ -101,13 +100,12 @@ const CommentCard: React.FC<CommentCardProps> = ({
>
▲
</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}
</span>
<button
className={`hover:text-blue-400 ${
userDownvoted ? 'text-blue-400' : 'text-muted-foreground'
}`}
className={`hover:text-blue-400 text-base ${userDownvoted ? 'text-blue-400' : 'text-muted-foreground'
}`}
onClick={() => handleVoteComment(false)}
disabled={!permissions.canVote}
title={
@ -121,12 +119,12 @@ const CommentCard: React.FC<CommentCardProps> = ({
</div>
{/* Content */}
<div className="flex-1 min-w-0 text-xs">
<div className="flex-1 min-w-0 text-sm">
{/* 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
address={comment.author}
className="text-[11px]"
className="text-xs"
showBadge={false}
/>
<span>·</span>
@ -138,18 +136,18 @@ const CommentCard: React.FC<CommentCardProps> = ({
{commentVotePending && (
<>
<span>·</span>
<span className="text-yellow-400 text-[10px]">syncing</span>
<span className="text-yellow-400 text-xs">syncing</span>
</>
)}
</div>
{/* 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} />
</div>
{/* 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
onClick={handleBookmark}
disabled={bookmarkLoading}

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

@ -51,8 +51,8 @@ const FeedSidebar: React.FC = () => {
{/* User Status Card */}
{currentUser && (
<Card className="bg-transparent">
<CardHeader className="pb-0 border-b-0 text-[11px] tracking-[0.2em] text-muted-foreground">
<CardTitle className="text-xs uppercase tracking-[0.2em]">Your Status</CardTitle>
<CardHeader className="pb-0 border-b-0 text-xs tracking-[0.2em] text-muted-foreground">
<CardTitle className="text-sm uppercase tracking-[0.2em]">Your Status</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center space-x-3">
@ -60,7 +60,7 @@ const FeedSidebar: React.FC = () => {
<Users className="w-4 h-4" />
</div>
<div className="flex-1">
<div className="text-sm font-semibold text-foreground">
<div className="text-base font-semibold text-foreground">
{currentUser?.displayName}
</div>
<Badge
@ -92,30 +92,30 @@ const FeedSidebar: React.FC = () => {
{/* Forum Stats */}
<Card className="bg-transparent">
<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" />
Forum Stats
</CardTitle>
</CardHeader>
<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="text-lg font-semibold text-primary">
<div className="text-xl font-semibold text-primary">
{stats.totalCells}
</div>
<div className="text-[10px] text-muted-foreground">Cells</div>
<div className="text-xs text-muted-foreground">Cells</div>
</div>
<div className="space-y-1">
<div className="text-lg font-semibold text-primary">
<div className="text-xl font-semibold text-primary">
{stats.totalPosts}
</div>
<div className="text-[10px] text-muted-foreground">Posts</div>
<div className="text-xs text-muted-foreground">Posts</div>
</div>
<div className="space-y-1">
<div className="text-lg font-semibold text-primary">
<div className="text-xl font-semibold text-primary">
{stats.totalComments}
</div>
<div className="text-[10px] text-muted-foreground">Comments</div>
<div className="text-xs text-muted-foreground">Comments</div>
</div>
</div>
</CardContent>
@ -124,7 +124,7 @@ const FeedSidebar: React.FC = () => {
{/* Trending Cells */}
<Card className="bg-transparent">
<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
</CardTitle>
</CardHeader>
@ -142,10 +142,10 @@ const FeedSidebar: React.FC = () => {
generateUniqueFallback={true}
/>
<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}
</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
</div>
</div>
@ -153,7 +153,7 @@ const FeedSidebar: React.FC = () => {
))}
{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
</div>
)}

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

@ -5,7 +5,7 @@ const Footer: React.FC = () => {
return (
<footer className="bg-cyber-dark border-t border-border mt-auto">
<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 className="mx-1">|</span>
<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
return;
}
// For wallet users, disconnect wallet
await disconnect();
setHasShownWizard(false); // Reset so wizard can show again on next connection
@ -111,7 +111,7 @@ const Header = () => {
if (
currentUser?.verificationStatus ===
EVerificationStatus.ENS_VERIFIED &&
EVerificationStatus.ENS_VERIFIED &&
delegationInfo?.isValid
) {
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">
<div className="max-w-6xl mx-auto px-2 py-2">
{/* 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 */}
<div className="flex items-center gap-3">
<Link to="/" className="font-semibold text-foreground">
@ -169,7 +169,7 @@ const Header = () => {
</div>
{/* 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>
{syncStatus === 'syncing' && syncDetail && syncDetail.missing > 0 && (
<span className="text-yellow-400">SYNCING ({syncDetail.missing})</span>
@ -183,11 +183,11 @@ const Header = () => {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button className="text-foreground hover:text-primary text-[10px]">
<button className="text-foreground hover:text-primary text-sm">
{currentUser?.displayName}
</button>
</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>
<Link to="/profile">Profile</Link>
</DropdownMenuItem>
@ -250,7 +250,7 @@ const Header = () => {
) : (
<button
onClick={handleConnect}
className="text-primary hover:underline text-[10px]"
className="text-primary hover:underline text-sm"
>
LOGIN
</button>

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

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

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

@ -130,18 +130,18 @@ const PostList = () => {
return (
<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">
<Link to="/" className="text-primary hover:underline">
← Back
</Link>
<span className="text-muted-foreground">|</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>
<button
onClick={refresh}
className="text-muted-foreground hover:text-foreground text-[10px]"
className="text-muted-foreground hover:text-foreground text-xs"
>
refresh
</button>
@ -150,19 +150,19 @@ const PostList = () => {
{canPost && (
<div className="mb-2 border-b border-border/30 pb-2">
<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
placeholder="Title"
value={newPostTitle}
onChange={e => setNewPostTitle(e.target.value)}
className="mb-1 text-xs h-7"
className="mb-1 text-sm h-9"
disabled={isCreatingPost}
/>
<Textarea
placeholder="Content"
value={newPostContent}
onChange={e => setNewPostContent(e.target.value)}
className="text-xs resize-none h-16"
className="text-sm resize-none h-20"
disabled={isCreatingPost}
/>
<div className="flex justify-end mt-1">
@ -173,7 +173,7 @@ const PostList = () => {
!newPostContent.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'}
</button>
@ -195,20 +195,20 @@ const PostList = () => {
</div>
) : (
visiblePosts.map((post: ForumPost) => (
<div key={post.id} className="border-b border-border/30 py-1.5 text-xs">
<div className="flex items-start gap-2">
<div key={post.id} className="border-b border-border/30 py-3 text-sm">
<div className="flex items-start gap-3">
<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)}
disabled={!canVote || isVoting}
>
▲
</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}
</span>
<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)}
disabled={!canVote || isVoting}
>
@ -216,27 +216,27 @@ const PostList = () => {
</button>
<div className="flex-1 min-w-0">
<div className="flex flex-wrap items-baseline gap-1">
<Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium">
<div className="flex flex-wrap items-baseline gap-1.5">
<Link to={`/post/${post.id}`} className="text-foreground hover:underline font-medium text-lg">
{post.title}
</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)}
</span>
<span className="text-muted-foreground text-[10px]">·</span>
<span className="text-muted-foreground text-[10px]">
<span className="text-muted-foreground text-xs">·</span>
<span className="text-muted-foreground text-xs">
{formatDistanceToNow(post.timestamp, { addSuffix: true })}
</span>
<span className="text-muted-foreground text-[10px]">·</span>
<Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-[10px]">
<span className="text-muted-foreground text-xs">·</span>
<Link to={`/post/${post.id}`} className="text-muted-foreground hover:underline text-xs">
{commentsByPost[post.id]?.length || 0} comments
</Link>
{canModerate(cell.id) && !post.moderated && (
<>
<span className="text-muted-foreground text-[10px]">·</span>
<span className="text-muted-foreground text-xs">·</span>
<button
onClick={() => handleModerate(post.id)}
className="text-orange-400 hover:underline text-[10px]"
className="text-orange-400 hover:underline text-xs"
>
moderate
</button>
@ -244,10 +244,10 @@ const PostList = () => {
)}
{canModerate(cell.id) && post.moderated && (
<>
<span className="text-muted-foreground text-[10px]">·</span>
<span className="text-muted-foreground text-xs">·</span>
<button
onClick={() => handleUnmoderate(post.id)}
className="text-green-400 hover:underline text-[10px]"
className="text-green-400 hover:underline text-xs"
>
unmoderate
</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="flex items-center justify-between gap-4">
{/* 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">
<Code className="w-3 h-3" />
<span className="hidden sm:inline">DEVS</span>
@ -20,7 +20,7 @@ const RemixBanner = () => {
</div>
{/* Message Content */}
<div className="flex-1 text-[10px] text-foreground">
<div className="flex-1 text-xs text-foreground">
<p>
<span className="text-primary font-semibold">BUILD YOUR OWN:</span>{' '}
<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="w-full mx-auto px-2 py-2 max-w-4xl">
{/* 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">
<span className="text-primary font-semibold">FEED</span>
<ModerationToggle />
@ -52,7 +52,7 @@ const FeedPage: React.FC = () => {
value={sortOption}
onValueChange={(value: SortOption) => setSortOption(value)}
>
<SelectTrigger className="w-24 text-[10px] h-6">
<SelectTrigger className="w-24 text-xs h-8">
<SelectValue />
</SelectTrigger>
<SelectContent>
@ -62,7 +62,7 @@ const FeedPage: React.FC = () => {
</Select>
<button
onClick={content.refresh}
className="text-muted-foreground hover:text-foreground text-[10px]"
className="text-muted-foreground hover:text-foreground text-xs"
>
refresh
</button>