From 7ea381f0cf16e826c7b2d0c64d8c1e3e0f73e1f0 Mon Sep 17 00:00:00 2001
From: Joshua Sigona <sigonasr2@gmail.com>
Date: Sun, 8 Aug 2021 03:47:05 +0900
Subject: [PATCH] Modal adjustments and fixes.

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
---
 src/App.js       |  2 +-
 src/TestPanel.js |  6 +++---
 src/style.css    | 12 +++++++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index ed4aa07..ff9a5a0 100644
--- a/src/App.js
+++ b/src/App.js
@@ -555,7 +555,7 @@ function TableEditor(p) {
 						}} value={String(dat[col.name])}/></td>)}</tr>)}
 			  </tbody>
 			</table>
-		</div>:<><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/></>}
+		</div>:<><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/></>}
 	</>
 }
 
diff --git a/src/TestPanel.js b/src/TestPanel.js
index be204ce..cb1dbae 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -146,8 +146,8 @@ const [author,setauthor] = useState("Player")
 const [buildName,setbuildName] = useState("Character")
 const [className,setclassName] = useState("Hunter")
 const [subclassName,setsubclassName] = useState("Force")
-const [level,setLevel] = useState(1)
-const [secondaryLevel,setsecondaryLevel] = useState(1)
+const [level,setLevel] = useState(20)
+const [secondaryLevel,setsecondaryLevel] = useState(20)
 
 const [effectPage,setEffectPage] = useState(1)
 const [weaponPage,setWeaponPage] = useState(1)
@@ -271,7 +271,7 @@ useEffect(()=>{
 <div className="boxExit"></div>
 </div>
 <div className="equipPalette">
-	<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
+	<div onClick={()=>{setModalOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
 	<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
 	<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
 	<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
diff --git a/src/style.css b/src/style.css
index ba55ff5..7807ce8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -596,8 +596,8 @@ li.r4 {
 	outline: 2px solid hsl(180, 78%, 50%);
 }
 li.selected:hover {
-	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
-	border-bottom: 0;
+	background: linear-gradient(135deg,#60461b,#b0a34e);
+	outline: 2px solid hsl(180, 78%, 50%);
 }
 .itemBar {
 	justify-content: center;
@@ -956,17 +956,23 @@ button{
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0,0,0,.9);
+    background: rgba(0,0,0,0.6);
 	display: grid;
 	justify-items: stretch;
 	justify-content: stretch;    
 	grid-template-columns: 10px 1fr 10px;
 	grid-template-rows: 10px minmax(0, 1fr) 10px;
+	animation: fadeIn 0.15s;
 }
+  @keyframes fadeIn {
+	0% {opacity:0;top:-30px;}
+	100% {opacity:1;top:0;}
+  }
 .modal {
 	outline: 0;
 	grid-column: 2;
 	grid-row: 2;
+	filter: drop-shadow(0 30px 15px black);
   }
 .boxModal {
 	max-width: 580px;