etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add HoverBorderGradient effect to key action buttons

Browse Source 
Apply animated gradient border effect (Aceternity UI) to:
- Dashboard "Connect Devices" button
- Dashboard "Activate Trial" buttons (free and paid variants)
- Subscription page "Connect Devices" button
This commit is contained in:
Fringg
2026-02-25 08:37:28 +03:00
parent 5c1be1471e
commit 3fb9606fd0
3 changed files with 111 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/Dashboard.tsx
View File

@@ -10,6 +10,7 @@ import { balanceApi } from '../api/balance';
import { wheelApi } from '../api/wheel';
import Onboarding, { useOnboarding } from '../components/Onboarding';
import PromoOffersSection from '../components/PromoOffersSection';
import { HoverBorderGradient } from '../components/ui/hover-border-gradient';
import { useCurrency } from '../hooks/useCurrency';
import { API } from '../config/constants';
@@ -411,13 +412,14 @@ export default function Dashboard() {
{t('dashboard.viewSubscription')}
</Link>
{subscription.subscription_url && (
<button
<HoverBorderGradient
onClick={() => navigate('/connection')}
className="btn-secondary py-2.5 text-sm"
containerClassName="w-full"
className="flex w-full items-center justify-center py-2.5 text-sm"
data-onboarding="connect-devices"
>
{t('subscription.getConfig')}
</button>
</HoverBorderGradient>
)}
</div>
</div>
@@ -590,30 +592,30 @@ export default function Dashboard() {
{trialInfo.requires_payment && trialInfo.price_kopeks > 0 ? (
(balanceData?.balance_kopeks || 0) >= trialInfo.price_kopeks ? (
<button
<HoverBorderGradient
onClick={() => activateTrialMutation.mutate()}
disabled={activateTrialMutation.isPending}
className="btn-primary w-full"
containerClassName={`w-full ${activateTrialMutation.isPending ? 'pointer-events-none opacity-50' : ''}`}
className="flex w-full items-center justify-center"
>
{activateTrialMutation.isPending
? t('common.loading', 'Loading...')
: t('subscription.trial.payAndActivate', 'Pay from Balance & Activate')}
</button>
</HoverBorderGradient>
) : (
<Link to="/balance" className="btn-primary block w-full text-center">
{t('subscription.trial.topUpToActivate', 'Top Up Balance')}
</Link>
)
) : (
<button
<HoverBorderGradient
onClick={() => activateTrialMutation.mutate()}
disabled={activateTrialMutation.isPending}
className="btn-primary w-full"
containerClassName={`w-full ${activateTrialMutation.isPending ? 'pointer-events-none opacity-50' : ''}`}
className="flex w-full items-center justify-center"
>
{activateTrialMutation.isPending
? t('common.loading', 'Loading...')
: t('subscription.trial.activate', 'Activate Free Trial')}
</button>
</HoverBorderGradient>
)}
</div>
</div>

8
src/pages/Subscription.tsx
View File

@@ -5,6 +5,7 @@ import { useLocation, useNavigate } from 'react-router';
import { AxiosError } from 'axios';
import { subscriptionApi } from '../api/subscription';
import { promoApi } from '../api/promo';
import { HoverBorderGradient } from '../components/ui/hover-border-gradient';
import type {
PurchaseSelection,
PeriodOption,
@@ -756,9 +757,10 @@ export default function Subscription() {
</div>
{/* Get Config Button */}
<button
<HoverBorderGradient
onClick={() => navigate('/connection')}
className="btn-primary mb-3 flex w-full items-center justify-center gap-2 py-3"
containerClassName="mb-3 w-full"
className="flex w-full items-center justify-center gap-2 py-3"
>
<svg
className="h-5 w-5"
@@ -774,7 +776,7 @@ export default function Subscription() {
/>
</svg>
{t('subscription.getConfig')}
</button>
</HoverBorderGradient>
{/* Subscription URL - hidden when hide_subscription_link is true */}
{!subscription.hide_subscription_link && (