Update colors displayed around song frames for FC/PFCs

frontend/src/App.css

@@ -23,6 +23,10 @@ badge-danger {exex}*/
 	top:-16px;
 }
 
+.cursor:hover{
+	cursor:pointer;
+}
+
 .fadein{
   animation-name: fadein;
   animation-duration: 1s;
@@ -116,6 +120,27 @@ table th {
 	background-color:rgba(160,160,255,0.5);
 }
 
+.fchighlight{
+	background: rgb(238,238,255);
+	background: linear-gradient(0deg, rgba(241,255,115,0) 0%, rgba(169,238,255,0.5) 25%, rgba(241,255,115,0) 100%);
+}
+
+.pfchighlight{
+	background: linear-gradient(0deg, rgba(241,255,115,0) 0%, rgba(255,230,180,0.5) 25%, rgba(241,255,115,0) 100%);
+}
+
+.pfc{
+	animation-name:colorchange;
+	animation-iteration-count: infinite;
+	animation-duration: 4s;
+	animation-direction: alternate;
+}
+
+@keyframes colorchange {
+  0%   {background: rgba(160,18,18,1);}
+  100%   {background: rgba(250,100,100,1);}
+}
+
 .tinytext{
 	font-size:10px;
 	/*z-index:-10000;*/

frontend/src/App.js

@@ -337,7 +337,8 @@ function Play(p) {
 		return (
 		<>
 			<div className="d-none d-md-block">
-				<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfc":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fc":"")}>
+				<div className={((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
+					<div className={"row align-middle"}>
 						<div className="col-md-2 order-1 order-md-1 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div>
 						<div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div>
 						<div className="col-md-5 order-2 order-md-3">
@@ -359,7 +360,9 @@ function Play(p) {
 						</div>
 					</div>
 				</div>
+			</div>
 			<div className="d-block d-small d-md-none">
+				<div className={((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
 				{<div className="row"><div className="offset-4 col-4 text-center">{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div></div>}
 					<div className="row">
 						<div className="offset-2 col-4 text-center">
@@ -375,13 +378,14 @@ function Play(p) {
 						</div>
 					</div>
 				</div>
+			</div>
 			<hr className="mb-0"/>
 		</>
 		);
 	} else {
 		return (
 		<>
-			<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfc":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fc":"")}>
+			<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfchighlight":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fchighlight":"")}>
 				{(p.index!==undefined)?<div className=" col-md-1 text-center border-right align-middle text-nowrap overflow-hidden"><span className="d-none d-md-block">{p.index+1}</span>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}</div>:<></>}
 				<div className="col-md-3 text-center border-right align-middle text-nowrap overflow-hidden"><SongName song={p.song}/><span className="tinytime">{GetDateDiff()}</span></div>
 				<div className="col-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/><Difficulty play={p.play} song={p.song}/></div>
@@ -669,7 +673,7 @@ function HoverSongName(p) {
 	var [toggle,setToggle] = useState(false)
 	return (
 		<>
-			<tr key={p.song.id} className="lighthover" onClick={()=>{
+			<tr key={p.song.id} className="lighthover cursor" onClick={()=>{
 				if (!toggle) {
 					setExpand(<tr className="fadein">
 								<td colSpan="6"><PlayData song={p.song} username={p.username}/></td>