From d1dc09001ce00233830b6038c3a7f7da5c765346 Mon Sep 17 00:00:00 2001
From: Jeremy Myers <inernestmusic@gmail.com>
Date: Wed, 14 Oct 2026 12:20:26 -0400
Subject: [PATCH] Unify table and button styles

---
 src/components/LightcurveDataTable.tsx |   3 +-
 src/components/SkyExplorer.tsx         |   4 +-
 src/components/styles/sky-explorer.css |  95 +---------------------
 src/components/styles/source-page.css  |  16 ++--
 src/components/styles/table.css        | 107 +++++++++++++++++++++++++
 src/index.css                          |   1 +
 6 files changed, 125 insertions(+), 101 deletions(-)

diff --git a/src/components/LightcurveDataTable.tsx b/src/components/LightcurveDataTable.tsx
index 0fdd3a1..e0d9561 100644
--- a/src/components/LightcurveDataTable.tsx
+++ b/src/components/LightcurveDataTable.tsx
@@ -149,7 +149,7 @@ export function LightcurveDataTable({
             </select>
             <button
               type="button"
-              className="download-data-btn"
+              className="table-download-btn"
               onClick={downloadData}
               title="Download light curve data"
             >
@@ -163,6 +163,7 @@ export function LightcurveDataTable({
         columns={columns}
         initialState={initialState}
         paginationControlsPosition="top"
+        className="themed-table"
       />
     </div>
   );
diff --git a/src/components/SkyExplorer.tsx b/src/components/SkyExplorer.tsx
index 61db6c2..cefe666 100644
--- a/src/components/SkyExplorer.tsx
+++ b/src/components/SkyExplorer.tsx
@@ -186,7 +186,7 @@ export function SkyExplorer({
         cell: ({ row }) => (
           <button
             type="button"
-            className="main-table-download-btn"
+            className="table-download-btn main-page-table"
             aria-label={`Download ${row.original.name} data as ${dataDownloadExt}`}
             onClick={() =>
               void lightcurveApi.downloadTableData(
@@ -224,7 +224,7 @@ export function SkyExplorer({
         columns={columns}
         initialState={TABLE_INITIAL_STATE}
         paginationControlsPosition="both"
-        className="all-sky-table-wrapper"
+        className="all-sky-table-wrapper themed-table"
         paginationClassName="all-sky-pagination"
       />
     </>
diff --git a/src/components/styles/sky-explorer.css b/src/components/styles/sky-explorer.css
index f1040d6..1d3e749 100644
--- a/src/components/styles/sky-explorer.css
+++ b/src/components/styles/sky-explorer.css
@@ -1,65 +1,7 @@
 .all-sky-table-wrapper {
-  --all-sky-table-border-radius: 5px;
   margin: 5px;
 }
 
-/* Rounded corners need separate borders (border-radius is ignored on collapsed tables), so each
-   cell only draws its right/bottom edge to avoid doubled inner borders. The background lives on
-   the table rather than the wrapper so nothing white shows outside the rounded corners. */
-.all-sky-table-wrapper table {
-  border: none;
-  border-collapse: separate;
-  border-spacing: 0;
-  border-radius: var(--all-sky-table-border-radius);
-  overflow: hidden;
-  background-color: white;
-}
-
-.all-sky-table-wrapper th,
-.all-sky-table-wrapper td {
-  border: none;
-  border-right: 1px solid var(--border-soft-blue-gray);
-  border-bottom: 1px solid var(--border-soft-blue-gray);
-}
-
-.all-sky-table-wrapper thead {
-  background-color: var(--bg-soft-blue-gray);
-}
-
-/* .all-sky-table-wrapper th {
-  color: var(--so-blue-darker);
-} */
-
-.all-sky-table-wrapper tbody > tr:nth-of-type(even) {
-  background-color: var(--bg-light-blue);
-}
-
-.all-sky-table-wrapper th:last-child,
-.all-sky-table-wrapper td:last-child {
-  border-right: none;
-}
-
-.all-sky-table-wrapper tbody > tr:last-child > td {
-  border-bottom: none;
-}
-
-/* Rounds the corner cells too, so their row/header backgrounds can't square off the corners */
-.all-sky-table-wrapper thead > tr:first-child > th:first-child {
-  border-top-left-radius: var(--all-sky-table-border-radius);
-}
-
-.all-sky-table-wrapper thead > tr:first-child > th:last-child {
-  border-top-right-radius: var(--all-sky-table-border-radius);
-}
-
-.all-sky-table-wrapper tbody > tr:last-child > td:first-child {
-  border-bottom-left-radius: var(--all-sky-table-border-radius);
-}
-
-.all-sky-table-wrapper tbody > tr:last-child > td:last-child {
-  border-bottom-right-radius: var(--all-sky-table-border-radius);
-}
-
 .all-sky-pagination {
   background-color: black;
   color: white;
@@ -76,26 +18,6 @@
   padding-bottom: 0;
 }
 
-.all-sky-pagination > .pagination-controls > .pagination-btn {
-  border: 1px solid var(--so-blue-darker);
-  background-color: var(--so-blue);
-  color: white;
-  font-weight: bolder;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  cursor: pointer;
-  border-radius: 4px;
-}
-
-.all-sky-pagination > .pagination-controls > .pagination-btn:hover {
-  background-color: var(--so-blue-darker);
-}
-
-.all-sky-pagination > .pagination-controls > .pagination-btn:disabled {
-  cursor: not-allowed;
-  background-color: var(--so-blue-darker);
-}
-
 /* Makes the Name column's preview button read as a link rather than a button */
 .source-name-btn {
   background: none;
@@ -120,21 +42,12 @@
   font-size: 0.8em;
 }
 
-.main-table-download-btn {
+.table-download-btn.main-page-table {
   background-color: white;
-  border: 1px solid var(--bg-so-orange-darker);
-  cursor: pointer;
   color: var(--bg-so-orange-darker);
 }
 
-.main-table-download-btn:hover {
-  background-color: var(--bg-so-orange-lighter);
-  cursor: pointer;
-}
-
-.main-table-download-btn:disabled {
-  background-color: #eee;
-  color: #bbb;
-  border: 1px solid #bbb;
-  cursor: not-allowed;
+.table-download-btn.main-page-table:hover {
+  background-color: var(--bg-so-orange-darkest);
+  color: white;
 }
diff --git a/src/components/styles/source-page.css b/src/components/styles/source-page.css
index 6f11538..4f43818 100644
--- a/src/components/styles/source-page.css
+++ b/src/components/styles/source-page.css
@@ -14,6 +14,13 @@
 
 .source-header-container > label > select {
   margin-left: 5px;
+  border: 2px solid rgb(108, 117, 125);
+  border-radius: 5px;
+  background-color: white;
+}
+
+.source-header-container > label > select:hover {
+  background-color: rgb(233, 236, 239);
 }
 
 .stats-container {
@@ -101,17 +108,12 @@
 
 .download-data-controls {
   display: flex;
-  column-gap: 0.25em;
-  height: 1.5em;
-}
-
-.select-data-format {
-  font-size: 11px;
+  column-gap: 0.3em;
 }
 
 .download-data-controls-container {
   position: relative;
-  margin-top: 3px;
+  margin-top: 5px;
 }
 
 .download-data-label {
diff --git a/src/components/styles/table.css b/src/components/styles/table.css
index 9ca2fa0..f1a8abb 100644
--- a/src/components/styles/table.css
+++ b/src/components/styles/table.css
@@ -29,6 +29,65 @@ tbody > tr:nth-of-type(even) {
   background-color: rgb(237 238 242);
 }
 
+/* Opt-in look shared by the main page and source page tables. Rounded corners need separate 
+   borders (border-radius is ignored on collapsed tables), so each cell only draws its 
+   right/bottom edge to avoid doubled inner borders. The background lives on the table rather 
+   than the wrapper so nothing shows outside the corners. */
+.themed-table {
+  --table-border-radius: 5px;
+}
+
+.themed-table table {
+  border: 1px solid var(--border-soft-blue-gray);
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(--table-border-radius);
+  overflow: hidden;
+  background-color: white;
+}
+
+.themed-table th,
+.themed-table td {
+  border: none;
+  border-right: 1px solid var(--border-soft-blue-gray);
+  border-bottom: 1px solid var(--border-soft-blue-gray);
+}
+
+.themed-table thead {
+  background-color: var(--bg-soft-blue-gray);
+}
+
+.themed-table tbody > tr:nth-of-type(even) {
+  background-color: var(--bg-light-blue);
+}
+
+.themed-table th:last-child,
+.themed-table td:last-child {
+  border-right: none;
+}
+
+.themed-table tbody > tr:last-child > td {
+  border-bottom: none;
+}
+
+/* Rounds the corner cells too, so their row/header backgrounds can't square off the corners.
+   Inset by the table's 1px border so they follow its inner edge. */
+.themed-table thead > tr:first-child > th:first-child {
+  border-top-left-radius: calc(var(--table-border-radius) - 1px);
+}
+
+.themed-table thead > tr:first-child > th:last-child {
+  border-top-right-radius: calc(var(--table-border-radius) - 1px);
+}
+
+.themed-table tbody > tr:last-child > td:first-child {
+  border-bottom-left-radius: calc(var(--table-border-radius) - 1px);
+}
+
+.themed-table tbody > tr:last-child > td:last-child {
+  border-bottom-right-radius: calc(var(--table-border-radius) - 1px);
+}
+
 .pagination-container {
   display: flex;
   margin: 0.5em 0;
@@ -43,6 +102,7 @@ tbody > tr:nth-of-type(even) {
   align-items: center;
   column-gap: 0.25em;
 }
+
 .pagination-controls > span {
   width: 95px;
   text-align: center;
@@ -50,12 +110,25 @@ tbody > tr:nth-of-type(even) {
 
 .pagination-btn {
   font-size: 0.7em;
+  border: 1px solid var(--so-blue-darker);
+  background-color: var(--so-blue);
+  color: white;
+  font-weight: bolder;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  cursor: pointer;
+  border-radius: 4px;
 }
 
 .pagination-btn:disabled {
   cursor: not-allowed;
 }
 
+.pagination-btn:disabled,
+.pagination-btn:hover {
+  background-color: var(--so-blue-darker);
+}
+
 .pagination-details {
   font-size: 0.9em;
   width: 200px;
@@ -68,3 +141,37 @@ tbody > tr:nth-of-type(even) {
 .sort-icon {
   font-size: 0.9em;
 }
+
+.table-download-btn {
+  border: 1px solid var(--bg-so-orange-darker);
+  cursor: pointer;
+  background-color: var(--bg-so-orange-darker);
+  color: white;
+  border-radius: 4px;
+}
+
+.table-download-btn:hover {
+  background-color: var(--bg-so-orange-darkest);
+  cursor: pointer;
+}
+
+.table-download-btn:disabled {
+  background-color: #eee;
+  color: #bbb;
+  border: 1px solid #bbb;
+  cursor: not-allowed;
+}
+
+.select-data-format {
+  border: 1px solid var(--bg-so-orange-darker);
+  color: var(--bg-so-orange-darker);
+  font-weight: bold;
+  border-radius: 4px;
+  background-color: white;
+  font-size: 11px;
+  height: 20px;
+}
+
+.select-data-format:hover {
+  background-color: var(--bg-so-orange-lighter);
+}
diff --git a/src/index.css b/src/index.css
index 349333a..f17cf7b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,6 +13,7 @@
   --so-blue-darker: rgb(0 86 136);
   --bg-so-orange: rgb(242 101 34);
   --bg-so-orange-darker: rgb(204 51 17);
+  --bg-so-orange-darkest: rgb(173 43 14);
   --bg-so-orange-lighter: rgb(254 242 242);
   --bg-soft-blue-gray: #d9e6f0;
   --bg-light-blue: #eaf2f8;