Vibe-code дизайн fix (2)

2026-07-17 14:09:30 +03:00 · 2026-07-17 14:09:30 +03:00 · 63455578b1
commit 63455578b1
parent 5669a70156
10 changed files with 32 additions and 99 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -86,10 +86,6 @@ function App() {
                                    🎮 Autogenerated wiki
                                </LogoText>
                            </Box>
-
-                            {/* Right side - Navigation */}
-                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                            </Box>
                        </Toolbar>
                    </Container>
                </StyledAppBar>
--- a/src/classes/Ability.tsx
+++ b/src/classes/Ability.tsx
@ -1,4 +1,4 @@
-import {Accordion, AccordionDetails, AccordionSummary} from "@mui/material";
+import {AccordionDetails, AccordionSummary} from "@mui/material";
 import {ExpandMore} from "@mui/icons-material";
 import React from "react";
 import {IAbilityShort} from "../types/IAbility";
@ -6,15 +6,7 @@ import {getIcon} from "./ModifiersProvideTable";
 import {IMod} from "../types/Imod";
 import AbilityFull from "./AbilityFull";
 import {Irace} from "../types/Irace";
-import {styled} from '@mui/material/styles';
-
-const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    '&:before': { display: 'none' },
-    '&.Mui-expanded': { margin: '0 0 8px 0' },
-}));
+import {StyledAccordion} from "../commons/StyledAccordion";

 interface IAbilityProps {
    ability: IAbilityShort,
--- a/src/classes/DeathExplosion.tsx
+++ b/src/classes/DeathExplosion.tsx
@ -1,5 +1,4 @@
 import {
-    Accordion,
    AccordionDetails,
    AccordionSummary, Grid2, Paper,
    Table,
@ -24,15 +23,8 @@ import {IDeathExplosion} from "../types/IDeathExplosion";
 import Required from "./Required";
 import ArmorTypeNames from "../types/ArmorTypeValues";
 import DpsTable from "./DpsTable";
-import {styled} from '@mui/material/styles';
-
-const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    '&:before': { display: 'none' },
-    '&.Mui-expanded': { margin: '0 0 8px 0' },
-}));
+import {StyledAccordion} from "../commons/StyledAccordion";
+import {styled} from "@mui/material/styles";

 const StyledPaper = styled(Paper)(({ theme }) => ({
    background: 'rgba(255, 255, 255, 0.03)',
--- a/src/classes/Weapon.tsx
+++ b/src/classes/Weapon.tsx
@ -1,20 +1,12 @@
 import React from "react";
 import {IShortWeapon, IWeapon} from "../types/IUnit";
-import {Accordion, AccordionDetails, AccordionSummary} from "@mui/material";
+import {AccordionDetails, AccordionSummary} from "@mui/material";
 import {IconUrl} from "../core/api";
 import {ExpandMore} from "@mui/icons-material";
 import {IMod} from "../types/Imod";
 import {Irace} from "../types/Irace";
 import WeaponFull from "./WeaponFull";
-import {styled} from '@mui/material/styles';
-
-const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    '&:before': { display: 'none' },
-    '&.Mui-expanded': { margin: '0 0 8px 0' },
-}));
+import {StyledAccordion} from "../commons/StyledAccordion";

 interface IWeaponProps {
    weapon: IShortWeapon,
--- a/src/classes/WeaponSlot.tsx
+++ b/src/classes/WeaponSlot.tsx
@ -44,7 +44,7 @@ const WeaponSlot= (props: WeaponSlotProps) => {
            <SectionTitle>{header}</SectionTitle>
            {weaponsSorted.filter(wp => !wp[1].filename.includes("dummy")).map(wp =>

-                <div style={{marginLeft: 20}}><Weapon race={props.race} mod={props.mod} isDefault={!haveDummy || wp[1].filename === firstWeapon.filename} weapon={wp[1]} haveReinforceMenu={haveReinforceMenu}/></div>
+                <div style={{marginTop: 10}}><Weapon race={props.race} mod={props.mod} isDefault={!haveDummy || wp[1].filename === firstWeapon.filename} weapon={wp[1]} haveReinforceMenu={haveReinforceMenu}/></div>
            )}
        </div>
    )
--- a/src/classes/building/BuildingAddon.tsx
+++ b/src/classes/building/BuildingAddon.tsx
@ -1,6 +1,5 @@
 import React from "react";
 import {
-    Accordion,
    AccordionDetails,
    AccordionSummary,
    Grid2,
@ -18,16 +17,11 @@ import {ExpandMore} from "@mui/icons-material";
 import {IMod} from "../../types/Imod";
 import {getIcon, ModifiersProvidesTable,} from "../ModifiersProvideTable";
 import Required from "../Required";
-import {styled} from '@mui/material/styles';
+import {StyledAccordion} from "../../commons/StyledAccordion";
 import {DescriptionBox} from "../../commons/DescriptionBox";
+import {styled} from "@mui/material/styles";
+

-const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    '&:before': { display: 'none' },
-    '&.Mui-expanded': { margin: '0 0 8px 0' },
-}));

 const StyledPaper = styled(Paper)(({ theme }) => ({
    background: 'rgba(255, 255, 255, 0.03)',
--- a/src/classes/building/Research.tsx
+++ b/src/classes/building/Research.tsx
@ -1,7 +1,6 @@
 import {IMod} from "../../types/Imod";
 import {IResearch} from "../../types/IResearch";
 import {
-    Accordion,
    AccordionDetails,
    AccordionSummary,
    Grid2,
@ -20,15 +19,8 @@ import React from "react";
 import {IBuilding} from "../../types/IBuilding";
 import {IResearchShort} from "../../types/IResearchShort";
 import ResearchFull from "./ResearchFull";
-import {styled} from '@mui/material/styles';
-
-const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
-    borderRadius: '12px',
-    '&:before': { display: 'none' },
-    '&.Mui-expanded': { margin: '0 0 8px 0' },
-}));
+import {StyledAccordion} from "../../commons/StyledAccordion";
+import {styled} from "@mui/material/styles";

 const StyledLink = styled('a')(({ theme }) => ({
    color: '#e94560',
--- a/src/commons/StyledAccordion.tsx
+++ b/src/commons/StyledAccordion.tsx
@ -0,0 +1,10 @@
+import {Accordion} from '@mui/material';
+import {styled} from '@mui/material/styles';
+
+export const StyledAccordion = styled(Accordion)(({ theme }) => ({
+    background: 'linear-gradient(145deg, #1a1a2e 0%, #16213e 100%)',
+    border: '1px solid rgba(255, 255, 255, 0.1)',
+    borderRadius: '12px',
+    '&:before': { display: 'none' },
+    '&.Mui-expanded': { margin: '0 0 8px 0' },
+}));
--- a/src/pages/BuildingPage.tsx
+++ b/src/pages/BuildingPage.tsx
@ -269,10 +269,8 @@ function Building(building: IBuilding, mod: IMod) {
                <Grid2 size={12}>
                    {renderAffectedResearches(building.affectedResearches, mod.id, building.race.id)}
                </Grid2>
+                <b className="hotkey" >Hotkey: {building.hotkey}</b>
            </Grid2>
-            <Box sx={{ mt: 3, mb: 2, color: '#e94560', fontWeight: 600, fontSize: '0.85rem' }}>
-                Hotkey: {building.hotkey}
-            </Box>
            <Divider sx={{ my: 3, borderColor: 'rgba(255, 255, 255, 0.1)' }} />
            <UnitsTable modId={mod.id}/>
        </Box>)
--- a/src/pages/ModPage.tsx
+++ b/src/pages/ModPage.tsx
@ -19,27 +19,6 @@ import UnitsTable from "../classes/UnitsTable";
 import {BackButton} from "../commons/BackButton";


-// Styled components
-const PageHeader = styled(Paper)(({ theme }) => ({
-    padding: theme.spacing(4, 4),
-    marginBottom: theme.spacing(4),
-    background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)',
-    borderRadius: '16px',
-    position: 'relative',
-    overflow: 'hidden',
-    '&::before': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background: 'radial-gradient(circle at 30% 50%, rgba(233, 69, 96, 0.1) 0%, transparent 50%)',
-        pointerEvents: 'none',
-    },
-}));
-
-
 interface ModPageState {
    mod: IMod | null,
    loading: boolean,
@ -73,7 +52,7 @@ class ModPage extends React.Component<any, ModPageState> {
    render() {
        if (this.state.loading) {
            return (
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+                <Container maxWidth="lg" >
                    <LinearProgress sx={{ width: '200px', mx: 'auto', display: 'block' }} />
                </Container>
            );
@ -83,7 +62,7 @@ class ModPage extends React.Component<any, ModPageState> {
            document.title = this.state.mod.name + " — ModWiki";

            return (
-                <Container maxWidth="lg" sx={{ py: 4 }}>
+                <Container maxWidth="lg">
                    <BackButton
                        variant="outlined"
                        startIcon={<ArrowBack/>}
@ -92,25 +71,13 @@ class ModPage extends React.Component<any, ModPageState> {
                        Back to mods list
                    </BackButton>

-                    <PageHeader elevation={0}>
-                        <Typography variant="h3" component="h1" sx={{
-                            fontWeight: 800,
-                            mb: 1,
-                            background: 'linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%)',
-                            WebkitBackgroundClip: 'text',
-                            WebkitTextFillColor: 'transparent',
-                        }}>
-                            {this.state.mod.name}
-                        </Typography>
                    <Typography variant="h6" sx={{
-                            color: 'rgba(255, 255, 255, 0.7)',
+                        color: 'rgba(255, 255, 255, 0.6)',
                        fontWeight: 500,
+                        paddingBottom: 1
                    }}>
-                            Version {this.state.mod.version}
+                        {this.state.mod.name} ({this.state.mod.version})
                    </Typography>
-                    </PageHeader>
-
-                    <Divider sx={{ my: 4, borderColor: 'rgba(255, 255, 255, 0.1)' }} />

                    <Box>
                        <UnitsTable modId={this.state.mod.id}/>