Vibe-code дизайн

src/classes/building/BuildingAddon.tsx

@@ -9,7 +9,8 @@ import {
     TableBody,
     TableCell,
     TableContainer,
-    TableRow
+    TableRow,
+    Typography
 } from "@mui/material";
 import {IBuilding, IBuildingAddon} from "../../types/IBuilding";
 import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
@@ -17,6 +18,30 @@ 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 {DescriptionBox} from "../../commons/DescriptionBox";
+
+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)',
+    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,
@@ -31,27 +56,28 @@ function BuildingAddon(props: IBuildingAddonProps){
 
 
 
-    return <div className='addon-research-accordion' id={"addon-" + addon.id} ><Accordion>
+    return <div className='addon-research-accordion' id={"addon-" + addon.id} ><StyledAccordion>
         <AccordionSummary
-            expandIcon={<ExpandMore/>}
+            expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
             aria-controls="panel1-content"
+            sx={{color: '#ffffff'}}
         >
-                <span style={{fontSize: 20}}>
+                <span style={{fontSize: 20, color: '#ffffff'}}>
                 <img className="sergeantIcon" src={getIcon(addon.icon)}/>
                     &nbsp; {addon.name}
             </span>
         </AccordionSummary>
-        <AccordionDetails>
+        <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
             <Grid2 container spacing={2}>
                 <Grid2 size={{xs: 12, md: 4}}>
-                    <TableContainer component={Paper}>
+                    <TableContainer component={StyledPaper} elevation={0}>
                         <Table size="small" aria-label="a dense table">
                             <TableBody id="unit-stats-table">
                                 <TableRow
                                     sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                 >
-                                    <TableCell component="th" scope="row">Cost</TableCell>
-                                    <TableCell component="th" scope="row">
+                                    <TableCell component="th" scope="row" >Cost</TableCell>
+                                    <TableCell>
                                         {addon.addonCostRequisition > 0 &&
                                             <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                              src="/images/Resource_requisition.gif"/>&nbsp;
@@ -83,9 +109,9 @@ function BuildingAddon(props: IBuildingAddonProps){
                     </TableContainer><br/>
                 </Grid2>
                 <Grid2 size={{xs: 12, md: 8}}>
-                    <div style={{whiteSpace: "pre-wrap"}}>
+                    <DescriptionBox>
                         {addon.description}
-                    </div>
+                    </DescriptionBox>
                 </Grid2>
                 <ModifiersProvidesTable modifiers={addon.addonModifiers} affectedData={addon.affectedData} modId={props.mod.id} race={building.race}/>
                 {addon.addonRequirement !== null &&
@@ -93,9 +119,9 @@ function BuildingAddon(props: IBuildingAddonProps){
                         <Required requirement={addon.addonRequirement} modId={building.modId} raceId={building.race.id}/>
                     </Grid2>}
             </Grid2>
-            <b className="hotkey">Hotkey: {addon.hotkey}</b>
+            <b className="hotkey" >Hotkey: {addon.hotkey}</b>
         </AccordionDetails>
-    </Accordion></div>
+    </StyledAccordion></div>
 }