Item Details Grid Stuff

src/TestPanel.js

@@ -1,3 +1,4 @@
+import {PencilFill} from 'react-bootstrap-icons'
 import React, { useEffect,useState } from 'react';
 import Modal from 'react-modal'
 import { DisplayIcon } from './DEFAULTS';
@@ -174,7 +175,7 @@ function ClassSelectorWindow(p) {
 }
 
 function GetSpecialWeaponName(item) {
-  return item[WEAPON_EXISTENCE_DATA]!==undefined?(item[WEAPON_EXISTENCE_DATA].special_name?.length>0)?item[WEAPON_EXISTENCE_DATA].special_name:(item[WEAPON_WEAPON].name+" "+item[WEAPON_WEAPONTYPE].name):<><span style={{}}></span></>
+  return item[WEAPON_EXISTENCE_DATA]!==undefined?(item[WEAPON_EXISTENCE_DATA].special_name?.length>0)?item[WEAPON_EXISTENCE_DATA].special_name:(item[WEAPON_WEAPON].name+" "+item[WEAPON_WEAPONTYPE].name):<><span style={{fontStyle:"italic"}}>Select Weapon</span></>
 }
 
 function ConvertCoordinate(x,y) {
@@ -513,13 +514,13 @@ useEffect(()=>{
             <div className="boxTitleBar">
               <h1>Equipped Weapon</h1></div>
             <h2 className="viewedEquipName rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2>
-            <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}>Edit Details</PageControl>
+            <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><PencilFill /> Edit Details</PageControl>
             {weaponPage === 1 ?
 
 <>
-<div className="itemDetailsGrid">
+<div className="itemDetailsGridTop">
 <div className={"itemDetailsIcon editOverlayWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])} onClick={()=>{setWeaponSelectWindowOpen(true)}}>
-<div className="editOverlay"><p>Edit <span>&#9998;</span></p></div>
+<div className="editOverlay"><p><PencilFill /> Edit</p></div>
 <img alt="" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div>
 <div className="itemDetailsProperties">
 <div className="itemDetailsPropertiesWrapper">
@@ -538,9 +539,8 @@ useEffect(()=>{
 
 </div></div>
 </div>
-<div className="editOverlayWrapper">
-<div className="editOverlay"><p>Edit <span>&#9998;</span></p></div>
-<div className="itemDetailsGridBottom">
+<div className="itemDetailsGridBottom editOverlayWrapper">
+<div className="editOverlay"><p><PencilFill /> Edit</p></div>
 <div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div>
 <div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div>
 <div className="itemDetailsAugment">
@@ -555,7 +555,6 @@ useEffect(()=>{
 </div>
 </div>
 </div>
-</div>
 
 
 </>

src/style.css

@@ -671,10 +671,6 @@ header a {
 	background-color: rgba(25, 30, 35, 0.66) !important;
 	margin: 10px 5px 0 auto !important;
 }
-/*.pageControlDetails:before {
-	content: "\270E";
-	padding-right: 5px;
-}*/
 .pageControlDetails:hover {
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
 	outline: 2px solid hsl(180, 78%, 50%);
@@ -1474,7 +1470,7 @@ p.adminNav hr {
 .equipWindow {
 	min-height: 440px;
 }
-.itemDetailsGrid {
+.itemDetailsGridTop {
 	display: grid;
 	grid-template-areas:
 	"icon properties";
@@ -1518,9 +1514,6 @@ p.adminNav hr {
 .editOverlayWrapper:hover .editOverlay {
 	display: flex;
 }
-.editOverlay > p > span {
-	font-family: "Segoe UI Symbol";
-}
 .itemDetailsProperties {
 	margin: 0 0 0 10px;
 	grid-area: properties;