changing admin panel

src/App.js

@@ -380,8 +380,11 @@ function AdminPanel(p) {
 
 	return <div className="adminMain">
 		{!verified?
-		<div style={{gridArea:"sidebar / span 2"}}>
-			<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
+						<div className="modalOverlay">
+						<div className="modal">
+						<div className="box boxModal" style={{textAlign:"center"}}>
+						<div className="boxTitleBar"><h1>Admin</h1></div>
+						<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
 			<input type="password" value={password} onChange={(f)=>{setPassword(f.currentTarget.value)}} onKeyDown={(e)=>{
 				if (e.key==="Enter") {
 					axios.post(GetBackendURL(p)+"/passwordcheck",{
@@ -396,8 +399,10 @@ function AdminPanel(p) {
 						setVerified(false)
 						setPassword("")
 					})}}}></input>
-			<img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
-		</div>:<>
+						</div>
+						</div>
+						</div>
+:<>
 		
 		<div className="box boxAdminNav">
 		<div className="boxTitleBar">
@@ -881,14 +886,8 @@ function App() {
 				<div className="modalOverlay">
 				<div className="modal">
 				<div className="box boxModal" style={{textAlign:"center"}}>
-				<div className="boxTitleBar"><h1>Under Construction</h1></div>
-				<br /><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt="" style={{background:"linear-gradient(white,#bca9f5)",marginTop:"10px"}} />
-				<p style={{textAlign:"justify",width:"33%",margin:"0 auto"}}>
-				{GetData("site_data")[0]?.data??"Loading..."}<br />
-				</p>
-				<p style={{textAlign:"center",width:"66%",margin:"0 auto"}}>
-				Repo: <a href="https://github.com/sigonasr2/ngsplanner/">github.com/sigonasr2/ngsplanner</a>
-				</p>
+				<div className="boxTitleBar"><h1>Under Construction</h1></div><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt=""/>
+				{GetData("site_data")[0]?.data??""}
 				</div>
 				</div>
 				</div>

src/style.css

@@ -187,6 +187,12 @@ em {
 	margin-right: 10px;
 	padding: 13px 13px 7px 13px;
 }
+.boxTitleBar img {
+	float: left;
+}
+.boxTitleBar p:after {
+	clear: both;
+}
 .boxTitleBar h1:before {
 	font-family: "Segoe UI Symbol";
 	content: ' \25C6';
@@ -981,7 +987,21 @@ button{
 	0% {opacity:0;margin-bottom:30px;}
 	100% {opacity:1;margin-bottom:0;}
   }
-.boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar {
+  .boxAdmin {
+	height: 200px;
+	outline: 1px solid rgba(54,255,255,1);
+	width: 450px;
+	text-align:center;
+}
+.boxMisc img {
+	background: linear-gradient(white,#bca9f5);
+	margin-Top: 10px;
+}
+
+.boxMisc input {
+	outline: 1px solid silver;
+}
+.boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar, .boxMisc .boxTitleBar  {
 	background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1));
 }
 .modalItemListContainer {