restyle Shop components
This commit is contained in:
@ -1,3 +1,4 @@
|
||||
// src/renderer/components/BonusShopItem.tsx
|
||||
import React from 'react';
|
||||
import {
|
||||
Card,
|
||||
@ -80,53 +81,45 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
maxWidth: 280,
|
||||
height: 420,
|
||||
maxWidth: 300,
|
||||
height: 440,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
bgcolor: 'rgba(5, 5, 15, 0.96)',
|
||||
borderRadius: '20px',
|
||||
border: '1px solid rgba(255, 255, 255, 0.08)',
|
||||
boxShadow: '0 18px 45px rgba(0, 0, 0, 0.8)',
|
||||
background: 'rgba(20,20,20,0.9)',
|
||||
borderRadius: '2.5vw',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
boxShadow: '0 10px 40px rgba(0,0,0,0.8)',
|
||||
overflow: 'hidden',
|
||||
transition:
|
||||
'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease',
|
||||
|
||||
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
|
||||
|
||||
'&:hover': {
|
||||
transform: 'translateY(-6px)',
|
||||
boxShadow: '0 26px 60px rgba(0, 0, 0, 0.95)',
|
||||
borderColor: 'rgba(255, 255, 255, 0.18)',
|
||||
transform: 'scale(1.05)',
|
||||
boxShadow: '0 20px 60px rgba(242,113,33,0.45)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* верхний “свет” */}
|
||||
{/* Градиентный свет сверху — как в ShopItem */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
pointerEvents: 'none',
|
||||
background:
|
||||
'radial-gradient(circle at top, rgba(255,255,255,0.13), transparent 55%)',
|
||||
'radial-gradient(circle at top, rgba(242,113,33,0.25), transparent 60%)',
|
||||
}}
|
||||
/>
|
||||
|
||||
{imageUrl && (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
p: '0.9vw',
|
||||
pb: 0,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative', p: 1.5, pb: 0 }}>
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: '16px',
|
||||
borderRadius: '1.8vw',
|
||||
overflow: 'hidden',
|
||||
border: '1px solid rgba(255, 255, 255, 0.12)',
|
||||
border: '1px solid rgba(255,255,255,0.12)',
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(40,40,80,0.9), rgba(15,15,35,0.9))',
|
||||
'linear-gradient(135deg, rgba(40,40,40,0.9), rgba(15,15,15,0.9))',
|
||||
}}
|
||||
>
|
||||
<CardMedia
|
||||
@ -135,10 +128,8 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
|
||||
alt={name}
|
||||
sx={{
|
||||
width: '100%',
|
||||
height: '11vw',
|
||||
minHeight: '140px',
|
||||
height: 160,
|
||||
objectFit: 'cover',
|
||||
filter: 'saturate(1.1)',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
@ -147,91 +138,95 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
|
||||
|
||||
<CardContent
|
||||
sx={{
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
pt: imageUrl ? '0.9vw' : '1.4vw',
|
||||
pb: '1.3vw',
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
pt: 2,
|
||||
pb: 2,
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
{/* Имя бонуса — градиентом как у ShopItem */}
|
||||
<Typography
|
||||
variant="h6"
|
||||
color="white"
|
||||
sx={{
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '1.05rem',
|
||||
mb: 0.5,
|
||||
backgroundImage:
|
||||
'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{
|
||||
opacity: 0.7,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: '0.8rem',
|
||||
mb: 1,
|
||||
mb: 0.8,
|
||||
}}
|
||||
>
|
||||
Уровень: {level}
|
||||
{isPermanent && ' • Постоянный'}
|
||||
</Typography>
|
||||
|
||||
{description && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{
|
||||
opacity: 0.75,
|
||||
color: 'rgba(255,255,255,0.75)',
|
||||
fontSize: '0.85rem',
|
||||
mb: 1.4,
|
||||
mb: 1.2,
|
||||
minHeight: 40,
|
||||
maxHeight: 40,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<Box sx={{ mb: 1.2 }}>
|
||||
<Box sx={{ mb: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.8, fontSize: '0.8rem' }}
|
||||
sx={{ color: 'rgba(255,255,255,0.8)', fontSize: '0.8rem' }}
|
||||
>
|
||||
Текущий эффект: <b>{effectValue.toLocaleString('ru-RU')}</b>
|
||||
Текущий эффект:{' '}
|
||||
<Box component="b" sx={{ fontWeight: 600 }}>
|
||||
{effectValue.toLocaleString('ru-RU')}
|
||||
</Box>
|
||||
</Typography>
|
||||
|
||||
{typeof nextEffectValue === 'number' &&
|
||||
!isBuyMode &&
|
||||
canUpgrade && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.8, fontSize: '0.8rem', mt: 0.4 }}
|
||||
sx={{
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
fontSize: '0.8rem',
|
||||
mt: 0.4,
|
||||
}}
|
||||
>
|
||||
Следующий уровень:{' '}
|
||||
<b>{nextEffectValue.toLocaleString('ru-RU')}</b>
|
||||
<Box component="b" sx={{ fontWeight: 600 }}>
|
||||
{nextEffectValue.toLocaleString('ru-RU')}
|
||||
</Box>
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 1 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color={isActive ? 'success.main' : 'warning.main'}
|
||||
sx={{ fontSize: '0.78rem' }}
|
||||
>
|
||||
{isActive ? 'Бонус активен' : 'Бонус не активен'}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: '0.78rem',
|
||||
mb: 1,
|
||||
color: isActive
|
||||
? 'rgba(0, 200, 140, 0.9)'
|
||||
: 'rgba(255, 180, 80, 0.9)',
|
||||
}}
|
||||
>
|
||||
{isActive ? 'Бонус активен' : 'Бонус не активен'}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
@ -242,9 +237,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="white"
|
||||
sx={{ opacity: 0.8, fontSize: '0.85rem' }}
|
||||
sx={{ color: 'rgba(255,255,255,0.8)', fontSize: '0.85rem' }}
|
||||
>
|
||||
{isBuyMode ? 'Цена покупки' : 'Цена улучшения'}
|
||||
</Typography>
|
||||
@ -262,43 +255,48 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
sx={{
|
||||
mb: 1,
|
||||
borderRadius: '999px',
|
||||
textTransform: 'none',
|
||||
fontSize: '0.75rem',
|
||||
}}
|
||||
onClick={onToggleActive}
|
||||
disabled={disabled}
|
||||
sx={{
|
||||
mt: 0.5,
|
||||
borderRadius: '2.5vw',
|
||||
textTransform: 'none',
|
||||
fontSize: '0.75rem',
|
||||
px: 2,
|
||||
borderColor: 'rgba(255,255,255,0.4)',
|
||||
color: 'rgba(255,255,255,0.9)',
|
||||
'&:hover': {
|
||||
borderColor: 'rgba(255,255,255,0.8)',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{isActive ? 'Выключить' : 'Включить'}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Кнопка в стиле Registration / ShopItem */}
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth
|
||||
sx={{
|
||||
mt: 0.5,
|
||||
borderRadius: '999px',
|
||||
py: '0.45vw',
|
||||
color: 'white',
|
||||
background: !buttonDisabled
|
||||
? 'linear-gradient(135deg, rgb(0, 160, 90), rgb(0, 200, 140))'
|
||||
: 'linear-gradient(135deg, rgba(120,120,120,0.9), rgba(80,80,80,0.9))',
|
||||
'&:hover': {
|
||||
background: !buttonDisabled
|
||||
? 'linear-gradient(135deg, rgba(0, 160, 90, 0.85), rgba(0, 200, 140, 0.9))'
|
||||
: 'linear-gradient(135deg, rgba(120,120,120,0.9), rgba(80,80,80,0.9))',
|
||||
},
|
||||
fontFamily: 'Benzin-Bold',
|
||||
fontSize: '0.9rem',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 0.8,
|
||||
}}
|
||||
disabled={buttonDisabled}
|
||||
onClick={handlePrimaryClick}
|
||||
sx={{
|
||||
mt: 2,
|
||||
transition: 'transform 0.3s ease, opacity 0.2s ease',
|
||||
background: buttonDisabled
|
||||
? 'linear-gradient(71deg, #555 0%, #666 70%, #444 100%)'
|
||||
: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
|
||||
fontFamily: 'Benzin-Bold',
|
||||
borderRadius: '2.5vw',
|
||||
fontSize: '0.85rem',
|
||||
color: '#fff',
|
||||
opacity: buttonDisabled ? 0.6 : 1,
|
||||
'&:hover': {
|
||||
transform: buttonDisabled ? 'none' : 'scale(1.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user