Differentiate RCON output for improved clarity (#864)

* #793 - Differentiate RCON output

* -removed <div>
-simplified animation logic.
-removed box-shadow in favor of outline

* -remove Rube Goldberg machine
-removed un needed .css rule

* removed redundant null check

* added an extra line  (2 spaces between imports and rest of file)

---------

Co-authored-by: Solar <solar@homelab.local>

packages/web_ui/src/components/InstanceRcon.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { Input, Typography } from "antd";
 
 import * as lib from "@clusterio/lib";
@@ -17,6 +17,7 @@ export default function InstanceRcon(props: InstanceRconProps) {
 	let control = useContext(ControlContext);
 	let [output, setOutput] = useState<string|null>(null);
 	let [running, setRunning] = useState(false);
+	let resultRef = useRef<HTMLDivElement>(null);
 
 	async function sendCommand(command: string) {
 		if (!command) {
@@ -31,6 +32,8 @@ export default function InstanceRcon(props: InstanceRconProps) {
 				new lib.InstanceSendRconRequest(command),
 			);
 			setOutput(result);
+			const animation = resultRef.current?.children[0]?.getAnimations()[0];
+			if (animation) { animation.currentTime = 0; }
 		} finally {
 			setRunning(false);
 		}
@@ -39,7 +42,7 @@ export default function InstanceRcon(props: InstanceRconProps) {
 	return <>
 		{output && <>
 			<Title level={5}>Rcon result</Title>
-			<Paragraph code className="rcon-result">{output}</Paragraph>
+			<Paragraph ref={resultRef} code className="rcon-result">{output}</Paragraph>
 		</>}
 		<Input.Search
 			disabled={props.disabled}

packages/web_ui/src/style.css

@@ -204,6 +204,12 @@ body {
 	max-height: 200px;
 	overflow-y: auto;
 	white-space: pre-wrap;
+	animation: rcon-highlight 1s ease-out forwards;
+}
+
+@keyframes rcon-highlight {
+	0%   { outline: 3px solid #1668dc; }
+	100% { outline: 3px solid transparent; }
 }
 
 /* see https://blog.eqrion.net/pin-to-bottom/ for how scroll anchors works */