etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): implement Bento Grid design system

Browse Source 
- Add Urbanist font (replace Inter)
- Add CSS variables: --bento-radius, --bento-gap, --bento-padding
- Add Tailwind extend: rounded-bento, rounded-4xl, spacing.bento
- Create BentoCard component with size variants (sm/md/lg/xl)
- Add .bento-card, .bento-card-hover, .bento-card-glow classes
- Add .bento-grid container with responsive columns
- Implement floating TabBar (margin 16px, shadow, pill active state)
- Apply bento styles to Dashboard cards
- Support both dark and light themes
This commit is contained in:
Dev
2026-01-20 21:10:20 +05:00
parent 9b0f5060dd
commit 6d88bac693
5 changed files with 380 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/Dashboard.tsx
View File

@@ -254,7 +254,7 @@ export default function Dashboard() {
{/* Subscription Status - Main Card */}
{subscription && (
<div className="card">
<div className="bento-card">
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold text-dark-100">{t('subscription.status')}</h2>
<span className={subscription.is_active ? 'badge-success' : 'badge-error'}>
@@ -336,9 +336,9 @@ export default function Dashboard() {
)}
{/* Stats Grid */}
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bento-grid">
{/* Balance */}
<Link to="/balance" className="card-hover group" data-onboarding="balance">
<Link to="/balance" className="bento-card-hover group" data-onboarding="balance">
<div className="flex items-center justify-between mb-3">
<span className="text-dark-400 text-sm">{t('balance.currentBalance')}</span>
<span className="text-dark-600 group-hover:text-accent-400 transition-colors">
@@ -352,7 +352,7 @@ export default function Dashboard() {
</Link>
{/* Subscription */}
<Link to="/subscription" className="card-hover group" data-onboarding="subscription-status">
<Link to="/subscription" className="bento-card-hover group" data-onboarding="subscription-status">
<div className="flex items-center justify-between mb-3">
<span className="text-dark-400 text-sm">{t('subscription.title')}</span>
<span className="text-dark-600 group-hover:text-accent-400 transition-colors">
@@ -388,7 +388,7 @@ export default function Dashboard() {
</Link>
{/* Referrals */}
<Link to="/referral" className="card-hover group">
<Link to="/referral" className="bento-card-hover group">
<div className="flex items-center justify-between mb-3">
<span className="text-dark-400 text-sm">{t('referral.stats.totalReferrals')}</span>
<span className="text-dark-600 group-hover:text-accent-400 transition-colors">
@@ -403,7 +403,7 @@ export default function Dashboard() {
</Link>
{/* Earnings */}
<Link to="/referral" className="card-hover group">
<Link to="/referral" className="bento-card-hover group">
<div className="flex items-center justify-between mb-3">
<span className="text-dark-400 text-sm">{t('referral.stats.totalEarnings')}</span>
<span className="text-dark-600 group-hover:text-accent-400 transition-colors">
@@ -422,7 +422,7 @@ export default function Dashboard() {
{/* Trial Activation */}
{hasNoSubscription && !trialLoading && trialInfo?.is_available && (
<div className="card border-accent-500/30 bg-gradient-to-br from-accent-500/5 to-transparent">
<div className="bento-card-glow border-accent-500/30 bg-gradient-to-br from-accent-500/5 to-transparent">
<div className="flex items-start gap-4">
<div className="w-12 h-12 rounded-xl bg-accent-500/20 flex items-center justify-center flex-shrink-0">
<SparklesIcon />
@@ -483,7 +483,7 @@ export default function Dashboard() {
{wheelConfig?.is_enabled && (
<Link
to="/wheel"
className="group card-hover flex items-center justify-between"
className="group bento-card-hover flex items-center justify-between"
>
<div className="flex items-center gap-4">
{/* Emoji */}
@@ -504,7 +504,7 @@ export default function Dashboard() {
)}
{/* Quick Actions */}
<div className="card" data-onboarding="quick-actions">
<div className="bento-card" data-onboarding="quick-actions">
<h3 className="text-lg font-semibold text-dark-100 mb-4">{t('dashboard.quickActions')}</h3>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
<Link to="/balance" className="btn-secondary justify-center text-center text-sm py-2.5">