From 2777e9b0088c03eeab5fefb5b6f03be69045a8a9 Mon Sep 17 00:00:00 2001
From: aurinex <zorrosqd02@gmail.com>
Date: Mon, 29 Dec 2025 00:04:23 +0500
Subject: [PATCH] =?UTF-8?q?minor=20redesign=20shop(=D0=B7=D0=B0=D0=B2?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=20=D0=B4=D0=BE=D0=B4=D0=B5=D0=BB=D0=B0=D1=8E?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/components/BonusShopItem.tsx |   2 +-
 src/renderer/pages/Shop.tsx               | 336 +++++++++++-----------
 2 files changed, 164 insertions(+), 174 deletions(-)

diff --git a/src/renderer/components/BonusShopItem.tsx b/src/renderer/components/BonusShopItem.tsx
index ff32526..ac7cc16 100644
--- a/src/renderer/components/BonusShopItem.tsx
+++ b/src/renderer/components/BonusShopItem.tsx
@@ -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',
diff --git a/src/renderer/pages/Shop.tsx b/src/renderer/pages/Shop.tsx
index b03061c..108c7b7 100644
--- a/src/renderer/pages/Shop.tsx
+++ b/src/renderer/pages/Shop.tsx
@@ -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