rafmacalaba commited on
Commit
0018d88
Β·
1 Parent(s): 5c1c0e8

ui: 5 polish fixes

Browse files

1. Rename 'Annotation Tool' β†’ 'Data Use Annotation Tool'
2. Remove redundant 'PDF Viewer' heading
3. Compact document dropdown (smaller font/padding, max-width)
4. PDF viewer defaults to 75% zoom
5. Annotation panel stays closed after save

Files changed (3) hide show
  1. app/components/PdfViewer.js +1 -1
  2. app/globals.css +4 -3
  3. app/page.js +4 -5
app/components/PdfViewer.js CHANGED
@@ -25,7 +25,7 @@ export default function PdfViewer({ pdfUrl, pageNumber }) {
25
 
26
  // Proxy the PDF through our own API to bypass CORS restrictions.
27
  // Then use the browser's built-in PDF viewer via <object> tag.
28
- const proxyUrl = `/api/pdf-proxy?url=${encodeURIComponent(pdfUrl)}#page=${viewerPage}`;
29
 
30
  return (
31
  <div className="pdf-container">
 
25
 
26
  // Proxy the PDF through our own API to bypass CORS restrictions.
27
  // Then use the browser's built-in PDF viewer via <object> tag.
28
+ const proxyUrl = `/api/pdf-proxy?url=${encodeURIComponent(pdfUrl)}#page=${viewerPage}&zoom=75`;
29
 
30
  return (
31
  <div className="pdf-container">
app/globals.css CHANGED
@@ -440,11 +440,12 @@ h4 {
440
  background-color: var(--surface);
441
  color: var(--text-color);
442
  border: 1px solid var(--border-color);
443
- border-radius: 8px;
444
- padding: 8px 12px;
445
- font-size: 0.9rem;
446
  cursor: pointer;
447
  transition: border-color 0.2s;
 
448
  }
449
 
450
  .select-group select:hover,
 
440
  background-color: var(--surface);
441
  color: var(--text-color);
442
  border: 1px solid var(--border-color);
443
+ border-radius: 6px;
444
+ padding: 4px 8px;
445
+ font-size: 0.75rem;
446
  cursor: pointer;
447
  transition: border-color 0.2s;
448
+ max-width: 280px;
449
  }
450
 
451
  .select-group select:hover,
app/page.js CHANGED
@@ -304,7 +304,6 @@ export default function Home() {
304
  setAnnotations(prev => [...prev, payload]);
305
  setModalOpen(false);
306
  showToast("Annotation saved!");
307
- setPanelOpen(true);
308
  refreshPageData(); // Refresh so new annotation appears highlighted
309
  } else {
310
  showToast("Failed to save annotation.", "error");
@@ -424,8 +423,8 @@ export default function Home() {
424
  return (
425
  <div className="login-gate">
426
  <div className="login-card">
427
- <h1>πŸ”’ Annotation Tool</h1>
428
- <p>Sign in with your HuggingFace account to access the annotation tool.</p>
429
  <button onClick={handleLogin} className="btn btn-login-large">
430
  πŸ€— Sign in with HuggingFace
431
  </button>
@@ -448,7 +447,7 @@ export default function Home() {
448
  <div className="app-wrapper">
449
  {/* Top bar with user identity */}
450
  <div className="top-bar">
451
- <span className="top-bar-title">Annotation Tool</span>
452
  <div className="top-bar-right">
453
  <ProgressBar
454
  documents={documents}
@@ -478,7 +477,7 @@ export default function Home() {
478
  <div className="container">
479
  <div className="pane left-pane">
480
  <div className="pane-header">
481
- <h2>PDF Viewer</h2>
482
  <DocumentSelector
483
  documents={documents}
484
  selectedDocIndex={selectedDocIndex}
 
304
  setAnnotations(prev => [...prev, payload]);
305
  setModalOpen(false);
306
  showToast("Annotation saved!");
 
307
  refreshPageData(); // Refresh so new annotation appears highlighted
308
  } else {
309
  showToast("Failed to save annotation.", "error");
 
423
  return (
424
  <div className="login-gate">
425
  <div className="login-card">
426
+ <h1>πŸ”’ Data Use Annotation Tool</h1>
427
+ <p>Sign in with your HuggingFace account to access the tool.</p>
428
  <button onClick={handleLogin} className="btn btn-login-large">
429
  πŸ€— Sign in with HuggingFace
430
  </button>
 
447
  <div className="app-wrapper">
448
  {/* Top bar with user identity */}
449
  <div className="top-bar">
450
+ <span className="top-bar-title">Data Use Annotation Tool</span>
451
  <div className="top-bar-right">
452
  <ProgressBar
453
  documents={documents}
 
477
  <div className="container">
478
  <div className="pane left-pane">
479
  <div className="pane-header">
480
+
481
  <DocumentSelector
482
  documents={documents}
483
  selectedDocIndex={selectedDocIndex}