From d38faccf6f18380bd8af6040992ee330940a03e7 Mon Sep 17 00:00:00 2001
From: aurinex <zorrosqd02@gmail.com>
Date: Mon, 21 Jul 2025 17:07:49 +0500
Subject: [PATCH] fix design marketplace

---
 src/renderer/components/PlayerInventory.tsx |  41 +++++--
 src/renderer/components/TopBar.tsx          |   8 +-
 src/renderer/pages/Marketplace.tsx          | 121 +++++++++++++++++---
 3 files changed, 139 insertions(+), 31 deletions(-)

diff --git a/src/renderer/components/PlayerInventory.tsx b/src/renderer/components/PlayerInventory.tsx
index dfafb73..4d7d34c 100644
--- a/src/renderer/components/PlayerInventory.tsx
+++ b/src/renderer/components/PlayerInventory.tsx
@@ -183,13 +183,13 @@ export default function PlayerInventory({
   };
 
   return (
-    <Box sx={{ mt: 4 }}>
+    <Box sx={{ mt: '1vw' }}>
       <Box
         sx={{
           display: 'flex',
-          justifyContent: 'space-between',
+          gap: '1vw',
           alignItems: 'center',
-          mb: 2,
+          mb: '2vw',
         }}
       >
         <Typography variant="h5" color="white">
@@ -199,6 +199,18 @@ export default function PlayerInventory({
           variant="outlined"
           onClick={fetchPlayerInventory}
           disabled={loading}
+          sx={{
+            borderRadius: '20px',
+            p: '10px 25px',
+            color: 'white',
+            borderColor: 'rgba(255, 77, 77, 1)',
+            '&:hover': {
+              backgroundColor: 'rgba(255, 77, 77, 1)',
+              borderColor: 'rgba(255, 77, 77, 1)',
+            },
+            fontFamily: 'Benzin-Bold',
+            fontSize: '1vw',
+          }}
         >
           Обновить
         </Button>
@@ -235,28 +247,33 @@ export default function PlayerInventory({
                         cursor: 'pointer',
                         transition: 'transform 0.2s',
                         '&:hover': { transform: 'scale(1.03)' },
+                        borderRadius: '1vw',
                       }}
                       onClick={() => handleOpenSellDialog(item)}
                     >
                       <CardMedia
                         component="img"
                         sx={{
-                          height: 100,
+                          minWidth: '10vw',
+                          minHeight: '10vw',
+                          maxHeight: '10vw',
                           objectFit: 'contain',
-                          bgcolor: 'rgba(0, 0, 0, 0.2)',
-                          p: 1,
+                          bgcolor: 'white',
+                          p: '1vw',
                           imageRendering: 'pixelated',
                         }}
                         image={`/minecraft/${item.material.toLowerCase()}.png`}
                         alt={item.material}
                       />
                       <CardContent sx={{ p: 1 }}>
-                        <Typography variant="body2" color="white" noWrap>
-                          {getItemDisplayName(item.material)}
-                        </Typography>
-                        <Typography variant="body2" color="white">
-                          x{item.amount}
-                        </Typography>
+                        <Box sx={{ display: 'flex', gap: '1vw', justifyContent: 'space-between' }}>
+                          <Typography variant="body2" color="white" noWrap>
+                            {getItemDisplayName(item.material)}
+                          </Typography>
+                          <Typography variant="body2" color="white">
+                            {item.amount > 1 ? `x${item.amount}` : ''}
+                          </Typography>
+                        </Box>
                         {Object.keys(item.enchants || {}).length > 0 && (
                           <Typography
                             variant="caption"
diff --git a/src/renderer/components/TopBar.tsx b/src/renderer/components/TopBar.tsx
index 3e93800..f583d79 100644
--- a/src/renderer/components/TopBar.tsx
+++ b/src/renderer/components/TopBar.tsx
@@ -178,7 +178,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -197,7 +197,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -216,7 +216,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
@@ -235,7 +235,7 @@ export default function TopBar({ onRegister, username }: TopBarProps) {
                     color: 'rgba(255, 77, 77, 1)',
                   },
                   '&:hover': {
-                    color: 'rgb(199, 199, 199)',
+                    color: 'rgb(177, 52, 52)',
                   },
                   transition: 'all 0.3s ease',
                 }}
diff --git a/src/renderer/pages/Marketplace.tsx b/src/renderer/pages/Marketplace.tsx
index b9f4edc..5ab13bb 100644
--- a/src/renderer/pages/Marketplace.tsx
+++ b/src/renderer/pages/Marketplace.tsx
@@ -63,6 +63,19 @@ export default function Marketplace() {
     type: 'success',
   });
 
+  const translateServer = (server: Server) => {
+    switch (server.name) {
+      case 'Server minecraft.hub.popa-popa.ru':
+        return 'Хаб';
+      case 'Server survival.hub.popa-popa.ru':
+        return 'Выживание';
+      case 'Server minecraft.minigames.popa-popa.ru':
+        return 'Миниигры';
+      default:
+        return server.name;
+    }
+  };
+
   // Функция для проверки онлайн-статуса игрока и определения сервера
   const checkPlayerStatus = async () => {
     if (!username) return;
@@ -241,32 +254,81 @@ export default function Marketplace() {
   }
 
   return (
-    <Box sx={{ padding: 3 }}>
-      <Typography variant="h4" color="white" gutterBottom>
-        Рынок сервера {playerServer?.name || ''}
-      </Typography>
+    <Box sx={{ padding: 3, width: '95%', height: '80%' }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '1vw' }}>
+        <Typography variant="h4" color="white" gutterBottom>
+          Рынок сервера{' '}
+        </Typography>
+        <Typography
+          style={{
+            color: 'white',
+            backgroundColor: 'rgba(255, 77, 77, 1)',
+            padding: '0vw 2vw',
+            borderRadius: '5vw',
+            fontFamily: 'Benzin-Bold',
+            textAlign: 'center',
+            fontSize: '2vw',
+          }}
+        >
+          {translateServer(playerServer || { name: '' })}
+        </Typography>
+      </Box>
 
       {/* Вкладки */}
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'transparent' }}>
         <Tabs
           value={tabValue}
           onChange={handleTabChange}
           aria-label="marketplace tabs"
+          disableRipple={true}
+          sx={{
+            '& .MuiTabs-indicator': {
+              backgroundColor: 'rgba(255, 77, 77, 1)',
+            },
+          }}
         >
-          <Tab label="Товары" />
-          <Tab label="Мой инвентарь" />
+          <Tab
+            label="Товары"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
+          <Tab
+            label="Мой инвентарь"
+            disableRipple={true}
+            sx={{
+              fontFamily: 'Benzin-Bold',
+              color: 'white',
+              '&.Mui-selected': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              '&:hover': {
+                color: 'rgba(255, 77, 77, 1)',
+              },
+              transition: 'all 0.3s ease',
+            }}
+          />
         </Tabs>
       </Box>
 
       {/* Содержимое вкладки "Товары" */}
       <TabPanel value={tabValue} index={0}>
         {marketLoading ? (
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+          <Box sx={{ display: 'flex', justifyContent: 'center', mt: '50vw' }}>
             <CircularProgress />
           </Box>
         ) : !marketItems || marketItems.items.length === 0 ? (
           <Box sx={{ mt: 4, textAlign: 'center' }}>
-            <Typography variant="h6" color="white">
+            <Typography variant="h6" color="white" sx={{ mt: '10vw' }}>
               На данный момент на рынке нет предметов.
             </Typography>
             <Button
@@ -275,7 +337,18 @@ export default function Marketplace() {
               onClick={() =>
                 playerServer && loadMarketItems(playerServer.ip, 1)
               }
-              sx={{ mt: 2 }}
+              sx={{
+                mt: 2,
+                borderRadius: '20px',
+                p: '10px 25px',
+                color: 'white',
+                backgroundColor: 'rgb(255, 77, 77)',
+                '&:hover': {
+                  backgroundColor: 'rgba(255, 77, 77, 0.5)',
+                },
+                fontFamily: 'Benzin-Bold',
+                fontSize: '1vw',
+              }}
             >
               Обновить
             </Button>
@@ -285,14 +358,21 @@ export default function Marketplace() {
             <Grid container spacing={2} sx={{ mt: 2 }}>
               {marketItems.items.map((item) => (
                 <Grid item xs={12} sm={6} md={4} lg={3} key={item.id}>
-                  <Card sx={{ bgcolor: 'rgba(255, 255, 255, 0.05)' }}>
+                  <Card
+                    sx={{
+                      bgcolor: 'rgba(255, 255, 255, 0.05)',
+                      borderRadius: '1vw',
+                    }}
+                  >
                     <CardMedia
                       component="img"
                       sx={{
-                        height: 140,
+                        minWidth: '10vw',
+                        minHeight: '10vw',
+                        maxHeight: '10vw',
                         objectFit: 'contain',
-                        bgcolor: 'rgba(0, 0, 0, 0.2)',
-                        p: 1,
+                        bgcolor: 'white',
+                        p: '1vw',
                         imageRendering: 'pixelated',
                       }}
                       image={`/minecraft/${item.material.toLowerCase()}.png`}
@@ -323,7 +403,18 @@ export default function Marketplace() {
                         variant="contained"
                         color="primary"
                         fullWidth
-                        sx={{ mt: 2 }}
+                        sx={{
+                          mt: '1vw',
+                          borderRadius: '20px',
+                          p: '0.3vw 0vw',
+                          color: 'white',
+                          backgroundColor: 'rgb(255, 77, 77)',
+                          '&:hover': {
+                            backgroundColor: 'rgba(255, 77, 77, 0.5)',
+                          },
+                          fontFamily: 'Benzin-Bold',
+                          fontSize: '1vw',
+                        }}
                         onClick={() => handleBuyItem(item.id)}
                       >
                         Купить