From 77731f3c700579f2876fae30054fff3a46d78aae Mon Sep 17 00:00:00 2001 From: Harry Oh Date: Wed, 11 Oct 2023 11:41:00 +0900 Subject: [PATCH 1/3] chore: add .pnp files to gitignore --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index 96b47852b..7a0f36f6e 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,7 @@ node_modules .vscode + +.pnp.cjs +.pnp.loader.mjs + From a07cb9059fccc7dda4aa19d100fca0fad2a94f4f Mon Sep 17 00:00:00 2001 From: khiemldk Date: Thu, 19 Oct 2023 14:26:41 +0700 Subject: [PATCH 2/3] [GSW-31] fix: Fix bug vercel token detail --- .../common/breadcrumbs/Breadcrumbs.styles.ts | 3 + .../src/components/common/header/Header.tsx | 7 +- .../BestPoolCardList.styles.ts | 2 +- .../best-pool-card-list/BestPoolCardList.tsx | 29 ++++---- .../token/best-pools/BestPools.styles.ts | 6 +- .../CardListCommonStyle.styles.ts | 9 ++- .../token/gainer-card-list/GainerCardList.tsx | 31 +++++---- .../token/loser-card-list/LoserCardList.tsx | 29 ++++---- .../MarketInformationList.styles.ts | 7 ++ .../MarketInformationList.tsx | 2 +- .../MarketInformation.styles.ts | 6 +- .../PriceInformationList.styles.ts | 13 ++++ .../PriceInformationList.tsx | 2 +- .../PriceInformation.styles.ts | 6 +- .../PricePerformanceList.styles.ts | 7 +- .../PricePerformance.styles.ts | 6 +- .../token-chart-info/TokenChartInfo.styles.ts | 3 +- .../token/token-chart-info/TokenChartInfo.tsx | 2 +- .../token/token-chart/TokenChart.styles.ts | 5 +- .../TokenChartGraphTab.styles.ts | 7 +- .../TokenChartGraph.styles.ts | 3 +- .../TokenDescriptionLinks.styles.ts | 14 +++- .../TokenDescription.styles.ts | 6 +- .../token/token-swap/TokenSwap.styles.ts | 9 ++- .../components/token/token-swap/TokenSwap.tsx | 13 +++- .../TrendingCryptoCard.tsx | 30 ++++---- .../TrendingCryptos.styles.ts | 6 +- packages/web/src/constants/header.constant.ts | 1 + packages/web/src/constants/theme.constant.ts | 4 ++ .../BreadcrumbsContainer.tsx | 9 +-- .../TrendingCryptoCardListContainer.tsx | 2 +- .../token-layout/TokenLayout.styles.ts | 68 ++++++++++++++++--- packages/web/src/styles/ThemeTypes.ts | 2 + 33 files changed, 250 insertions(+), 99 deletions(-) diff --git a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts index f18f745c1..7aae8d646 100644 --- a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts +++ b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts @@ -30,4 +30,7 @@ export const wrapper = (theme: Theme) => css` fill: ${theme.color.icon03}; } } + @media (max-width: 1180px) { + height: 24px; + } `; diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx index 1b6a59be9..e459d8055 100644 --- a/packages/web/src/components/common/header/Header.tsx +++ b/packages/web/src/components/common/header/Header.tsx @@ -73,7 +73,12 @@ const Header: React.FC = ({ {HEADER_NAV.map(item => (
  • pathname.includes(_)) + ? "selected" + : "" + } > {item.title}
    • diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts index 1ab51ede5..517655fa0 100644 --- a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts +++ b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts @@ -40,7 +40,7 @@ export const wrapper = (theme: Theme) => css` transition: background-color 0.3s ease; cursor: pointer; &:hover { - background-color: ${theme.color.background06}; + background-color: ${theme.color.hover04}; } .symbol { margin: 0px 8px; diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx index 286f639b6..af41de48e 100644 --- a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx +++ b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx @@ -3,6 +3,7 @@ import DoubleLogo from "@components/common/double-logo/DoubleLogo"; import { type BestPool } from "@containers/best-pools-container/BestPoolsContainer"; import { tokenPairSymbolToOneCharacter } from "@utils/string-utils"; import { wrapper } from "./BestPoolCardList.styles"; +import Link from "next/link"; interface BestPoolCardListProps { list: BestPool[]; @@ -22,19 +23,21 @@ const BestPoolCardList: React.FC = ({ list }) => {
      {list.map((info, idx) => ( -
    • - - - {tokenPairSymbolToOneCharacter(info.tokenPair)} - - {info.feeRate} - {info.tvl} - {info.apr} -
      • + +
    • + + + {tokenPairSymbolToOneCharacter(info.tokenPair)} + + {info.feeRate}% + {info.tvl} + {info.apr} +
      • + ))}
    diff --git a/packages/web/src/components/token/best-pools/BestPools.styles.ts b/packages/web/src/components/token/best-pools/BestPools.styles.ts index bd119edf5..45a5f212f 100644 --- a/packages/web/src/components/token/best-pools/BestPools.styles.ts +++ b/packages/web/src/components/token/best-pools/BestPools.styles.ts @@ -1,6 +1,7 @@ import { fonts } from "@constants/font.constant"; import { css, type Theme } from "@emotion/react"; import mixins from "@styles/mixins"; +import { media } from "@styles/media"; export const wrapper = (theme: Theme) => css` ${mixins.flexbox("column", "flex-start", "center")}; @@ -9,7 +10,10 @@ export const wrapper = (theme: Theme) => css` border: 1px solid ${theme.color.border02}; border-radius: 8px; padding: 24px 0px; - gap: 24px; + gap: 12px; + ${media.mobile} { + gap: 8px; + } h2 { ${fonts.body9}; color: ${theme.color.text01}; diff --git a/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts b/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts index e9fdbff2d..63232e140 100644 --- a/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts +++ b/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, type Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const cardStyle = (theme: Theme) => css` @@ -17,7 +18,13 @@ export const cardStyle = (theme: Theme) => css` color: ${theme.color.text01}; width: 100%; padding: 0px 24px; - margin-bottom: 20px; + margin-bottom: 8px; + ${media.mobile} { + margin-bottom: 4px; + } + } + > a { + width: 100%; } .card-wrap { ${mixins.flexbox("row", "center", "space-between")}; diff --git a/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx b/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx index 52144a65a..824466b39 100644 --- a/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx +++ b/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx @@ -2,6 +2,7 @@ import { MATH_NEGATIVE_TYPE } from "@constants/option.constant"; import React from "react"; import { cx } from "@emotion/css"; import { cardStyle } from "@components/token/gainer-and-loser/CardListCommonStyle.styles"; +import Link from "next/link"; interface GainerCardListProps { gainers: any[]; @@ -12,20 +13,22 @@ const GainerCardList: React.FC = ({ gainers }) => {

    Top 3 Gainers

    {gainers.map((gainer, idx) => ( -
    - logo - {gainer.name} - {gainer.symbol} - {gainer.price} - - {gainer?.change?.value} - -
    - ))} + +
    + logo + {gainer.name} + {gainer.symbol} + {gainer.price} + + {gainer?.change?.value} + +
    + + ))}
    ); }; diff --git a/packages/web/src/components/token/loser-card-list/LoserCardList.tsx b/packages/web/src/components/token/loser-card-list/LoserCardList.tsx index ca522d25c..2d9f81b8b 100644 --- a/packages/web/src/components/token/loser-card-list/LoserCardList.tsx +++ b/packages/web/src/components/token/loser-card-list/LoserCardList.tsx @@ -2,6 +2,7 @@ import { cx } from "@emotion/css"; import React from "react"; import { MATH_NEGATIVE_TYPE } from "@constants/option.constant"; import { cardStyle } from "@components/token/gainer-and-loser/CardListCommonStyle.styles"; +import Link from "next/link"; interface LoserCardListProps { losers: any[]; @@ -12,19 +13,21 @@ const LoserCard: React.FC = ({ losers }) => {

    Top 3 Losers

    {losers.map((loser, idx) => ( -
    - logo - {loser.name} - {loser.symbol} - {loser.price} - - {loser?.change?.value} - -
    + +
    + logo + {loser.name} + {loser.symbol} + {loser.price} + + {loser?.change?.value} + +
    + ))}
    ); diff --git a/packages/web/src/components/token/market-information-list/MarketInformationList.styles.ts b/packages/web/src/components/token/market-information-list/MarketInformationList.styles.ts index d4b4e0794..622192f50 100644 --- a/packages/web/src/components/token/market-information-list/MarketInformationList.styles.ts +++ b/packages/web/src/components/token/market-information-list/MarketInformationList.styles.ts @@ -1,6 +1,7 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; import mixins from "@styles/mixins"; +import { media } from "@styles/media"; export const wrapper = (theme: Theme) => css` ${mixins.flexbox("row", "center", "center")}; @@ -21,5 +22,11 @@ export const wrapper = (theme: Theme) => css` ${fonts.body12}; color: ${theme.color.text04}; } + .market-info-value { + ${fonts.body10}; + ${media.mobile} { + ${fonts.body12}; + } + } } `; diff --git a/packages/web/src/components/token/market-information-list/MarketInformationList.tsx b/packages/web/src/components/token/market-information-list/MarketInformationList.tsx index 36ee24853..f4315d8a6 100644 --- a/packages/web/src/components/token/market-information-list/MarketInformationList.tsx +++ b/packages/web/src/components/token/market-information-list/MarketInformationList.tsx @@ -14,7 +14,7 @@ const MarketInformationList: React.FC = ({ {Object.values(list).map((item: any, idx: number) => (
    {TITLE_LIST[idx]} - {item} + {item}
    ))} diff --git a/packages/web/src/components/token/market-information/MarketInformation.styles.ts b/packages/web/src/components/token/market-information/MarketInformation.styles.ts index 420054dd5..02f5466ac 100644 --- a/packages/web/src/components/token/market-information/MarketInformation.styles.ts +++ b/packages/web/src/components/token/market-information/MarketInformation.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -7,6 +8,9 @@ export const wrapper = (theme: Theme) => css` ${fonts.body7}; width: 100%; color: ${theme.color.text01}; - gap: 24px; + gap: 12px; padding: 24px; + ${media.mobile} { + gap: 8px; + } `; diff --git a/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts b/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts index 138662981..91db4e7c9 100644 --- a/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts +++ b/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -23,6 +24,18 @@ export const wrapper = (theme: Theme) => css` .title { ${fonts.body12}; color: ${theme.color.text04}; + @media (max-width: 1180px) { + ${fonts.p4}; + } + ${media.mobile} { + ${fonts.body12}; + } + } + .price-info-value { + ${fonts.body10}; + ${media.mobile} { + ${fonts.body12}; + } } .negative { color: ${theme.color.red01}; diff --git a/packages/web/src/components/token/price-information-list/PriceInformationList.tsx b/packages/web/src/components/token/price-information-list/PriceInformationList.tsx index 0b0881947..02667e02d 100644 --- a/packages/web/src/components/token/price-information-list/PriceInformationList.tsx +++ b/packages/web/src/components/token/price-information-list/PriceInformationList.tsx @@ -22,7 +22,7 @@ const PriceInformationList: React.FC = ({
    {TITLE_LIST[idx]} diff --git a/packages/web/src/components/token/price-information/PriceInformation.styles.ts b/packages/web/src/components/token/price-information/PriceInformation.styles.ts index 420054dd5..02f5466ac 100644 --- a/packages/web/src/components/token/price-information/PriceInformation.styles.ts +++ b/packages/web/src/components/token/price-information/PriceInformation.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -7,6 +8,9 @@ export const wrapper = (theme: Theme) => css` ${fonts.body7}; width: 100%; color: ${theme.color.text01}; - gap: 24px; + gap: 12px; padding: 24px; + ${media.mobile} { + gap: 8px; + } `; diff --git a/packages/web/src/components/token/price-performance-list/PricePerformanceList.styles.ts b/packages/web/src/components/token/price-performance-list/PricePerformanceList.styles.ts index 4c8423c67..6cfa43af7 100644 --- a/packages/web/src/components/token/price-performance-list/PricePerformanceList.styles.ts +++ b/packages/web/src/components/token/price-performance-list/PricePerformanceList.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -7,7 +8,7 @@ export const wrapper = (theme: Theme) => css` ${fonts.body8}; width: 100%; height: 214px; - background-color: ${theme.color.background06}; + background-color: ${theme.color.backgroundOpacity3}; border: 1px solid ${theme.color.border02}; border-radius: 8px; padding: 16px; @@ -37,6 +38,7 @@ export const wrapper = (theme: Theme) => css` .performance-list { height: 25px; span { + ${fonts.body10}; width: 200px; text-align: right; color: ${theme.color.green01}; @@ -47,6 +49,9 @@ export const wrapper = (theme: Theme) => css` &.negative { color: ${theme.color.red01}; } + ${media.mobile} { + ${fonts.body12}; + } } } `; diff --git a/packages/web/src/components/token/price-performance/PricePerformance.styles.ts b/packages/web/src/components/token/price-performance/PricePerformance.styles.ts index 420054dd5..02f5466ac 100644 --- a/packages/web/src/components/token/price-performance/PricePerformance.styles.ts +++ b/packages/web/src/components/token/price-performance/PricePerformance.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -7,6 +8,9 @@ export const wrapper = (theme: Theme) => css` ${fonts.body7}; width: 100%; color: ${theme.color.text01}; - gap: 24px; + gap: 12px; padding: 24px; + ${media.mobile} { + gap: 8px; + } `; diff --git a/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts b/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts index d814a636c..ea5ae5769 100644 --- a/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts +++ b/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts @@ -40,8 +40,7 @@ export const TokenChartInfoWrapper = styled.div` .change-rate-wrapper { ${mixins.flexbox("row", "center", "flex-end")}; width: 100%; - margin-bottom: 16px; - ${fonts.body12}; + ${fonts.body10}; &.up { & * { diff --git a/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx b/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx index b0fb3bd88..92c81c74f 100644 --- a/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx +++ b/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx @@ -46,7 +46,7 @@ const TokenChartInfo: React.FC = ({ : } - {priceInfo.changedRate} + {priceInfo.changedRate}%
    ); diff --git a/packages/web/src/components/token/token-chart/TokenChart.styles.ts b/packages/web/src/components/token/token-chart/TokenChart.styles.ts index 2d4775d20..60b7a1014 100644 --- a/packages/web/src/components/token/token-chart/TokenChart.styles.ts +++ b/packages/web/src/components/token/token-chart/TokenChart.styles.ts @@ -4,10 +4,11 @@ export const TokenChartWrapper = styled.div` display: flex; flex-direction: column; color: ${({ theme }) => theme.color.text01}; - background-color: ${({ theme }) => theme.color.background02}; + background-color: ${({ theme }) => theme.color.background06}; + border: 1px solid ${({ theme }) => theme.color.border02}; width: 100%; height: auto; - padding: 36px; + padding: 24px; border-radius: 8px; .chart-tab-wrapper { diff --git a/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts b/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts index b1cb0bf51..541a4172d 100644 --- a/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts +++ b/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts @@ -1,12 +1,15 @@ import styled from "@emotion/styled"; +import { media } from "@styles/media"; export const TokenChartGraphTabWrapper = styled.div` display: flex; flex-direction: column; width: fit-content; height: auto; - margin-bottom: 18px; - + margin-bottom: 12px; + ${media.mobile} { + margin-bottom: 8px; + } .chart-select-button { width: 60px; height: 37px; diff --git a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts index 1f74726c1..502136f44 100644 --- a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts +++ b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts @@ -18,7 +18,8 @@ export const TokenChartGraphWrapper = styled.div` max-width: 755px; .graph { - border: 1px solid ${({ theme }) => theme.color.border02}; + border-bottom: 1px solid ${({ theme }) => theme.color.border02}; + border-right: 1px solid ${({ theme }) => theme.color.border02}; } .xaxis-wrapper { diff --git a/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts b/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts index c8a8ab4ae..fec691934 100644 --- a/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts +++ b/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts @@ -1,6 +1,7 @@ import { fonts } from "@constants/font.constant"; import { css, type Theme } from "@emotion/react"; import mixins from "@styles/mixins"; +import { media } from "@styles/media"; export const wrapper = (theme: Theme) => css` ${mixins.flexbox("row", "center", "flex-start")}; @@ -28,10 +29,17 @@ export const wrapper = (theme: Theme) => css` } } button:hover { - color: ${theme.color.text03}; + span { + color: ${theme.color.text03}; + } transition: all 0.3s ease; - .link-icon * { - fill: ${theme.color.icon02}; + .link-icon { + * { + fill: ${theme.color.icon07}; + } } } + ${media.mobile} { + margin-top: 8px; + } `; diff --git a/packages/web/src/components/token/token-description/TokenDescription.styles.ts b/packages/web/src/components/token/token-description/TokenDescription.styles.ts index a1302c66c..2062dc51a 100644 --- a/packages/web/src/components/token/token-description/TokenDescription.styles.ts +++ b/packages/web/src/components/token/token-description/TokenDescription.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, type Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -9,9 +10,12 @@ export const wrapper = (theme: Theme) => css` border: 1px solid ${theme.color.border02}; border-radius: 8px; color: ${theme.color.text01}; + gap: 12px; padding: 24px; - gap: 24px; h2 { ${fonts.body7}; } + ${media.mobile} { + gap: 8px; + } `; diff --git a/packages/web/src/components/token/token-swap/TokenSwap.styles.ts b/packages/web/src/components/token/token-swap/TokenSwap.styles.ts index 72d5ea416..d46e389d6 100644 --- a/packages/web/src/components/token/token-swap/TokenSwap.styles.ts +++ b/packages/web/src/components/token/token-swap/TokenSwap.styles.ts @@ -1,6 +1,7 @@ import mixins from "@styles/mixins"; import { css, Theme } from "@emotion/react"; import { fonts } from "@constants/font.constant"; +import { media } from "@styles/media"; export const wrapper = (theme: Theme) => css` padding: 24px; @@ -18,7 +19,13 @@ export const wrapper = (theme: Theme) => css` ${fonts.h6}; color: ${theme.color.text02}; } - + .header-button { + ${mixins.flexbox("row", "center", "center")}; + gap: 15px; + ${media.mobile} { + gap: 12px; + } + } .setting-button { width: 24px; height: 24px; diff --git a/packages/web/src/components/token/token-swap/TokenSwap.tsx b/packages/web/src/components/token/token-swap/TokenSwap.tsx index a919845f5..7b6a90b76 100644 --- a/packages/web/src/components/token/token-swap/TokenSwap.tsx +++ b/packages/web/src/components/token/token-swap/TokenSwap.tsx @@ -5,6 +5,8 @@ import Button, { ButtonHierarchy } from "@components/common/button/Button"; import SelectPairButton from "@components/common/select-pair-button/SelectPairButton"; import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown"; import { TokenInfo } from "@models/token/token-info"; +import IconLink from "@components/common/icons/IconLink"; + export interface TokenSwapProps { from: { token: TokenInfo; @@ -74,9 +76,14 @@ const TokenSwap: React.FC = ({ from, to, connected, connectWalle
    Swap - +
    + + +
    diff --git a/packages/web/src/components/token/trending-crypto-card/TrendingCryptoCard.tsx b/packages/web/src/components/token/trending-crypto-card/TrendingCryptoCard.tsx index 99d24b541..d0add01c6 100644 --- a/packages/web/src/components/token/trending-crypto-card/TrendingCryptoCard.tsx +++ b/packages/web/src/components/token/trending-crypto-card/TrendingCryptoCard.tsx @@ -2,26 +2,28 @@ import { MATH_NEGATIVE_TYPE } from "@constants/option.constant"; import { cx } from "@emotion/css"; import React from "react"; import { wrapper } from "./TrendingCryptoCard.styles"; - +import Link from "next/link"; interface TrendingCryptoCardProps { item: any; } const TrendingCryptoCard: React.FC = ({ item }) => { return ( -
    - logo - {item.name} - {item.symbol} - {item.price} - - {item.change.value} - -
    + +
    + logo + {item.name} + {item.symbol} + {item.price} + + {item.change.value} + +
    + ); }; diff --git a/packages/web/src/components/token/trending-cryptos/TrendingCryptos.styles.ts b/packages/web/src/components/token/trending-cryptos/TrendingCryptos.styles.ts index 83957af26..e385bc828 100644 --- a/packages/web/src/components/token/trending-cryptos/TrendingCryptos.styles.ts +++ b/packages/web/src/components/token/trending-cryptos/TrendingCryptos.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -8,8 +9,11 @@ export const wrapper = (theme: Theme) => css` background-color: ${theme.color.background01}; border: 1px solid ${theme.color.border02}; border-radius: 8px; - gap: 24px; padding: 24px 0px; + gap: 12px; + ${media.mobile} { + gap: 8px; + } h2 { ${fonts.body9}; color: ${theme.color.text01}; diff --git a/packages/web/src/constants/header.constant.ts b/packages/web/src/constants/header.constant.ts index 14c185cce..e7e657cc4 100644 --- a/packages/web/src/constants/header.constant.ts +++ b/packages/web/src/constants/header.constant.ts @@ -2,6 +2,7 @@ export const HEADER_NAV = [ { title: "Swap", path: "/swap", + subPath: ["/tokens/"] }, { title: "Earn", diff --git a/packages/web/src/constants/theme.constant.ts b/packages/web/src/constants/theme.constant.ts index ff33f1561..17ac72d7e 100644 --- a/packages/web/src/constants/theme.constant.ts +++ b/packages/web/src/constants/theme.constant.ts @@ -127,6 +127,7 @@ export const DARK_THEME_COLORS: ThemeColorType = { background18: colors.global.brand900, backgroundOpacity: colors.dark.blackOpacity07BG, backgroundOpacity2: colors.dark.blackOpacity07BG, + backgroundOpacity3: colors.global.gray600Opacity, backgroundGradient: colors.dark.gray600BG, backgroundGradient2: colors.global.gradient2, backgroundGradient3: colors.global.gradient3, @@ -179,6 +180,7 @@ export const DARK_THEME_COLORS: ThemeColorType = { icon09: colors.global.black2, icon10: colors.dark.gray200Icon3, icon11: colors.dark.gray100Icon2, + icon14: colors.global.brand300, tooltipBackground: colors.dark.brand900BG, point: colors.global.point, green01: colors.global.green, @@ -213,6 +215,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = { background18: colors.global.gray100Opacity06, backgroundOpacity: colors.white.gray100Opacity05BG, backgroundOpacity2: colors.white.whiteOpacity07BG, + backgroundOpacity3: colors.white.gray100Opacity05BG, backgroundGradient: colors.white.gray100BG, backgroundGradient2: colors.white.gradient1, backgroundGradient3: colors.white.whiteBG, @@ -265,6 +268,7 @@ export const LIGHT_THEME_COLORS: ThemeColorType = { icon09: colors.global.black2, icon10: colors.white.gray500Icon1, icon11: colors.white.gray400Icon2, + icon14: colors.global.brand300, tooltipBackground: colors.white.brand700BG, point: colors.global.point, green01: colors.global.green, diff --git a/packages/web/src/containers/breadcrumbs-container/BreadcrumbsContainer.tsx b/packages/web/src/containers/breadcrumbs-container/BreadcrumbsContainer.tsx index fd593f5d1..1b9cad498 100644 --- a/packages/web/src/containers/breadcrumbs-container/BreadcrumbsContainer.tsx +++ b/packages/web/src/containers/breadcrumbs-container/BreadcrumbsContainer.tsx @@ -19,16 +19,13 @@ export interface Steps { const removePoolSteps = [ { - title: "Earn", - path: "/earn", + title: "Main", + path: "/swap", }, { - title: "GNOS/GNOT (0.3%)", + title: "GNOS", path: "", }, - { - title: "Remove Liquidity", - }, ]; const BreadcrumbsContainer: React.FC = () => { diff --git a/packages/web/src/containers/trending-crypto-card-list-container/TrendingCryptoCardListContainer.tsx b/packages/web/src/containers/trending-crypto-card-list-container/TrendingCryptoCardListContainer.tsx index 8ee82ae92..cf6859dee 100644 --- a/packages/web/src/containers/trending-crypto-card-list-container/TrendingCryptoCardListContainer.tsx +++ b/packages/web/src/containers/trending-crypto-card-list-container/TrendingCryptoCardListContainer.tsx @@ -32,7 +32,7 @@ const trendingCryptoInit = [ export const trendingCryptoListInit = [ ...trendingCryptoInit, ...trendingCryptoInit, - ...trendingCryptoInit, + trendingCryptoInit[0], ]; const TrendingCryptoCardListContainer: React.FC = () => { diff --git a/packages/web/src/layouts/token-layout/TokenLayout.styles.ts b/packages/web/src/layouts/token-layout/TokenLayout.styles.ts index ebbbd47de..f1eef6fa0 100644 --- a/packages/web/src/layouts/token-layout/TokenLayout.styles.ts +++ b/packages/web/src/layouts/token-layout/TokenLayout.styles.ts @@ -1,22 +1,45 @@ import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; +import { media } from "@styles/media"; export const wrapper = (theme: Theme) => css` + width: 100%; .title-container { - ${mixins.flexbox("row", "flex-start", "space-between")}; flex-wrap: wrap; - - width: 100%; + position: relative; + width: max-content; max-width: 1440px; - margin: 100px auto 0; - padding: 0 40px; + margin: 100px auto 0 0; + padding-left: 40px; .title { ${fonts.h3}; color: ${theme.color.text02}; - - width: 100%; + @media (max-width: 1180px) { + ${fonts.h4}; + } + @media (max-width: 768px) { + ${fonts.h5}; + } + } + .breadcrumbs { + position: absolute; + width: max-content; + height: max-content; + left: calc(100% + 20px); + top: 12px; + bottom: 6px; + @media (max-width: 1180px) { + left: calc(100% + 12px); + top: 10px; + bottom: 5px; + } + ${media.mobile} { + left: calc(100% + 10px); + top: 3px; + bottom: 2px; + } } } @@ -29,12 +52,26 @@ export const wrapper = (theme: Theme) => css` margin: 36px auto 100px; padding: 0 40px; + @media (max-width: 1180px) { + gap: 16px; + } + @media (max-width: 930px) { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + } .main-section { ${mixins.flexbox("column", "center", "space-between")}; gap: 24px; - - width: 100%; - + flex: 1; + max-width: 836px; + min-width: 644px; + @media (max-width: 1180px) { + max-width: 654px; + min-width: 488px; + } + @media (max-width: 930px) { + max-width: 100%; + min-width: auto; + } .chart { width: 100%; } @@ -52,7 +89,7 @@ export const wrapper = (theme: Theme) => css` ${mixins.flexbox("column", "center", "space-between")}; gap: 24px; - width: 430px; + max-width: 500px; .swap { width: 100%; @@ -69,6 +106,15 @@ export const wrapper = (theme: Theme) => css` .gainers-losers { width: 100%; } + @media (max-width: 1180px) { + max-width: 430px; + min-width: 346px; + } + @media (max-width: 930px) { + width: 100%; + max-width: 100%; + min-width: auto; + } } } `; diff --git a/packages/web/src/styles/ThemeTypes.ts b/packages/web/src/styles/ThemeTypes.ts index 36c89a2d1..999eca197 100644 --- a/packages/web/src/styles/ThemeTypes.ts +++ b/packages/web/src/styles/ThemeTypes.ts @@ -21,6 +21,7 @@ export interface ThemeColorType { background18: string; backgroundOpacity: string; backgroundOpacity2: string; + backgroundOpacity3: string; backgroundGradient: string; backgroundGradient2: string; backgroundGradient3: string; @@ -69,6 +70,7 @@ export interface ThemeColorType { icon09: string; icon10: string; icon11: string; + icon14: string; hover01: string; hover02: string; hover03: string; From 66a211ce1023af4065c1943ea763f10fff532519 Mon Sep 17 00:00:00 2001 From: khiemldk Date: Mon, 23 Oct 2023 16:47:58 +0700 Subject: [PATCH 3/3] [GSW-31] fix: Token Details Improve UI --- .../common/breadcrumbs/Breadcrumbs.styles.ts | 4 +- .../common/line-graph/LineGraph.styles.ts | 27 ++- .../common/line-graph/LineGraph.tsx | 71 +++--- .../load-more-button/LoadMoreButton.styles.ts | 11 + .../common/select-tab/SelectTab.tsx | 2 +- .../setting-menu-modal/SettingMenuModal.tsx | 4 +- .../BestPoolCardList.styles.ts | 40 +++- .../best-pool-card-list/BestPoolCardList.tsx | 21 +- .../token/best-pools/BestPools.styles.ts | 15 +- .../CardListCommonStyle.styles.ts | 28 ++- .../token/gainer-card-list/GainerCardList.tsx | 8 +- .../token/loser-card-list/LoserCardList.tsx | 8 +- .../MarketInformationList.styles.ts | 12 +- .../MarketInformation.styles.ts | 6 + .../PriceInformationList.styles.ts | 25 +- .../PriceInformationList.tsx | 22 +- .../PriceInformation.styles.ts | 5 + .../PricePerformance.styles.ts | 5 + .../token-chart-info/TokenChartInfo.styles.ts | 41 +++- .../token/token-chart-info/TokenChartInfo.tsx | 22 +- .../token/token-chart/TokenChart.styles.ts | 8 +- .../TokenChartGraphTab.styles.ts | 36 ++- .../TokenChartGraph.styles.ts | 41 +++- .../token-chart-graph/TokenChartGraph.tsx | 47 +++- .../TokenDescriptionContent.styles.ts | 4 + .../TokenDescriptionLinks.styles.ts | 13 + .../TokenDescriptionLinks.tsx | 14 +- .../TokenDescription.styles.ts | 10 + .../TokenInfoContent.styles.ts | 5 + .../token/token-swap/TokenSwap.styles.ts | 46 +++- .../components/token/token-swap/TokenSwap.tsx | 51 +++- .../TrendingCryptoCardList.styles.ts | 10 + .../TrendingCryptoCard.styles.ts | 20 +- .../TrendingCryptoCard.tsx | 8 +- .../TrendingCryptos.styles.ts | 14 +- .../BestPoolsContainer.tsx | 2 +- .../BreadcrumbsContainer.tsx | 26 +- .../TokenChartContainer.tsx | 11 +- .../TokenSwapContainer.tsx | 224 ++++++++++++++---- .../token-layout/TokenLayout.styles.ts | 89 ++++++- .../src/layouts/token-layout/TokenLayout.tsx | 7 +- 41 files changed, 862 insertions(+), 201 deletions(-) diff --git a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts index 7aae8d646..6a5f23309 100644 --- a/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts +++ b/packages/web/src/components/common/breadcrumbs/Breadcrumbs.styles.ts @@ -7,7 +7,7 @@ export const wrapper = (theme: Theme) => css` ${fonts.p3}; height: 26px; padding: 0px 8px; - background-color: ${theme.color.background06}; + background-color: ${theme.color.backgroundOpacity3}; color: ${theme.color.text04}; border-radius: 2px; @@ -18,7 +18,7 @@ export const wrapper = (theme: Theme) => css` color: ${theme.color.text02}; } &:last-of-type { - color: ${theme.color.text05}; + color: ${theme.color.text10}; } } diff --git a/packages/web/src/components/common/line-graph/LineGraph.styles.ts b/packages/web/src/components/common/line-graph/LineGraph.styles.ts index 7f1671089..ca777d95e 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.styles.ts +++ b/packages/web/src/components/common/line-graph/LineGraph.styles.ts @@ -1,20 +1,26 @@ import { fonts } from "@constants/font.constant"; import styled from "@emotion/styled"; +import { media } from "@styles/media"; export const LineGraphWrapper = styled.div` position: relative; display: flex; flex-direction: column; width: 100%; - height: 180px; + height: 319px; overflow: visible; - + ${media.mobile} { + height: 263px; + } & svg { display: flex; flex-direction: column; width: 100%; - height: 180px; + height: 319px; overflow: visible; + ${media.mobile} { + height: 263px; + } } `; @@ -29,13 +35,14 @@ export const LineGraphTooltipWrapper = styled.div` left: ${props => `${props.x}px`}; display: flex; flex-direction: column; - width: 157px; + width: 148px; height: auto; padding: 6px 8px; - background: ${({ theme }) => theme.color.background05}; + background: ${({ theme }) => theme.color.background02}; border-radius: 4px; box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.15); overflow: visible; + gap: 5px; ${fonts.p4}; & .tooltip-header { @@ -44,9 +51,17 @@ export const LineGraphTooltipWrapper = styled.div` width: 100%; height: auto; justify-content: space-between; + font-size: 16px; + font-weight: 700; + line-height: 19px; + color: ${({ theme }) => theme.color.point}; } & .tooltip-body { - color: ${({ theme }) => theme.color.point}; + ${fonts.p4}; + color: ${({ theme }) => theme.color.text04}; + .date { + margin-right: 4px; + } } `; diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx index 809c6a77f..0dece3075 100644 --- a/packages/web/src/components/common/line-graph/LineGraph.tsx +++ b/packages/web/src/components/common/line-graph/LineGraph.tsx @@ -1,5 +1,5 @@ import BigNumber from "bignumber.js"; -import React, { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState, useMemo } from "react"; import { LineGraphTooltipWrapper, LineGraphWrapper } from "./LineGraph.styles"; function calculateSmoothing(pointA: Point, pointB: Point) { @@ -61,6 +61,7 @@ export interface LineGraphProps { width?: number; height?: number; point?: boolean; + firstPointColor?: string; } interface Point { @@ -97,6 +98,7 @@ const LineGraph: React.FC = ({ width = VIEWPORT_DEFAULT_WIDTH, height = VIEWPORT_DEFAULT_HEIGHT, point, + firstPointColor, }) => { const COMPONENT_ID = (Math.random() * 100000).toString(); const [activated, setActivated] = useState(false); @@ -218,6 +220,13 @@ const LineGraph: React.FC = ({ [getGraphLine, height, width], ); + const firstPoint = useMemo(() => { + if (points.length === 0) { + return { x: 0, y: 0}; + } + return points[0]; + }, [points]); + return ( = ({ - + = ({ /> ))} - {isFocus() && currentPoint && ( + { - - + {isFocus() && currentPoint && ( + + )} + {isFocus() && currentPoint && ( + + )} - )} + } {isFocus() && currentPointIndex > -1 && ( width / 2 - ? currentPoint?.x - 157 + ? currentPoint?.x - 150 : currentPoint?.x || 0 } y={currentPoint?.y || 0} >
    + {`$${BigNumber( + datas[currentPointIndex].value, + ).toString()}`} +
    +
    {parseTime(datas[currentPointIndex].time).date} @@ -306,11 +324,6 @@ const LineGraph: React.FC = ({ {parseTime(datas[currentPointIndex].time).time}
    -
    - {`$ ${BigNumber( - datas[currentPointIndex].value, - ).toString()}`} -
    )}     diff --git a/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts b/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts index 6aeadff9e..228e552d7 100644 --- a/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts +++ b/packages/web/src/components/common/load-more-button/LoadMoreButton.styles.ts @@ -14,4 +14,15 @@ export const wrapper = (theme: Theme) => css` fill: ${theme.color.icon03}; } } + &:hover { + span { + color: ${theme.color.text03}; + } + transition: all 0.3s ease; + svg { + * { + fill: ${theme.color.icon07}; + } + } + } `; diff --git a/packages/web/src/components/common/select-tab/SelectTab.tsx b/packages/web/src/components/common/select-tab/SelectTab.tsx index 3902afb46..fdd63753b 100644 --- a/packages/web/src/components/common/select-tab/SelectTab.tsx +++ b/packages/web/src/components/common/select-tab/SelectTab.tsx @@ -14,7 +14,7 @@ const SelectTab: React.FC = ({ buttonClassName, }) => { return ( - + {list.map((type, idx) => ( void; close: () => void; + className?: string; } const SettingMenuModal: React.FC = ({ slippage, changeSlippage, close, + className, }) => { const settingMenuRef = useRef(null); useModalCloseEvent(settingMenuRef, close); @@ -45,7 +47,7 @@ const SettingMenuModal: React.FC = ({ }, [changeSlippage]); return ( - +
    Settings diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts index 517655fa0..b6e2aa7fc 100644 --- a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts +++ b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, type Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -12,17 +13,21 @@ export const wrapper = (theme: Theme) => css` ${mixins.flexbox("row", "center", "space-between")}; color: ${theme.color.text04}; padding: 0px 24px; + gap: 8px; + min-width: max-content; } .pair { - width: 170px; + min-width: 170px; + @media (max-width: 768px) and (min-width: 400px) { + min-width: 130px; + max-width: 130px; + } } .tvl { - width: 90px; - margin-left: auto; - margin-right: 31px; + min-width: 90px; } .apr { - width: 60px; + min-width: 60px; } .tvl, .apr { @@ -33,7 +38,17 @@ export const wrapper = (theme: Theme) => css` ${mixins.flexbox("column", "space-between", "center")}; gap: 4px; li { - ${mixins.flexbox("row", "center", "flex-start")}; + ${mixins.flexbox("row", "center", "space-between")}; + gap: 8px; + > div { + ${mixins.flexbox("row", "center", "flex-start")}; + min-width: 170px; + @media (max-width: 768px) and (min-width: 400px) { + min-width: 130px; + max-width: 130px; + } + } + gap: 4px; width: 100%; height: 36px; padding: 0px 24px; @@ -48,6 +63,19 @@ export const wrapper = (theme: Theme) => css` .fee-rate { color: ${theme.color.text04}; } + ${media.mobile} { + gap: 8px; + } + } + } + @media (max-width: 1180px) { + .title-wrap { + padding: 0 16px; + } + ul { + li { + padding: 0 16px; + } } } `; diff --git a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx index af41de48e..2820c8518 100644 --- a/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx +++ b/packages/web/src/components/token/best-pool-card-list/BestPoolCardList.tsx @@ -4,6 +4,7 @@ import { type BestPool } from "@containers/best-pools-container/BestPoolsContain import { tokenPairSymbolToOneCharacter } from "@utils/string-utils"; import { wrapper } from "./BestPoolCardList.styles"; import Link from "next/link"; +import { SwapFeeTierInfoMap } from "@constants/option.constant"; interface BestPoolCardListProps { list: BestPool[]; @@ -25,15 +26,17 @@ const BestPoolCardList: React.FC = ({ list }) => { {list.map((info, idx) => (
  • - - - {tokenPairSymbolToOneCharacter(info.tokenPair)} - - {info.feeRate}% +
    + + + {tokenPairSymbolToOneCharacter(info.tokenPair)} + + {SwapFeeTierInfoMap[info.feeRate].rateStr} +
    {info.tvl} {info.apr}
    • diff --git a/packages/web/src/components/token/best-pools/BestPools.styles.ts b/packages/web/src/components/token/best-pools/BestPools.styles.ts index 45a5f212f..8f09ec4a5 100644 --- a/packages/web/src/components/token/best-pools/BestPools.styles.ts +++ b/packages/web/src/components/token/best-pools/BestPools.styles.ts @@ -11,12 +11,21 @@ export const wrapper = (theme: Theme) => css` border-radius: 8px; padding: 24px 0px; gap: 12px; - ${media.mobile} { - gap: 8px; - } + h2 { ${fonts.body9}; color: ${theme.color.text01}; padding: 0px 24px; } + @media (max-width: 1180px) { + gap: 12px; + padding: 16px 0; + h2 { + padding: 0 16px; + } + } + ${media.mobile} { + gap: 8px; + overflow: scroll; + } `; diff --git a/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts b/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts index 63232e140..fccc31855 100644 --- a/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts +++ b/packages/web/src/components/token/gainer-and-loser/CardListCommonStyle.styles.ts @@ -28,13 +28,23 @@ export const cardStyle = (theme: Theme) => css` } .card-wrap { ${mixins.flexbox("row", "center", "space-between")}; + > div { + ${mixins.flexbox("row", "center", "flex-start")}; + width: 170px; + ${media.mobile} { + width: 130px; + } + } width: 100%; height: 36px; padding: 0px 24px; cursor: pointer; transition: background-color 0.3s ease; &:hover { - background-color: ${theme.color.background06}; + background-color: ${theme.color.hover04}; + } + ${media.mobile} { + gap: 8px; } } img { @@ -46,17 +56,29 @@ export const cardStyle = (theme: Theme) => css` } .symbol { color: ${theme.color.text04}; - margin-right: auto; } .price { text-align: right; + width: 90px; } .change { + min-width: 60px; text-align: right; - margin-left: 31px; color: ${theme.color.green01}; &.negative { color: ${theme.color.red01}; } } + @media (max-width: 1180px) { + padding: 16px 0; + .card-title { + padding: 0 16px; + } + .card-wrap { + padding: 0 16px; + } + } + ${media.mobile} { + gap: 4px; + } `; diff --git a/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx b/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx index 824466b39..5e9b48a0c 100644 --- a/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx +++ b/packages/web/src/components/token/gainer-card-list/GainerCardList.tsx @@ -15,9 +15,11 @@ const GainerCardList: React.FC = ({ gainers }) => { {gainers.map((gainer, idx) => (
    - logo - {gainer.name} - {gainer.symbol} +
    + logo + {gainer.name} + {gainer.symbol} +
    {gainer.price} = ({ losers }) => { {losers.map((loser, idx) => (
    - logo - {loser.name} - {loser.symbol} +
    + logo + {loser.name} + {loser.symbol} +
    {loser.price} css` color: ${theme.color.text02}; width: 100%; height: 91px; - background-color: ${theme.color.background03}; + background-color: ${theme.color.backgroundOpacity3}; border: 1px solid ${theme.color.border02}; border-radius: 8px; padding: 16px; @@ -29,4 +29,14 @@ export const wrapper = (theme: Theme) => css` } } } + @media (max-width: 1180px) { + grid-gap: 8px; + } + ${media.mobile} { + ${mixins.flexbox("column", "flex-start", "center")}; + .marketInfo-wrap { + ${mixins.flexbox("row", "center", "space-between")}; + height: auto; + } + } `; diff --git a/packages/web/src/components/token/market-information/MarketInformation.styles.ts b/packages/web/src/components/token/market-information/MarketInformation.styles.ts index 02f5466ac..dbbfb1be4 100644 --- a/packages/web/src/components/token/market-information/MarketInformation.styles.ts +++ b/packages/web/src/components/token/market-information/MarketInformation.styles.ts @@ -10,7 +10,13 @@ export const wrapper = (theme: Theme) => css` color: ${theme.color.text01}; gap: 12px; padding: 24px; + + @media (max-width: 1180px) { + padding: 16px; + } ${media.mobile} { + ${fonts.body9}; gap: 8px; + padding: 0; } `; diff --git a/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts b/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts index 91db4e7c9..f97a3e530 100644 --- a/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts +++ b/packages/web/src/components/token/price-information-list/PriceInformationList.styles.ts @@ -16,11 +16,14 @@ export const wrapper = (theme: Theme) => css` color: ${theme.color.green01}; width: 100%; height: 91px; - background-color: ${theme.color.background03}; + background-color: ${theme.color.backgroundOpacity3}; border: 1px solid ${theme.color.border02}; border-radius: 8px; padding: 16px; gap: 16px; + br { + display: none; + } .title { ${fonts.body12}; color: ${theme.color.text04}; @@ -41,4 +44,24 @@ export const wrapper = (theme: Theme) => css` color: ${theme.color.red01}; } } + @media (max-width: 1360px) and (min-width: 930px) { + .information-wrap { + padding: 16px 0 16px 16px; + .title { + br { + display: block; + } + } + } + } + @media (max-width: 1180px) { + grid-gap: 8px; + } + ${media.mobile} { + ${mixins.flexbox("column", "flex-start", "center")}; + .information-wrap { + ${mixins.flexbox("row", "center", "space-between")}; + height: auto; + } + } `; diff --git a/packages/web/src/components/token/price-information-list/PriceInformationList.tsx b/packages/web/src/components/token/price-information-list/PriceInformationList.tsx index 02667e02d..da32f76ba 100644 --- a/packages/web/src/components/token/price-information-list/PriceInformationList.tsx +++ b/packages/web/src/components/token/price-information-list/PriceInformationList.tsx @@ -7,10 +7,22 @@ interface PriceInformationListProps { } const TITLE_LIST = [ - "Price Chage(1h)", - "Price Chage(24h)", - "Price Chage(7d)", - "Price Chage(30d)", +
    + Price Change
    + (1h) +
    , +
    + Price Change
    + (24h) +
    , +
    + Price Change
    + (7d) +
    , +
    + Price Change
    + (30d) +
    , ]; const PriceInformationList: React.FC = ({ @@ -20,7 +32,7 @@ const PriceInformationList: React.FC = ({
    {Object.values(list).map((item: any, idx: number) => (
    - {TITLE_LIST[idx]} +
    {TITLE_LIST[idx]}
    css` color: ${theme.color.text01}; gap: 12px; padding: 24px; + @media (max-width: 1180px) { + padding: 16px; + } ${media.mobile} { + ${fonts.body9}; gap: 8px; + padding: 0; } `; diff --git a/packages/web/src/components/token/price-performance/PricePerformance.styles.ts b/packages/web/src/components/token/price-performance/PricePerformance.styles.ts index 02f5466ac..3acf2fb0d 100644 --- a/packages/web/src/components/token/price-performance/PricePerformance.styles.ts +++ b/packages/web/src/components/token/price-performance/PricePerformance.styles.ts @@ -10,7 +10,12 @@ export const wrapper = (theme: Theme) => css` color: ${theme.color.text01}; gap: 12px; padding: 24px; + @media (max-width: 1180px) { + padding: 16px; + } ${media.mobile} { + ${fonts.body9}; gap: 8px; + padding: 0; } `; diff --git a/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts b/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts index ea5ae5769..f259d7f89 100644 --- a/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts +++ b/packages/web/src/components/token/token-chart-info/TokenChartInfo.styles.ts @@ -1,23 +1,26 @@ import styled from "@emotion/styled"; import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; +import { media } from "@styles/media"; export const TokenChartInfoWrapper = styled.div` ${mixins.flexbox("column", "flex-start", "flex-start")}; .token-info-wrapper { - ${mixins.flexbox("row", "center", "space-between")}; + ${mixins.flexbox("row", "flex-start", "space-between")}; width: 100%; .token-info { ${mixins.flexbox("row", "center", "flex-start")}; gap: 8px; - + > div { + ${mixins.flexbox("row", "center", "flex-start")}; + gap: 8px; + } .token-image { width: 36px; height: 36px; } - .token-name { color: ${({ theme }) => theme.color.text02}; ${fonts.body3}; @@ -31,12 +34,36 @@ export const TokenChartInfoWrapper = styled.div` .price-info { .price { - color: ${({ theme }) => theme.color.text11}; + color: ${({ theme }) => theme.color.text01}; ${fonts.body1}; } } + ${media.mobile} { + .token-info { + ${mixins.flexbox("row", "flex-start", "flex-start")}; + gap: 6px; + > div { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + gap: 2px; + } + .token-name { + ${media.mobile} { + ${fonts.body5}; + } + } + .token-symbol { + ${media.mobile} { + ${fonts.body12}; + } + } + } + .price-info { + .price { + ${fonts.body5}; + } + } + } } - .change-rate-wrapper { ${mixins.flexbox("row", "center", "flex-end")}; width: 100%; @@ -55,5 +82,9 @@ export const TokenChartInfoWrapper = styled.div` fill: ${({ theme }) => theme.color.red01}; } } + ${media.mobile} { + ${fonts.body12}; + } } + `; diff --git a/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx b/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx index 92c81c74f..4ef22d9cf 100644 --- a/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx +++ b/packages/web/src/components/token/token-chart-info/TokenChartInfo.tsx @@ -33,21 +33,23 @@ const TokenChartInfo: React.FC = ({
    token image - {token.name} - {token.symbol} +
    + {token.name} + {token.symbol} +
    {`$ ${priceInfo.amount.value}`} +
    + { + isIncreasePrice() ? + : + + } + {priceInfo.changedRate}% +
    -
    - { - isIncreasePrice() ? - : - - } - {priceInfo.changedRate}% -
    ); }; diff --git a/packages/web/src/components/token/token-chart/TokenChart.styles.ts b/packages/web/src/components/token/token-chart/TokenChart.styles.ts index 60b7a1014..c208a41b5 100644 --- a/packages/web/src/components/token/token-chart/TokenChart.styles.ts +++ b/packages/web/src/components/token/token-chart/TokenChart.styles.ts @@ -1,4 +1,5 @@ import styled from "@emotion/styled"; +import { media } from "@styles/media"; export const TokenChartWrapper = styled.div` display: flex; @@ -10,7 +11,12 @@ export const TokenChartWrapper = styled.div` height: auto; padding: 24px; border-radius: 8px; - + ${media.mobile} { + background-color: transparent; + border: none; + padding: 0; + gap: 16px; + } .chart-tab-wrapper { } diff --git a/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts b/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts index 541a4172d..4031cb400 100644 --- a/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts +++ b/packages/web/src/components/token/token-chart/token-chart-graph-tab/TokenChartGraphTab.styles.ts @@ -1,3 +1,4 @@ +import { fonts } from "@constants/font.constant"; import styled from "@emotion/styled"; import { media } from "@styles/media"; @@ -7,11 +8,40 @@ export const TokenChartGraphTabWrapper = styled.div` width: fit-content; height: auto; margin-bottom: 12px; - ${media.mobile} { - margin-bottom: 8px; - } + .chart-select-button { width: 60px; height: 37px; } + .select-tab-wrapper { + border: none; + } + @media (max-width: 1180px) { + .chart-select-button { + ${fonts.body12} + } + .chart-select-button { + width: 60px; + height: 34px; + } + } + ${media.mobile} { + margin-bottom: 0; + width: 100%; + > div { + border: none; + background: ${({ theme }) => theme.color.background11}; + } + .chart-select-button { + width: auto; + ${fonts.p2} + } + .selected { + background-color: ${({ theme }) => theme.color.background02} !important; + } + .chart-select-button { + height: 28px; + flex: 1; + } + } `; diff --git a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts index 502136f44..c49a8a27b 100644 --- a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts +++ b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.styles.ts @@ -1,55 +1,78 @@ import styled from "@emotion/styled"; import { fonts } from "@constants/font.constant"; +import { media } from "@styles/media"; export const TokenChartGraphWrapper = styled.div` display: flex; flex-direction: row; width: 100%; height: 100%; - background-color: ${({ theme }) => theme.color.background01}; + background-color: ${({ theme }) => theme.color.background15}; border-radius: 8px; justify-content: space-between; - padding: 33px 5px 24px 35px; + padding: 0 5px 12px 0; .data-wrapper { display: flex; flex-direction: column; width: 100%; - max-width: 755px; + max-width: 757px; .graph { border-bottom: 1px solid ${({ theme }) => theme.color.border02}; border-right: 1px solid ${({ theme }) => theme.color.border02}; } - + @media (max-width: 930px) { + max-width: 800px; + } .xaxis-wrapper { display: flex; flex-direction: row; width: 100%; - margin-top: 24px; + margin: 12px 0 0 0; + padding-right: 13px; + padding-left: 12px; justify-content: space-between; ${fonts.body12}; color: ${({ theme }) => theme.color.text04}; - + span { ${fonts.body12}; color: ${({ theme }) => theme.color.text04}; + ${media.mobile} { + ${fonts.p7}; + } + } + ${media.mobile} { + padding-right: 4px; + padding-left: 4px; + margin-top: 4px; } } } .yaxis-wrapper { + text-align: center; display: flex; flex-direction: column-reverse; width: 24px; - margin-left: 15px; - margin-top: -10px; + padding: 8px 0 9px 5px; margin-bottom: 30px; justify-content: space-between; - span { ${fonts.body12}; color: ${({ theme }) => theme.color.text04}; } + ${media.mobile} { + ${fonts.p7}; + padding-left: 5px; + width: 14px; + span { + ${fonts.p7}; + } + } + } + ${media.mobile} { + padding: 0 5px 4px 0; } `; diff --git a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx index 37f5edb12..f3a9d2195 100644 --- a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx +++ b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx @@ -1,6 +1,6 @@ import LineGraph from "@components/common/line-graph/LineGraph"; import { useTheme } from "@emotion/react"; -import React from "react"; +import React, { useRef, useState, useEffect } from "react"; import { TokenChartGraphWrapper } from "./TokenChartGraph.styles"; export interface TokenChartGraphProps { @@ -18,33 +18,60 @@ export interface TokenChartGraphProps { const TokenChartGraph: React.FC = ({ datas, xAxisLabels, - yAxisLabels + yAxisLabels, }) => { const theme = useTheme(); + const wrapperRef = useRef(null); + const [width, setWidth] = useState(undefined); + const [height, setHeight] = useState(undefined); + + useEffect(() => { + const updateWidth = () => { + if (wrapperRef.current) { + const newWidth = wrapperRef.current.getBoundingClientRect().width; + const newHeight = wrapperRef.current.getBoundingClientRect().height; + setWidth(newWidth); + setHeight(newHeight - 30); + } + }; + updateWidth(); + + window.addEventListener("resize", updateWidth); + return () => { + window.removeEventListener("resize", updateWidth); + }; + }, []); return ( -
    +
    ({ value: data.amount.value, - time: data.time + time: data.time, }))} + firstPointColor={theme.color.border05} />
    - {xAxisLabels.map((label, index) => - {label})} + {xAxisLabels.map((label, index) => ( + + {label} + + ))}
    - {yAxisLabels.map((label, index) => - {label})} + {yAxisLabels.map((label, index) => ( + + {label} + + ))}
    ); diff --git a/packages/web/src/components/token/token-description-content/TokenDescriptionContent.styles.ts b/packages/web/src/components/token/token-description-content/TokenDescriptionContent.styles.ts index 0d24272ff..6e8711348 100644 --- a/packages/web/src/components/token/token-description-content/TokenDescriptionContent.styles.ts +++ b/packages/web/src/components/token/token-description-content/TokenDescriptionContent.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import { css, type Theme } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = (theme: Theme) => css` @@ -16,5 +17,8 @@ export const wrapper = (theme: Theme) => css` max-height: fit-content; overflow-y: visible; } + ${media.mobile} { + margin-bottom: 8px; + } } `; diff --git a/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts b/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts index fec691934..16ed0bee0 100644 --- a/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts +++ b/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.styles.ts @@ -39,7 +39,20 @@ export const wrapper = (theme: Theme) => css` } } } + .group-button { + ${mixins.flexbox("row", "flex-start", "flex-start")}; + } ${media.mobile} { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + gap: 8px; + .group-button { + ${mixins.flexbox("row", "center", "flex-start")}; + button { + &:first-of-type { + margin-left: 0; + } + } + } margin-top: 8px; } `; diff --git a/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.tsx b/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.tsx index 3c3b9c6b6..d159fcc01 100644 --- a/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.tsx +++ b/packages/web/src/components/token/token-description-links/TokenDescriptionLinks.tsx @@ -15,12 +15,14 @@ const TokenDescriptionLinks: React.FC = ({ return (

    Links

    - {Object.keys(links)?.map((link, idx) => ( - - ))} +
    + {Object.keys(links)?.map((link, idx) => ( + + ))} +
    ); }; diff --git a/packages/web/src/components/token/token-description/TokenDescription.styles.ts b/packages/web/src/components/token/token-description/TokenDescription.styles.ts index 2062dc51a..a1f6ef81b 100644 --- a/packages/web/src/components/token/token-description/TokenDescription.styles.ts +++ b/packages/web/src/components/token/token-description/TokenDescription.styles.ts @@ -15,7 +15,17 @@ export const wrapper = (theme: Theme) => css` h2 { ${fonts.body7}; } + @media (max-width: 1180px) { + padding: 16px; + } ${media.mobile} { + h2 { + ${fonts.body9}; + } + margin-top: 16px; + ${fonts.body9}; + border: none; gap: 8px; + padding: 0; } `; diff --git a/packages/web/src/components/token/token-info-content/TokenInfoContent.styles.ts b/packages/web/src/components/token/token-info-content/TokenInfoContent.styles.ts index 90edc2693..714f07276 100644 --- a/packages/web/src/components/token/token-info-content/TokenInfoContent.styles.ts +++ b/packages/web/src/components/token/token-info-content/TokenInfoContent.styles.ts @@ -1,3 +1,4 @@ +import { media } from "@styles/media"; import { css, type Theme } from "@emotion/react"; import mixins from "@styles/mixins"; @@ -7,4 +8,8 @@ export const wrapper = (theme: Theme) => css` background-color: ${theme.color.background01}; border-radius: 8px; border: 1px solid ${theme.color.border02}; + ${media.mobile} { + border: none; + gap: 32px; + } `; diff --git a/packages/web/src/components/token/token-swap/TokenSwap.styles.ts b/packages/web/src/components/token/token-swap/TokenSwap.styles.ts index d46e389d6..e3f85db79 100644 --- a/packages/web/src/components/token/token-swap/TokenSwap.styles.ts +++ b/packages/web/src/components/token/token-swap/TokenSwap.styles.ts @@ -2,6 +2,7 @@ import mixins from "@styles/mixins"; import { css, Theme } from "@emotion/react"; import { fonts } from "@constants/font.constant"; import { media } from "@styles/media"; +import styled from "@emotion/styled"; export const wrapper = (theme: Theme) => css` padding: 24px; @@ -18,6 +19,9 @@ export const wrapper = (theme: Theme) => css` .title { ${fonts.h6}; color: ${theme.color.text02}; + ${media.mobile} { + ${fonts.body9} + } } .header-button { ${mixins.flexbox("row", "center", "center")}; @@ -30,9 +34,19 @@ export const wrapper = (theme: Theme) => css` width: 24px; height: 24px; } + .link-button { + position: relative; + } .setting-icon * { fill: ${theme.color.icon03}; } + .setting-icon { + &:hover { + * { + fill: ${theme.color.icon07}; + } + } + } } .inputs { @@ -104,6 +118,7 @@ export const wrapper = (theme: Theme) => css` } .arrow { + cursor: pointer; ${mixins.flexbox("row", "center", "center")}; ${mixins.positionCenter()}; width: 100%; @@ -114,7 +129,9 @@ export const wrapper = (theme: Theme) => css` background-color: ${theme.color.background01}; border: 1px solid ${theme.color.border02}; border-radius: 50%; - + &:hover { + background-color: ${theme.color.backgroundGradient}; + } .shape-icon { width: 16px; height: 16px; @@ -132,3 +149,30 @@ export const wrapper = (theme: Theme) => css` padding-top: 16px; } `; + +export const CopyTooltip = styled.div` + ${mixins.flexbox("column", "center", "flex-start")}; + position: absolute; + top: -65px; + left: -45px; + .box { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + width: 115px; + padding: 16px; + gap: 8px; + flex-shrink: 0; + border-radius: 8px; + ${fonts.body12}; + color: ${({ theme }) => theme.color.text02}; + background-color: ${({ theme }) => theme.color.background02}; + } + .dark-shadow { + box-shadow: 10px 14px 60px rgba(0, 0, 0, 0.4); + } + .light-shadow { + box-shadow: 10px 14px 48px 0px rgba(0, 0, 0, 0.12); + } + .polygon-icon * { + fill: ${({ theme }) => theme.color.background02}; + } +`; \ No newline at end of file diff --git a/packages/web/src/components/token/token-swap/TokenSwap.tsx b/packages/web/src/components/token/token-swap/TokenSwap.tsx index ad323bd15..0693d57c0 100644 --- a/packages/web/src/components/token/token-swap/TokenSwap.tsx +++ b/packages/web/src/components/token/token-swap/TokenSwap.tsx @@ -1,12 +1,12 @@ -import React, { useCallback, useState } from "react"; -import { wrapper } from "./TokenSwap.styles"; +import React, { useCallback, useState, useEffect } from "react"; +import { CopyTooltip, wrapper } from "./TokenSwap.styles"; import IconSettings from "@components/common/icons/IconSettings"; import Button, { ButtonHierarchy } from "@components/common/button/Button"; import SelectPairButton from "@components/common/select-pair-button/SelectPairButton"; import IconSwapArrowDown from "@components/common/icons/IconSwapArrowDown"; import IconLink from "@components/common/icons/IconLink"; +import IconPolygon from "@components/common/icons/IconPolygon"; import { TokenModel } from "@models/token/token-model"; - export interface TokenSwapProps { from: { token: TokenModel; @@ -23,6 +23,11 @@ export interface TokenSwapProps { connected: boolean; connectWallet: () => void; swapNow: () => void; + handleSwap: () => void; + copied: boolean; + handleCopied: () => void; + themeKey: "dark" | "light"; + handleSetting: () => void; } function isAmount(str: string) { @@ -30,7 +35,18 @@ function isAmount(str: string) { return regex.test(str); } -const TokenSwap: React.FC = ({ from, to, connected, connectWallet, swapNow }) => { +const TokenSwap: React.FC = ({ + from, + to, + connected, + connectWallet, + swapNow, + handleSwap, + copied, + handleCopied, + themeKey, + handleSetting, +}) => { const [fromAmount, setFromAmount] = useState(from.amount.toString()); const [toAmount, setToAmount] = useState(to.amount.toString()); @@ -64,6 +80,11 @@ const TokenSwap: React.FC = ({ from, to, connected, connectWalle [], ); + useEffect(() => { + setFromAmount(toAmount); + setToAmount(fromAmount); + }, [from, to]); + const onClickConfirm = useCallback(() => { if (!connected) { connectWallet(); @@ -77,10 +98,18 @@ const TokenSwap: React.FC = ({ from, to, connected, connectWalle
    Swap
    - -
    @@ -100,7 +129,7 @@ const TokenSwap: React.FC = ({ from, to, connected, connectWalle
    {from.price} - Balance : {from.balance} + Balance: {from.balance}
    @@ -117,10 +146,10 @@ const TokenSwap: React.FC = ({ from, to, connected, connectWalle
    {to.price} - Balance : {to.balance} + Balance: {to.balance}
    -
    +
    @@ -129,12 +158,12 @@ const TokenSwap: React.FC = ({ from, to, connected, connectWalle