minor fix front
This commit is contained in:
@ -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)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
114
src/renderer/components/PageHeader.tsx
Normal file
114
src/renderer/components/PageHeader.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
@ -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)',
|
||||
|
||||
@ -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)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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': {
|
||||
|
||||
Reference in New Issue
Block a user