Add Beta badge to header (#3294)

Summary:

Add a "Beta" badge to the Monarch Dashboard header to indicate the dashboard is in early development. Also brighten the "dashboard" subtitle text for better readability against the dark background.

Differential Revision: D98135311

Author: johnwhumphreys

python/monarch/monarch_dashboard/frontend/src/App.css

@@ -165,15 +165,30 @@ body::after {
 .header-subtitle {
   font-family: var(--font-body);
   font-size: 12px;
-  font-weight: 300;
-  color: var(--text-muted);
+  font-weight: 400;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.12em;
   margin-left: var(--space-xs);
   position: relative;
   top: 1px;
 }
 
+.header-release-badge {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  color: #fff;
+  background: var(--accent-primary);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-left: var(--space-sm);
+  position: relative;
+  top: -1px;
+}
+
 .header-tabs {
   display: flex;
   gap: 2px;

python/monarch/monarch_dashboard/frontend/src/components/Header.tsx

@@ -57,6 +57,7 @@ export function Header({ tabs, activeTab, onTabChange }: HeaderProps) {
         <MonarchLogo />
         <h1 className="header-title">Monarch</h1>
         <span className="header-subtitle">dashboard</span>
+        <span className="header-release-badge">Beta</span>
       </div>
       <nav className="header-tabs" role="tablist">
         {tabs.map((tab) => (