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

rework style TobBar in themes.ts

Browse Source
This commit is contained in:
DIKER0K
2025-12-14 23:49:32 +05:00
parent e93379ff12
commit ff87c9d4a5
2 changed files with 103 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

242
src/renderer/components/TopBar.tsx
View File

@ -20,6 +20,7 @@ import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
import PersonIcon from '@mui/icons-material/Person';
import SettingsIcon from '@mui/icons-material/Settings';
import { useTheme } from '@mui/material/styles';
declare global {
interface Window {
electron: {
@ -48,6 +49,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
const navigate = useNavigate();
const tabsWrapperRef = useRef<HTMLDivElement | null>(null);
const tabsRootRef = useRef<HTMLDivElement | null>(null);
const theme = useTheme();
const updateGradientVars = useCallback(() => {
const root = tabsRootRef.current;
@ -71,7 +73,8 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
);
const path = location.pathname || '';
const isAuthPage = path.startsWith('/login') || path.startsWith('/registration');
const isAuthPage =
path.startsWith('/login') || path.startsWith('/registration');
const TAB_ROUTES: Array<{
value: number;
@ -198,26 +201,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
// Функция для получения количества монет
const tabBaseSx = {
color: 'white',
fontFamily: 'Benzin-Bold',
fontSize: '0.7em',
transition: 'all 0.3s ease',
'&:hover': {
color: 'rgb(170, 170, 170)',
},
};
const activeTabSx = {
color: 'transparent',
WebkitTextFillColor: 'transparent',
backgroundImage: 'var(--tabs-grad)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'var(--tabs-w) 100%',
backgroundPosition: 'calc(-1 * var(--active-x)) 0',
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
};
const tabBaseSx = [{ fontSize: '0.7em' }, theme.launcher.topbar.tabBase];
const logout = () => {
localStorage.removeItem('launcher_config');
@ -230,7 +214,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
return;
}
const savedConfig = localStorage.getItem('launcher_config');
const savedConfig = localStorage.getItem('launcher_config');
if (!savedConfig) return;
let cfg: any = null;
@ -263,33 +247,29 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
};
window.addEventListener('skin-updated', handler as EventListener);
return () => window.removeEventListener('skin-updated', handler as EventListener);
return () =>
window.removeEventListener('skin-updated', handler as EventListener);
}, [loadSkin]);
return (
<Box
sx={{
display: 'flex',
position: 'fixed',
top: 0,
left: 0,
right: 0,
height: '8vh',
zIndex: 1000,
width: '100%',
WebkitAppRegion: 'drag',
overflow: 'hidden',
justifyContent: 'space-between',
alignItems: 'center',
// убрать если не оч
// стиль как в Registration
background: isAuthPage ?
'none' : 'linear-gradient(71deg, rgba(242,113,33,0.18) 0%, rgba(233,64,205,0.14) 70%, rgba(138,35,135,0.16) 100%)',
backdropFilter: isAuthPage ? 'none' : 'blur(10px)',
boxShadow: isAuthPage ? 'none' : '0 8px 30px rgba(0,0,0,0.35)',
}}
sx={[
{
display: 'flex',
position: 'fixed',
top: 0,
left: 0,
right: 0,
height: '8vh',
zIndex: 1000,
width: '100%',
WebkitAppRegion: 'drag',
overflow: 'hidden',
justifyContent: 'space-between',
alignItems: 'center',
},
theme.launcher.topbar.firstBox,
]}
>
{/* Левая часть */}
<Box
@ -305,19 +285,16 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
<Button
variant="outlined"
onClick={() => handleLaunchPage()}
sx={{
width: '3em',
height: '3em',
borderRadius: '50%',
border: 'unset',
color: 'white',
minWidth: 'unset',
minHeight: 'unset',
transition: 'transform 0.3s ease',
'&:hover': {
transform: 'scale(1.2)',
sx={[
{
width: '3em',
height: '3em',
borderRadius: '50%',
minWidth: 'unset',
minHeight: 'unset',
},
}}
theme.launcher.topbar.backButton,
]}
>
<ArrowBackRoundedIcon />
</Button>
@ -329,7 +306,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
// старый вариант
sx={{
borderBottom: 1,
borderColor: 'transparent',
...theme.launcher.topbar.tabsBox,
// '& .MuiTabs-indicator': {
// backgroundColor: 'rgba(255, 77, 77, 1)',
// },
@ -371,61 +348,40 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
scrollButtons={false}
disableRipple={true}
sx={{
// один градиент на весь Tabs
'--tabs-grad': 'linear-gradient(90deg, #F27121 0%, #E940CD 50%, #8A2387 100%)',
// активный текст показывает “срез” общего градиента
'& .MuiTab-root.Mui-selected': {
color: 'transparent',
backgroundImage: 'var(--tabs-grad)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'var(--tabs-w) 100%',
backgroundPosition: 'calc(-1 * var(--active-x)) 0',
WebkitBackgroundClip: 'text',
backgroundClip: 'text',
},
// подчёркивание тоже из того же “единого” градиента
'& .MuiTabs-indicator': {
height: '2px',
backgroundImage: 'var(--tabs-grad)',
backgroundRepeat: 'no-repeat',
backgroundSize: 'var(--tabs-w) 100%',
backgroundPosition: 'calc(-1 * var(--active-x)) 0',
},
...theme.launcher.topbar.tabs,
}}
>
<Tab
label="Новости"
disableRipple={true}
sx={{
sx={[
...tabBaseSx,
...(selectedTab === 0 ? activeTabSx : null),
}}
selectedTab === 0 ? theme.launcher.topbar.tabActive : null,
]}
/>
<Tab
label="Версии"
disableRipple={true}
sx={{
sx={[
...tabBaseSx,
...(selectedTab === 1 ? activeTabSx : null),
}}
selectedTab === 1 ? theme.launcher.topbar.tabActive : null,
]}
/>
<Tab
label="Магазин"
disableRipple={true}
sx={{
sx={[
...tabBaseSx,
...(selectedTab === 2 ? activeTabSx : null),
}}
selectedTab === 2 ? theme.launcher.topbar.tabActive : null,
]}
/>
<Tab
label="Рынок"
disableRipple={true}
sx={{
sx={[
...tabBaseSx,
...(selectedTab === 3 ? activeTabSx : null),
}}
selectedTab === 3 ? theme.launcher.topbar.tabActive : null,
]}
/>
</Tabs>
</CustomTooltip>
@ -497,6 +453,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
width: '3em',
height: '3em',
borderRadius: '50%',
...theme.launcher.topbar.windowControlButton,
}}
>
<svg
@ -507,7 +464,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
>
<path
d="M 7 19 h 10 c 0.55 0 1 0.45 1 1 s -0.45 1 -1 1 H 7 c -0.55 0 -1 -0.45 -1 -1 s 0.45 -1 1 -1"
fill="white"
fill={theme.launcher.topbar.windowControlIcon.color}
></path>
</svg>
</Button>
@ -521,9 +478,12 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
width: '3em',
height: '3em',
borderRadius: '50%',
...theme.launcher.topbar.windowControlButton,
}}
>
<CloseRoundedIcon sx={{ color: 'white' }} />
<CloseRoundedIcon
sx={{ color: theme.launcher.topbar.windowControlIcon.color }}
/>
</Button>
</Box>
<Menu
@ -543,11 +503,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
mt: '0.5vw',
borderRadius: '1vw',
minWidth: '16vw',
color: 'white',
bgcolor: 'rgba(0,0,0,0.82)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(233,64,205,0.25)',
boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
...theme.launcher.topbar.menuPaper,
},
}}
>
@ -571,10 +527,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '2vw',
}}
sx={[{ fontSize: '2vw' }, theme.launcher.topbar.menuUsername]}
>
{username || 'Игрок'}
</Typography>
@ -593,22 +546,17 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
</Box>
</Box>
<Divider sx={{ my: '0.4vw', borderColor: 'rgba(255,255,255,0.08)' }} />
<Divider sx={{ my: '0.4vw', ...theme.launcher.topbar.menuDivider }} />
<MenuItem
onClick={() => {
handleAvatarMenuClose();
navigate('/profile');
}}
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '1.5vw',
gap: '0.5vw',
py: '0.7vw',
'&:hover': {
bgcolor: 'rgba(255,77,77,0.15)',
},
}}
sx={[
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
theme.launcher.topbar.menuItem,
]}
>
<PersonIcon sx={{ fontSize: '2vw' }} /> Профиль
</MenuItem>
@ -619,15 +567,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
handleAvatarMenuClose();
navigate('/dailyquests');
}}
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '1.5vw',
gap: '0.5vw',
py: '0.7vw',
'&:hover': {
bgcolor: 'rgba(255,77,77,0.15)',
},
}}
sx={[
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
theme.launcher.topbar.menuItem,
]}
>
<CalendarMonthIcon sx={{ fontSize: '2vw' }} /> Ежедневные задания
</MenuItem>
@ -638,15 +581,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
handleAvatarMenuClose();
navigate('/daily');
}}
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '1.5vw',
gap: '0.5vw',
py: '0.7vw',
'&:hover': {
bgcolor: 'rgba(255,77,77,0.15)',
},
}}
sx={[
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
theme.launcher.topbar.menuItem,
]}
>
<EmojiEventsIcon sx={{ fontSize: '2vw' }} /> Ежедневная награда
</MenuItem>
@ -656,20 +594,15 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
handleAvatarMenuClose();
navigate('/settings');
}}
sx={{
fontFamily: 'Benzin-Bold',
fontSize: '1.5vw',
gap: '0.5vw',
py: '0.7vw',
'&:hover': {
bgcolor: 'rgba(255,77,77,0.15)',
},
}}
sx={[
{ fontSize: '1.5vw', gap: '0.5vw', py: '0.7vw' },
theme.launcher.topbar.menuItem,
]}
>
<SettingsIcon sx={{ fontSize: '2vw' }} /> Настройки
</MenuItem>
<Divider sx={{ my: '0.4vw', borderColor: 'rgba(255,255,255,0.08)' }} />
<Divider sx={{ my: '0.4vw', ...theme.launcher.topbar.menuDivider }} />
{!isLoginPage && !isRegistrationPage && username && (
<Button
variant="outlined"
@ -678,26 +611,15 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
handleAvatarMenuClose();
logout();
}}
sx={{
width: '8vw',
height: '3vw',
borderRadius: '2.5vw',
fontFamily: 'Benzin-Bold',
fontSize: '1.2vw',
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
color: 'white',
border: 'none',
transition: 'transform 0.3s ease',
'&:hover': {
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
transform: 'scale(1.01)',
boxShadow: '0 4px 15px rgba(242, 113, 33, 0.4)',
sx={[
{
width: '8vw',
height: '3vw',
fontSize: '1.2vw',
m: '0 0 0 18vw',
},
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
m: '0 0 0 18vw',
}}
theme.launcher.topbar.logoutButton,
]}
>
Выйти
</Button>

39
src/theme/themes.ts
View File

@ -7,18 +7,14 @@ declare module '@mui/material/styles' {
default: string;
};
gradients: {
accent: string;
tabs: string;
};
topbar: {
firstBox: {
background: string;
backdropFilter: string;
boxShadow: string;
};
backButton: {
transition: string;
'&:hover': {
transform: string;
};
};
firstBox: SxProps<Theme>;
backButton: SxProps<Theme>;
tabsBox: {
borderColor: string;
};
@ -59,19 +55,25 @@ export const defaultTheme = createTheme({
default: 'Benzin-Bold',
},
gradients: {
accent: '#F27121 0%, #E940CD 50%, #8A2387 100%',
tabs: 'linear-gradient(71deg, rgba(242,113,33,0.18) 0%, rgba(233,64,205,0.14) 70%, rgba(138,35,135,0.16) 100%)',
},
topbar: {
firstBox: {
background:
'linear-gradient(71deg, rgba(242,113,33,0.18) 0%, rgba(233,64,205,0.14) 70%, rgba(138,35,135,0.16) 100%)',
firstBox: (theme: Theme) => ({
background: theme.launcher.gradients.tabs,
backdropFilter: 'blur(10px)',
boxShadow: '0 8px 30px rgba(0,0,0,0.35)',
},
backButton: {
}),
backButton: (theme: Theme) => ({
color: theme.palette.text.primary,
transition: 'transform 0.3s ease',
'&:hover': {
transform: 'scale(1.2)',
},
},
border: 'unset',
}),
tabsBox: {
borderColor: 'transparent',
},
@ -144,9 +146,10 @@ export const defaultTheme = createTheme({
logoutButton: (theme: Theme) => ({
fontFamily: theme.launcher.fonts.default,
borderRadius: '2.5vw',
background:
'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
color: theme.palette.text.primary,
color: 'white',
border: 'none',
transition: 'transform 0.3s ease',
'&:hover': {