Vibe-code дизайн

src/classes/Weapon.tsx

@@ -6,6 +6,15 @@ 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' },
+}));
 
 interface IWeaponProps {
     weapon: IShortWeapon,
@@ -34,23 +43,26 @@ class Weapon extends React.Component<IWeaponProps, any> {
         const weapon = this.props.weapon
 
         return (
-            <div style={{marginBottom: 10}}><Accordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
+            <div style={{marginBottom: 10}}><StyledAccordion TransitionProps={{ unmountOnExit: true, timeout: 100 }}>
                 <AccordionSummary
-                    expandIcon={<ExpandMore/>}
+                    expandIcon={<ExpandMore sx={{color: '#ffffff'}}/>}
                     aria-controls="panel1-content"
                     id="panel1-header"
+                    sx={{color: '#ffffff'}}
                 >
-                    <span style={{fontSize: 18}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
+                    <span style={{fontSize: 18, color: '#ffffff'}}> {!this.props.isDefault && weapon.icon && !weapon.icon.endsWith("upgrade.png") ?
                         <img className="weaponIcon" src={IconUrl + weapon.icon.replaceAll('\\', '/')}/> : (
                             weapon.isMeleeWeapon ?
                                 <img className="weaponIcon" src="/images/MeleeStance_icon_bw.jpg"/> :
                                 <img className="weaponIcon" src="/images/RangedStance_icon_bw.jpg"/>
-                        )} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)} </span>
+                        )} {weapon.name ? weapon.name : this.humanReadableName(weapon.filename)}
+                        {this.props.isDefault && <i style={{fontSize: 12, color: 'rgba(255,255,255,0.5)'}}> (default)</i>}
+                    </span>
                 </AccordionSummary>
-                <AccordionDetails>
+                <AccordionDetails sx={{color: 'rgba(255,255,255,0.85)'}}>
                     <WeaponFull weaponId={weapon.id} isDefault={this.props.isDefault} mod={this.props.mod} race={this.props.race} haveReinforceMenu={this.props.haveReinforceMenu}/>
                 </AccordionDetails>
-            </Accordion></div>
+            </StyledAccordion></div>
         );
     }
 }