minor fix marketplace + xyi ego znaet

2025-12-13 18:59:30 +05:00
parent 74a3e3c7cf
commit d9a3a1cd1f
16 changed files with 459 additions and 226 deletions
--- a/src/renderer/components/CoinsDisplay.tsx
+++ b/src/renderer/components/CoinsDisplay.tsx
@ -53,28 +53,28 @@ export default function CoinsDisplay({
    switch (size) {
      case 'small':
        return {
-          containerPadding: '4px 8px',
-          iconSize: '16px',
-          fontSize: '12px',
-          borderRadius: '12px',
-          gap: '6px',
+          containerPadding: '0.4vw 0.8vw',
+          iconSize: '1.4vw',
+          fontSize: '1vw',
+          borderRadius: '2vw',
+          gap: '0.6vw',
        };
      case 'large':
        return {
-          containerPadding: '8px 16px',
-          iconSize: '28px',
-          fontSize: '18px',
-          borderRadius: '20px',
-          gap: '10px',
+          containerPadding: '0.4vw 1.2vw',
+          iconSize: '2.2vw',
+          fontSize: '1.6vw',
+          borderRadius: '1.8vw',
+          gap: '0.8vw',
        };
      case 'medium':
      default:
        return {
-          containerPadding: '6px 12px',
-          iconSize: '24px',
-          fontSize: '16px',
-          borderRadius: '16px',
-          gap: '8px',
+          containerPadding: '0.4vw 1vw',
+          iconSize: '2vw',
+          fontSize: '1.4vw',
+          borderRadius: '1.6vw',
+          gap: '0.6vw',
        };
    }
  };
--- a/src/renderer/components/Icons/GradientVisibilityToggleIcon.tsx
+++ b/src/renderer/components/Icons/GradientVisibilityToggleIcon.tsx
@ -1,51 +0,0 @@
-import * as React from "react";
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
-
-type Props = SvgIconProps & {
-  crossed?: boolean; // true = перечеркнуть
-};
-
-export default function GradientVisibilityToggleIcon({ crossed, sx, ...props }: Props) {
-  const id = React.useId();
-
-  return (
-    <SvgIcon
-      {...props}
-      viewBox="0 0 24 24"
-      sx={{
-        ...sx,
-
-        // анимация "рисования" линии
-        "& .slash": {
-          strokeDasharray: 100,
-          strokeDashoffset: crossed ? 0 : 100,
-          transition: "stroke-dashoffset 520ms ease",
-        },
-      }}
-    >
-      <defs>
-        <linearGradient id={id} x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#F27121" />
-          <stop offset="70%" stopColor="#E940CD" />
-          <stop offset="100%" stopColor="#8A2387" />
-        </linearGradient>
-      </defs>
-
-      {/* сам "глаз" */}
-      <path
-        fill={`url(#${id})`}
-        d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
-      />
-
-      {/* линия "перечёркивания" */}
-      <path
-        className="slash"
-        d="M4 4 L20 20"
-        fill="none"
-        stroke={`url(#${id})`}
-        strokeWidth="2.4"
-        strokeLinecap="round"
-      />
-    </SvgIcon>
-  );
-}
--- a/src/renderer/components/Login/AuthForm.tsx
+++ b/src/renderer/components/Login/AuthForm.tsx
@ -3,8 +3,7 @@ import { Box, Button, TextField, Typography, InputAdornment, IconButton } from '
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 import GradientTextField from '../GradientTextField';
-import GradientVisibilityToggleIcon from '../Icons/GradientVisibilityToggleIcon'
-import GradientVisibilityIcon from '../Icons/GradientVisibilityIcon'
+import GradientVisibilityToggleIcon from '../../assets/Icons/GradientVisibilityToggleIcon'

 interface AuthFormProps {
  config: {
--- a/src/renderer/components/Login/MemorySlider.tsx
+++ b/src/renderer/components/Login/MemorySlider.tsx
@ -1,25 +1,187 @@
-import { Slider } from '@mui/material';
+import React from 'react';
+import { Box, Slider, Typography } from '@mui/material';

 interface MemorySliderProps {
  memory: number;
  onChange: (e: Event, value: number | number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
 }

-const MemorySlider = ({ memory, onChange }: MemorySliderProps) => {
+const gradientPrimary =
+  'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)';
+
+const formatMb = (v: number) => `${v} MB`;
+const formatGb = (v: number) => `${(v / 1024).toFixed(v % 1024 === 0 ? 0 : 1)} GB`;
+
+const MemorySlider = ({
+  memory,
+  onChange,
+  min = 1024,
+  max = 32768,
+  step = 1024,
+}: MemorySliderProps) => {
+  // marks только на “красивых” значениях, чтобы не было каши
+  const marks = [
+    { value: 1024, label: '1 GB' },
+    { value: 4096, label: '4 GB' },
+    { value: 8192, label: '8 GB' },
+    { value: 16384, label: '16 GB' },
+    { value: 32768, label: '32 GB' },
+  ].filter((m) => m.value >= min && m.value <= max);
+
  return (
-    <Slider
-      name="memory"
-      aria-label="Memory"
-      defaultValue={4096}
-      valueLabelDisplay="auto"
-      shiftStep={1024}
-      step={1024}
-      marks
-      min={1024}
-      max={32628}
-      value={memory}
-      onChange={onChange}
-    />
+    <Box sx={{ width: '100%' }}>
+      {/* Header */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'baseline',
+          justifyContent: 'space-between',
+          mb: '1.2vh',
+        }}
+      >
+        <Typography
+          sx={{
+            fontFamily: 'Benzin-Bold, system-ui, -apple-system, Segoe UI, Roboto, Arial',
+            fontWeight: 800,
+            fontSize: '1.1vw',
+            color: '#fff',
+            textTransform: 'uppercase',
+            letterSpacing: 0.5,
+          }}
+        >
+          Память
+        </Typography>
+
+        <Typography
+          sx={{
+            fontFamily: 'Benzin-Bold, system-ui, -apple-system, Segoe UI, Roboto, Arial',
+            fontWeight: 800,
+            fontSize: '1.1vw',
+            backgroundImage: gradientPrimary,
+            WebkitBackgroundClip: 'text',
+            WebkitTextFillColor: 'transparent',
+          }}
+        >
+          {memory >= 1024 ? formatGb(memory) : formatMb(memory)}
+        </Typography>
+      </Box>
+
+      <Slider
+        name="memory"
+        aria-label="Memory"
+        valueLabelDisplay="auto"
+        valueLabelFormat={(v) => (v >= 1024 ? formatGb(v as number) : formatMb(v as number))}
+        shiftStep={step}
+        step={step}
+        marks={marks}
+        min={min}
+        max={max}
+        value={memory}
+        onChange={onChange}
+        sx={{
+          px: '0.2vw',
+
+          // rail (фон полосы)
+          '& .MuiSlider-rail': {
+            opacity: 1,
+            height: '0.9vh',
+            borderRadius: '999vw',
+            backgroundColor: 'rgba(255,255,255,0.10)',
+            boxShadow: 'inset 0 0.25vh 0.6vh rgba(0,0,0,0.45)',
+          },
+
+          // track (заполненная часть)
+          '& .MuiSlider-track': {
+            height: '0.9vh',
+            borderRadius: '999vw',
+            border: 'none',
+            background: gradientPrimary,
+            boxShadow: '0 0.6vh 1.6vh rgba(233,64,205,0.18)',
+          },
+
+          // thumb (ползунок)
+          '& .MuiSlider-thumb': {
+            width: '1.6vw',
+            height: '1.6vw',
+            minWidth: 14,
+            minHeight: 14,
+            borderRadius: '999vw',
+            background: 'rgba(10,10,20,0.92)',
+            border: '0.22vw solid rgba(255,255,255,0.18)',
+            boxShadow:
+              '0 0.9vh 2.4vh rgba(0,0,0,0.55), 0 0 1.2vw rgba(242,113,33,0.20)',
+            transition: 'transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease',
+            '&:hover': {
+              // transform: 'scale(1.06)',
+              borderColor: 'rgba(242,113,33,0.55)',
+              boxShadow:
+                '0 1.1vh 2.8vh rgba(0,0,0,0.62), 0 0 1.6vw rgba(233,64,205,0.28)',
+            },
+
+            // внутренний “свет”
+            '&:before': {
+              content: '""',
+              position: 'absolute',
+              inset: '18%',
+              borderRadius: '999vw',
+              background: gradientPrimary,
+              opacity: 0.85,
+              filter: 'blur(0.3vw)',
+            },
+          },
+
+          // value label (плашка значения)
+          '& .MuiSlider-valueLabel': {
+            fontFamily: 'Benzin-Bold, system-ui, -apple-system, Segoe UI, Roboto, Arial',
+            fontSize: '0.85vw',
+            borderRadius: '1.2vw',
+            padding: '0.4vh 0.8vw',
+            color: '#fff',
+            background: 'rgba(0,0,0,0.55)',
+            border: '1px solid rgba(255,255,255,0.10)',
+            backdropFilter: 'blur(10px)',
+            boxShadow: '0 1.2vh 3vh rgba(0,0,0,0.55)',
+            '&:before': { display: 'none' },
+          },
+
+          // marks (точки)
+          '& .MuiSlider-mark': {
+            width: '0.35vw',
+            height: '0.35vw',
+            minWidth: 4,
+            minHeight: 4,
+            borderRadius: '999vw',
+            backgroundColor: 'rgba(255,255,255,0.18)',
+          },
+          '& .MuiSlider-markActive': {
+            backgroundColor: 'rgba(255,255,255,0.55)',
+          },
+
+          // mark labels (подписи)
+          '& .MuiSlider-markLabel': {
+            color: 'rgba(255,255,255,0.55)',
+            fontSize: '0.75vw',
+            marginTop: '1vh',
+            userSelect: 'none',
+          },
+
+          // focus outline
+          '& .MuiSlider-thumb.Mui-focusVisible': {
+            outline: 'none',
+            boxShadow:
+              '0 0 0 0.25vw rgba(242,113,33,0.20), 0 1.1vh 2.8vh rgba(0,0,0,0.62)',
+          },
+        }}
+      />
+
+      {/* Subtext */}
+      <Typography sx={{ mt: '1.2vh', color: 'rgba(255,255,255,0.55)', fontSize: '0.85vw' }}>
+        Шаг: {formatGb(step)} • Рекомендуем: 4–8 GB для большинства сборок
+      </Typography>
+    </Box>
  );
 };

--- a/src/renderer/components/Settings/SettingsModal.tsx
+++ b/src/renderer/components/Settings/SettingsModal.tsx
@ -10,7 +10,7 @@ interface SettingsModalProps {
    memory: number;
    preserveFiles: string[];
  };
-  onConfigChange: (newConfig: {
+  onConfigChange: (updater: (prev: { memory: number; preserveFiles: string[] }) => {
    memory: number;
    preserveFiles: string[];
  }) => void;
@ -58,7 +58,7 @@ const SettingsModal = ({
          packName={packName}
          initialSelected={config.preserveFiles}
          onSelectionChange={(selected) => {
-            onConfigChange({ ...config, preserveFiles: selected });
+            onConfigChange((prev) => ({ ...prev, preserveFiles: selected }));
          }}
        />
        <Typography variant="body1" sx={{ color: 'white' }}>
@ -66,8 +66,9 @@ const SettingsModal = ({
        </Typography>
        <MemorySlider
          memory={config.memory}
-          onChange={(e, value) => {
-            onConfigChange({ ...config, memory: value as number });
+          onChange={(_, value) => {
+            const next = Array.isArray(value) ? value[0] : value;
+            onConfigChange((prev) => ({ ...prev, memory: next }));
          }}
        />
        <Button