equip window styling

src/TestPanel.js

@@ -517,7 +517,9 @@ useEffect(()=>{
               <h1>Equipped Weapon</h1></div>
               <div className="equipNameWrapper">
                 <div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
-            <div className="equipEnhancement">+40</div>
+            <div className="equipEnhancement editOverlayWrapper">
+            <div className="editOverlay"><p><PencilFill /> Edit</p></div>
+              +40</div>
             </div>
             <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><PencilFill /> Edit Details</PageControl>
             {weaponPage === 1 ?
@@ -568,17 +570,22 @@ useEffect(()=>{
 <div style={{gridArea:"enhance1"}}>Enhancement Lv.</div>
 <div style={{gridArea:"variance1"}}>Damage Adj.</div>
 <div style={{gridArea:"weaponup"}}>Weapon Up</div>
-<div style={{gridArea:"ailment"}}>Ailment Resist.</div>
+<div style={{gridArea:"ailment1"}}>Ailment Resist.</div>
 <div style={{gridArea:"class1"}}>Available Classes</div>
 <div style={{gridArea:"mw1"}}>Multi-weapon</div>
 
 <div style={{gridArea:"enhance2"}}>40</div>
 <div style={{gridArea:"variance2"}}>75.0% ~ 100%</div>
-<div style={{gridArea:"mel"}}>Weapon Up</div>
-<div style={{gridArea:"ailment2"}}>Ailment Resist.</div>
-<div style={{gridArea:"class2"}}>Available Classes</div>
-<div style={{gridArea:"mw2"}}><img alt="" src={DisplayIcon("icons/food/NGSUIItemAssaultRifleMini.png")} /> <img alt="" src={DisplayIcon("icons/food/NGSUIItemTalisMini.png")} /></div>
+<div style={{gridArea:"mel"}} className="mel">9.9%</div>
+<div style={{gridArea:"ailment2"}}><span className="burn">0.0%</span><br /><span className="blind">0.0%</span><br /><span className="stun">0.0%</span></div>
+<div style={{gridArea:"class2"}}><img alt="" src={DisplayIcon("icons/ra.png")} /> <img alt="" src={DisplayIcon("icons/UINGSClassGu.png")} /></div>
+<div style={{gridArea:"mw2"}}><img alt="" src={DisplayIcon("icons/NGSUIItemAssaultRifleMini.png")} /> <img alt="" src={DisplayIcon("icons/NGSUIItemTalisMini.png")} /></div>
+
+<div style={{gridArea:"rng"}} className="rng">9.9%</div>
+<div style={{gridArea:"ailment3"}}><span className="freeze">0.0%</span><br /><span className="panic">0.0%</span></div>
 
+<div style={{gridArea:"tec"}} className="tec">9.9%</div>
+<div style={{gridArea:"ailment4"}}><span className="shock">0.0%</span><br /><span className="poison">0.0%</span></div>
 </div>
             :weaponPage === 3 ?
 

src/style.css

@@ -323,9 +323,8 @@ header a {
 	font-size: 18px;
 	text-align: left;
 }
-.equipEnhancement:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	outline: 2px solid hsl(180, 78%, 50%);
+.equipEnhancement .editOverlay {
+	text-align: left;
 }
 .saveControls {
 	margin-top: 10px;
@@ -418,15 +417,25 @@ header a {
 	"enhance1 enhance2 enhance2 enhance2"
 	"variance1 variance2 variance2 variance2"
 	"weaponup mel rng tec"
-	"ailment ailment1 ailment2 ailment3"
+	"ailment1 ailment2 ailment3 ailment4"
 	"class1 class2 class2 class2"
-	"mw1 mw2 mw2 mw2"
+	"mw1 mw2 mw2 mw2";
+	margin: 10px;
 }
 .statsDetails > div:nth-child(-n+6){
 	color: #97e2fc;
+	padding-right: 20px;
 }
 .statsDetails > div {
 	border-bottom: 1px solid rgba(128,128,128,0.5);
+	margin-top: 5px;
+}
+.statsDetails div > span {
+	margin-top: 5px;
+	display: inline-block;
+}
+.statsDetails div > span:first-child {
+	margin-top: 0;
 }
 .augmentDetails {
 	display: grid;
@@ -713,6 +722,41 @@ header a {
 	margin-right: 5px;
 	vertical-align: middle;
 }
+.burn:before {
+	content: url("./icons/status/burn.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
+.freeze:before {
+	content: url("./icons/status/freeze.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
+.blind:before {
+	content: url("./icons/status/blind.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
+.panic:before {
+	content: url("./icons/status/panic.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
+.shock:before {
+	content: url("./icons/status/shock.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
+.poison:before {
+	content: url("./icons/status/poison.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
+.stun:before {
+	content: url("./icons/status/stun.png");
+	margin-right: 5px;
+	vertical-align: middle;
+}
 .clear {
 	clear: both;
 }
@@ -1553,8 +1597,6 @@ p.adminNav hr {
 	top:16px;
 }
 .equipWindow {
-	display: flex;
-	flex-direction: column;
 	min-height: 440px;
 }
 .itemDetailsGridTop {
@@ -1570,8 +1612,8 @@ p.adminNav hr {
 	"ability fixa"
 	"augment augment";
 	grid-template-columns: repeat(2,minmax(0,1fr));
-	margin: 10px;
-	flex: 1;
+	margin: 5px 10px 0 10px;
+	padding-top: 5px;
 }
 .itemDetailsIcon {
 	grid-area: icon;
@@ -1630,13 +1672,13 @@ p.adminNav hr {
 .itemDetailsAugment {
 	margin: 15px 0 0 0;
 	grid-area: augment;
+	min-height: 145px;
 }
 .itemDetailsAugmentWrapper {
 	margin: 10px 0 0 0;
 	display: grid;
 	grid-template-columns: repeat(auto-fit,minmax(125px, 1fr));
 	gap: 10px 30px;
-	flex: 1;
 }
 .itemDetailsAugmentWrapper > div {
 	background-color:rgba(0,0,0,0.33);