diff --git a/CHANGELOG.md b/CHANGELOG.md index 074000e552..ed7017c840 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ ### Fixes +- Fixed stake pool list styling ([PR 2920](https://github.com/input-output-hk/daedalus/pull/2920)) - Fixed PopOver overlap ([PR 2954](https://github.com/input-output-hk/daedalus/pull/2954)) - Fixed tooltip being hidden in several places ([PR-2934](https://github.com/input-output-hk/daedalus/pull/2934)) - Adjusted padding for search field in stake pools ([PR 2945](https://github.com/input-output-hk/daedalus/pull/2945)) diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss index cda9cd648a..dd8d96ba0f 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.scss @@ -94,20 +94,25 @@ .table { border-style: hidden; + margin-bottom: -10px; user-select: text; width: 100%; .thead { background: var(--theme-bordered-box-background-color); border-radius: 4px 4px 0 0; - box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); display: block; - margin: -20px -20px 0; + margin: -10px -20px 0; padding: 0 20px; position: sticky; top: 0; + transition: box-shadow 0.1s ease-in-out; z-index: $sticky-header-z-index; + &.stickyHeader { + box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); + } + .tr { border: 0; display: flex; @@ -145,7 +150,7 @@ } } - .tr { + .tr:not(:last-child) { border-bottom: 1px solid var(--theme-staking-table-border-color); } diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx index 4fd9214c3f..258328b12f 100644 --- a/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTable.tsx @@ -12,13 +12,13 @@ import styles from './StakePoolsTable.scss'; import StakePool from '../../../domains/StakePool'; import LoadingSpinner from '../../widgets/LoadingSpinner'; import BorderedBox from '../../widgets/BorderedBox'; -import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell'; import { useSortedStakePoolList, useCreateColumns, StakePoolsOrder, StakePoolSortableProps, } from './hooks'; +import { StakePoolsTableHeader } from './StakePoolsTableHeader'; export const defaultTableOrdering: Record< StakePoolSortableProps, @@ -191,34 +191,14 @@ function StakePoolsTableComponent({ {sortedStakePoolList.length > 0 && (
-
- {headerGroups.map((headerGroup) => ( - /* eslint-disable-next-line react/jsx-key */ -
- {headerGroup.headers.map((column) => ( - - {column.render('Header')} - - ))} -
- ))} -
+ {({ width }) => ( diff --git a/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx new file mode 100644 index 0000000000..a08ea9ef71 --- /dev/null +++ b/source/renderer/app/components/staking/stake-pools/StakePoolsTableHeader.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { observer } from 'mobx-react'; +import classNames from 'classnames'; +import { HeaderGroup } from 'react-table'; +import { StakePoolsTableHeaderCell } from './StakePoolsTableHeaderCell'; +import StakePool from '../../../domains/StakePool'; +import { + useInViewPort, + StakePoolsOrder, + StakePoolSortableProps, +} from './hooks'; +import styles from './StakePoolsTable.scss'; + +type Props = { + headerGroups: HeaderGroup[]; + stakePoolsOrder: StakePoolsOrder; + stakePoolsSortBy: StakePoolSortableProps; + onHandleSort: (name: string) => void; + onTableHeaderMouseEnter: () => void; + onTableHeaderMouseLeave: () => void; +}; + +export const Component = ({ + stakePoolsSortBy, + stakePoolsOrder, + headerGroups, + onHandleSort, + onTableHeaderMouseEnter, + onTableHeaderMouseLeave, +}: Props) => { + const { setTargetRef, isInViewport } = useInViewPort(); + + return ( + <> +
+
+ {headerGroups.map((headerGroup) => ( + /* eslint-disable-next-line react/jsx-key */ +
+ {headerGroup.headers.map((column) => ( + + {column.render('Header')} + + ))} +
+ ))} +
+ + ); +}; + +export const StakePoolsTableHeader = observer(Component); diff --git a/source/renderer/app/components/staking/stake-pools/hooks/index.ts b/source/renderer/app/components/staking/stake-pools/hooks/index.ts index ac08a1ed77..daaddce0bd 100644 --- a/source/renderer/app/components/staking/stake-pools/hooks/index.ts +++ b/source/renderer/app/components/staking/stake-pools/hooks/index.ts @@ -1,4 +1,5 @@ export { useCreateColumns } from './useCreateColumns'; +export { useInViewPort } from './useInViewPort'; export { useSortedStakePoolList, StakePoolsOrder, diff --git a/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx new file mode 100644 index 0000000000..30a466ae89 --- /dev/null +++ b/source/renderer/app/components/staking/stake-pools/hooks/useInViewPort.tsx @@ -0,0 +1,29 @@ +import { useRef, useState, useCallback } from 'react'; + +export const useInViewPort = () => { + const [isInViewport, setIsInViewport] = useState(true); + const targetRef = useRef(null); + const observerRef = useRef( + new IntersectionObserver((entries) => { + entries.forEach((entry) => { + setIsInViewport(entry.isIntersecting); + }); + }) + ); + + // React will call the ref callback twice. Once when the component mounts and again when it unmounts. + // https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node + const setTargetRef = useCallback((target: HTMLElement) => { + if (targetRef.current) { + observerRef.current.unobserve(targetRef.current); + } + + if (target) { + observerRef.current.observe(target); + } + + targetRef.current = target; + }, []); + + return { isInViewport, setTargetRef }; +}; diff --git a/source/renderer/app/themes/daedalus/cardano.ts b/source/renderer/app/themes/daedalus/cardano.ts index ba3d02ee9a..0387de1a91 100644 --- a/source/renderer/app/themes/daedalus/cardano.ts +++ b/source/renderer/app/themes/daedalus/cardano.ts @@ -896,7 +896,7 @@ export const CARDANO_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(94, 96, 102, 0.7)', '--theme-staking-font-color-lighter': 'rgba(94, 96, 102, 0.5)', '--theme-staking-table-head-background-color': 'rgba(32, 34, 37, 0.07)', - '--theme-staking-table-border-color': '#d2d3d3', + '--theme-staking-table-border-color': 'rgba(94, 96, 102, 0.15)', '--theme-staking-link-color': 'rgba(28, 172, 99, 1)', '--theme-staking-link-color-light': 'rgba(28, 172, 99, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(32, 34, 37, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-blue.ts b/source/renderer/app/themes/daedalus/dark-blue.ts index 00f43cff9c..fac12d93dd 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.ts +++ b/source/renderer/app/themes/daedalus/dark-blue.ts @@ -900,7 +900,7 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(233, 244, 254, 0.7)', '--theme-staking-font-color-lighter': 'rgba(233, 244, 254, 0.5)', '--theme-staking-table-head-background-color': '#536370', - '--theme-staking-table-border-color': '#c6cdd6', + '--theme-staking-table-border-color': 'rgba(233, 244, 254, 0.15)', '--theme-staking-link-color': 'rgba(32, 181, 107, 1)', '--theme-staking-link-color-light': 'rgba(32, 181, 107, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(233, 244, 254, 0.1)', diff --git a/source/renderer/app/themes/daedalus/dark-cardano.ts b/source/renderer/app/themes/daedalus/dark-cardano.ts index 86bf01adff..946a8837e0 100644 --- a/source/renderer/app/themes/daedalus/dark-cardano.ts +++ b/source/renderer/app/themes/daedalus/dark-cardano.ts @@ -885,7 +885,7 @@ export const DARK_CARDANO_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#1fc1c3', '--theme-staking-link-color-light': 'rgba(31, 193, 195, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/flight-candidate.ts b/source/renderer/app/themes/daedalus/flight-candidate.ts index bed89525e1..ddb94c2a95 100644 --- a/source/renderer/app/themes/daedalus/flight-candidate.ts +++ b/source/renderer/app/themes/daedalus/flight-candidate.ts @@ -883,7 +883,7 @@ export const FLIGHT_CANDIDATE_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#ffb923', '--theme-staking-link-color-light': 'rgba(255, 185, 35, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/incentivized-testnet.ts b/source/renderer/app/themes/daedalus/incentivized-testnet.ts index 8ce56bef49..0f10dd23b2 100644 --- a/source/renderer/app/themes/daedalus/incentivized-testnet.ts +++ b/source/renderer/app/themes/daedalus/incentivized-testnet.ts @@ -886,7 +886,7 @@ export const INCENTIVIZED_TESTNET_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': 'rgba(246, 154, 178, 1)', '--theme-staking-link-color-light': 'rgba(246, 154, 178, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/light-blue.ts b/source/renderer/app/themes/daedalus/light-blue.ts index 71c3abf722..ecc36039ce 100644 --- a/source/renderer/app/themes/daedalus/light-blue.ts +++ b/source/renderer/app/themes/daedalus/light-blue.ts @@ -892,7 +892,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-staking-font-color-light': 'rgba(94, 96, 102, 0.7)', '--theme-staking-font-color-lighter': 'rgba(94, 96, 102, 0.5)', '--theme-staking-table-head-background-color': '#f1f3f5', - '--theme-staking-table-border-color': '#c6cdd6', + '--theme-staking-table-border-color': 'rgba(94, 96, 102, 0.15)', '--theme-staking-link-color': 'rgba(41, 111, 208, 1)', '--theme-staking-link-color-light': 'rgba(41, 111, 208, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(52, 70, 94, 0.1)', diff --git a/source/renderer/app/themes/daedalus/shelley-testnet.ts b/source/renderer/app/themes/daedalus/shelley-testnet.ts index 4017b6330a..a04ecc862c 100644 --- a/source/renderer/app/themes/daedalus/shelley-testnet.ts +++ b/source/renderer/app/themes/daedalus/shelley-testnet.ts @@ -883,7 +883,7 @@ export const SHELLEY_TESTNET_THEME_OUTPUT = { '--theme-staking-font-color-light': '#ffffffb3', '--theme-staking-font-color-lighter': 'rgba(255, 255, 255, 0.5)', '--theme-staking-table-head-background-color': 'rgba(255, 255, 255, 0.07)', - '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.2)', + '--theme-staking-table-border-color': 'rgba(255, 255, 255, 0.15)', '--theme-staking-link-color': '#898ee6', '--theme-staking-link-color-light': 'rgba(137, 142, 230, 0.7)', '--theme-staking-progress-bar-background-color': diff --git a/source/renderer/app/themes/daedalus/white.ts b/source/renderer/app/themes/daedalus/white.ts index 3e63b73bea..5bc117b24c 100644 --- a/source/renderer/app/themes/daedalus/white.ts +++ b/source/renderer/app/themes/daedalus/white.ts @@ -886,7 +886,7 @@ export const WHITE_THEME_OUTPUT = { '--theme-staking-font-color-light': '#2d2d2db3', '--theme-staking-font-color-lighter': 'rgba(45, 45, 45, 0.5)', '--theme-staking-table-head-background-color': '#f9f9f9', - '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.1)', + '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.15)', '--theme-staking-link-color': '#29b595', '--theme-staking-link-color-light': 'rgba(41, 181, 149, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(94, 96, 102, 0.07)', diff --git a/source/renderer/app/themes/daedalus/yellow.ts b/source/renderer/app/themes/daedalus/yellow.ts index ea12aa398a..cc66661e19 100644 --- a/source/renderer/app/themes/daedalus/yellow.ts +++ b/source/renderer/app/themes/daedalus/yellow.ts @@ -882,7 +882,7 @@ export const YELLOW_THEME_OUTPUT = { '--theme-staking-font-color-light': '#2d2d2db3', '--theme-staking-font-color-lighter': 'rgba(45, 45, 45, 0.5)', '--theme-staking-table-head-background-color': 'rgba(45, 45, 45, 0.07)', - '--theme-staking-table-border-color': '#e1dac6', + '--theme-staking-table-border-color': 'rgba(45, 45, 45, 0.15)', '--theme-staking-link-color': '#d6902f', '--theme-staking-link-color-light': 'rgba(214, 144, 47, 0.7)', '--theme-staking-progress-bar-background-color': 'rgba(45, 45, 45, 0.07)',