add: background, custom topbar

src/renderer/components/MinecraftBackround.tsx

@@ -0,0 +1,73 @@
+import { Box } from '@mui/material';
+import heart from '../../../assets/images/heart.svg';
+
+export default function MinecraftBackround() {
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        opacity: 0.25,
+        overflow: 'hidden',
+      }}
+    >
+      <Box
+        sx={{
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+          gap: '1vw',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          rotate: '-20deg',
+          paddingTop: '30vw',
+        }}
+      >
+        <img
+          src={heart}
+          style={{ width: '20vw', height: '20vw', rotate: '-20deg' }}
+        />
+        <img
+          src={heart}
+          style={{ width: '20vw', height: '20vw', paddingBottom: '5vw' }}
+        />
+        <img
+          src={heart}
+          style={{ width: '20vw', height: '20vw', rotate: '20deg' }}
+        />
+      </Box>
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          gap: '1vw',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          rotate: '160deg',
+          paddingTop: '80vw',
+        }}
+      >
+        <img
+          src={heart}
+          style={{ width: '20vw', height: '20vw', rotate: '-20deg' }}
+        />
+        <img
+          src={heart}
+          style={{ width: '20vw', height: '20vw', paddingBottom: '5vw' }}
+        />
+        <img
+          src={heart}
+          style={{ width: '20vw', height: '20vw', rotate: '20deg' }}
+        />
+      </Box>
+    </Box>
+  );
+}

src/renderer/components/TopBar.tsx

@@ -0,0 +1,109 @@
+import { Box, Button, Typography } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import { useLocation } from 'react-router-dom';
+
+declare global {
+  interface Window {
+    electron: {
+      ipcRenderer: {
+        invoke(channel: string, ...args: unknown[]): Promise<any>;
+        on(channel: string, func: (...args: unknown[]) => void): void;
+        removeAllListeners(channel: string): void;
+      };
+    };
+  }
+}
+
+// Определяем пропсы
+interface TopBarProps {
+  onRegister?: () => void; // Опционально, если нужен обработчик регистрации
+}
+
+export default function TopBar({ onRegister }: TopBarProps) {
+  // Получаем текущий путь
+  const location = useLocation();
+  const isLoginPage = location.pathname === '/login';
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '50px',
+        zIndex: 1000,
+        width: '100%',
+        WebkitAppRegion: 'drag',
+        overflow: 'hidden',
+        justifyContent: 'flex-end', // Всё содержимое справа
+      }}
+    >
+      {/* Правая часть со всеми кнопками */}
+      <Box
+        sx={{
+          display: 'flex',
+          WebkitAppRegion: 'no-drag',
+          gap: '2vw',
+          padding: '1em',
+          alignItems: 'center',
+        }}
+      >
+        {/* Кнопка регистрации, если на странице логина */}
+        {isLoginPage && (
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => onRegister && onRegister()}
+            sx={{
+              width: '10em',
+              height: '3em',
+              borderRadius: '1.5vw',
+              color: 'white',
+              backgroundImage: 'linear-gradient(to right, #7BB8FF, #FFB7ED)',
+              border: 'unset',
+              '&:hover': {
+                backgroundImage: 'linear-gradient(to right, #6AA8EE, #EEA7DD)',
+              },
+              boxShadow: '0.5em 0.5em 0.5em 0px #00000040 inset',
+            }}
+          >
+            Регистрация
+          </Button>
+        )}
+
+        {/* Кнопки управления окном */}
+        <Button
+          onClick={() => {
+            window.electron.ipcRenderer.invoke('minimize-app');
+          }}
+          sx={{
+            minWidth: 'unset',
+            minHeight: 'unset',
+            width: '3em',
+            height: '3em',
+            borderRadius: '50%',
+          }}
+        >
+          <MinimizeIcon sx={{ color: 'white' }} />
+        </Button>
+        <Button
+          onClick={() => {
+            window.electron.ipcRenderer.invoke('close-app');
+          }}
+          sx={{
+            minWidth: 'unset',
+            minHeight: 'unset',
+            width: '3em',
+            height: '3em',
+            borderRadius: '50%',
+          }}
+        >
+          <CloseIcon sx={{ color: 'white' }} />
+        </Button>
+      </Box>
+    </Box>
+  );
+}