paint buttons / minor change

src/renderer/components/TopBar.tsx

@@ -34,6 +34,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
   const navigate = useNavigate();
   const [coins, setCoins] = useState<number>(0);
   const [value, setValue] = useState(0);
+  const [activePage, setActivePage] = useState('versions');
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -60,7 +61,18 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
       return 'Запуск';
     }
     if (isVersionsExplorerPage) {
-      return 'Версии';
+      if (activePage === 'versions') {
+        return 'Версии';
+      }
+      if (activePage === 'profile') {
+        return 'Профиль';
+      }
+      if (activePage === 'shop') {
+        return 'Магазин';
+      }
+      if (activePage === 'marketplace') {
+        return 'Рынок';
+      }
     }
     return 'Неизвестная страница';
   };
@@ -122,7 +134,6 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
         {(isLaunchPage || isRegistrationPage) && (
           <Button
             variant="outlined"
-            color="primary"
             onClick={() => handleLaunchPage()}
             sx={{
               width: '3em',
@@ -138,42 +149,95 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
           </Button>
         )}
         {!isLaunchPage && !isRegistrationPage && !isLoginPage && (
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Box
+            sx={{
+              borderBottom: 1,
+              borderColor: 'transparent',
+              '& .MuiTabs-indicator': {
+                backgroundColor: 'rgba(255, 77, 77, 1)',
+              },
+            }}
+          >
             <Tabs
               value={value}
               onChange={handleChange}
               aria-label="basic tabs example"
+              disableRipple={true}
             >
               <Tab
                 label="Версии"
+                disableRipple={true}
+                onClick={() => {
+                  setActivePage('versions');
+                }}
                 sx={{
                   color: 'white',
                   fontFamily: 'Benzin-Bold',
                   fontSize: '0.7em',
+                  '&.Mui-selected': {
+                    color: 'rgba(255, 77, 77, 1)',
+                  },
+                  '&:hover': {
+                    color: 'rgb(199, 199, 199)',
+                  },
+                  transition: 'all 0.3s ease',
                 }}
               />
               <Tab
                 label="Профиль"
+                disableRipple={true}
+                onClick={() => {
+                  setActivePage('profile');
+                }}
                 sx={{
                   color: 'white',
                   fontFamily: 'Benzin-Bold',
                   fontSize: '0.7em',
+                  '&.Mui-selected': {
+                    color: 'rgba(255, 77, 77, 1)',
+                  },
+                  '&:hover': {
+                    color: 'rgb(199, 199, 199)',
+                  },
+                  transition: 'all 0.3s ease',
                 }}
               />
               <Tab
                 label="Магазин"
+                disableRipple={true}
+                onClick={() => {
+                  setActivePage('shop');
+                }}
                 sx={{
                   color: 'white',
                   fontFamily: 'Benzin-Bold',
                   fontSize: '0.7em',
+                  '&.Mui-selected': {
+                    color: 'rgba(255, 77, 77, 1)',
+                  },
+                  '&:hover': {
+                    color: 'rgb(199, 199, 199)',
+                  },
+                  transition: 'all 0.3s ease',
                 }}
               />
               <Tab
                 label="Рынок"
+                disableRipple={true}
+                onClick={() => {
+                  setActivePage('marketplace');
+                }}
                 sx={{
                   color: 'white',
                   fontFamily: 'Benzin-Bold',
                   fontSize: '0.7em',
+                  '&.Mui-selected': {
+                    color: 'rgba(255, 77, 77, 1)',
+                  },
+                  '&:hover': {
+                    color: 'rgb(199, 199, 199)',
+                  },
+                  transition: 'all 0.3s ease',
                 }}
               />
             </Tabs>
@@ -193,7 +257,10 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
           WebkitAppRegion: 'drag',
         }}
       >
-        <Typography variant="h6" sx={{ color: 'white' }}>
+        <Typography
+          variant="h6"
+          sx={{ color: 'white', fontFamily: 'Benzin-Bold' }}
+        >
           {getPageTitle()}
         </Typography>
       </Box>