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={{
position: 'relative',
width: '100%',
maxWidth: 220,
maxWidth: '27.5vw',
height: 440,
display: 'flex',
flexDirection: 'column',

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

@ -58,6 +58,7 @@ import {
getNotifPositionFromSettings,
} from '../utils/notifications';
import { translateServer } from '../utils/serverTranslator';
import { Server } from 'http';
interface TabPanelProps {
children?: React.ReactNode;
@ -70,7 +71,7 @@ function TabPanel(props: TabPanelProps) {
return (
<div role="tabpanel" hidden={value !== index} {...other}>
{value === index && <Box sx={{ pt: '1.4vw' }}>{children}</Box>}
{value === index && <Box>{children}</Box>}
</div>
);
}
@ -577,11 +578,11 @@ export default function Shop() {
flexDirection: 'column',
width: '100%',
height: '100%',
gap: '2vw',
overflow: 'auto',
paddingBottom: '5vw',
paddingLeft: '2.5vw',
paddingBottom: '2w',
paddingLeft: '7vw',
paddingRight: '1.5vw',
gap: '2vw',
}}
>
<Tabs
@ -589,8 +590,8 @@ export default function Shop() {
onChange={handleTabChange}
disableRipple
sx={{
minHeight: '3vw',
mb: '1.2vw',
// minHeight: '3vw',
// mb: '1.2vw',
'& .MuiTabs-indicator': {
height: '0.35vw',
borderRadius: '999px',
@ -598,7 +599,7 @@ export default function Shop() {
},
}}
>
{['Прокачка', 'Кейсы', 'Плащи', 'Предметы/пакости'].map((label) => (
{['Прокачка', 'Кейсы', 'Плащи', 'Предметы'].map((label) => (
<Tab
key={label}
label={label}
@ -630,10 +631,9 @@ export default function Shop() {
display: 'flex',
flexDirection: 'column',
gap: 2,
mt: '2vh',
}}
>
<Typography
{/* <Typography
variant="h6"
sx={{
fontFamily: 'Benzin-Bold',
@ -644,7 +644,7 @@ export default function Shop() {
}}
>
Прокачка
</Typography>
</Typography> */}
{bonusesLoading ? (
<FullScreenLoader
@ -731,7 +731,8 @@ export default function Shop() {
flexDirection: 'column',
}}
>
<Box sx={{ display: 'flex', gap: 2 }}>
{caseServers.length > 1 ? (
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
<Typography
variant="h6"
sx={{
@ -742,183 +743,172 @@ export default function Shop() {
WebkitTextFillColor: 'transparent',
}}
>
Кейсы
Выберите сервер:
</Typography>
{caseServers.length > 0 && (
<FormControl
size="small"
sx={{
// textTransform: 'uppercase',
// чтобы по ширине вел себя как бейдж
// minWidth: '18vw',
// maxWidth: '28vw',
<FormControl
size="small"
sx={{
// textTransform: 'uppercase',
// чтобы по ширине вел себя как бейдж
// minWidth: '18vw',
// maxWidth: '28vw',
'& .MuiInputLabel-root': { display: 'none' },
'& .MuiInputLabel-root': { display: 'none' },
'& .MuiOutlinedInput-root': {
borderRadius: '3vw',
position: 'relative',
px: '1.2vw',
py: '0.5vw',
'& .MuiOutlinedInput-root': {
borderRadius: '3vw',
position: 'relative',
px: '1.2vw',
py: '0.5vw',
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',
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',
transition: 'transform 0.18s ease, filter 0.18s ease',
'&:hover': {
transform: 'scale(1.02)',
// 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%',
},
transition: 'transform 0.18s ease, filter 0.18s ease',
'&:hover': {
transform: 'scale(1.02)',
// filter: 'brightness(1.03)',
},
'& .MuiSelect-select': {
// стиль текста как у плашки username
fontFamily: 'Benzin-Bold',
fontSize: '1.9vw',
lineHeight: 1.1,
textAlign: 'center',
'& .MuiOutlinedInput-notchedOutline': {
border: 'none',
},
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
// нижняя градиентная полоска как у 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%',
},
},
// убираем “инпутный” паддинг
padding: 0,
minHeight: 'unset',
'& .MuiSelect-select': {
// стиль текста как у плашки username
fontFamily: 'Benzin-Bold',
fontSize: '1.9vw',
lineHeight: 1.1,
textAlign: 'center',
// чтобы длинные названия не ломали
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
// убираем “инпутный” паддинг
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
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)',
},
},
},
}}
>
{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>
)}
{caseServers.map((ip) => (
<MenuItem key={ip} value={ip}>
{translateServer(`Server ${ip}`)}
</MenuItem>
))}
</Select>
</FormControl>
</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 ? (
<FullScreenLoader