new byond accs

Author: hry-gh

src/components/newPlayers.tsx

@@ -28,17 +28,26 @@ export const NewPlayers: React.FC = () => {
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="flex flex-row gap-3 justify-end">
-        <label>Joins since (minutes ago):</label>
-        <input
-          onKeyDown={(ev) => {
-            if (ev.key === "Enter") {
-              setTimeAgo(Number.parseInt(ev.currentTarget.value));
-            }
-          }}
-          defaultValue={240}
-          type="number"
-        />
+      <div className="flex flex-row gap-3 justify-between">
+        <div className="red-alert-bg p-2">
+          <div className="foreground p-2">
+            Indicates players that joined BYOND and this server within 24 hours
+          </div>
+        </div>
+        <div className="flex flex-col justify-end">
+          <div className="flex flex-row gap-3">
+            <label>Joins since (minutes ago):</label>
+            <input
+              onKeyDown={(ev) => {
+                if (ev.key === "Enter") {
+                  setTimeAgo(Number.parseInt(ev.currentTarget.value));
+                }
+              }}
+              defaultValue={240}
+              type="number"
+            />
+          </div>
+        </div>
       </div>
       <table>
         <thead>
@@ -72,12 +81,16 @@ const RenderNewPlayer = (props: { player: Player }) => {
   const isNew = firstJoin.getTime() - byondAccountAge.getTime() < 86400000;
 
   return (
-    <tr className={isNew ? "border border-red-400 rounded" : ""}>
+    <tr>
       <td>
         <NameExpand name={player.ckey} />
       </td>
-      <td>{firstJoin.toLocaleString()}</td>
-      <td>{byondAccountAge.toLocaleDateString()}</td>
+      <td className={isNew ? "red-alert-bg" : ""}>
+        {firstJoin.toLocaleString()}
+      </td>
+      <td className={isNew ? "red-alert-bg" : ""}>
+        {byondAccountAge.toLocaleDateString()}
+      </td>
       <td>
         <DetailedCid cid={player.lastKnownCid} />
       </td>