mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
refactor(theming): orange-* → warning-* for promo/highlight semantics
Sweep orange across SubscriptionPurchase/GiftSubscription/PromoOffersSection/ AdminTrafficUsage/AnalyticsTab/withdrawalUtils to warning-* tokens. Stars brand yellow→orange gradient kept in TopUpAmount.
This commit is contained in:
@@ -265,10 +265,10 @@ export default function PromoOffersSection({ className = '' }: PromoOffersSectio
|
|||||||
{availableOffers.map((offer) => (
|
{availableOffers.map((offer) => (
|
||||||
<div
|
<div
|
||||||
key={offer.id}
|
key={offer.id}
|
||||||
className="card border-orange-500/30 bg-gradient-to-br from-orange-500/5 to-transparent transition-colors hover:border-orange-500/50"
|
className="card border-warning-500/30 bg-gradient-to-br from-warning-500/5 to-transparent transition-colors hover:border-warning-500/50"
|
||||||
>
|
>
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-orange-500/30 to-warning-500/20">
|
<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-warning-500/30 to-warning-500/20">
|
||||||
{getOfferIcon(offer.effect_type, offer.discount_percent)}
|
{getOfferIcon(offer.effect_type, offer.discount_percent)}
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
@@ -291,7 +291,7 @@ export default function PromoOffersSection({ className = '' }: PromoOffersSectio
|
|||||||
<button
|
<button
|
||||||
onClick={() => handleClaim(offer.id)}
|
onClick={() => handleClaim(offer.id)}
|
||||||
disabled={claimingId === offer.id}
|
disabled={claimingId === offer.id}
|
||||||
className="group relative flex w-full items-center justify-center gap-2 overflow-hidden rounded-lg bg-gradient-to-r from-orange-500 to-warning-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-orange-500/25 transition-all hover:scale-105 hover:shadow-xl hover:shadow-orange-500/30 active:scale-100 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 sm:w-auto"
|
className="group relative flex w-full items-center justify-center gap-2 overflow-hidden rounded-lg bg-gradient-to-r from-warning-500 to-warning-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-warning-500/25 transition-all hover:scale-105 hover:shadow-xl hover:shadow-warning-500/30 active:scale-100 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 sm:w-auto"
|
||||||
>
|
>
|
||||||
{/* Shimmer effect */}
|
{/* Shimmer effect */}
|
||||||
<span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
|
<span className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-full" />
|
||||||
|
|||||||
@@ -167,7 +167,7 @@ export function AnalyticsTab() {
|
|||||||
<div className="my-5 border-t border-dark-700/30" />
|
<div className="my-5 border-t border-dark-700/30" />
|
||||||
<div className="mb-4 flex items-center justify-between">
|
<div className="mb-4 flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<svg className="h-4 w-4 text-orange-400" viewBox="0 0 24 24" fill="currentColor">
|
<svg className="h-4 w-4 text-warning-400" viewBox="0 0 24 24" fill="currentColor">
|
||||||
<path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" />
|
<path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span className="text-sm font-medium text-dark-200">
|
<span className="text-sm font-medium text-dark-200">
|
||||||
|
|||||||
@@ -153,10 +153,10 @@ const RISK_STYLES: Record<RiskLevel, { dot: string; text: string; bar: string; b
|
|||||||
bg: 'bg-warning-400/10',
|
bg: 'bg-warning-400/10',
|
||||||
},
|
},
|
||||||
high: {
|
high: {
|
||||||
dot: 'bg-orange-400',
|
dot: 'bg-warning-400',
|
||||||
text: 'text-orange-400',
|
text: 'text-warning-400',
|
||||||
bar: 'bg-orange-400',
|
bar: 'bg-warning-400',
|
||||||
bg: 'bg-orange-400/10',
|
bg: 'bg-warning-400/10',
|
||||||
},
|
},
|
||||||
critical: {
|
critical: {
|
||||||
dot: 'bg-error-400 animate-pulse',
|
dot: 'bg-error-400 animate-pulse',
|
||||||
|
|||||||
@@ -711,10 +711,10 @@ function BuyTabContent({
|
|||||||
|
|
||||||
{/* Active discount banner */}
|
{/* Active discount banner */}
|
||||||
{config.active_discount_percent != null && config.active_discount_percent > 0 && (
|
{config.active_discount_percent != null && config.active_discount_percent > 0 && (
|
||||||
<div className="flex items-center gap-3 rounded-xl border border-orange-500/30 bg-orange-500/10 p-3">
|
<div className="flex items-center gap-3 rounded-xl border border-warning-500/30 bg-warning-500/10 p-3">
|
||||||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-500/20">
|
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-warning-500/20">
|
||||||
<svg
|
<svg
|
||||||
className="h-4 w-4 text-orange-400"
|
className="h-4 w-4 text-warning-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@@ -725,7 +725,7 @@ function BuyTabContent({
|
|||||||
<path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
|
<path d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z" />
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-medium text-orange-400">
|
<div className="text-sm font-medium text-warning-400">
|
||||||
{t('promo.discountApplied')} -{config.active_discount_percent}%
|
{t('promo.discountApplied')} -{config.active_discount_percent}%
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -906,7 +906,7 @@ export default function SubscriptionPurchase() {
|
|||||||
className={`rounded px-1.5 py-0.5 text-xs ${
|
className={`rounded px-1.5 py-0.5 text-xs ${
|
||||||
promoDaily.isPromoGroup
|
promoDaily.isPromoGroup
|
||||||
? 'bg-success-500/20 text-success-400'
|
? 'bg-success-500/20 text-success-400'
|
||||||
: 'bg-orange-500/20 text-orange-400'
|
: 'bg-warning-500/20 text-warning-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{promoDaily.percent}%
|
-{promoDaily.percent}%
|
||||||
@@ -938,7 +938,7 @@ export default function SubscriptionPurchase() {
|
|||||||
className={`rounded px-1.5 py-0.5 text-xs ${
|
className={`rounded px-1.5 py-0.5 text-xs ${
|
||||||
promoPeriod.isPromoGroup
|
promoPeriod.isPromoGroup
|
||||||
? 'bg-success-500/20 text-success-400'
|
? 'bg-success-500/20 text-success-400'
|
||||||
: 'bg-orange-500/20 text-orange-400'
|
: 'bg-warning-500/20 text-warning-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{promoPeriod.percent}%
|
-{promoPeriod.percent}%
|
||||||
@@ -1172,7 +1172,7 @@ export default function SubscriptionPurchase() {
|
|||||||
{displayDiscount && displayDiscount > 0 && (
|
{displayDiscount && displayDiscount > 0 && (
|
||||||
<div
|
<div
|
||||||
className={`absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-xs font-medium text-white ${
|
className={`absolute -right-2 -top-2 rounded-full px-2 py-0.5 text-xs font-medium text-white ${
|
||||||
promoPeriod.isPromoGroup ? 'bg-success-500' : 'bg-orange-500'
|
promoPeriod.isPromoGroup ? 'bg-success-500' : 'bg-warning-500'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{displayDiscount}%
|
-{displayDiscount}%
|
||||||
@@ -1317,7 +1317,7 @@ export default function SubscriptionPurchase() {
|
|||||||
className={`rounded px-1.5 py-0.5 text-xs ${
|
className={`rounded px-1.5 py-0.5 text-xs ${
|
||||||
promoCustom.isPromoGroup
|
promoCustom.isPromoGroup
|
||||||
? 'bg-success-500/20 text-success-400'
|
? 'bg-success-500/20 text-success-400'
|
||||||
: 'bg-orange-500/20 text-orange-400'
|
: 'bg-warning-500/20 text-warning-400'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{promoCustom.percent}%
|
-{promoCustom.percent}%
|
||||||
@@ -1538,8 +1538,8 @@ export default function SubscriptionPurchase() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{promoPeriod.percent && (
|
{promoPeriod.percent && (
|
||||||
<div className="mb-4 flex items-center justify-center gap-2 rounded-lg border border-orange-500/30 bg-orange-500/10 p-2">
|
<div className="mb-4 flex items-center justify-center gap-2 rounded-lg border border-warning-500/30 bg-warning-500/10 p-2">
|
||||||
<span className="text-sm font-medium text-orange-400">
|
<span className="text-sm font-medium text-warning-400">
|
||||||
{t('promo.discountApplied')} -{promoPeriod.percent}%
|
{t('promo.discountApplied')} -{promoPeriod.percent}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -1695,7 +1695,7 @@ export default function SubscriptionPurchase() {
|
|||||||
{promoPeriod.percent && promoPeriod.percent > 0 && (
|
{promoPeriod.percent && promoPeriod.percent > 0 && (
|
||||||
<div
|
<div
|
||||||
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
|
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
|
||||||
promoPeriod.isPromoGroup ? 'bg-success-500' : 'bg-orange-500'
|
promoPeriod.isPromoGroup ? 'bg-success-500' : 'bg-warning-500'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{promoPeriod.percent}%
|
-{promoPeriod.percent}%
|
||||||
@@ -1741,7 +1741,7 @@ export default function SubscriptionPurchase() {
|
|||||||
{promoTraffic.percent && promoTraffic.percent > 0 && (
|
{promoTraffic.percent && promoTraffic.percent > 0 && (
|
||||||
<div
|
<div
|
||||||
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
|
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
|
||||||
promoTraffic.isPromoGroup ? 'bg-success-500' : 'bg-orange-500'
|
promoTraffic.isPromoGroup ? 'bg-success-500' : 'bg-warning-500'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{promoTraffic.percent}%
|
-{promoTraffic.percent}%
|
||||||
@@ -1795,7 +1795,7 @@ export default function SubscriptionPurchase() {
|
|||||||
{promoServer.percent && promoServer.percent > 0 ? (
|
{promoServer.percent && promoServer.percent > 0 ? (
|
||||||
<div
|
<div
|
||||||
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
|
className={`absolute right-2 top-2 z-10 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-sm ${
|
||||||
promoServer.isPromoGroup ? 'bg-success-500' : 'bg-orange-500'
|
promoServer.isPromoGroup ? 'bg-success-500' : 'bg-warning-500'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
-{promoServer.percent}%
|
-{promoServer.percent}%
|
||||||
@@ -1894,9 +1894,9 @@ export default function SubscriptionPurchase() {
|
|||||||
) : preview ? (
|
) : preview ? (
|
||||||
<div className="space-y-4 rounded-xl bg-dark-800/50 p-5">
|
<div className="space-y-4 rounded-xl bg-dark-800/50 p-5">
|
||||||
{activeDiscount?.is_active && activeDiscount.discount_percent && (
|
{activeDiscount?.is_active && activeDiscount.discount_percent && (
|
||||||
<div className="flex items-center justify-center gap-2 rounded-lg border border-orange-500/30 bg-orange-500/10 p-3">
|
<div className="flex items-center justify-center gap-2 rounded-lg border border-warning-500/30 bg-warning-500/10 p-3">
|
||||||
<svg
|
<svg
|
||||||
className="h-4 w-4 text-orange-400"
|
className="h-4 w-4 text-warning-400"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
@@ -1908,7 +1908,7 @@ export default function SubscriptionPurchase() {
|
|||||||
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
|
d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span className="text-sm font-medium text-orange-400">
|
<span className="text-sm font-medium text-warning-400">
|
||||||
{t('promo.discountApplied')} -{activeDiscount.discount_percent}%
|
{t('promo.discountApplied')} -{activeDiscount.discount_percent}%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -64,7 +64,8 @@ export function getRiskColor(score: number): { text: string; bg: string; bar: st
|
|||||||
return { text: 'text-success-400', bg: 'bg-success-500/20', bar: 'bg-success-500' };
|
return { text: 'text-success-400', bg: 'bg-success-500/20', bar: 'bg-success-500' };
|
||||||
if (score < 50)
|
if (score < 50)
|
||||||
return { text: 'text-warning-400', bg: 'bg-warning-500/20', bar: 'bg-warning-500' };
|
return { text: 'text-warning-400', bg: 'bg-warning-500/20', bar: 'bg-warning-500' };
|
||||||
if (score < 70) return { text: 'text-orange-400', bg: 'bg-orange-500/20', bar: 'bg-orange-500' };
|
if (score < 70)
|
||||||
|
return { text: 'text-warning-400', bg: 'bg-warning-500/20', bar: 'bg-warning-500' };
|
||||||
return { text: 'text-error-400', bg: 'bg-error-500/20', bar: 'bg-error-500' };
|
return { text: 'text-error-400', bg: 'bg-error-500/20', bar: 'bg-error-500' };
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -75,7 +76,7 @@ export function getRiskLevelColor(level: string): { text: string; bg: string } {
|
|||||||
case 'medium':
|
case 'medium':
|
||||||
return { text: 'text-warning-400', bg: 'bg-warning-500/20' };
|
return { text: 'text-warning-400', bg: 'bg-warning-500/20' };
|
||||||
case 'high':
|
case 'high':
|
||||||
return { text: 'text-orange-400', bg: 'bg-orange-500/20' };
|
return { text: 'text-warning-400', bg: 'bg-warning-500/20' };
|
||||||
case 'critical':
|
case 'critical':
|
||||||
return { text: 'text-error-400', bg: 'bg-error-500/20' };
|
return { text: 'text-error-400', bg: 'bg-error-500/20' };
|
||||||
default:
|
default:
|
||||||
|
|||||||
Reference in New Issue
Block a user