minor fix front

This commit is contained in:
aurinex
2025-12-13 00:12:32 +05:00
parent 5e5f1aaa0a
commit bfb5a8ae6d
13 changed files with 223 additions and 157 deletions

View File

@ -81,7 +81,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
sx={{
position: 'relative',
width: '100%',
maxWidth: 300,
maxWidth: 220,
height: 440,
display: 'flex',
flexDirection: 'column',
@ -95,8 +95,8 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
'&:hover': {
transform: 'scale(1.05)',
boxShadow: '0 20px 60px rgba(242,113,33,0.45)',
transform: 'scale(1.01)',
boxShadow: '0 10px 20px rgba(242,113,33,0.1)',
},
}}
>
@ -151,7 +151,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
<Typography
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '1.05rem',
fontSize: '1rem',
mb: 0.5,
backgroundImage:
'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
@ -165,7 +165,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
<Typography
sx={{
color: 'rgba(255,255,255,0.7)',
fontSize: '0.8rem',
fontSize: '0.7rem',
mb: 0.8,
}}
>
@ -177,11 +177,9 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
<Typography
sx={{
color: 'rgba(255,255,255,0.75)',
fontSize: '0.85rem',
fontSize: '0.7rem',
mb: 1.2,
minHeight: 40,
maxHeight: 40,
overflow: 'hidden',
}}
>
{description}
@ -294,7 +292,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
color: '#fff',
opacity: buttonDisabled ? 0.6 : 1,
'&:hover': {
transform: buttonDisabled ? 'none' : 'scale(1.1)',
transform: buttonDisabled ? 'none' : 'scale(1.05)',
},
}}
>

View File

@ -408,7 +408,7 @@ export default function CaseRoulette({
opacity: animationFinished ? 1 : 0.4,
pointerEvents: animationFinished ? 'auto' : 'none',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.02)',
},
}}
>

View File

@ -0,0 +1,114 @@
import { Box, Typography } from '@mui/material';
import { useLocation } from 'react-router-dom';
import { useMemo } from 'react';
interface HeaderConfig {
title: string;
subtitle: string;
hidden?: boolean;
}
export default function PageHeader() {
const location = useLocation();
const headerConfig: HeaderConfig | null = useMemo(() => {
const path = location.pathname;
// Страницы без заголовка
if (
path === '/login' ||
path === '/registration' ||
path === '/marketplace' ||
path === '/profile' ||
path.startsWith('/launch')
) {
return { title: '', subtitle: '', hidden: true };
}
if (path === '/news') {
return {
title: 'Новости',
subtitle: 'Последние обновления лаунчера, сервера и ивентов',
};
}
if (path === '/') {
return {
title: 'Выбор версию клиента',
subtitle: 'Выберите установленную версию или добавьте новую сборку',
};
}
if (path.startsWith('/profile')) {
return {
title: 'Профиль пользователя',
subtitle: 'Профиль пользователя для личных настроек',
};
}
if (path.startsWith('/shop')) {
return {
title: 'Внутриигровой магазин',
subtitle: 'Тратьте свою уникалькую, виртуальную валюту - Попы!',
};
}
if (path.startsWith('/marketplace')) {
return {
title: 'Маркетплейс',
subtitle: 'Покупайте или продавайте - торговая площадка между игроками',
};
}
// Дефолт на всякий случай
return {
title: 'test',
subtitle: 'test',
};
}, [location.pathname]);
if (!headerConfig || headerConfig.hidden) {
return null;
}
return (
<Box
sx={{
width: '100%',
maxWidth: '85%',
mt: '10vh',
mb: '2vh',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
pointerEvents: 'none',
}}
>
<Typography
variant="h3"
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '3vw',
backgroundImage:
'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
textTransform: 'uppercase',
letterSpacing: '0.08em',
}}
>
{headerConfig.title}
</Typography>
<Typography
variant="body2"
sx={{
mt: 0.5,
color: 'rgba(255,255,255,1)',
}}
>
{headerConfig.subtitle}
</Typography>
</Box>
);
}

View File

@ -24,7 +24,13 @@ const CapePreviewModal: React.FC<CapePreviewModalProps> = ({
skinUrl,
}) => {
return (
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
<Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth
sx={{
'& .MuiPaper-root': {
backgroundColor: 'transparent',
borderRadius: '2vw',
},
}}>
<DialogContent
sx={{
bgcolor: 'rgba(5, 5, 15, 0.96)',

View File

@ -66,8 +66,8 @@ export default function ShopItem({
transition: 'transform 0.35s ease, box-shadow 0.35s ease',
'&:hover': {
transform: 'scale(1.05)',
boxShadow: '0 20px 60px rgba(242,113,33,0.45)',
transform: 'scale(1.01)',
boxShadow: '0 20px 20px rgba(242,113,33,0.1)',
},
}}
>
@ -124,8 +124,9 @@ export default function ShopItem({
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.05)',
},
transition: 'all 0.5s ease'
}}
>
<VisibilityIcon fontSize="small" />
@ -219,7 +220,7 @@ export default function ShopItem({
borderRadius: '2.5vw',
fontSize: '0.85rem',
'&:hover': {
transform: 'scale(1.1)',
transform: 'scale(1.02)',
},
}}
>

View File

@ -375,7 +375,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
},
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
@ -411,7 +411,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.05)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
},
'&:active': {