admin/zapishis-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(pro-page, subscription-bar): enhance dark mode support and improve styling consistency

Browse Source 
- Updated gradient backgrounds in ProPage and SubscriptionInfoBar to support dark mode variations.
- Refactored class names for better conditional styling based on subscription activity.
- Improved text color handling for better readability in both active and inactive states.
This commit is contained in:
vchikalkin 2025-09-02 20:16:57 +03:00
parent da51d45882
commit fd3785a436
2 changed files with 34 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/app/(main)/pro/page.tsx
View File

@ -32,8 +32,8 @@ export default async function ProPage() {
<div className="mx-auto max-w-4xl text-center">
<div className="mb-2 flex justify-center">
<div className="relative">
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl" />
<div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4">
<div className="absolute inset-0 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 opacity-30 blur-xl dark:from-purple-700 dark:to-blue-700" />
<div className="relative rounded-full bg-gradient-to-r from-purple-600 to-blue-600 p-4 dark:from-purple-700 dark:to-blue-700">
<Crown className="size-8 text-white" />
</div>
</div>
@ -41,7 +41,7 @@ export default async function ProPage() {
<h1 className="mb-6 text-4xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-6xl">
Подписка{' '}
<span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
<span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent dark:from-purple-700 dark:to-blue-700">
Pro
</span>
</h1>
@ -59,7 +59,7 @@ export default async function ProPage() {
className={`w-full border-2 text-base font-semibold sm:w-auto ${
canUseTrial
? 'border-gray-300 text-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'
: 'border-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 dark:from-purple-500 dark:to-blue-500 dark:hover:from-purple-600 dark:hover:to-blue-600'
: 'border-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:from-purple-700 hover:to-blue-700 dark:from-purple-700 dark:to-blue-700 dark:hover:from-purple-800 dark:hover:to-blue-800'
}`}
size="lg"
variant={canUseTrial ? 'outline' : 'default'}

35
apps/web/components/profile/subscription-bar.tsx
View File

@ -1,6 +1,7 @@
'use client';
import { useSubscriptionQuery } from '@/hooks/api/subscriptions';
import { cn } from '@repo/ui/lib/utils';
import { getRemainingDays } from '@repo/utils/datetime-format';
import { ChevronRight } from 'lucide-react';
import Link from 'next/link';
@ -30,14 +31,38 @@ export function SubscriptionInfoBar() {
return (
<Link href="/pro" rel="noopener noreferrer">
<div className="px-4">
<div className="flex w-full flex-col justify-center rounded-2xl bg-background p-4 px-6 shadow-lg backdrop-blur-2xl dark:bg-primary/5">
<div
className={cn(
'flex w-full flex-col justify-center rounded-2xl p-4 px-6 shadow-lg backdrop-blur-2xl',
isActive
? 'bg-gradient-to-r from-purple-600 to-blue-600 dark:from-purple-700 dark:to-blue-700 text-white'
: 'bg-background dark:bg-primary/5',
)}
>
<div className="flex items-center justify-between">
<div>
<h2 className="font-bold tracking-wider text-foreground">{title}</h2>
<span className="mt-1 text-xs text-muted-foreground">{description}</span>
<h2
className={cn(
'font-bold tracking-wider',
isActive ? 'text-white' : 'text-foreground',
)}
>
{title}
</h2>
<span
className={cn('mt-1 text-xs', isActive ? 'text-white/80' : 'text-muted-foreground')}
>
{description}
</span>
</div>
<div aria-hidden="true" className="rounded-full bg-primary/10 p-1.5">
<ChevronRight className="size-4 text-primary" />
<div
aria-hidden="true"
className={cn(
'rounded-full p-1.5',
isActive ? 'bg-white/20 text-white' : 'bg-primary/10 text-primary',
)}
>
<ChevronRight className="size-4" />
</div>
</div>
</div>