UI changes + rarity thing sig did

src/TestPanel.js

@@ -201,6 +201,10 @@ const WEAPON_WEAPONTYPE=0;const WEAPON_WEAPON=1;const WEAPON_POTENTIAL=2;const W
 
 const [selectedWeapon,setSelectedWeapon] = useState([])
 
+function rarityCheck(v) {
+  return v!==undefined?v.rarity!==undefined?" r"+v.rarity:"":""
+}
+
 useEffect(()=>{
   if (p.bp>1000) {
     setbpGraphMax(3000)
@@ -290,10 +294,10 @@ useEffect(()=>{
           <div className="boxTitleBar">
           <h1>Equip</h1></div>
           <div className="equipPalette">
-              <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot r4"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div>
+              <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className={"equipPaletteSlotWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div>
-                <div className="equipPaletteSlot r3"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div>
+                <div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/3Gq2JO6.png")} /></div></div>
-                  <div className="equipPaletteSlot r3"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div>
+                  <div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/fes50s0.png")} /></div></div>
-                  <div className="equipPaletteSlot r3"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div>
+                  <div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/fyhy1la.png")} /></div></div>
                 </div>
               </div>
 
@@ -305,8 +309,8 @@ useEffect(()=>{
             {weaponPage === 1 ?
 
 <>
-<div className="itemDetailsGrid1">
+<div className="itemDetailsGrid">
-<div className="itemDetailsIcon r3"><img src={process.env.PUBLIC_URL+"/icons/items/124/ui_item_1150003.png"} /></div>
+<div className={"itemDetailsIcon"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><img src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div>
 <div className="itemDetailsProperties">
 RARITY<br />
 ATTACK<br />

src/style.css

@@ -334,6 +334,9 @@ em {
 .equipPaletteSlotWrapper img {
 	height: 48px;
 	border: 1px;
+	border-style: solid;
+	background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
+	border-color: rgba(128,128,128,1);
 }
 .equipPaletteSlot {
 	text-align: center;
@@ -483,43 +486,41 @@ em {
 }
 .itemimg {
 	background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
-	border: 4px solid rgba(128,128,128,1) !important;
+	border: 4px solid rgba(128,128,128,1);
 	float: left;
 	margin-right: 10px;
 	width: 48px;
 	box-sizing: content-box;
+	border-style: solid;
 }
 li.r1 {
     background-image: url("./icons/NGSUIRarity1Star.png");
 }
 .r1 img  {
-	background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
+	background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
-	border-color: rgb(64,150,183);
+	border-color: rgb(64,150,183) !important;
-	border-style: solid;
+
 }
 li.r2 {
     background-image: url("./icons/NGSUIRarity2Star.png");
 }
 .r2 img  {
-	background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
+	background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
-	border-color: rgb(64,150,183);
+	border-color: rgb(64,150,183) !important;
-	border-style: solid;
 }
 li.r3 {
     background-image: url("./icons/NGSUIRarity3Star.png");
 }
 .r3 img  {
-	background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
+	background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
-	border-color: rgb(64,150,183);
+	border-color: rgb(64,150,183) !important;
-	border-style: solid;
 }
 li.r4 {
     background-image: url("./icons/NGSUIRarity4Star.png");
 }
 .r4 img  {
-	background: radial-gradient(rgb(101,178,77),rgb(83,146,63));
+	background: radial-gradient(rgb(101,178,77),rgb(83,146,63)) !important;
-	border-color: rgb(101,178,77);
+	border-color: rgb(101,178,77) !important;
-	border-style: solid;
 }
 .itemlist li span {
     background-repeat: no-repeat;
@@ -1220,6 +1221,30 @@ p.adminNav hr {
 	position:relative;
 	top:16px;
 }
+.itemDetailsGrid {
+	display: grid;
+	grid-template-areas:
+	"icon properties"
+	"content content";
+	grid-template-columns: 124px 1fr;
+	grid-template-rows: auto;
+	margin: 10px 10px 0 10px;
+}
+.itemDetailsIcon {
+	background-color: hsl(0, 17%, 70%);
+	grid-area: icon;
+}
+.itemDetailsProperties {
+	grid-area: properties;
+}
+.itemDetailsContent {
+	grid-area: content;
+}
 .itemDetailsIcon img {
+	background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
+	border-color: rgba(128,128,128,1);
 	border-width: 2px;
+	width: 124px;
+	box-sizing: content-box;
+	border-style: solid;
 }