DIKER/popa-launcher
1
0
Fork 0
Code Issues Pull Requests Packages Releases 9 Wiki Activity

minor redesign shop(завтра доделаю)

Browse Source
This commit is contained in:
aurinex
2025-12-29 00:04:23 +05:00
parent 1a78b95524
commit 2777e9b008
2 changed files with 164 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/components/BonusShopItem.tsx
View File

@ -82,7 +82,7 @@ export const BonusShopItem: React.FC<BonusShopItemProps> = ({
sx={{ sx={{
position: 'relative', position: 'relative',
width: '100%', width: '100%',
maxWidth: 220, maxWidth: '27.5vw',
height: 440, height: 440,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',

336
src/renderer/pages/Shop.tsx
View File

@ -58,6 +58,7 @@ import {
getNotifPositionFromSettings, getNotifPositionFromSettings,
} from '../utils/notifications'; } from '../utils/notifications';
import { translateServer } from '../utils/serverTranslator'; import { translateServer } from '../utils/serverTranslator';
import { Server } from 'http';
interface TabPanelProps { interface TabPanelProps {
children?: React.ReactNode; children?: React.ReactNode;
@ -70,7 +71,7 @@ function TabPanel(props: TabPanelProps) {
return ( return (
<div role="tabpanel" hidden={value !== index} {...other}> <div role="tabpanel" hidden={value !== index} {...other}>
{value === index && <Box sx={{ pt: '1.4vw' }}>{children}</Box>} {value === index && <Box>{children}</Box>}
</div> </div>
); );
} }
@ -577,11 +578,11 @@ export default function Shop() {
flexDirection: 'column', flexDirection: 'column',
width: '100%', width: '100%',
height: '100%', height: '100%',
gap: '2vw',
overflow: 'auto', overflow: 'auto',
paddingBottom: '5vw', paddingBottom: '2w',
paddingLeft: '2.5vw', paddingLeft: '7vw',
paddingRight: '1.5vw', paddingRight: '1.5vw',
gap: '2vw',
}} }}
> >
<Tabs <Tabs
@ -589,8 +590,8 @@ export default function Shop() {
onChange={handleTabChange} onChange={handleTabChange}
disableRipple disableRipple
sx={{ sx={{
minHeight: '3vw', // minHeight: '3vw',
mb: '1.2vw', // mb: '1.2vw',
'& .MuiTabs-indicator': { '& .MuiTabs-indicator': {
height: '0.35vw', height: '0.35vw',
borderRadius: '999px', borderRadius: '999px',
@ -598,7 +599,7 @@ export default function Shop() {
}, },
}} }}
> >
{['Прокачка', 'Кейсы', 'Плащи', 'Предметы/пакости'].map((label) => ( {['Прокачка', 'Кейсы', 'Плащи', 'Предметы'].map((label) => (
<Tab <Tab
key={label} key={label}
label={label} label={label}
@ -630,10 +631,9 @@ export default function Shop() {
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
gap: 2, gap: 2,
mt: '2vh',
}} }}
> >
<Typography {/* <Typography
variant="h6" variant="h6"
sx={{ sx={{
fontFamily: 'Benzin-Bold', fontFamily: 'Benzin-Bold',
@ -644,7 +644,7 @@ export default function Shop() {
}} }}
> >
Прокачка Прокачка
</Typography> </Typography> */}
{bonusesLoading ? ( {bonusesLoading ? (
<FullScreenLoader <FullScreenLoader
@ -731,7 +731,8 @@ export default function Shop() {
flexDirection: 'column', flexDirection: 'column',
}} }}
> >
<Box sx={{ display: 'flex', gap: 2 }}> {caseServers.length > 1 ? (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
<Typography <Typography
variant="h6" variant="h6"
sx={{ sx={{
@ -742,183 +743,172 @@ export default function Shop() {
WebkitTextFillColor: 'transparent', WebkitTextFillColor: 'transparent',
}} }}
> >
Кейсы Выберите сервер:
</Typography> </Typography>
{caseServers.length > 0 && ( <FormControl
<FormControl size="small"
size="small" sx={{
sx={{ // textTransform: 'uppercase',
// textTransform: 'uppercase', // чтобы по ширине вел себя как бейдж
// чтобы по ширине вел себя как бейдж // minWidth: '18vw',
// minWidth: '18vw', // maxWidth: '28vw',
// maxWidth: '28vw',
'& .MuiInputLabel-root': { display: 'none' }, '& .MuiInputLabel-root': { display: 'none' },
'& .MuiOutlinedInput-root': { '& .MuiOutlinedInput-root': {
borderRadius: '3vw', borderRadius: '3vw',
position: 'relative', position: 'relative',
px: '1.2vw', px: '1.2vw',
py: '0.5vw', py: '0.5vw',
color: 'rgba(255,255,255,0.95)', color: 'rgba(255,255,255,0.95)',
background: background:
'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)', 'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)',
border: '1px solid rgba(255,255,255,0.10)', border: '1px solid rgba(255,255,255,0.10)',
boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)', boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)',
backdropFilter: 'blur(14px)', backdropFilter: 'blur(14px)',
overflow: 'hidden', overflow: 'hidden',
transition: 'transform 0.18s ease, filter 0.18s ease', transition: 'transform 0.18s ease, filter 0.18s ease',
'&:hover': { '&:hover': {
transform: 'scale(1.02)', transform: 'scale(1.02)',
// filter: 'brightness(1.03)', // filter: 'brightness(1.03)',
},
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
// нижняя градиентная полоска как у username
'&:after': {
content: '""',
position: 'absolute',
left: '0%',
right: '0%',
bottom: 0,
height: '0.15vw',
borderRadius: '999px',
background: GRADIENT,
opacity: 0.9,
pointerEvents: 'none',
width: '100%',
},
}, },
'& .MuiSelect-select': { '& .MuiOutlinedInput-notchedOutline': {
// стиль текста как у плашки username border: 'none',
fontFamily: 'Benzin-Bold', },
fontSize: '1.9vw',
lineHeight: 1.1,
textAlign: 'center',
display: 'flex', // нижняя градиентная полоска как у username
alignItems: 'center', '&:after': {
justifyContent: 'center', content: '""',
position: 'absolute',
left: '0%',
right: '0%',
bottom: 0,
height: '0.15vw',
borderRadius: '999px',
background: GRADIENT,
opacity: 0.9,
pointerEvents: 'none',
width: '100%',
},
},
// убираем “инпутный” паддинг '& .MuiSelect-select': {
padding: 0, // стиль текста как у плашки username
minHeight: 'unset', fontFamily: 'Benzin-Bold',
fontSize: '1.9vw',
lineHeight: 1.1,
textAlign: 'center',
// чтобы длинные названия не ломали display: 'flex',
whiteSpace: 'nowrap', alignItems: 'center',
overflow: 'hidden', justifyContent: 'center',
textOverflow: 'ellipsis',
// убираем “инпутный” паддинг
padding: 0,
minHeight: 'unset',
// чтобы длинные названия не ломали
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}}
>
<Select
labelId="cases-server-label"
label="Сервер"
value={selectedCaseServerIp}
onChange={(e) =>
setSelectedCaseServerIp(String(e.target.value))
}
MenuProps={{
PaperProps: {
sx: {
mt: 1,
bgcolor: 'rgba(10,10,20,0.96)',
border: '1px solid rgba(255,255,255,0.10)',
borderRadius: '1vw',
backdropFilter: 'blur(14px)',
'& .MuiMenuItem-root': {
color: 'rgba(255,255,255,0.9)',
fontFamily: 'Benzin-Bold',
fontSize: '1.1vw',
},
'& .MuiMenuItem-root.Mui-selected': {
backgroundColor: 'rgba(242,113,33,0.18)',
},
'& .MuiMenuItem-root:hover': {
backgroundColor: 'rgba(233,64,205,0.14)',
},
},
}, },
}} }}
> >
<Select {caseServers.map((ip) => (
labelId="cases-server-label" <MenuItem key={ip} value={ip}>
label="Сервер" {translateServer(`Server ${ip}`)}
value={selectedCaseServerIp} </MenuItem>
onChange={(e) => ))}
setSelectedCaseServerIp(String(e.target.value)) </Select>
} </FormControl>
MenuProps={{
PaperProps: {
sx: {
mt: 1,
bgcolor: 'rgba(10,10,20,0.96)',
border: '1px solid rgba(255,255,255,0.10)',
borderRadius: '1vw',
backdropFilter: 'blur(14px)',
'& .MuiMenuItem-root': {
color: 'rgba(255,255,255,0.9)',
fontFamily: 'Benzin-Bold',
fontSize: '1.1vw',
},
'& .MuiMenuItem-root.Mui-selected': {
backgroundColor: 'rgba(242,113,33,0.18)',
},
'& .MuiMenuItem-root:hover': {
backgroundColor: 'rgba(233,64,205,0.14)',
},
},
},
}}
>
{caseServers.map((ip) => (
<MenuItem key={ip} value={ip}>
{translateServer(`Server ${ip}`)}
</MenuItem>
))}
</Select>
</FormControl>
// <FormControl size="small" sx={{ minWidth: 220 }}>
// <InputLabel id="cases-server-label" sx={{ fontFamily: 'Benzin-Bold', color: 'rgba(255,255,255,0.75)' }}>
// Сервер
// </InputLabel>
// <Select
// labelId="cases-server-label"
// label="Сервер"
// value={selectedCaseServerIp}
// onChange={(e) => setSelectedCaseServerIp(String(e.target.value))}
// MenuProps={{
// PaperProps: {
// sx: {
// bgcolor: 'rgba(10,10,20,0.96)',
// border: '1px solid rgba(255,255,255,0.10)',
// borderRadius: '1vw',
// backdropFilter: 'blur(14px)',
// '& .MuiMenuItem-root': {
// color: 'rgba(255,255,255,0.9)',
// fontFamily: 'Benzin-Bold',
// },
// '& .MuiMenuItem-root.Mui-selected': {
// backgroundColor: 'rgba(242,113,33,0.16)',
// },
// '& .MuiMenuItem-root:hover': {
// backgroundColor: 'rgba(233,64,205,0.14)',
// },
// },
// },
// }}
// sx={{
// borderRadius: '999px',
// bgcolor: 'rgba(255,255,255,0.04)',
// color: 'rgba(255,255,255,0.92)',
// fontFamily: 'Benzin-Bold',
// '& .MuiSelect-select': {
// py: '0.9vw',
// px: '1.2vw',
// },
// '& .MuiOutlinedInput-notchedOutline': {
// borderColor: 'rgba(255,255,255,0.14)',
// },
// '&:hover .MuiOutlinedInput-notchedOutline': {
// borderColor: 'rgba(242,113,33,0.55)',
// },
// '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
// borderColor: 'rgba(233,64,205,0.65)',
// borderWidth: '2px',
// },
// '& .MuiSelect-icon': {
// color: 'rgba(255,255,255,0.75)',
// },
// }}
// >
// {caseServers.map((ip) => (
// <MenuItem key={ip} value={ip}>
// {translateServer(`Server ${ip}`)}
// </MenuItem>
// ))}
// </Select>
// </FormControl>
)}
</Box> </Box>
) : (
<Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw', position: 'absolute', top: '93%', left: '35%' }}>
<Typography
variant="h6"
sx={{
fontFamily: 'Benzin-Bold',
backgroundImage:
'linear-gradient(136deg, rgb(242,113,33), rgb(233,64,87), rgb(138,35,135))',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
}}
>
Сервер:
</Typography>
<Typography
variant="h6"
sx={{
fontFamily: 'Benzin-Bold',
alignSelf: 'center',
justifySelf: 'center',
textAlign: 'center',
fontSize: '2vw',
position: 'relative',
px: '1vw',
borderRadius: '3vw',
color: 'rgba(255,255,255,0.95)',
background:
'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.20), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.16), transparent 55%), rgba(10,10,20,0.92)',
border: '1px solid rgba(255,255,255,0.10)',
boxShadow: '0 1.4vw 3.8vw rgba(0,0,0,0.55)',
backdropFilter: 'blur(14px)',
overflow: 'hidden',
'&:after': {
content: '""',
position: 'absolute',
left: '8%',
right: '8%',
bottom: 0,
height: '0.35vw',
borderRadius: '999px',
background: GRADIENT,
opacity: 0.9,
},
}}
>
{caseServers.map((ip) => (
<MenuItem key={ip} value={ip} sx={{ fontFamily: 'Benzin-Bold' }}>
{translateServer(`Server ${ip}`)}
</MenuItem>
))}
</Typography>
</Box>
)}
{casesLoading ? ( {casesLoading ? (
<FullScreenLoader <FullScreenLoader