better ux

Author: tstromberg

assets/styles.css

@@ -38,11 +38,11 @@
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
 
-  --text-xs: 0.75rem;
-  --text-sm: 0.8125rem;
-  --text-base: 0.875rem;
-  --text-lg: 1rem;
-  --text-xl: 1.125rem;
+  --text-xs: 0.875rem;
+  --text-sm: 0.9375rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
 
   --leading-tight: 1.25;
   --leading-normal: 1.5;
@@ -598,19 +598,19 @@ a {
   background: rgba(255, 255, 255, 0.98);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(226, 232, 240, 0.8);
+  border: 1px solid rgba(203, 213, 225, 1);
   border-radius: var(--radius-md);
   padding: var(--space-3);
   transition: all var(--transition);
   position: relative;
   border-left: 3px solid transparent;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 }
 
 .pr-card:hover {
   background: rgba(255, 255, 255, 1);
-  border-color: rgba(226, 232, 240, 1);
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
+  border-color: rgba(186, 199, 213, 1);
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
   transform: translateX(2px);
 }
 
@@ -681,7 +681,7 @@ a {
 }
 
 .pr-title {
-  font-size: var(--text-base);
+  font-size: var(--text-lg);
   font-weight: 500;
   line-height: var(--leading-tight);
   color: var(--color-text);
@@ -889,7 +889,7 @@ a {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: var(--text-xs);
+  font-size: var(--text-sm);
   color: var(--color-text-secondary);
   gap: var(--space-3);
 }
@@ -902,8 +902,8 @@ a {
 }
 
 .author-avatar {
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: var(--radius-full);
 }
 
@@ -1328,6 +1328,15 @@ a {
 
 /* Responsive */
 @media (max-width: 768px) {
+  /* Slightly reduce font sizes on mobile for better fit */
+  :root {
+    --text-xs: 0.8125rem;
+    --text-sm: 0.875rem;
+    --text-base: 0.9375rem;
+    --text-lg: 1rem;
+    --text-xl: 1.125rem;
+  }
+  
   .header-content {
     flex-wrap: wrap;
     height: auto;
@@ -1357,6 +1366,11 @@ a {
     align-self: flex-start;
   }
 
+  .author-avatar {
+    width: 1rem;
+    height: 1rem;
+  }
+  
   .toast {
     left: var(--space-4);
     right: var(--space-4);

index.html

@@ -245,7 +245,7 @@ <h1 class="stats-title">Pull Request Statistics</h1>
         </main>
 
         <footer class="dashboard-footer">
-            <span>Want real-time notifications on your desktop? Try the <a href="https://github.com/ready-to-review/pr-menubar" target="_blank" rel="noopener" style="color: #0969da; text-decoration: underline; font-weight: 500;">Ready to Review.app</a></span>
+            <span>Want real-time notifications on your desktop? Try the new <a href="https://github.com/ready-to-review/pr-menubar" target="_blank" rel="noopener" style="color: #0969da; text-decoration: underline; font-weight: 500;">Ready to Review.app</a> <span style="background: #f3f4f6; color: #475569; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 500; vertical-align: middle;">(beta)</span></span>
         </footer>
     </div>