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