diff --git a/packages/web/src/components/common/footer/Footer.styles.ts b/packages/web/src/components/common/footer/Footer.styles.ts index ed27d60be..a926c4231 100644 --- a/packages/web/src/components/common/footer/Footer.styles.ts +++ b/packages/web/src/components/common/footer/Footer.styles.ts @@ -11,7 +11,7 @@ export const FooterWrapper = styled.footer` background-color: ${({ theme }) => theme.color.background01}; border-top: 1px solid ${({ theme }) => theme.color.border02}; ${media.mobile} { - padding: 36px 0px; + padding-top: 36px; } `; diff --git a/packages/web/src/components/common/header/Header.tsx b/packages/web/src/components/common/header/Header.tsx index 39312a9a5..9d059e877 100644 --- a/packages/web/src/components/common/header/Header.tsx +++ b/packages/web/src/components/common/header/Header.tsx @@ -36,7 +36,7 @@ interface HeaderProps { error: Error | null; search: (e: React.ChangeEvent) => void; keyword: string; - windowSize: Number; + windowSize: number; } const Header: React.FC = ({ diff --git a/packages/web/src/components/common/icons/IconHeaderLogo.tsx b/packages/web/src/components/common/icons/IconHeaderLogo.tsx index 9cd780e5a..5e47fabf5 100644 --- a/packages/web/src/components/common/icons/IconHeaderLogo.tsx +++ b/packages/web/src/components/common/icons/IconHeaderLogo.tsx @@ -8,8 +8,8 @@ const IconHeaderLogo = ({ className }: { className?: string }) => ( className={className} > @@ -22,8 +22,8 @@ const IconHeaderLogo = ({ className }: { className?: string }) => ( y2="36.5" gradientUnits="userSpaceOnUse" > - - + + diff --git a/packages/web/src/components/common/icons/svg/icon-checked.svg b/packages/web/src/components/common/icons/svg/icon-checked.svg index 8162a0160..15281330e 100644 --- a/packages/web/src/components/common/icons/svg/icon-checked.svg +++ b/packages/web/src/components/common/icons/svg/icon-checked.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/web/src/components/common/search-input/SearchInput.styles.ts b/packages/web/src/components/common/search-input/SearchInput.styles.ts index 22656b640..654fe2c11 100644 --- a/packages/web/src/components/common/search-input/SearchInput.styles.ts +++ b/packages/web/src/components/common/search-input/SearchInput.styles.ts @@ -2,6 +2,7 @@ import { CSSProperties } from "react"; import styled from "@emotion/styled"; import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; +import { media } from "@styles/media"; export interface SearchInputStyleProps { fullWidth?: boolean; width?: CSSProperties["width"]; @@ -20,9 +21,22 @@ export const SearchInputWrapper = styled.div` if (height) return typeof height === "number" ? height + "px" : height; return "auto"; }}; - padding: 0px 16px; + padding: 12px 16px; border-radius: 8px; + .icon-wrapper { + ${mixins.flexbox("row", "center", "center")}; + } + + ${media.mobile} { + padding: 8px 12px 8px 12px; + ${fonts.body11}; + .search-icon { + width: 24px; + height: 24px; + } + } + &:focus-within { background-color: ${({ theme }) => theme.color.background13}; border: 1px solid ${({ theme }) => theme.color.border03}; diff --git a/packages/web/src/components/common/search-input/SearchInput.tsx b/packages/web/src/components/common/search-input/SearchInput.tsx index b2bca7e7c..5391a00b2 100644 --- a/packages/web/src/components/common/search-input/SearchInput.tsx +++ b/packages/web/src/components/common/search-input/SearchInput.tsx @@ -29,7 +29,9 @@ const SearchInput: React.FC = ({ className={cx(className, { "empty-status": value === "" })} > - +
+ +
); }; diff --git a/packages/web/src/components/common/select-tab/SelectTab.styles.ts b/packages/web/src/components/common/select-tab/SelectTab.styles.ts index 490b9b6a2..c5f61c1ee 100644 --- a/packages/web/src/components/common/select-tab/SelectTab.styles.ts +++ b/packages/web/src/components/common/select-tab/SelectTab.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import styled from "@emotion/styled"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const SelectTabWrapper = styled.div` @@ -12,12 +13,20 @@ export const SelectTabWrapper = styled.div` export const SelectButton = styled.button` ${mixins.flexbox("row", "center", "center")}; - ${fonts.body9}; - height: 41px; - padding: 0px 24px; + ${fonts.body10}; + padding: 8px 24px; border-radius: 4px; color: ${({ theme }) => theme.color.text04}; transition: all 0.3s ease; + ${media.tablet} { + width: 100px; + padding: 8px; + } + ${media.mobile} { + width: 80px; + padding: 4px 8px; + ${fonts.body12}; + } &.selected { background-color: ${({ theme }) => theme.color.select}; color: ${({ theme }) => theme.color.text11}; diff --git a/packages/web/src/components/home/card-list/CardList.stories.tsx b/packages/web/src/components/home/card-list/CardList.stories.tsx index aff6f9945..6b0f2113a 100644 --- a/packages/web/src/components/home/card-list/CardList.stories.tsx +++ b/packages/web/src/components/home/card-list/CardList.stories.tsx @@ -16,9 +16,9 @@ export default { const Template: ComponentStory = () => { return (
- - - + + +
); }; diff --git a/packages/web/src/components/home/card-list/CardList.styles.ts b/packages/web/src/components/home/card-list/CardList.styles.ts index f2abc2640..62948cb14 100644 --- a/packages/web/src/components/home/card-list/CardList.styles.ts +++ b/packages/web/src/components/home/card-list/CardList.styles.ts @@ -1,5 +1,6 @@ import { fonts } from "@constants/font.constant"; import styled from "@emotion/styled"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; import { UP_DOWN_TYPE } from "./CardList"; @@ -13,7 +14,10 @@ export const ListItem = styled.li<{ upDownType: UP_DOWN_TYPE }>` ${fonts.body12}; width: 100%; height: 40px; - padding: 0px 24px; + padding: 8px 24px; + ${media.tablet} { + padding: 8px 16px; + } cursor: pointer; transition: background-color 0.3s ease; color: ${({ theme }) => theme.color.text01}; diff --git a/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.styles.ts b/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.styles.ts index 69327db5a..dc0404407 100644 --- a/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.styles.ts +++ b/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.styles.ts @@ -1,25 +1,21 @@ -import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; -import { css, type Theme } from "@emotion/react"; - -export const wrapper = (theme: Theme) => css` - .title { - ${fonts.h1}; - color: ${theme.color.text02}; - line-height: 1.2; +import styled from "@emotion/styled"; +import mixins from "@styles/mixins"; +import { media } from "@styles/media"; - span { - color: ${theme.color.point}; - } +export const GnoswapBrandWrapper = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")}; + max-width: 706px; + width: 100%; + gap: 34px; + ${media.tablet} { + max-width: 547px; + padding: 10px 0px; } - - .subtitle { - font-size: 28px; - font-weight: 600; - line-height: 34px; - color: ${theme.color.text02}; - - margin: 20px 0px 34px; + ${media.mobile} { + max-width: 328px; + align-items: center; + gap: 32px; } .sns { @@ -31,7 +27,7 @@ export const wrapper = (theme: Theme) => css` height: 28px; &:hover { .icon * { - fill: ${theme.color.icon07}; + fill: ${({ theme }) => theme.color.icon07}; } } .icon { @@ -39,17 +35,71 @@ export const wrapper = (theme: Theme) => css` height: 28px; * { transition: all 0.3s ease; - fill: ${theme.color.icon03}; + fill: ${({ theme }) => theme.color.icon03}; } } } } +`; + +export const HeroTitleContainer = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")} + width: 100%; + gap: 20px; + ${media.tablet} { + } + ${media.mobile} { + gap: 8px; + } +`; + +export const TitleWrapper = styled.h1` + ${fonts.h1}; + color: ${({ theme }) => theme.color.text02}; - .description { - ${fonts.body8}; - color: ${theme.color.text04}; - line-height: 1.4; + ${media.tablet} { + font-size: 46px; + line-height: 55px; + } + ${media.mobile} { + font-size: 36px; + font-weight: 600; + line-height: 43px; + } + + span { + color: ${({ theme }) => theme.color.point}; + } +`; +export const SubTitleWrapper = styled.h4` + font-size: 28px; + font-weight: 600; + line-height: 34px; + color: ${({ theme }) => theme.color.text02}; + ${media.tablet} { + font-size: 20px; + line-height: 24px; + } + ${media.mobile} { + font-size: 18px; + line-height: 22px; + } +`; + +export const DescriptionContainer = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")} + max-width: 706px; + width: 100%; + gap: 10px; + ${media.tablet} { + max-width: 547px; + } +`; - margin-top: 10px; +export const DescriptionTitle = styled.p` + ${fonts.body8}; + color: ${({ theme }) => theme.color.text04}; + ${media.tablet} { + ${fonts.body10}; } `; diff --git a/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.tsx b/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.tsx index ef0e8f2ac..31c835909 100644 --- a/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.tsx +++ b/packages/web/src/components/home/gnoswap-brand/GnoswapBrand.tsx @@ -3,9 +3,17 @@ import IconGitbook from "@components/common/icons/social/IconGitbook"; import IconGithub from "@components/common/icons/social/IconGithub"; import IconMedium from "@components/common/icons/social/IconMedium"; import IconTwitter from "@components/common/icons/social/IconTwitter"; +import { DeviceSize } from "@styles/media"; import React, { useCallback } from "react"; import { ValuesType } from "utility-types"; -import { wrapper } from "./GnoswapBrand.styles"; +import { + GnoswapBrandWrapper, + HeroTitleContainer, + TitleWrapper, + SubTitleWrapper, + DescriptionTitle, + DescriptionContainer, +} from "./GnoswapBrand.styles"; export const SNS_TYPE = { GITHUB: "github", @@ -18,9 +26,13 @@ export type SNS_TYPE = ValuesType; interface GnoswapBrandProps { onClickSns: (snsType: SNS_TYPE) => void; + windowSize: number; } -const GnoswapBrand: React.FC = ({ onClickSns }) => { +const GnoswapBrand: React.FC = ({ + onClickSns, + windowSize, +}) => { const onClickGithub = useCallback( () => onClickSns(SNS_TYPE.GITHUB), [onClickSns], @@ -47,36 +59,42 @@ const GnoswapBrand: React.FC = ({ onClickSns }) => { ); return ( -
-

- Swap and Earn -
- on Gnoswap -

-

the One-stop Gnoland Defi Platform

-
- - - - - -
-

- Gnoswap is an open-source & audited AMM Dex that provides -
a simplified concentrated-LP experience for increased capital - efficiency. -

-
+ + + + Swap and Earn +
+ on Gnoswap + + the One-stop Gnoland Defi Platform + + {windowSize > DeviceSize.mobile && ( + +
+ + + + + +
+ + Gnoswap is an open-source & audited AMM Dex that provides +
a simplified concentrated-LP experience for increased capital + efficiency. + + + )} + ); }; diff --git a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts index 5bc760aa0..6f1ef2ad0 100644 --- a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts +++ b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.styles.ts @@ -1,23 +1,27 @@ import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; -import { css, type Theme } from "@emotion/react"; +import styled from "@emotion/styled"; +import { media } from "@styles/media"; -export const wrapper = (theme: Theme) => css` +export const HighestAprsCardListwrapper = styled.div` ${mixins.flexbox("column", "flex-start", "center")} width: 100%; - height: 100%; - background-color: ${theme.color.background06}; - border: 1px solid ${theme.color.border02}; + background-color: ${({ theme }) => theme.color.background06}; + border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 16px 0px; + gap: 16px; + h2 { ${mixins.flexbox("row", "center", "center")} ${fonts.body9}; gap: 10px; - color: ${theme.color.text02}; - margin-bottom: 16px; - padding-left: 20px; + color: ${({ theme }) => theme.color.text02}; + padding: 0px 24px 0px 20px; + ${media.tablet} { + padding: 0px 16px 0px 16px; + } } .icon-diamond { diff --git a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx index 4e68b1efc..8e4ed3f82 100644 --- a/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx +++ b/packages/web/src/components/home/highest-aprs-card-list/HighestAprsCardList.tsx @@ -1,21 +1,26 @@ import React from "react"; import CardList, { type ListProps } from "@components/home/card-list/CardList"; -import { wrapper } from "./HighestAprsCardList.styles"; +import { HighestAprsCardListwrapper } from "./HighestAprsCardList.styles"; import IconDiamond from "@components/common/icons/IconDiamond"; +import { DeviceSize } from "@styles/media"; interface HighestAprsCardListProps { list: Array; + windowSize: number; } -const HighestAprsCardList: React.FC = ({ list }) => { - return ( -
+const HighestAprsCardList: React.FC = ({ + list, + windowSize, +}) => { + return windowSize > DeviceSize.mobile ? ( +

Highest APRs

-
- ); + + ) : null; }; export default HighestAprsCardList; diff --git a/packages/web/src/components/home/home-swap/HomeSwap.styles.ts b/packages/web/src/components/home/home-swap/HomeSwap.styles.ts index 278a745ac..b8d558805 100644 --- a/packages/web/src/components/home/home-swap/HomeSwap.styles.ts +++ b/packages/web/src/components/home/home-swap/HomeSwap.styles.ts @@ -3,6 +3,7 @@ import { css, Theme } from "@emotion/react"; import { fonts } from "@constants/font.constant"; export const wrapper = (theme: Theme) => css` + width: 480px; padding: 15px 23px; background-color: ${theme.color.background06}; border: 1px solid ${theme.color.border02}; diff --git a/packages/web/src/components/home/home-swap/HomeSwap.tsx b/packages/web/src/components/home/home-swap/HomeSwap.tsx index c24e026ae..2ce3a0509 100644 --- a/packages/web/src/components/home/home-swap/HomeSwap.tsx +++ b/packages/web/src/components/home/home-swap/HomeSwap.tsx @@ -4,6 +4,7 @@ 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 { DeviceSize } from "@styles/media"; interface HomeSwapProps { from: { token: string; @@ -22,6 +23,7 @@ interface HomeSwapProps { tokenLogo: string; }; swapNow: () => void; + windowSize: number; } function isAmount(str: string) { @@ -29,7 +31,12 @@ function isAmount(str: string) { return regex.test(str); } -const HomeSwap: React.FC = ({ from, to, swapNow }) => { +const HomeSwap: React.FC = ({ + from, + to, + swapNow, + windowSize, +}) => { const [fromAmount, setFromAmount] = useState(from.amount); const [toAmount, setToAmount] = useState(to.amount); @@ -67,7 +74,7 @@ const HomeSwap: React.FC = ({ from, to, swapNow }) => { swapNow(); }, [swapNow]); - return ( + return windowSize > DeviceSize.mobile ? (
Swap @@ -124,13 +131,13 @@ const HomeSwap: React.FC = ({ from, to, swapNow }) => { fullWidth: true, height: 50, fontType: "body7", - hierarchy: ButtonHierarchy.Primary + hierarchy: ButtonHierarchy.Primary, }} onClick={onClickSwapNow} />
- ); + ) : null; }; export default HomeSwap; diff --git a/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.stories.tsx b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.stories.tsx new file mode 100644 index 000000000..aa1b299c8 --- /dev/null +++ b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.stories.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import MobileTokenInfo from "./MobileTokenInfo"; +import { css, Theme } from "@emotion/react"; +import { createDummyTokenList } from "@containers/token-list-container/TokenListContainer"; + +export default { + title: "home/TokenList/MobileTokenInfo", + component: MobileTokenInfo, +} as ComponentMeta; + +const Template: ComponentStory = args => ( +
+ +
+); + +export const Default = Template.bind({}); +Default.args = {}; + +const wrapper = (theme: Theme) => css` + color: ${theme.color.text02}; +`; diff --git a/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts new file mode 100644 index 000000000..993ba9611 --- /dev/null +++ b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts @@ -0,0 +1,87 @@ +import { fonts } from "@constants/font.constant"; +import styled from "@emotion/styled"; +import mixins from "@styles/mixins"; + +export const TokenInfoWrapper = styled.div` + ${mixins.flexbox("row", "center", "flex-start")}; + height: 50px; + width: 100%; + ${fonts.body11}; + &:not(:first-of-type) { + border-top: 1px solid ${({ theme }) => theme.color.border02}; + } +`; + +export const HoverSection = styled.div` + ${mixins.flexbox("row", "center", "center", false)}; + background-color: ${({ theme }) => theme.color.background01}; + transition: background-color 0.3s ease; + cursor: pointer; + height: 100%; + overflow: hidden; + &:hover { + background-color: ${({ theme }) => theme.color.hover04}; + } +`; + +export const TableColumn = styled.div<{ tdWidth: number }>` + width: ${({ tdWidth }) => `${tdWidth}px`}; + min-width: ${({ tdWidth }) => `${tdWidth}px`}; + height: 100%; + color: ${({ theme }) => theme.color.text01}; + ${mixins.flexbox("row", "center", "flex-end")}; + &.left { + flex-shrink: 0; + justify-content: flex-start; + } + + &.negative { + padding-left: 0; + color: ${({ theme }) => theme.color.green01}; + svg * { + fill: ${({ theme }) => theme.color.green01}; + } + } + &.positive { + padding-left: 0; + color: ${({ theme }) => theme.color.red01}; + svg * { + fill: ${({ theme }) => theme.color.red01}; + } + } + .symbol-col { + ${mixins.flexbox("column", "flex-start", "flex-start")}; + } + + .liquid-symbol { + margin: 0px 4px; + } + + &.last7days-graph { + display: flex; + padding: 16px; + } + + .token-logo { + width: 20px; + height: 20px; + } + .token-name { + margin: 0px 8px; + ${fonts.body12}; + } + .token-symbol { + margin: 0px 8px; + ${fonts.p4}; + } + + .token-index { + padding: 0px 16px 0px 8px; + } + + .fee-rate, + .token-index { + ${fonts.p4}; + color: ${({ theme }) => theme.color.text04}; + } +`; diff --git a/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.tsx b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.tsx new file mode 100644 index 000000000..2f2d81aa2 --- /dev/null +++ b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.tsx @@ -0,0 +1,122 @@ +// TODO : remove eslint-disable after work +/* eslint-disable */ +import React from "react"; +import DoubleLogo from "@components/common/double-logo/DoubleLogo"; +import IconTriangleArrowDown from "@components/common/icons/IconTriangleArrowDown"; +import IconTriangleArrowUp from "@components/common/icons/IconTriangleArrowUp"; +import { MATH_NEGATIVE_TYPE } from "@constants/option.constant"; +import { type Token } from "@containers/token-list-container/TokenListContainer"; +import { cx } from "@emotion/css"; +import { tokenPairSymbolToOneCharacter } from "@utils/string-utils"; +import { + HoverSection, + TableColumn, + TokenInfoWrapper, +} from "./MobileTokenInfo.styles"; +import { MOBILE_TOKEN_TD_WIDTH } from "@constants/skeleton.constant"; +import SimpleLineGraph from "@components/common/simple-line-graph/SimpleLineGraph"; + +interface TokenInfoProps { + item: Token; + idx: number; +} + +const renderToNegativeType = (status: MATH_NEGATIVE_TYPE, value: string) => ( + <> + {status === MATH_NEGATIVE_TYPE.NEGATIVE ? ( + + ) : ( + + )} + {value} + +); + +const MobileTokenInfo: React.FC = ({ item, idx }) => { + const { + tokenId, + token, + price, + priceOf1d, + priceOf7d, + priceOf30d, + marketCap, + liquidity, + volume24h, + mostLiquidPool, + last7days, + } = item; + + const onClickItem = (symbol: string) => { + location.href = "/tokens/" + symbol; + }; + + return ( + + onClickItem(token.symbol)}> + + {idx} + + + token logo +
+ {token.name} + {token.symbol} +
+ + + {price} + + + {renderToNegativeType(priceOf1d.status, priceOf1d.value)} + + + {renderToNegativeType(priceOf7d.status, priceOf7d.value)} + + + {renderToNegativeType(priceOf30d.status, priceOf30d.value)} + + + {marketCap} + + + {liquidity} + + + + {volume24h} + + + + + + + {tokenPairSymbolToOneCharacter(mostLiquidPool.tokenPair)} + + {mostLiquidPool.feeRate} + + + + + + + ); +}; + +export default MobileTokenInfo; diff --git a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts index 9c64fb951..29f0b7faa 100644 --- a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts +++ b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.styles.ts @@ -1,23 +1,27 @@ import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; -import { css, type Theme } from "@emotion/react"; +import styled from "@emotion/styled"; +import { media } from "@styles/media"; -export const wrapper = (theme: Theme) => css` +export const RecentlyAddedCardListwrapper = styled.div` ${mixins.flexbox("column", "flex-start", "center")} width: 100%; - height: 100%; - background-color: ${theme.color.background06}; - border: 1px solid ${theme.color.border02}; + background-color: ${({ theme }) => theme.color.background06}; + border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 16px 0px; + gap: 16px; + h2 { ${mixins.flexbox("row", "center", "center")} ${fonts.body9}; gap: 10px; - color: ${theme.color.text02}; - margin-bottom: 16px; - padding-left: 20px; + color: ${({ theme }) => theme.color.text02}; + padding: 0px 24px 0px 20px; + ${media.tablet} { + padding: 0px 16px 0px 16px; + } } .icon-clock { diff --git a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx index ae530f72c..8a52e7154 100644 --- a/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx +++ b/packages/web/src/components/home/recently-added-card-list/RecentlyAddedCardList.tsx @@ -1,23 +1,25 @@ import React from "react"; import CardList, { type ListProps } from "@components/home/card-list/CardList"; -import { wrapper } from "./RecentlyAddedCardList.styles"; +import { RecentlyAddedCardListwrapper } from "./RecentlyAddedCardList.styles"; import IconClock from "@components/common/icons/IconClock"; - +import { DeviceSize } from "@styles/media"; interface RecentlyAddedCardListProps { list: Array; + windowSize: number; } const RecentlyAddedCardList: React.FC = ({ list, + windowSize, }) => { - return ( -
+ return windowSize > DeviceSize.mobile ? ( +

Recently Added

-
- ); + + ) : null; }; export default RecentlyAddedCardList; diff --git a/packages/web/src/components/home/token-info/TokenInfo.tsx b/packages/web/src/components/home/token-info/TokenInfo.tsx index 041c8cabc..217bb4111 100644 --- a/packages/web/src/components/home/token-info/TokenInfo.tsx +++ b/packages/web/src/components/home/token-info/TokenInfo.tsx @@ -94,7 +94,6 @@ const TokenInfo: React.FC = ({ item, idx }) => { {volume24h} - = ({ item, idx }) => { - + ); diff --git a/packages/web/src/components/home/token-list-header/TokenListHeader.styles.ts b/packages/web/src/components/home/token-list-header/TokenListHeader.styles.ts index 8294f03c2..1c9763fee 100644 --- a/packages/web/src/components/home/token-list-header/TokenListHeader.styles.ts +++ b/packages/web/src/components/home/token-list-header/TokenListHeader.styles.ts @@ -1,16 +1,50 @@ import { fonts } from "@constants/font.constant"; -import { css, Theme } from "@emotion/react"; +import styled from "@emotion/styled"; import mixins from "@styles/mixins"; +import { media } from "@styles/media"; -export const wrapper = (theme: Theme) => css` +export const TokenListHeaderwrapper = styled.div` + ${mixins.flexbox("row", "center", "space-between")}; + width: 100%; + ${media.mobile} { + align-items: flex-start; + flex-direction: column; + gap: 24px; + } +`; + +export const TokenTitleWrapper = styled.div` ${mixins.flexbox("row", "center", "flex-start")}; + max-width: 651px; width: 100%; + gap: 36px; + .icon-wrap { + ${mixins.flexbox("row", "center", "center")}; + padding: 8px 13px; + } + ${media.mobile} { + max-width: 328px; + justify-content: space-between; + height: 24px; + } h2 { ${fonts.h5}; - color: ${theme.color.text02}; - margin-right: 36px; + color: ${({ theme }) => theme.color.text02}; + ${media.mobile} { + ${fonts.h6}; + } + } + + .search-icon { + width: 24px; + height: 24px; + * { + fill: ${({ theme }) => theme.color.icon08}; + } } - .tokens-search { - margin-left: auto; + .search-icon:hover { + * { + fill: ${({ theme }) => theme.color.icon02}; + } } `; diff --git a/packages/web/src/components/home/token-list-header/TokenListHeader.tsx b/packages/web/src/components/home/token-list-header/TokenListHeader.tsx index 39b9383c1..c581a570d 100644 --- a/packages/web/src/components/home/token-list-header/TokenListHeader.tsx +++ b/packages/web/src/components/home/token-list-header/TokenListHeader.tsx @@ -2,13 +2,21 @@ import React from "react"; import SearchInput from "@components/common/search-input/SearchInput"; import SelectTab from "@components/common/select-tab/SelectTab"; import { TOKEN_TYPE } from "@containers/token-list-container/TokenListContainer"; -import { wrapper } from "./TokenListHeader.styles"; +import { + TokenListHeaderwrapper, + TokenTitleWrapper, +} from "./TokenListHeader.styles"; +import IconSearch from "@components/common/icons/IconSearch"; +import { DeviceSize } from "@styles/media"; interface TokenListHeaderProps { tokenType: TOKEN_TYPE; changeTokenType: (newType: string) => void; search: (e: React.ChangeEvent) => void; keyword: string; + windowSize: number; + searchIcon: boolean; + onTogleSearch: () => void; } const TokenListHeader: React.FC = ({ @@ -16,21 +24,48 @@ const TokenListHeader: React.FC = ({ changeTokenType, search, keyword, + windowSize, + searchIcon, + onTogleSearch, }) => ( -
-

Tokens

- - -
+ + +

Tokens

+ {windowSize > DeviceSize.mobile ? ( + + ) : searchIcon ? ( + + ) : ( +
+ +
+ )} + + {windowSize > DeviceSize.mobile ? ( + + ) : ( + + )} + ); export default TokenListHeader; diff --git a/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts b/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts index 901ba3b24..b66a0d15b 100644 --- a/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts +++ b/packages/web/src/components/home/token-list-table/TokenListTable.styles.ts @@ -1,14 +1,25 @@ import { fonts } from "@constants/font.constant"; import { css, Theme } from "@emotion/react"; import styled from "@emotion/styled"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const TableWrapper = styled.div` - ${mixins.flexbox("column", "flex-start", "flex-start")}; + ${mixins.flexbox("column", "flex-start", "center")}; width: 100%; border: 1px solid ${({ theme }) => theme.color.border01}; border-radius: 8px; margin: 24px 0px; + ${media.tablet} { + border-right: 1px solid ${({ theme }) => theme.color.border09}; + border-left: 1px solid ${({ theme }) => theme.color.border09}; + border-top: 1px solid ${({ theme }) => theme.color.border09}; + border-radius: 0px; + } + ${media.mobile} { + border: 1px solid ${({ theme }) => theme.color.border01}; + border-radius: 8px; + } color: ${({ theme }) => theme.color.text04}; ${fonts.body11}; overflow-x: auto; @@ -19,7 +30,7 @@ export const TableWrapper = styled.div` } .token-list-head { width: 100%; - ${mixins.flexbox("row", "center", "flex-start")}; + ${mixins.flexbox("row", "flex-start", "flex-start")}; height: 50px; ${fonts.body12}; border-bottom: 1px solid ${({ theme }) => theme.color.border02}; @@ -46,6 +57,52 @@ export const TableHeader = styled.div<{ tdWidth: number }>` flex-shrink: 0; justify-content: flex-start; } + + span { + display: inline-flex; + align-items: center; + white-space: pre; + } + + &.left span { + flex-direction: row-reverse; + } + &.sort span { + cursor: pointer; + } + + .icon { + width: 20px; + height: 20px; + align-items: center; + * { + fill: ${({ theme }) => theme.color.text04}; + } + } +`; + +export const MobileTableHeader = styled.div<{ tdWidth: number }>` + width: ${({ tdWidth }) => `${tdWidth}px`}; + height: 100%; + ${mixins.flexbox("row", "center", "flex-end")}; + &.left { + flex-shrink: 0; + justify-content: flex-start; + } + + .index { + padding: 0px 16px 0px 8px; + } + .index, + .name { + flex-shrink: 0; + justify-content: flex-start; + } + &:nth-last-child(1) { + padding: 0px 16px 0px 0px; + } + span { + span { display: inline-flex; align-items: center; diff --git a/packages/web/src/components/home/token-list-table/TokenListTable.tsx b/packages/web/src/components/home/token-list-table/TokenListTable.tsx index 558f4e717..2d91cdee3 100644 --- a/packages/web/src/components/home/token-list-table/TokenListTable.tsx +++ b/packages/web/src/components/home/token-list-table/TokenListTable.tsx @@ -7,10 +7,22 @@ import React, { useCallback } from "react"; import TokenInfo from "@components/home/token-info/TokenInfo"; import { cx } from "@emotion/css"; import TableSkeleton from "@components/common/table-skeleton/TableSkeleton"; -import { noDataText, TableHeader, TableWrapper } from "./TokenListTable.styles"; -import { TOKEN_INFO, TOKEN_TD_WIDTH } from "@constants/skeleton.constant"; +import { + noDataText, + TableHeader, + MobileTableHeader, + TableWrapper, +} from "./TokenListTable.styles"; +import { + TOKEN_INFO, + MOBILE_TOKEN_INFO, + TOKEN_TD_WIDTH, + MOBILE_TOKEN_TD_WIDTH, +} from "@constants/skeleton.constant"; import IconTriangleArrowDown from "@components/common/icons/IconTriangleArrowDown"; import IconTriangleArrowUp from "@components/common/icons/IconTriangleArrowUp"; +import { DeviceSize } from "@styles/media"; +import MobileTokenInfo from "../mobile-token-info/MobileTokenInfo"; interface TokenListTableProps { tokens: Token[]; @@ -18,6 +30,7 @@ interface TokenListTableProps { isSortOption: (head: TABLE_HEAD) => boolean; sortOption?: SortOption; sort: (head: TABLE_HEAD) => void; + windowSize: number; } const TokenListTable: React.FC = ({ @@ -26,15 +39,21 @@ const TokenListTable: React.FC = ({ isSortOption, sort, isFetched, + windowSize, }) => { + const isAscendingOption = useCallback( + (head: TABLE_HEAD) => { + return sortOption?.key === head && sortOption.direction === "asc"; + }, + [sortOption], + ); - const isAscendingOption = useCallback((head: TABLE_HEAD) => { - return sortOption?.key === head && sortOption.direction === "asc"; - }, [sortOption]); - - const isDescendingOption = useCallback((head: TABLE_HEAD) => { - return sortOption?.key === head && sortOption.direction === "desc"; - }, [sortOption]); + const isDescendingOption = useCallback( + (head: TABLE_HEAD) => { + return sortOption?.key === head && sortOption.direction === "desc"; + }, + [sortOption], + ); const onClickTableHead = (head: TABLE_HEAD) => { if (!isSortOption(head)) { @@ -47,19 +66,29 @@ const TokenListTable: React.FC = ({ return TABLE_HEAD.INDEX === head || TABLE_HEAD.NAME === head; }; - return ( + return windowSize > DeviceSize.mobile ? (
{Object.values(TABLE_HEAD).map((head, idx) => ( - onClickTableHead(head)}> - {isAscendingOption(head) && } - {isDescendingOption(head) && } + onClickTableHead(head)} + > + {isAscendingOption(head) && ( + + )} + {isDescendingOption(head) && ( + + )} {head} @@ -78,6 +107,47 @@ const TokenListTable: React.FC = ({
+ ) : ( + +
+
+ {Object.values(TABLE_HEAD).map((head, idx) => ( + + onClickTableHead(head)} + > + {isAscendingOption(head) && ( + + )} + {isDescendingOption(head) && ( + + )} + {head} + + + ))} +
+
+ {isFetched && tokens.length === 0 && ( +
No tokens found
+ )} + {isFetched && + tokens.length > 0 && + tokens.map((item, idx) => ( + + ))} + {!isFetched && } +
+
+ ); }; diff --git a/packages/web/src/components/home/token-list/TokenList.styles.ts b/packages/web/src/components/home/token-list/TokenList.styles.ts index cf0250aa2..ac9a22ea8 100644 --- a/packages/web/src/components/home/token-list/TokenList.styles.ts +++ b/packages/web/src/components/home/token-list/TokenList.styles.ts @@ -1,7 +1,14 @@ import { css } from "@emotion/react"; +import { media } from "@styles/media"; import mixins from "@styles/mixins"; export const wrapper = css` ${mixins.flexbox("column", "center", "center")}; + ${media.tablet} { + align-items: flex-start; + } + ${media.mobile} { + align-items: center; + } width: 100%; `; diff --git a/packages/web/src/components/home/token-list/TokenList.tsx b/packages/web/src/components/home/token-list/TokenList.tsx index df36157d2..34c552be4 100644 --- a/packages/web/src/components/home/token-list/TokenList.tsx +++ b/packages/web/src/components/home/token-list/TokenList.tsx @@ -11,6 +11,7 @@ import TokenListHeader from "@components/home/token-list-header/TokenListHeader" import Pagination from "@components/common/pagination/Pagination"; import { wrapper } from "./TokenList.styles"; import TokenListTable from "@components/home/token-list-table/TokenListTable"; +import { DeviceSize } from "@styles/media"; interface TokenItem { tokens: Token[]; @@ -26,6 +27,9 @@ interface TokenItem { movePage: (page: number) => void; isSortOption: (item: TABLE_HEAD) => boolean; sort: (item: TABLE_HEAD) => void; + windowSize: number; + searchIcon: boolean; + onTogleSearch: () => void; } const TokenList: React.FC = ({ @@ -42,8 +46,10 @@ const TokenList: React.FC = ({ movePage, isSortOption, sort, + windowSize, + searchIcon, + onTogleSearch, }) => { - return (
= ({ changeTokenType={changeTokenType} search={search} keyword={keyword} + windowSize={windowSize} + searchIcon={searchIcon} + onTogleSearch={onTogleSearch} /> = ({ sortOption={sortOption} isSortOption={isSortOption} sort={sort} + windowSize={windowSize} /> DeviceSize.mobile ? 2 : 1} />
); diff --git a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts index 7db463c71..eef03f3b9 100644 --- a/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts +++ b/packages/web/src/components/home/trending-card-list/TrendingCardList.styles.ts @@ -1,24 +1,27 @@ import mixins from "@styles/mixins"; import { fonts } from "@constants/font.constant"; -import { css, type Theme } from "@emotion/react"; +import styled from "@emotion/styled"; +import { media } from "@styles/media"; -export const wrapper = (theme: Theme) => css` - ${mixins.flexbox("column", "flex-start", "center")} +export const TrendingCardListwrapper = styled.div` + ${mixins.flexbox("column", "flex-start", "flex-start")} width: 100%; - height: 100%; - background-color: ${theme.color.background06}; - border: 1px solid ${theme.color.border02}; + background-color: ${({ theme }) => theme.color.background06}; + border: 1px solid ${({ theme }) => theme.color.border02}; box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 16px 0px; + gap: 16px; h2 { - ${mixins.flexbox("row", "center", "center")} + ${mixins.flexbox("row", "center", "center")}; ${fonts.body9}; gap: 10px; - color: ${theme.color.text02}; - margin-bottom: 16px; - padding-left: 20px; + color: ${({ theme }) => theme.color.text02}; + padding: 0px 24px 0px 20px; + ${media.tablet} { + padding: 0px 16px 0px 16px; + } } .icon-flame { diff --git a/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx b/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx index a63633314..d299a242d 100644 --- a/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx +++ b/packages/web/src/components/home/trending-card-list/TrendingCardList.tsx @@ -1,21 +1,26 @@ import React from "react"; import CardList, { type ListProps } from "@components/home/card-list/CardList"; -import { wrapper } from "./TrendingCardList.styles"; +import { TrendingCardListwrapper } from "./TrendingCardList.styles"; import IconFlame from "@components/common/icons/IconFlame"; +import { DeviceSize } from "@styles/media"; interface TrendingCardListProps { list: Array; + windowSize: number; } -const TrendingCardList: React.FC = ({ list }) => { - return ( -
+const TrendingCardList: React.FC = ({ + list, + windowSize, +}) => { + return windowSize > DeviceSize.mobile ? ( +

Trending

-
- ); + + ) : null; }; export default TrendingCardList; diff --git a/packages/web/src/constants/skeleton.constant.ts b/packages/web/src/constants/skeleton.constant.ts index fdd880075..b80540cfd 100644 --- a/packages/web/src/constants/skeleton.constant.ts +++ b/packages/web/src/constants/skeleton.constant.ts @@ -43,6 +43,9 @@ export const ASSET_TD_WIDTH = [360, 360, 360, 140, 140]; export const TOKEN_TD_WIDTH = [ 56, 203, 105, 85, 85, 85, 140, 140, 140, 195, 126, ]; +export const MOBILE_TOKEN_TD_WIDTH = [ + 42, 90, 90, 85, 85, 85, 140, 140, 140, 190, 126, +]; export const ACTIVITY_TD_WIDTH = [240, 230, 230, 230, 230, 200]; export const SHAPE_TYPES = { @@ -107,6 +110,25 @@ export const TOKEN_INFO = { { width: 120, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, ], }; + +export const MOBILE_TOKEN_INFO = { + title: TABLE_TITLE.TOKEN_TABLE, + total: 15, + tdWidth: MOBILE_TOKEN_TD_WIDTH, + list: [ + { width: 10, type: SHAPE_TYPES.ROUNDED_SQUARE, left: true }, + { width: 140, type: SHAPE_TYPES.ROUNDED_SQUARE, left: true }, + { width: 100, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 80, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 80, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 80, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 120, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 120, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 120, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 180, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + { width: 120, type: SHAPE_TYPES.ROUNDED_SQUARE, left: false }, + ], +}; export const TOKEN_SEARCH_INFO = { title: TABLE_TITLE.TOKEN_TABLE, total: 3, diff --git a/packages/web/src/containers/gnoswap-brand-container/GnoswapBrandContainer.tsx b/packages/web/src/containers/gnoswap-brand-container/GnoswapBrandContainer.tsx index 55c75366c..b09c17681 100644 --- a/packages/web/src/containers/gnoswap-brand-container/GnoswapBrandContainer.tsx +++ b/packages/web/src/containers/gnoswap-brand-container/GnoswapBrandContainer.tsx @@ -1,7 +1,7 @@ import GnoswapBrand, { SNS_TYPE, } from "@components/home/gnoswap-brand/GnoswapBrand"; -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useState } from "react"; const SNS_URL: { [key in SNS_TYPE]: string; @@ -14,11 +14,24 @@ const SNS_URL: { }; const GnoswapBrandContainer: React.FC = () => { + const [width, setWidth] = useState(Number); + const handleResize = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + const onClickSns = useCallback((snsType: SNS_TYPE) => { window.open(SNS_URL[snsType], "_blank"); }, []); - return ; + return ; }; export default GnoswapBrandContainer; diff --git a/packages/web/src/containers/highest-aprs-card-list-container/HighestAprsCardListContainer.tsx b/packages/web/src/containers/highest-aprs-card-list-container/HighestAprsCardListContainer.tsx index 9bb085681..d6e121ef2 100644 --- a/packages/web/src/containers/highest-aprs-card-list-container/HighestAprsCardListContainer.tsx +++ b/packages/web/src/containers/highest-aprs-card-list-container/HighestAprsCardListContainer.tsx @@ -1,9 +1,21 @@ import { highestList } from "@components/home/card-list/card-list-dummy"; import HighestAprsCardList from "@components/home/highest-aprs-card-list/HighestAprsCardList"; -import React from "react"; +import React, { useEffect, useState } from "react"; const HighestAprsCardListContainer: React.FC = () => { - return ; + const [width, setWidth] = useState(Number); + const handleResize = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ; }; export default HighestAprsCardListContainer; diff --git a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx index 4374fe404..61ca0706d 100644 --- a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx +++ b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx @@ -1,9 +1,21 @@ import HomeSwap from "@components/home/home-swap/HomeSwap"; import { useRouter } from "next/router"; -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useState } from "react"; const HomeSwapContainer: React.FC = () => { const router = useRouter(); + const [width, setWidth] = useState(Number); + const handleResize = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); const swapNow = useCallback(() => { router.push("/swap?from=GNOT&to=GNOS"); @@ -30,6 +42,7 @@ const HomeSwapContainer: React.FC = () => { "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2b591e99afE9f32eAA6214f7B7629768c40Eeb39/logo.png", }} swapNow={swapNow} + windowSize={width} /> ); }; diff --git a/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx b/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx index 4b67df1d2..da4481775 100644 --- a/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx +++ b/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx @@ -1,9 +1,21 @@ import { recentlyList } from "@components/home/card-list/card-list-dummy"; import RecentlyAddedCardList from "@components/home/recently-added-card-list/RecentlyAddedCardList"; -import React from "react"; +import React, { useEffect, useState } from "react"; const RecentlyAddedCardListContainer: React.FC = () => { - return ; + const [width, setWidth] = useState(Number); + const handleResize = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ; }; export default RecentlyAddedCardListContainer; diff --git a/packages/web/src/containers/token-list-container/TokenListContainer.tsx b/packages/web/src/containers/token-list-container/TokenListContainer.tsx index 6522ad4b4..35589e40c 100644 --- a/packages/web/src/containers/token-list-container/TokenListContainer.tsx +++ b/packages/web/src/containers/token-list-container/TokenListContainer.tsx @@ -1,11 +1,10 @@ -import React, { useCallback, useState } from "react"; +import React, { useCallback, useState, useEffect } from "react"; import TokenList from "@components/home/token-list/TokenList"; import { MATH_NEGATIVE_TYPE } from "@constants/option.constant"; import { type TokenDefaultModel } from "@models/token/token-default-model"; import { type TokenPairModel } from "@models/token/token-pair-model"; import { useQuery } from "@tanstack/react-query"; import { ValuesType } from "utility-types"; - interface NegativeStatusType { status: MATH_NEGATIVE_TYPE; value: string; @@ -114,7 +113,9 @@ export const createDummyTokenList = (): Token[] => [ }, feeRate: "0.05%", }, - last7days: Array.from({ length: 40 }, () => Math.round(Math.random() * 100)), + last7days: Array.from({ length: 40 }, () => + Math.round(Math.random() * 100), + ), }, ]; @@ -148,6 +149,23 @@ const TokenListContainer: React.FC = () => { const [page, setPage] = useState(0); const [keyword, setKeyword] = useState(""); const [sortOption, setSortOption] = useState(); + const [width, setWidth] = useState(Number); + const [searchIcon, setSearchIcon] = useState(false); + const onTogleSearch = () => { + setSearchIcon(prev => !prev); + }; + + const handleResize = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); const { isFetched, @@ -205,8 +223,8 @@ const TokenListContainer: React.FC = () => { sortOption?.key !== item ? "desc" : sortOption.direction === "asc" - ? "desc" - : "asc"; + ? "desc" + : "asc"; setSortOption({ key, @@ -231,6 +249,9 @@ const TokenListContainer: React.FC = () => { movePage={movePage} isSortOption={isSortOption} sort={sort} + windowSize={width} + searchIcon={searchIcon} + onTogleSearch={onTogleSearch} /> ); }; diff --git a/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx b/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx index 34c96bc07..1daeb1277 100644 --- a/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx +++ b/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx @@ -1,9 +1,21 @@ import { trendingList } from "@components/home/card-list/card-list-dummy"; import TrendingCardList from "@components/home/trending-card-list/TrendingCardList"; -import React from "react"; +import React, { useEffect, useState } from "react"; const TrendingCardListContainer: React.FC = () => { - return ; + const [width, setWidth] = useState(Number); + const handleResize = () => { + setWidth(window.innerWidth); + }; + + useEffect(() => { + handleResize(); + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ; }; export default TrendingCardListContainer; diff --git a/packages/web/src/layouts/home-layout/HomeLayout.styles.ts b/packages/web/src/layouts/home-layout/HomeLayout.styles.ts index 490eafdb1..983236cde 100644 --- a/packages/web/src/layouts/home-layout/HomeLayout.styles.ts +++ b/packages/web/src/layouts/home-layout/HomeLayout.styles.ts @@ -1,40 +1,89 @@ +import styled from "@emotion/styled"; import mixins from "@styles/mixins"; -import { css } from "@emotion/react"; +import { media } from "@styles/media"; -export const wrapper = () => css` - .hero-section, - .tokens-section { - ${mixins.flexbox("row", "flex-start", "space-between")}; - flex-wrap: wrap; - width: 100%; - max-width: 1440px; - margin: 0 auto; - } +export const HomeLayoutWrapper = styled.div` + ${mixins.flexbox("column", "center", "flex-start")}; + width: 100%; +`; - .hero-section { - padding: 100px 40px 30px; +export const HeroSection = styled.div` + ${mixins.flexbox("column", "center", "flex-start")}; + max-width: 1920px; + width: 100%; + padding: 100px 0px 30px 0px; + gap: 80px; + ${media.tablet} { + max-width: 1180px; + padding: 60px 0px 20px 0px; + gap: 40px; } - - .tokens-section { - padding: 30px 40px 100px; + ${media.mobile} { + max-width: 360px; + padding: 36px 0px 24px 0px; + gap: 0px; } +`; - .brand-container { - width: 706px; +export const BrandContainer = styled.div` + ${mixins.flexbox("row", "flex-start", "space-between")}; + max-width: 1440px; + width: 100%; + padding: 0px 40px; + ${media.tablet} { + max-width: 1180px; + } + ${media.mobile} { + max-width: 360px; + flex-direction: column; + align-items: center; + padding: 0px 16px; + gap: 24px; } +`; - .swap-container { - width: 480px; +export const CardContainer = styled.div` + ${mixins.flexbox("row", "flex-start", "flex-start")}; + max-width: 1440px; + width: 100%; + padding: 0px 40px; + gap: 24px; + ${media.tablet} { + max-width: 1180px; } +`; - .card-list { - width: 100%; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto; - grid-gap: 24px; - grid-template-columns: repeat(3, 1fr); +export const TokensSection = styled.div` + ${mixins.flexbox("column", "center", "flex-start")}; + max-width: 1920px; + width: 100%; + padding: 30px 0px 100px 0px; + gap: 120px; + ${media.tablet} { + max-width: 1180px; + padding: 20px 0px 60px 0px; + gap: 60px; + } + ${media.mobile} { + max-width: 360px; + padding: 24px 0px 48px 0px; + gap: 120px; + } +`; - margin-top: 80px; +export const TokensContainer = styled.div` + ${mixins.flexbox("column", "center", "center")}; + max-width: 1440px; + width: 100%; + padding: 0px 40px; + gap: 24px; + ${media.tablet} { + max-width: 1180px; + align-items: flex-start; + } + ${media.mobile} { + max-width: 360px; + padding: 0px 16px; + align-items: center; } `; diff --git a/packages/web/src/layouts/home-layout/HomeLayout.tsx b/packages/web/src/layouts/home-layout/HomeLayout.tsx index cd7a36f7b..66450737b 100644 --- a/packages/web/src/layouts/home-layout/HomeLayout.tsx +++ b/packages/web/src/layouts/home-layout/HomeLayout.tsx @@ -1,5 +1,12 @@ import React from "react"; -import { wrapper } from "./HomeLayout.styles"; +import { + BrandContainer, + CardContainer, + HeroSection, + HomeLayoutWrapper, + TokensSection, + TokensContainer, +} from "./HomeLayout.styles"; interface HomeLayoutProps { header: React.ReactNode; @@ -22,23 +29,24 @@ const HomeLayout: React.FC = ({ tokenList, footer, }) => ( -
+ {header} - -
-
{brand}
-
{swap}
- -
+ + + {brand} + {swap} + + {trending} {highest} {recently} -
-
-
{tokenList}
- + + + + {tokenList} + {footer} -
+ ); export default HomeLayout; diff --git a/packages/web/src/styles/globalStyle.ts b/packages/web/src/styles/globalStyle.ts index b57cf7162..adc290ea0 100644 --- a/packages/web/src/styles/globalStyle.ts +++ b/packages/web/src/styles/globalStyle.ts @@ -1,4 +1,5 @@ import { css, type Theme } from "@emotion/react"; +import { media } from "./media"; const globalStyle = (theme: Theme) => css` html, @@ -17,6 +18,12 @@ const globalStyle = (theme: Theme) => css` body { background-color: ${theme.color.background01}; padding-top: 70px; + ${media.tablet} { + padding-top: 60px; + } + ${media.mobile} { + padding-top: 50px; + } } #__next {