From a56f71f8a16bd6233828a4225bd2dd89a7c917d5 Mon Sep 17 00:00:00 2001 From: khiemldk Date: Wed, 22 Nov 2023 15:10:08 +0700 Subject: [PATCH] [GSW-411] fix: Fix liqutidy hover chart --- .../common/bar-area-graph/BarAreaGraph.styles.ts | 3 +++ .../web/src/components/common/bar-graph/BarGraph.tsx | 6 +++--- .../web/src/components/common/pool-graph/PoolGraph.tsx | 2 +- .../earn/earn-my-positions/EarnMyPositions.stories.tsx | 4 ++-- .../HighestAprsCardList.styles.ts | 4 +++- .../RecentlyAddedCardList.styles.ts | 4 +++- .../home/token-list-table/TokenListTable.styles.ts | 4 ++++ .../home/token-list-table/TokenListTable.tsx | 2 +- .../home/trending-card-list/TrendingCardList.styles.ts | 4 +++- packages/web/src/constants/skeleton.constant.ts | 10 +++++++--- 10 files changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.styles.ts b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.styles.ts index 82ac528a8..7fd6dc43a 100644 --- a/packages/web/src/components/common/bar-area-graph/BarAreaGraph.styles.ts +++ b/packages/web/src/components/common/bar-area-graph/BarAreaGraph.styles.ts @@ -19,6 +19,9 @@ export const BarAreaGraphWrapper = styled.div<{ width: 100%; height: 100%; pointer-events: none; + > g, > polygon { + pointer-events: initial; + } .area { background: linear-gradient( 270deg, diff --git a/packages/web/src/components/common/bar-graph/BarGraph.tsx b/packages/web/src/components/common/bar-graph/BarGraph.tsx index 17ab7ad7f..2ea11f29b 100644 --- a/packages/web/src/components/common/bar-graph/BarGraph.tsx +++ b/packages/web/src/components/common/bar-graph/BarGraph.tsx @@ -134,12 +134,12 @@ const BarGraph: React.FC = ({ let currentPointIndex = -1; for (const point of getGraphPoints()) { - const distance = Math.abs(point.x - xPosition); + const distance = xPosition - point.x; currentPointIndex += 1; - if (minDistance < 0) { + if (minDistance < 0 && distance >= 0) { minDistance = distance; } - if (distance < minDistance + 1) { + if (distance >= 0 && distance < minDistance + 1) { currentPoint = point; minDistance = distance; setCurrentPointIndex(currentPointIndex); diff --git a/packages/web/src/components/common/pool-graph/PoolGraph.tsx b/packages/web/src/components/common/pool-graph/PoolGraph.tsx index 6359a93b7..be61eef05 100644 --- a/packages/web/src/components/common/pool-graph/PoolGraph.tsx +++ b/packages/web/src/components/common/pool-graph/PoolGraph.tsx @@ -196,7 +196,7 @@ const PoolGraph: React.FC = ({ function onMouseoverChartBin(event: MouseEvent, bin: PoolBinModel) { if (mouseover && tooltipRef.current) { - if (tooltipRef.current.getAttribute("bin-id") !== bin.binId) { + if (bin.binId) { const content = renderToStaticMarkup( div:first-of-type { + padding: 0 24px 13px 24px; + } ${media.mobile} { padding: 16px 0px; } diff --git a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts index 54adb462b..d585e7fc7 100644 --- a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts +++ b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts @@ -55,7 +55,9 @@ export const LoadingWrapper = styled.div` box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 16px 0px 12px; - + & > div:first-of-type { + padding: 0 24px 13px 24px; + } ${media.mobile} { padding: 16px 0px; } diff --git a/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts b/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts index 9a926598c..62bbb1275 100644 --- a/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts +++ b/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts @@ -18,6 +18,9 @@ export const TableWrapper = styled.div` color: ${({ theme }) => theme.color.text04}; ${fonts.body11}; overflow-x: auto; + &.hidden-scroll { + overflow-x: hidden; + } .scroll-wrapper { ${mixins.flexbox("column", "flex-start", "flex-start")}; height: auto; @@ -159,6 +162,7 @@ export const noDataText = (theme: Theme) => css` color: ${theme.color.text04}; ${fonts.body12}; width: calc(100vw - 82px); + max-width: 1358px; height: 300px; ${media.mobile} { width: calc(100vw - 34px); diff --git a/packages/web/src/components/home/token-list-table/TokenListTable.tsx b/packages/web/src/components/home/token-list-table/TokenListTable.tsx index fe8627378..4338216ab 100644 --- a/packages/web/src/components/home/token-list-table/TokenListTable.tsx +++ b/packages/web/src/components/home/token-list-table/TokenListTable.tsx @@ -68,7 +68,7 @@ const TokenListTable: React.FC = ({ }; return breakpoint !== DEVICE_TYPE.MOBILE ? ( - +
{Object.values(TABLE_HEAD).map((head, idx) => ( diff --git a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts index 5205a7772..62a26f3bf 100644 --- a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts +++ b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts @@ -55,7 +55,9 @@ export const LoadingWrapper = styled.div` box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 16px 0px 12px; - + & > div:first-of-type { + padding: 0 24px 13px 24px; + } ${media.mobile} { padding: 16px 0px; } diff --git a/packages/web/src/constants/skeleton.constant.ts b/packages/web/src/constants/skeleton.constant.ts index 634319af8..917d4e77b 100644 --- a/packages/web/src/constants/skeleton.constant.ts +++ b/packages/web/src/constants/skeleton.constant.ts @@ -46,7 +46,7 @@ export const skeletonTrendingStyle = width: ${typeof skeletonWidth === "number" ? `${skeletonWidth}px` : skeletonWidth}; - height: 25px; + height: 24px; background: ${theme.color.background23}; overflow: hidden; border-radius: ${type === SHAPE_TYPES.CIRCLE ? "50%" : "2px"}; @@ -55,10 +55,14 @@ export const skeletonTrendingStyle = position: absolute; left: 0%; top: 0; - transform: translateX(-50%); + transform: translateX(-100%); width: 100%; height: 100%; - background: ${theme.color.backgroundGradient5}; + background: linear-gradient( + 0, + ${theme.color.backgroundGradient} 0%, + ${theme.color.backgroundGradient} 100% + ); animation: ${skeletonAni} 2s ease infinite; } `;