Vibe-code дизайн fix

2026-07-15 01:39:53 +03:00 · 2026-07-15 01:39:53 +03:00 · 5669a70156
commit 5669a70156
parent bc36f1e56d
16 changed files with 24 additions and 69 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -83,7 +83,7 @@ function App() {
                            {/* Left side - Logo */}
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                                <LogoText variant="h6" sx={{ textDecoration: 'none' }}>
-                                    🎮 Autogeneration wiki
+                                    🎮 Autogenerated wiki
                                </LogoText>
                            </Box>

--- a/src/classes/AbilityFull.tsx
+++ b/src/classes/AbilityFull.tsx
@ -43,7 +43,6 @@ export default function AbilityFull(props: { abilityId?: number, mod: IMod, race
    const StyledTableCell = styled(TableCell)(({theme}) => ({
        [`&.${tableCellClasses.head}`]: {
            backgroundColor: 'rgba(233, 69, 96, 0.15)',
-            color: '#ffffff',
            fontWeight: 700,
            marginRight: 'auto',
            marginLeft: 'auto',
--- a/src/classes/AbilitySpawnedObject.tsx
+++ b/src/classes/AbilitySpawnedObject.tsx
@ -28,7 +28,6 @@ import {DescriptionBox} from "../commons/DescriptionBox";
 const SectionTitle = styled(Typography)(({ theme }) => ({
    fontWeight: 700,
    mb: 2,
-    color: '#ffffff',
    fontSize: '1.25rem',
 }));

--- a/src/classes/DpsTable.tsx
+++ b/src/classes/DpsTable.tsx
@ -20,7 +20,6 @@ export default function DpsTable(props: { mod: IMod, minDamageValue?: number, mi
    const StyledTableCell = styled(TableCell)(({theme}) => ({
        [`&.${tableCellClasses.head}`]: {
            backgroundColor: 'rgba(233, 69, 96, 0.15)',
-            color: '#ffffff',
            fontWeight: 700,
            marginRight: 'auto',
            marginLeft: 'auto',
--- a/src/classes/Sergeant.tsx
+++ b/src/classes/Sergeant.tsx
@ -32,7 +32,6 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 const SectionTitle = styled(Typography)(({ theme }) => ({
    fontWeight: 700,
    mb: 2,
-    color: '#ffffff',
    fontSize: '1.25rem',
 }));

--- a/src/classes/UnitsTable.tsx
+++ b/src/classes/UnitsTable.tsx
@ -16,10 +16,8 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 }));

 const StyledTable = styled(Table)(({ theme }) => ({
-    color: '#ffffff',
    '& .MuiTableCell-head': {
        backgroundColor: 'rgba(233, 69, 96, 0.15)',
-        color: '#ffffff',
        fontWeight: 700,
        fontSize: '1rem',
        borderBottom: '2px solid rgba(233, 69, 96, 0.3)',
@ -35,7 +33,6 @@ const StyledTable = styled(Table)(({ theme }) => ({
 }));

 const StyledHeaderLink = styled(StyledLink)(({ theme }) => ({
-    color: '#ffffff',
    fontWeight: 700,
    fontSize: '1.1rem',
    '&:hover': {
@ -205,7 +202,7 @@ export default function UnitsTable(prop: {modId: number}) {
    }

    if(unitsTable.racesUnits.length > 10){
-        return <Grid2 sx={{ color: '#ffffff' }}>
+        return <Grid2>
            {generateRaceList(unitsTable)}
        </Grid2>
    } else {
--- a/src/classes/WeaponFull.tsx
+++ b/src/classes/WeaponFull.tsx
@ -40,7 +40,6 @@ export default function WeaponFull(props: {weaponId: number, isDefault: Boolean,
    const StyledTableCell = styled(TableCell)(({theme}) => ({
        [`&.${tableCellClasses.head}`]: {
            backgroundColor: 'rgba(233, 69, 96, 0.15)',
-            color: '#ffffff',
            marginRight: 'auto',
            marginLeft: 'auto',
            paddingLeft: 10,
--- a/src/classes/WeaponSlot.tsx
+++ b/src/classes/WeaponSlot.tsx
@ -10,7 +10,6 @@ import {styled} from '@mui/material/styles';
 const SectionTitle = styled(Typography)(({ theme }) => ({
    fontWeight: 700,
    mb: 2,
-    color: '#ffffff',
    fontSize: '1.25rem',
 }));

--- a/src/commons/BackButton.tsx
+++ b/src/commons/BackButton.tsx
@ -0,0 +1,14 @@
+import {Button, Link} from "@mui/material";
+import {styled} from '@mui/material/styles';
+
+export const BackButton = styled(Button)(({ theme }) => ({
+    marginBottom: theme.spacing(3),
+    color: '#e94560BB',
+    borderColor: 'rgba(233, 69, 96, 0.5)',
+    textTransform: 'none',
+    fontWeight: 600,
+    '&:hover': {
+        borderColor: '#e94560',
+        backgroundColor: 'rgba(233, 69, 96, 0.1)',
+    },
+}));
--- a/src/commons/StyledLink.tsx
+++ b/src/commons/StyledLink.tsx
@ -2,11 +2,11 @@ import {Link} from "@mui/material";
 import {styled} from '@mui/material/styles';

 export const StyledLink = styled(Link)(({ theme }) => ({
-    color: '#e94560',
+    color: '#e94560BB',
    textDecoration: 'none',
    transition: 'all 0.2s ease',
    '&:hover': {
-        color: '#ff6b6b',
+        color: '#ff6b6bBB',
        textDecoration: 'underline',
    },
 }));
--- a/src/index.css
+++ b/src/index.css
@ -8,7 +8,7 @@ body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #0a0a0a;
-  color: #ffffff;
+  color: rgba(255, 255, 255, 0.85);
 }

 code {
--- a/src/pages/BuildingPage.tsx
+++ b/src/pages/BuildingPage.tsx
@ -36,24 +36,12 @@ import DeathExplosion from "../classes/DeathExplosion";
 import {styled} from '@mui/material/styles';
 import {DescriptionBox} from "../commons/DescriptionBox";
 import {ArrowBack} from "@mui/icons-material";
+import {BackButton} from "../commons/BackButton";

-// Styled components
-const BackButton = styled(Button)(({ theme }) => ({
-    marginBottom: theme.spacing(3),
-    color: '#e94560',
-    borderColor: 'rgba(233, 69, 96, 0.5)',
-    textTransform: 'none',
-    fontWeight: 600,
-    '&:hover': {
-        borderColor: '#e94560',
-        backgroundColor: 'rgba(233, 69, 96, 0.1)',
-    },
-}));

 const SectionTitle = styled(Typography)(({ theme }) => ({
    fontWeight: 700,
    mb: 2,
-    color: '#ffffff',
    fontSize: '1.25rem',
 }));

@ -128,7 +116,6 @@ function Building(building: IBuilding, mod: IMod) {
                <Typography variant="h4" component="h2" sx={{
                    fontWeight: 800,
                    mb: 1,
-                    color: '#ffffff',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 2,
--- a/src/pages/ModPage.tsx
+++ b/src/pages/ModPage.tsx
@ -16,6 +16,7 @@ import {
 } from "@mui/material";
 import {styled} from '@mui/material/styles';
 import UnitsTable from "../classes/UnitsTable";
+import {BackButton} from "../commons/BackButton";


 // Styled components
@ -38,17 +39,6 @@ const PageHeader = styled(Paper)(({ theme }) => ({
    },
 }));

-const BackButton = styled(Button)(({ theme }) => ({
-    marginBottom: theme.spacing(3),
-    color: '#e94560',
-    borderColor: 'rgba(233, 69, 96, 0.5)',
-    textTransform: 'none',
-    fontWeight: 600,
-    '&:hover': {
-        borderColor: '#e94560',
-        backgroundColor: 'rgba(233, 69, 96, 0.1)',
-    },
-}));

 interface ModPageState {
    mod: IMod | null,
--- a/src/pages/ModsPage.tsx
+++ b/src/pages/ModsPage.tsx
@ -180,7 +180,7 @@ function Mods({ mods }: ModsProps) {
                    {sameMods.filter(m => !m.isBeta).map(mod => (
                        <VersionLink key={mod.id} to={"/mod/" + mod.id} state={mod.id}>
                            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
-                                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                                <Typography variant="body2" sx={{ fontWeight: 600, color: 'rgba(255, 255, 255, 0.7)' }}>
                                    Version {mod.version}
                                </Typography>
                                <Typography variant="caption" sx={{
--- a/src/pages/RacePageFast.tsx
+++ b/src/pages/RacePageFast.tsx
@ -24,24 +24,11 @@ import {IRaceUnits, IUnitShort} from "../types/IUnitShort";
 import {IBuildingShort, IRaceBuildings} from "../types/IBuildingShort";
 import {styled} from '@mui/material/styles';
 import {StyledLink} from "../commons/StyledLink";
-
-// Styled components
-const BackButton = styled(Button)(({ theme }) => ({
-    marginBottom: theme.spacing(3),
-    color: '#e94560',
-    borderColor: 'rgba(233, 69, 96, 0.5)',
-    textTransform: 'none',
-    fontWeight: 600,
-    '&:hover': {
-        borderColor: '#e94560',
-        backgroundColor: 'rgba(233, 69, 96, 0.1)',
-    },
-}));
+import {BackButton} from "../commons/BackButton";

 const SectionTitle = styled(Typography)(({ theme }) => ({
    fontWeight: 700,
    mb: 2,
-    color: '#ffffff',
    fontSize: '1.25rem',
 }));

--- a/src/pages/UnitPage.tsx
+++ b/src/pages/UnitPage.tsx
@ -35,24 +35,11 @@ import Ability from "../classes/Ability";
 import DeathExplosion from "../classes/DeathExplosion";
 import {styled} from '@mui/material/styles';
 import {DescriptionBox} from "../commons/DescriptionBox";
-
-// Styled components
-const BackButton = styled(Button)(({ theme }) => ({
-    marginBottom: theme.spacing(3),
-    color: '#e94560',
-    borderColor: 'rgba(233, 69, 96, 0.5)',
-    textTransform: 'none',
-    fontWeight: 600,
-    '&:hover': {
-        borderColor: '#e94560',
-        backgroundColor: 'rgba(233, 69, 96, 0.1)',
-    },
-}));
+import {BackButton} from "../commons/BackButton";

 const SectionTitle = styled(Typography)(({ theme }) => ({
    fontWeight: 700,
    mb: 2,
-    color: '#ffffff',
    fontSize: '1.25rem',
 }));

@ -127,7 +114,6 @@ function Unit(unit: IUnit, mod: IMod) {
                <Typography variant="h4" component="h2" sx={{
                    fontWeight: 800,
                    mb: 1,
-                    color: '#ffffff',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 2,