Commit 01761ad6 authored by Mahmoud Aglan's avatar Mahmoud Aglan

fix: darker background, brighter borders, px-7 margins for real inset

Background darkened to #06060E, surface-1 bumped to #141420 for
visible card contrast. Borders brightened to #32324E. All pages
use px-7 (28px) side margins. Cards use full border opacity.
Co-Authored-By: 's avatarClaude Opus 4.6 <noreply@anthropic.com>
parent 588975c5
...@@ -11,7 +11,7 @@ interface CardProps { ...@@ -11,7 +11,7 @@ interface CardProps {
export function Card({ children, className = '', glow = false, onClick }: CardProps) { export function Card({ children, className = '', glow = false, onClick }: CardProps) {
return ( return (
<motion.div <motion.div
className={`rounded-2xl bg-surface-1 border border-border/80 p-5 ${glow ? 'border-gold/50 shadow-[0_0_20px_rgba(212,168,67,0.12)]' : ''} ${onClick ? 'cursor-pointer active:scale-[0.98]' : ''} ${className}`} className={`rounded-2xl bg-surface-1 border border-border p-5 ${glow ? 'border-gold/50 shadow-[0_0_20px_rgba(212,168,67,0.15)]' : ''} ${onClick ? 'cursor-pointer active:scale-[0.98]' : ''} ${className}`}
whileHover={onClick ? { y: -2, boxShadow: '0 8px 30px rgba(212,168,67,0.12)' } : undefined} whileHover={onClick ? { y: -2, boxShadow: '0 8px 30px rgba(212,168,67,0.12)' } : undefined}
whileTap={onClick ? { scale: 0.98 } : undefined} whileTap={onClick ? { scale: 0.98 } : undefined}
onClick={onClick} onClick={onClick}
......
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
--color-background: #0A0A14; --color-background: #06060E;
--color-surface-1: #12121F; --color-surface-1: #141420;
--color-surface-2: #1A1A2E; --color-surface-2: #1C1C30;
--color-surface-3: #242438; --color-surface-3: #26263C;
--color-border: #2A2A4A; --color-border: #32324E;
--color-border-gold: rgba(212, 168, 67, 0.2); --color-border-gold: rgba(212, 168, 67, 0.25);
--color-gold: #D4A843; --color-gold: #D4A843;
--color-gold-light: #E8C55A; --color-gold-light: #E8C55A;
......
...@@ -47,7 +47,7 @@ export function BotSelectPage() { ...@@ -47,7 +47,7 @@ export function BotSelectPage() {
} }
return ( return (
<PageTransition className="px-6 py-7 flex flex-col gap-6 pb-36"> <PageTransition className="px-7 py-7 flex flex-col gap-6 pb-36">
{/* Header */} {/* Header */}
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<motion.button <motion.button
......
...@@ -20,7 +20,7 @@ export function HomePage() { ...@@ -20,7 +20,7 @@ export function HomePage() {
const todayTip = dailyTips[new Date().getDay()] const todayTip = dailyTips[new Date().getDay()]
return ( return (
<PageTransition className="px-6 py-7 flex flex-col gap-8"> <PageTransition className="px-7 py-7 flex flex-col gap-8">
{profile && ( {profile && (
<motion.div <motion.div
className="flex items-center gap-4" className="flex items-center gap-4"
...@@ -71,7 +71,7 @@ export function HomePage() { ...@@ -71,7 +71,7 @@ export function HomePage() {
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<motion.button <motion.button
onClick={() => navigate('/bot-select')} onClick={() => navigate('/bot-select')}
className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border/60" className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border"
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }} transition={{ delay: 0.3 }}
...@@ -88,7 +88,7 @@ export function HomePage() { ...@@ -88,7 +88,7 @@ export function HomePage() {
<motion.button <motion.button
onClick={() => navigate('/friends')} onClick={() => navigate('/friends')}
className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border/60" className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border"
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }} transition={{ delay: 0.4 }}
...@@ -106,7 +106,7 @@ export function HomePage() { ...@@ -106,7 +106,7 @@ export function HomePage() {
<div> <div>
<h3 className="text-sm font-bold mb-4 text-text-muted">اخر المباريات</h3> <h3 className="text-sm font-bold mb-4 text-text-muted">اخر المباريات</h3>
<div className="flex flex-col items-center py-10 gap-4 rounded-2xl bg-surface-1 border border-border/60"> <div className="flex flex-col items-center py-10 gap-4 rounded-2xl bg-surface-1 border border-border">
<motion.div <motion.div
className="w-14 h-14 rounded-2xl bg-surface-3/60 flex items-center justify-center" className="w-14 h-14 rounded-2xl bg-surface-3/60 flex items-center justify-center"
animate={{ rotate: [0, 3, -3, 0] }} animate={{ rotate: [0, 3, -3, 0] }}
...@@ -128,7 +128,7 @@ export function HomePage() { ...@@ -128,7 +128,7 @@ export function HomePage() {
</div> </div>
</div> </div>
<div className="p-5 rounded-2xl bg-surface-1 border border-border/60 relative overflow-hidden"> <div className="p-5 rounded-2xl bg-surface-1 border border-border relative overflow-hidden">
<div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-gold/6 to-transparent rounded-bl-full" /> <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-gold/6 to-transparent rounded-bl-full" />
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<div className="w-10 h-10 rounded-xl bg-gold/10 flex items-center justify-center flex-shrink-0"> <div className="w-10 h-10 rounded-xl bg-gold/10 flex items-center justify-center flex-shrink-0">
...@@ -151,7 +151,7 @@ function StatCard({ icon, value, label, delay, accent }: { icon: React.ReactNode ...@@ -151,7 +151,7 @@ function StatCard({ icon, value, label, delay, accent }: { icon: React.ReactNode
const borderMap: Record<string, string> = { cyan: 'border-cyan/20', gold: 'border-gold/20', coral: 'border-coral/20' } const borderMap: Record<string, string> = { cyan: 'border-cyan/20', gold: 'border-gold/20', coral: 'border-coral/20' }
return ( return (
<motion.div <motion.div
className={`flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border ${borderMap[accent] || 'border-border/60'}`} className={`flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border ${borderMap[accent] || 'border-border'}`}
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay }} transition={{ delay }}
......
...@@ -28,7 +28,7 @@ export function PlayPage() { ...@@ -28,7 +28,7 @@ export function PlayPage() {
const otherGames = GAMES.filter((g) => g.key !== 'chess') const otherGames = GAMES.filter((g) => g.key !== 'chess')
return ( return (
<PageTransition className="px-6 py-7 flex flex-col gap-7"> <PageTransition className="px-7 py-7 flex flex-col gap-7">
<h1 className="text-xl font-bold">اختر اللعبة</h1> <h1 className="text-xl font-bold">اختر اللعبة</h1>
{/* Chess Hero Card */} {/* Chess Hero Card */}
......
...@@ -26,7 +26,7 @@ export function ProfilePage() { ...@@ -26,7 +26,7 @@ export function ProfilePage() {
: 0 : 0
return ( return (
<PageTransition className="px-6 py-7 flex flex-col gap-6"> <PageTransition className="px-7 py-7 flex flex-col gap-6">
{/* Avatar + Name */} {/* Avatar + Name */}
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment