add discord invite button in UI

webui/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-icons": "^5.5.0",
         "react-joystick-component": "^6.2.1",
         "react-router-dom": "^7.9.6"
       },
@@ -3391,6 +3392,15 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-joystick-component": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/react-joystick-component/-/react-joystick-component-6.2.1.tgz",

webui/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-icons": "^5.5.0",
     "react-joystick-component": "^6.2.1",
     "react-router-dom": "^7.9.6"
   },

webui/src/components/DiscordInviteButton.jsx

@@ -0,0 +1,23 @@
+import { useSession } from "../context/SessionContext";
+import { FaDiscord } from "react-icons/fa";
+
+export default function DiscordInviteButton({text = "Join our Discord!"}) {
+  const { session } = useSession();
+  const discordInvite = session?.discord?.invite || null;
+
+  if (!discordInvite) return null;
+
+  return (
+    <a
+      href={discordInvite}
+      target="_blank"
+      rel="noopener noreferrer"npm 
+      className="inline-flex items-center px-3 py-2 text-white rainbow-animate-bg transition justify-center"
+    // animated rainbow backgound
+    // className="inline-flex items-center px-3 py-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 transition"
+    >
+      <FaDiscord className="mr-2" />
+        {text}
+    </a>
+  );
+}

webui/src/components/DrivePanel.jsx

@@ -1,5 +1,6 @@
 import { useTelemetryFrame } from '../context/TelemetryContext.jsx';
 import { useControlSystem } from '../controls/index.js';
+import DiscordInviteButton from './DiscordInviteButton.jsx';
 
 export default function DrivePanel() {
   const {
@@ -53,6 +54,7 @@ export default function DrivePanel() {
           disabled={!roverId}
         />
       </div>
+      {/* <DiscordInviteButton /> */}
     </section>
   );
 }

webui/src/components/ModeGateOverlay.jsx

@@ -1,5 +1,6 @@
 import AuthPanel from './AuthPanel.jsx';
 import { useSession } from '../context/SessionContext.jsx';
+import DiscordInviteButton from './DiscordInviteButton.jsx';
 
 const PRIVILEGED_ROLES = new Set(['admin', 'lockdown', 'lockdown-admin']);
 const RESTRICTED_MODES = new Set(['admin', 'lockdown']);
@@ -42,6 +43,9 @@ export default function ModeGateOverlay() {
         <div className="surface-muted">
           <AuthPanel />
         </div>
+        <div className='w-full justify-center items-center'>
+          <DiscordInviteButton text='Join our Discord server for updates!'/>
+        </div>
         {/* <p className="text-xs text-slate-500">
           Your controls are paused until access is granted. You will automatically regain the interface once the mode
           changes or after a successful login.

webui/src/index.css

@@ -65,4 +65,45 @@ body {
   .button-danger {
     @apply px-0.5 py-0.5 text-sm font-medium text-white transition-colors bg-rose-600 hover:bg-rose-500;
   }
+
+  .rainbow-animate-bg {
+    background: linear-gradient(
+      270deg,
+      #ff0000,
+      #ff7f00,
+      #ffff00,
+      #00ff00,
+      #0000ff,
+      #4b0082,
+      #8b00ff
+
+      /* less colors: */
+      /* #ff0000,
+      #00ff00,
+      #0000ff */
+
+      /* blue, white, pink */
+      /* #00e5ff,
+      #ffffff,
+      #ff69b4 */
+
+      /* discord colors */
+      /* #5865f2,
+      #ffffff,
+      #ff4754 */
+    );
+    background-size: 1400% 1400%;
+    animation: rainbowBG 300s ease infinite;
+  }
+  @keyframes rainbowBG {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
 }