Skip to content

Commit a7a07ed

Browse files
dev-distdev-dist
committed
more styling changes
1 parent c62bce8 commit a7a07ed

File tree

3 files changed

+133
-47
lines changed

3 files changed

+133
-47
lines changed

‎src/features/feeds/components/ExpandableTableWrapper.tsx‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ interface ExpandableTableWrapperProps {
2424
description?: string
2525
allowExpansion?: boolean
2626
defaultExpanded?: boolean
27+
scrollable?: boolean
2728
children: preact.ComponentChildren
2829
}
2930

@@ -32,20 +33,33 @@ export const ExpandableTableWrapper = ({
3233
description,
3334
allowExpansion = false,
3435
defaultExpanded = true,
36+
scrollable = false,
3537
children,
3638
}: ExpandableTableWrapperProps) => {
3739
const [isExpanded, setIsExpanded] = useState(defaultExpanded)
3840

3941
// If expansion is not allowed, still wrap content but without the header
4042
if (!allowExpansion) {
41-
return <div className={tableStyles.tableContainer}>{children}</div>
43+
return <div className={clsx(tableStyles.tableContainer, scrollable && tableStyles.scrollableTable)}>{children}</div>
44+
}
45+
46+
const handleToggle = () => {
47+
setIsExpanded(!isExpanded)
4248
}
4349

4450
return (
45-
<div className={tableStyles.expandableWrapper}>
51+
<div
52+
className={clsx(tableStyles.expandableWrapper, !isExpanded && tableStyles.expandableWrapperCollapsed)}
53+
onClick={(e) => {
54+
// If expanded and clicking anywhere in the wrapper (not inside interactive elements)
55+
if (isExpanded && e.target === e.currentTarget) {
56+
handleToggle()
57+
}
58+
}}
59+
>
4660
<div
4761
className={tableStyles.expandableHeader}
48-
onClick={() => setIsExpanded(!isExpanded)}
62+
onClick={handleToggle}
4963
role="button"
5064
tabIndex={0}
5165
onKeyDown={(e) => {
@@ -69,7 +83,9 @@ export const ExpandableTableWrapper = ({
6983
<div className={clsx(tableStyles.expandableArrow, isExpanded && tableStyles.expandableArrowExpanded)} />
7084
</div>
7185

72-
{isExpanded && <div className={tableStyles.tableContainer}>{children}</div>}
86+
{isExpanded && (
87+
<div className={clsx(tableStyles.tableContainer, scrollable && tableStyles.scrollableTable)}>{children}</div>
88+
)}
7389
</div>
7490
)
7591
}

‎src/features/feeds/components/Tables.module.css‎

Lines changed: 62 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,20 @@
5252
/* Expandable wrapper and header */
5353
.expandableWrapper {
5454
background-color: var(--gray-50);
55-
border-radius: var(--border-radius);
55+
border: 1px solid var(--border-color, #e5e7eb);
56+
border-radius: var(--border-radius, 0.375rem);
5657
padding: var(--space-3x);
5758
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
59+
cursor: pointer;
60+
transition: background-color 0.2s ease;
61+
}
62+
63+
.expandableWrapper:hover {
64+
background-color: var(--gray-100);
65+
}
66+
67+
.expandableWrapper:has(.tableContainer:hover) {
68+
background-color: var(--gray-50);
5869
}
5970

6071
.expandableHeader {
@@ -66,10 +77,6 @@
6677
user-select: none;
6778
}
6879

69-
.expandableWrapper:hover .expandableHeader {
70-
opacity: 0.9;
71-
}
72-
7380
.expandableHeader:focus-visible {
7481
outline: 2px solid var(--blue-500);
7582
outline-offset: 2px;
@@ -308,26 +315,73 @@
308315

309316
.tableContainer {
310317
border: 1px solid var(--border-color, #e5e7eb);
311-
border-radius: 4px;
318+
border-radius: var(--border-radius, 0.375rem);
319+
background-color: white;
320+
display: flex;
321+
flex-direction: column;
312322
overflow: hidden;
323+
cursor: default;
324+
}
325+
326+
/* When inside expandable wrapper, add margin */
327+
.expandableWrapper .tableContainer {
313328
margin-top: var(--space-3x);
314329
margin-left: var(--space-4x);
315330
}
316331

332+
/* Search bar at top */
333+
.tableContainer > div:first-child {
334+
padding: var(--space-2x);
335+
background-color: white;
336+
}
337+
338+
.scrollableTable .networksTable {
339+
position: relative;
340+
}
341+
342+
.scrollableTable .networksTable::after {
343+
content: "";
344+
position: absolute;
345+
bottom: 0;
346+
left: 0;
347+
right: 0;
348+
height: 5px;
349+
background: linear-gradient(to top, rgba(0, 0, 0, 0.15), transparent);
350+
pointer-events: none;
351+
border-radius: 0 0 var(--border-radius, 0.375rem) var(--border-radius, 0.375rem);
352+
}
353+
354+
.scrollableTable .networksTable thead,
355+
.scrollableTable .networksTable tbody,
356+
.scrollableTable .networksTable tr {
357+
display: table;
358+
width: 100%;
359+
table-layout: fixed;
360+
}
361+
362+
.scrollableTable .networksTable tbody {
363+
display: block;
364+
overflow-y: auto;
365+
max-height: calc(50vh - 120px);
366+
scrollbar-width: thin;
367+
}
368+
369+
.scrollableTable .networksTable tbody::-webkit-scrollbar {
370+
width: 8px;
371+
}
372+
317373
.networksTable {
318374
width: 100%;
319375
border-collapse: collapse !important;
320376
font-size: 0.875rem;
321377
margin-bottom: 0;
322378
table-layout: fixed !important;
323379
border: none !important;
324-
border-radius: 0;
325380
}
326381

327382
.networksTable tr,
328383
.networksTable td {
329384
border: none;
330-
border-collapse: collapse;
331385
}
332386

333387
.networksTable th {

‎src/features/feeds/components/Tables.tsx‎

Lines changed: 51 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -637,15 +637,33 @@ export const StreamsNetworkAddressesTable = ({
637637
</tr>
638638
</thead>
639639
<tbody>
640-
{filteredNetworks.map((network: NetworkData, index: number) => {
641-
const statusUrl = getNetworkStatusUrl(network)
642-
return (
643-
<Fragment key={network.network}>
644-
{network.mainnet &&
645-
(!normalizedSearch ||
646-
match(network.network) ||
647-
match(network.mainnet.label) ||
648-
match(network.isSolana ? network.mainnet.verifierProgramId : network.mainnet.verifierProxy)) && (
640+
{filteredNetworks.length === 0 ? (
641+
<tr>
642+
<td colSpan={3} style={{ textAlign: "center", padding: "2rem", fontStyle: "italic" }}>
643+
No results found
644+
</td>
645+
</tr>
646+
) : (
647+
filteredNetworks.map((network: NetworkData, index: number) => {
648+
const statusUrl = getNetworkStatusUrl(network)
649+
650+
const showMainnet =
651+
network.mainnet &&
652+
(!normalizedSearch ||
653+
match(network.network) ||
654+
match(network.mainnet.label) ||
655+
match(network.isSolana ? network.mainnet.verifierProgramId : network.mainnet.verifierProxy))
656+
657+
const showTestnet =
658+
network.testnet &&
659+
(!normalizedSearch ||
660+
match(network.network) ||
661+
match(network.testnet.label) ||
662+
match(network.isSolana ? network.testnet.verifierProgramId : network.testnet.verifierProxy))
663+
664+
return (
665+
<Fragment key={network.network}>
666+
{showMainnet && (
649667
<tr
650668
key={`${network.network}-mainnet`}
651669
className={index > 0 ? tableStyles.firstNetworkRow : undefined}
@@ -691,17 +709,13 @@ export const StreamsNetworkAddressesTable = ({
691709
</tr>
692710
)}
693711

694-
{network.testnet &&
695-
(!normalizedSearch ||
696-
match(network.network) ||
697-
match(network.testnet.label) ||
698-
match(network.isSolana ? network.testnet.verifierProgramId : network.testnet.verifierProxy)) && (
712+
{showTestnet && (
699713
<tr
700714
key={`${network.network}-testnet`}
701-
className={!network.mainnet && index > 0 ? tableStyles.firstNetworkRow : tableStyles.testnetRow}
715+
className={!showMainnet && index > 0 ? tableStyles.firstNetworkRow : tableStyles.testnetRow}
702716
>
703717
<td className={tableStyles.networkColumn}>
704-
{!network.mainnet && (
718+
{!showMainnet && (
705719
<div className={tableStyles.networkInfo}>
706720
<img src={network.logoUrl} alt={`${network.network} logo`} />
707721
<span>{network.network}</span>
@@ -742,25 +756,26 @@ export const StreamsNetworkAddressesTable = ({
742756
</td>
743757
</tr>
744758
)}
745-
{statusUrl && (
746-
<tr key={`${network.network}-status-explorer`} className={tableStyles.statusRow}>
747-
<td colSpan={3} className={tableStyles.statusCell}>
748-
<div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end" }}>
749-
<a
750-
href={statusUrl}
751-
target="_blank"
752-
rel="noopener noreferrer"
753-
className={tableStyles.statusLink}
754-
>
755-
View {network.network} Network Status →
756-
</a>
757-
</div>
758-
</td>
759-
</tr>
760-
)}
761-
</Fragment>
762-
)
763-
})}
759+
{statusUrl && (
760+
<tr key={`${network.network}-status-explorer`} className={tableStyles.statusRow}>
761+
<td colSpan={3} className={tableStyles.statusCell}>
762+
<div style={{ display: "flex", gap: "1rem", justifyContent: "flex-end" }}>
763+
<a
764+
href={statusUrl}
765+
target="_blank"
766+
rel="noopener noreferrer"
767+
className={tableStyles.statusLink}
768+
>
769+
View {network.network} Network Status →
770+
</a>
771+
</div>
772+
</td>
773+
</tr>
774+
)}
775+
</Fragment>
776+
)
777+
})
778+
)}
764779
</tbody>
765780
</table>
766781
</>
@@ -773,6 +788,7 @@ export const StreamsNetworkAddressesTable = ({
773788
description="Expand to view verifier proxy addresses required for onchain report verification"
774789
allowExpansion={allowExpansion}
775790
defaultExpanded={defaultExpanded}
791+
scrollable={allowExpansion}
776792
>
777793
{tableContent}
778794
</ExpandableTableWrapper>

0 commit comments

Comments
 (0)