Add cute girl as loading indicator

Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>

src/App.js

@@ -480,7 +480,7 @@ function TableEditor(p) {
 		.then(()=>{
 			setUpdate(true)
 		})
-	},[fileData,p.path])
+	},[fileData,p.path,p.BACKENDURL])
 
 	useEffect(()=>{
 		for (var col of fields) {
@@ -519,7 +519,7 @@ function TableEditor(p) {
 			})
 			setUpdate(false)
 		}
-	},[update,p.path])
+	},[update,p.path,p.BACKENDURL])
 	
 	return <>
 	{!loading?
@@ -555,6 +555,19 @@ function TableEditor(p) {
 	</>
 }
 
+function DatabaseEditor(p) {
+	const [loading,setLoading] = useState(false)
+
+	return <>
+		{!loading?<>
+				<button className="basichover" style={{backgroundColor:"navy"}} onClick={()=>{setLoading(true)}}>Apply TEST Database to LIVE Database</button><br/><br/>
+				<button className="basichover" style={{backgroundColor:"maroon"}} onClick={()=>{setLoading(true)}}>Reset TEST database using current LIVE Database</button><br/><br/>
+				<button className="basichover" style={{backgroundColor:"darkgreen"}} onClick={()=>{setLoading(true)}}>Backup current TEST and LIVE Database</button><br/><br/>
+			</>:<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
+		}
+	</>
+}
+
 function AdminPanel(p) {
 	return <div className="main">
 	  <div className="w-25"><Box title="Navigation">
@@ -672,9 +685,7 @@ function AdminPanel(p) {
 				<TableEditor BACKENDURL={GetBackendURL(p)} path="/database_audit"/>
 			</Route>
 			<Route path={process.env.PUBLIC_URL+"/admin/database_manager"}>
-				<button style={{backgroundColor:"navy"}}>Apply TEST Database to LIVE Database</button><br/><br/>
-				<button style={{backgroundColor:"maroon"}}>Reset TEST database using current LIVE Database</button><br/><br/>
-				<button style={{backgroundColor:"darkgreen"}}>Backup current TEST and LIVE Database</button><br/><br/>
+				<DatabaseEditor BACKENDURL={GetBackendURL(p)}/>
 			</Route>
 		</div>
 		</div>
@@ -904,7 +915,7 @@ function App() {
 				</Route>
 				<Route path={process.env.PUBLIC_URL+"/test"}>
 					<TestHeader/>
-					<TestPanel bp={bp} />
+					<TestPanel bp={bp} className={className} secondaryClassName={secondaryClassName} />
 				</Route>
 				<Route path={process.env.PUBLIC_URL+"/formula"}>
 					<DamageCalculator/>

src/TestPanel.js

@@ -29,30 +29,25 @@ function TestPanel(p) {
 <div className="boxExit"></div>
 </div>
 
-<div>
-
- </div> 
-
 <table className="basicInfo">
   <tr>
     <td>Author</td>
-	<td>&nbsp;</td>
-    <td>Dudley</td>
+    <td colspan="2">Dudley</td>
   </tr>
   <tr>
     <td>Build Name</td>
-	<td>&nbsp;</td>
-    <td>Fatimah</td>
+    <td colspan="2">Fatimah</td>
   </tr>
   <tr>
     <td>Class</td>
-    <td><img alt="" src="Ra.png" /> Ranger</td>
-    <td><span className="ye">Lv.20</span></td>
-  </tr>
-   <tr>
-    <td>&nbsp;</td>
-    <td><img alt="" src="Fo.png" /> Force</td>
-    <td>Lv.15</td>
+    <td>
+    <img alt="" src="Ra.png" /> Ranger <br />
+    <img alt="" src="Fo.png" /> Force 
+    </td>
+    <td>
+    <span className="ye">Lv.20</span><br />
+    Lv.15
+    </td>
   </tr>
 </table>
 </div>

src/style.css

@@ -257,6 +257,9 @@ em {
 .da span:hover {
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
 }
+.basicInfo td {
+	vertical-align: top;
+}
 .basicInfo tr:hover {
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));	
 }
@@ -903,6 +906,9 @@ button{
 	color:rgba(200,0,0,1);
 	cursor:pointer;
 }
+.basichover:hover{
+	cursor:pointer;
+}
 .modalCloseButton{
 	float:right;
 	color:#151f25;