From de616ee8ac5bc839d615ba97c53e4a2a8f39c65d Mon Sep 17 00:00:00 2001
From: aurinex <zorrosqd02@gmail.com>
Date: Sun, 14 Dec 2025 13:16:01 +0500
Subject: [PATCH] restyle change skin

---
 src/renderer/pages/Profile.tsx | 366 ++++++++++++++++++---------------
 1 file changed, 203 insertions(+), 163 deletions(-)

diff --git a/src/renderer/pages/Profile.tsx b/src/renderer/pages/Profile.tsx
index 547913a..4423256 100644
--- a/src/renderer/pages/Profile.tsx
+++ b/src/renderer/pages/Profile.tsx
@@ -221,6 +221,9 @@ export default function Profile() {
     }
   };
 
+  const GRADIENT =
+  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
+
   return (
     <Box
       sx={{
@@ -298,170 +301,207 @@ export default function Profile() {
             }}
           >
             <Box
-              sx={{
-                width: '100%',
-                bgcolor: 'rgba(255, 255, 255, 0.05)',
-                padding: '3vw',
-                borderRadius: '1vw',
-                flexShrink: 0,
-                boxSizing: 'border-box',
-                minWidth: 0,
-              }}
-            >
-              <Box
-                sx={{
-                  border: '2px dashed',
-                  borderColor: isDragOver ? 'primary.main' : 'grey.400',
-                  borderRadius: '1vw',
-                  p: '1.5vw',
-                  mb: '1vw',
-                  textAlign: 'center',
-                  cursor: 'pointer',
-                  bgcolor: isDragOver
-                    ? 'rgba(25, 118, 210, 0.08)'
-                    : 'transparent',
-                  transition: 'all 0.2s',
-                }}
-                onDragOver={(e) => {
-                  e.preventDefault();
-                  setIsDragOver(true);
-                }}
-                onDragLeave={() => setIsDragOver(false)}
-                onDrop={handleFileDrop}
-                onClick={() => fileInputRef.current?.click()}
-              >
-                <input
-                  type="file"
-                  ref={fileInputRef}
-                  accept=".png"
-                  style={{ display: 'none' }}
-                  onChange={handleFileSelect}
-                />
-                <Typography sx={{ color: 'white' }}>
-                  {skinFile
-                    ? `Выбран файл: ${skinFile.name}`
-                    : 'Перетащите PNG файл скина или кликните для выбора'}
-                </Typography>
-              </Box>
+  sx={{
+    width: '100%',
+    p: '2.2vw',
+    borderRadius: '1.2vw',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    minWidth: 0,
+    overflow: 'hidden',
+    position: 'relative',
+    background:
+      'radial-gradient(circle at 10% 10%, rgba(242,113,33,0.14), transparent 55%), radial-gradient(circle at 90% 20%, rgba(233,64,205,0.12), transparent 55%), rgba(10,10,20,0.86)',
+    border: '1px solid rgba(255,255,255,0.08)',
+    boxShadow: '0 1.2vw 3.2vw rgba(0,0,0,0.55)',
+    backdropFilter: 'blur(14px)',
+  }}
+>
+  {/* dropzone */}
+  <Box
+    sx={{
+      borderRadius: '1.1vw',
+      p: '1.6vw',
+      mb: '1.1vw',
+      textAlign: 'center',
+      cursor: 'pointer',
+      position: 'relative',
+      overflow: 'hidden',
+      background: 'rgba(255,255,255,0.04)',
+      border: '1px solid rgba(255,255,255,0.10)',
+      transition: 'transform 0.18s ease, border-color 0.18s ease, background 0.18s ease',
+      '&:hover': {
+        transform: 'scale(1.005)',
+        borderColor: 'rgba(242,113,33,0.35)',
+        background: 'rgba(255,255,255,0.05)',
+      },
+      ...(isDragOver
+        ? {
+            borderColor: 'rgba(233,64,205,0.55)',
+            background:
+              'linear-gradient(120deg, rgba(242,113,33,0.10), rgba(233,64,205,0.08), rgba(138,35,135,0.10))',
+          }
+        : null),
 
-              <FormControl
-                color="primary"
-                fullWidth
-                sx={{
-                  mb: '1vw',
-                  color: 'white',
-                  '&:hover .MuiInputLabel-root': {
-                    color: 'rgb(255, 77, 77)',
-                    transition: 'all 0.3s ease-in-out',
-                  },
-                }}
-              >
-                <InputLabel
-                  sx={{
-                    fontFamily: 'Benzin-Bold',
-                    color: 'white',
-                    '&.Mui-focused': {
-                      color: 'rgb(255, 77, 77)',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    transform: 'translate(14px, -9px) scale(0.75)',
-                    '&.MuiInputLabel-shrink': {
-                      transform: 'translate(14px, -9px) scale(0.75)',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                  }}
-                >
-                  Модель скина
-                </InputLabel>
-                <Select
-                  value={skinModel}
-                  label="Модель скина"
-                  onChange={(e) => setSkinModel(e.target.value)}
-                  displayEmpty
-                  sx={{
-                    border: 'none',
-                    '& .MuiSelect-select': {
-                      fontFamily: 'Benzin-Bold',
-                      color: 'white',
-                      paddingTop: '1vw',
-                      paddingBottom: '1vw',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    '&:hover': {
-                      '& .MuiSelect-select': {
-                        color: 'rgb(255, 77, 77)',
-                        transition: 'all 0.3s ease-in-out',
-                      },
-                    },
-                    '&.Mui-focused': {
-                      '& .MuiSelect-select': {
-                        color: 'rgb(255, 77, 77)',
-                        transition: 'all 0.3s ease-in-out',
-                      },
-                    },
-                    '& .MuiOutlinedInput-notchedOutline': {
-                      borderRadius: '5vw',
-                      borderColor: 'rgb(255, 255, 255)',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    '&:hover .MuiOutlinedInput-notchedOutline': {
-                      borderColor: 'rgb(255, 77, 77)',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                      borderColor: 'rgb(255, 77, 77)',
-                      borderWidth: '2px',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    '& .MuiSelect-icon': {
-                      color: 'white',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    '&:hover .MuiSelect-icon': {
-                      color: 'rgb(255, 77, 77)',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                    '&.Mui-focused .MuiSelect-icon': {
-                      color: 'rgb(255, 77, 77)',
-                      transition: 'all 0.3s ease-in-out',
-                    },
-                  }}
-                >
-                  <MenuItem value="">По умолчанию</MenuItem>
-                  <MenuItem value="slim">Тонкая (Alex)</MenuItem>
-                  <MenuItem value="classic">Классическая (Steve)</MenuItem>
-                </Select>
-              </FormControl>
-              <Button
-                sx={{
-                  color: 'white',
-                  borderRadius: '20px',
-                  p: '10px 25px',
-                  backgroundColor: 'rgb(0, 134, 0)',
-                  '&:hover': {
-                    backgroundColor: 'rgba(0, 134, 0, 0.5)',
-                  },
-                  fontFamily: 'Benzin-Bold',
-                }}
-                variant="contained"
-                fullWidth
-                onClick={handleUploadSkin}
-                disabled={uploadStatus === 'loading' || !skinFile}
-                startIcon={
-                  uploadStatus === 'loading' ? (
-                    <FullScreenLoader fullScreen={false} />
-                  ) : null
-                }
-              >
-                {uploadStatus === 'loading' ? (
-                  <FullScreenLoader message="Загрузка..." />
-                ) : (
-                  <Typography sx={{ color: 'white' }}>
-                    Установить скин
-                  </Typography>
-                )}
-              </Button>
-            </Box>
+      // градиентная полоска слева (как акцент)
+      '&:after': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: '0.35vw',
+        background: GRADIENT,
+        opacity: 0.9,
+        pointerEvents: 'none',
+      },
+    }}
+    onDragOver={(e) => {
+      e.preventDefault();
+      setIsDragOver(true);
+    }}
+    onDragLeave={() => setIsDragOver(false)}
+    onDrop={handleFileDrop}
+    onClick={() => fileInputRef.current?.click()}
+  >
+    <input
+      type="file"
+      ref={fileInputRef}
+      accept=".png"
+      style={{ display: 'none' }}
+      onChange={handleFileSelect}
+    />
+
+    <Typography
+      sx={{
+        color: 'rgba(255,255,255,0.92)',
+        fontWeight: 800,
+      }}
+    >
+      {skinFile
+        ? `Выбран файл: ${skinFile.name}`
+        : 'Перетащите PNG файл скина или кликните для выбора'}
+    </Typography>
+
+    <Typography
+      sx={{
+        mt: 0.6,
+        color: 'rgba(255,255,255,0.60)',
+        fontWeight: 700,
+        fontSize: '0.9vw',
+      }}
+    >
+      Только .png • Рекомендуется 64×64
+    </Typography>
+  </Box>
+
+  {/* select */}
+  <FormControl
+    fullWidth
+    size="small"
+    sx={{
+      mb: '1.1vw',
+      '& .MuiInputLabel-root': {
+        color: 'rgba(255,255,255,0.75)',
+        fontFamily: 'Benzin-Bold',
+      },
+      '& .MuiInputLabel-root.Mui-focused': {
+        color: 'rgba(242,113,33,0.95)',
+      },
+    }}
+  >
+    <InputLabel>Модель скина</InputLabel>
+
+    <Select
+      value={skinModel}
+      label="Модель скина"
+      onChange={(e) => setSkinModel(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)',
+        },
+      }}
+    >
+      <MenuItem value="">По умолчанию</MenuItem>
+      <MenuItem value="slim">Тонкая (Alex)</MenuItem>
+      <MenuItem value="classic">Классическая (Steve)</MenuItem>
+    </Select>
+  </FormControl>
+
+  {/* button */}
+  <Button
+    variant="contained"
+    fullWidth
+    onClick={handleUploadSkin}
+    disabled={uploadStatus === 'loading' || !skinFile}
+    disableRipple
+    sx={{
+      borderRadius: '2.5vw',
+      py: '0.95vw',
+      fontFamily: 'Benzin-Bold',
+      color: '#fff',
+      background: GRADIENT,
+      boxShadow: '0 1.0vw 2.8vw rgba(0,0,0,0.45)',
+      transition: 'transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease',
+      '&:hover': {
+        transform: 'scale(1.01)',
+        filter: 'brightness(1.05)',
+      },
+      '&.Mui-disabled': {
+        background: 'rgba(255,255,255,0.10)',
+        color: 'rgba(255,255,255,0.55)',
+      },
+    }}
+  >
+    {uploadStatus === 'loading' ? (
+      <Typography sx={{ fontWeight: 900, color: 'rgba(255,255,255,0.9)' }}>
+        Загрузка...
+      </Typography>
+    ) : (
+      <Typography sx={{ fontWeight: 900, color: 'rgba(255,255,255,0.95)' }}>
+        Установить скин
+      </Typography>
+    )}
+  </Button>
+</Box>
             <Box
               sx={{
                 display: 'flex',