Skip to content

Unify table and button styles #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jernestmyers merged 1 commit into from
Oct 14, 2026
Merged

Unify table and button styles #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/components/LightcurveDataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -163,6 +163,7 @@ export function LightcurveDataTable({
columns={columns}
initialState={initialState}
paginationControlsPosition="top"
className="themed-table"
/>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/SkyExplorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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"
/>
</>
Expand Down
95 changes: 4 additions & 91 deletions src/components/styles/sky-explorer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
16 changes: 9 additions & 7 deletions src/components/styles/source-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
107 changes: 107 additions & 0 deletions src/components/styles/table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -43,19 +102,33 @@ tbody > tr:nth-of-type(even) {
align-items: center;
column-gap: 0.25em;
}

.pagination-controls > span {
width: 95px;
text-align: center;
}

.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;
Expand All @@ -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);
}
1 change: 1 addition & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading