Vibe-code дизайн dark theme re-vibecode

src/classes/building/BuildingAddon.tsx

@@ -3,7 +3,6 @@ import {
     AccordionDetails,
     AccordionSummary,
     Grid2,
-    Paper,
     Table,
     TableBody,
     TableCell,
@@ -19,24 +18,10 @@ import {getIcon, ModifiersProvidesTable,} from "../ModifiersProvideTable";
 import Required from "../Required";
 import {StyledAccordion} from "../../commons/StyledAccordion";
 import {DescriptionBox} from "../../commons/DescriptionBox";
+import {StyledPaper} from "../../commons/StyledPaper";
 import {styled} from "@mui/material/styles";
 
 
-
-const StyledPaper = styled(Paper)(({ theme }) => ({
-    background: 'rgba(255, 255, 255, 0.03)',
-    border: '1px solid rgba(255, 255, 255, 0.05)',
-    borderRadius: '12px',
-    overflow: 'hidden',
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-root': {
-        color: 'rgba(255, 255, 255, 0.85)',
-    },
-    '& .MuiTableBody .MuiTableRow-root .MuiTableCell-head': {
-        color: '#e94560',
-        fontWeight: 600,
-    },
-}));
-
 interface IBuildingAddonProps {
     addon: IBuildingAddon,
     building: IBuilding,
@@ -52,16 +37,16 @@ function BuildingAddon(props: IBuildingAddonProps){
 
     return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
         <AccordionSummary
-            expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
+            sx={{color: '#dee2e6', '& .MuiAccordionSummary-content': { margin: '12px 0' }, '& .MuiAccordionSummary-content.Mui-expanded': { margin: '12px 0' }}}
+            expandIcon={<ExpandMore sx={{color: '#dee2e6'}}/>}
             aria-controls="panel1-content"
-            sx={{color: '#ffffff'}}
         >
-                <span style={{fontSize: 20, color: '#ffffff'}}>
+            <span style={{fontSize: 20, color: '#dee2e6', display: 'flex', alignItems: 'center'}}>
                 <img className="sergeantIcon" src={getIcon(addon.icon)}/>
                     &nbsp; {addon.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
+        <AccordionDetails sx={{color: '#dee2e6'}}>
             <Grid2 container spacing={2}>
                 <Grid2 size={{xs: 12, md: 4}}>
                     <TableContainer component={StyledPaper} elevation={0}>