Vibe-code дизайн fix

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>
 

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',

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',
 }));
 

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',

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',
 }));
 

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 {

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,

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',
 }));
 

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)',
+    },
+}));

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',
     },
 }));

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 {

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,

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,

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={{

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";
-
+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',
 }));
 

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";
-
+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',
 }));
 
@@ -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,