wmj/falah-mobile
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile-first UI redesign - bump all text to 12px+, 44px+ touch targets, reduced content density

Browse Source
This commit is contained in:
root
2026-06-15 11:07:41 +02:00
parent e479df82e2
commit 8f0ff9d47a
16 changed files with 192 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BottomNav.tsx
+26 -16
View File
@@ -24,11 +24,13 @@ export default function BottomNav() {
const pathname = usePathname();
return (
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0f]/95 backdrop-blur-md border-t border-gray-800/60"
style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)", height: "calc(64px + env(safe-area-inset-bottom, 0px))" }}>
<div className="flex items-stretch h-16 max-w-lg mx-auto">
<nav
className="fixed bottom-0 left-0 right-0 z-50 bg-[#0a0a0f]/95 backdrop-blur-md border-t border-gray-800/60 safe-area-bottom"
style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}
>
<div className="flex items-stretch h-14 max-w-lg mx-auto">
{navItems.map((item) => {
const isActive = pathname === item.href || pathname.startsWith(item.href + "/");
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href + "/"));
const Icon = item.icon;
const isHome = item.isHome;
@@ -39,13 +41,15 @@ export default function BottomNav() {
href="/"
className="flex-1 flex items-center justify-center"
>
<div className={`w-10 h-10 rounded-full flex items-center justify-center transition-all ${
pathname === "/"
? "bg-[#D4AF37] text-[#0a0a0f]"
: "bg-gray-800/60 text-gray-500"
}`}>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<div
className={`w-11 h-11 rounded-full flex items-center justify-center transition-all ${
pathname === "/"
? "bg-[#D4AF37] text-[#0a0a0f] shadow-[0_0_12px_rgba(212,175,55,0.3)]"
: "bg-gray-800/60 text-gray-500"
}`}
>
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
</svg>
</div>
</Link>
@@ -56,19 +60,25 @@ export default function BottomNav() {
<Link
key={item.href}
href={item.href}
className="flex-1 flex flex-col items-center justify-center gap-0.5 transition-opacity active:opacity-60"
className="flex-1 flex flex-col items-center justify-center gap-0.5 active:opacity-60 transition-opacity relative"
>
{Icon && (
<Icon
size={20}
size={22}
className={isActive ? "text-[#D4AF37]" : "text-gray-600"}
/>
)}
<span className={`text-[10px] font-medium ${
isActive ? "text-[#D4AF37]" : "text-gray-600"
}`}>
<span
className={`text-xs font-medium ${
isActive ? "text-[#D4AF37]" : "text-gray-600"
}`}
>
{item.label}
</span>
{/* Active indicator */}
{isActive && (
<div className="absolute -top-0.5 left-1/2 -translate-x-1/2 w-5 h-0.5 rounded-full bg-[#D4AF37]" />
)}
</Link>
);
})}
src/components/NotificationPanel.tsx
+1 -1
View File
@@ -205,7 +205,7 @@ export default function NotificationPanel({
>
{notif.title}
</p>
<span className="text-[10px] text-gray-500 whitespace-nowrap mt-0.5">
<span className="text-xs text-gray-500 whitespace-nowrap mt-0.5">
{timeAgo(notif.createdAt)}
</span>
</div>
src/components/PremiumBadge.tsx
+2 -2
View File
@@ -9,8 +9,8 @@ interface PremiumBadgeProps {
export default function PremiumBadge({ tier, size = "sm" }: PremiumBadgeProps) {
const sizeMap = {
sm: { px: "px-1.5 py-0.5", text: "text-[9px]", icon: 8, gap: "gap-0.5" },
md: { px: "px-2 py-0.5", text: "text-[10px]", icon: 10, gap: "gap-1" },
sm: { px: "px-1.5 py-0.5", text: "text-[10px]", icon: 8, gap: "gap-0.5" },
md: { px: "px-2 py-0.5", text: "text-xs", icon: 10, gap: "gap-1" },
lg: { px: "px-2.5 py-1", text: "text-xs", icon: 12, gap: "gap-1" },
};