header/footer tweaks

Author: tstromberg

assets/app.js

@@ -492,11 +492,36 @@ const App = (() => {
     showMainContent();
   };
 
+  // Footer Management
+  const initializeFooter = () => {
+    const footer = document.querySelector('.dashboard-footer');
+    const closeBtn = document.getElementById('footerCloseBtn');
+    
+    // Check localStorage for footer state
+    const footerHidden = localStorage.getItem('footerHidden') === 'true';
+    if (footerHidden && footer) {
+      footer.classList.add('hidden');
+    }
+    
+    // Add close button event listener
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        if (footer) {
+          footer.classList.add('hidden');
+          localStorage.setItem('footerHidden', 'true');
+        }
+      });
+    }
+  };
+
   // Initialize
   const init = async () => {
     const urlParams = new URLSearchParams(window.location.search);
     const demo = urlParams.get("demo");
     const urlContext = parseURL();
+    
+    // Initialize footer
+    initializeFooter();
 
     // Handle stats page routing
     if (urlContext && urlContext.isStats) {

assets/styles.css

@@ -26,7 +26,11 @@
     --color-danger: #ef4444;
 
     /* Gradients */
-    --gradient-mesh: linear-gradient(to bottom right, rgba(99, 102, 241, 0.05), rgba(168, 85, 247, 0.05));
+    --gradient-mesh: linear-gradient(
+        to bottom right,
+        rgba(99, 102, 241, 0.05),
+        rgba(168, 85, 247, 0.05)
+    );
     --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
     --gradient-card: linear-gradient(
         to bottom right,
@@ -42,8 +46,8 @@
     --text-xs: 0.875rem;
     --text-sm: 0.9375rem;
     --text-base: 1rem;
-    --text-lg: 1.125rem;
-    --text-xl: 1.25rem;
+    --text-lg: 1.115rem;
+    --text-xl: 1.175rem;
 
     --leading-tight: 1.25;
     --leading-normal: 1.5;
@@ -375,11 +379,40 @@ a {
 .header-title {
     font-size: var(--text-xl);
     font-weight: 700;
+    margin: 0;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.gradient-text {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    margin: 0;
+    letter-spacing: -0.01em;
+}
+
+.header-beta-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.5rem;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 9999px;
+    font-size: 0.625rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #6366f1;
+    line-height: 1.2;
+    transition: all 0.2s ease;
+}
+
+.header-title:hover .header-beta-badge {
+    background: rgba(99, 102, 241, 0.15);
+    border-color: rgba(99, 102, 241, 0.3);
 }
 
 .controls {
@@ -407,7 +440,7 @@ a {
 
 .search-input {
     flex: 1;
-    max-width: 20rem;
+    max-width: 10rem;
 }
 
 .org-select:hover,
@@ -804,7 +837,7 @@ a {
 /* Size badges */
 .badge-size {
     font-weight: 700;
-
+}
 
 .badge-size-xxs {
     background: rgb(236 252 203 / 0.5);
@@ -875,7 +908,12 @@ a {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.4) 50%,
+        transparent 100%
+    );
     transform: translateX(-100%);
 }
 
@@ -2471,6 +2509,22 @@ a {
 }
 
 /* Responsive */
+@media (max-width: 1050px) {
+    .header-title {
+        font-size: calc(var(--text-xl) * 0.9);
+    }
+    .header-beta-badge {
+        font-size: 0.5625rem;
+        padding: 0.1rem 0.375rem;
+    }
+    .header-left {
+        gap: var(--space-4);
+    }
+    .controls {
+        gap: var(--space-3);
+    }
+}
+
 @media (max-width: 768px) {
     /* Slightly reduce font sizes on mobile for better fit */
     :root {
@@ -2777,10 +2831,11 @@ a {
     align-items: center;
     justify-content: center;
     gap: var(--space-3);
-    padding: var(--space-3) var(--space-4);
+    padding: 2px;
     color: white;
     font-size: var(--text-sm);
-    font-weight: 500;
+    font-weight: 400;
+    position: relative;
 }
 
 .notification-icon {
@@ -2829,3 +2884,32 @@ a {
 }
 
 /* Removed pulse animation for performance */
+
+.footer-close-btn {
+    position: absolute;
+    right: var(--space-3);
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: none;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: opacity 0.2s ease;
+    color: rgba(0, 0, 0, 0.5);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1;
+}
+
+.footer-close-btn:hover {
+    opacity: 0.7;
+}
+
+.dashboard-footer.hidden {
+    display: none;
+}

assets/user.js

@@ -1,5 +1,8 @@
 // User PR Dashboard Module for Ready To Review
-import { $, $$, show, hide, escapeHtml } from './utils.js';\n\n// Request deduplication cache\nconst pendingRequests = new Map();
+import { $, $$, show, hide, escapeHtml } from './utils.js';
+
+// Request deduplication cache
+const pendingRequests = new Map();
 
 export const User = (() => {
   "use strict";

index.html

@@ -42,17 +42,8 @@ <h1 class="header-title">
                                         text-decoration: none;
                                         color: inherit;
                                     "
-                                    >🚀 Ready To Review
-                                    <span
-                                        style="
-                                            font-size: 11px;
-                                            color: #dc2626;
-                                            font-weight: 500;
-                                            vertical-align: super;
-                                            margin-left: 2px;
-                                        "
-                                        >beta</span
-                                    ></a
+                                    >🚀 <span class="gradient-text">Ready To Review</span>
+                                    <span class="header-beta-badge">Beta</span></a
                                 >
                             </h1>
                             <div class="controls">
@@ -1080,9 +1071,9 @@ <h3>Export Robot Configuration</h3>
                             class="notification-link"
                             >Ready to Review.app</a
                         >
-                        <span class="beta-badge">beta</span>
                     </span>
                     <span class="notification-icon">✨</span>
+                    <button id="footerCloseBtn" class="footer-close-btn" aria-label="Close notification">×</button>
                 </div>
             </footer>
         </div>