From 433e975e6d9a9eac95d6fabfc4dd1ab2f543aba6 Mon Sep 17 00:00:00 2001 From: HoangDevNull <53819174+HoangDevNull@users.noreply.github.com> Date: Sun, 17 Dec 2023 13:45:21 +0700 Subject: [PATCH] Gsw 648 fix UI for governance (#264) * Update README.md * [GSW-648] fix: governance ui styles * [GSW-648] fix: ui for for governance * [GSW-648] fix: governance ui styles * [GSW-648] fix: governance ui styles --------- Co-authored-by: akstar82 <104613889+akstar82@users.noreply.github.com> --- README.md | 2 +- .../CreateProposalModal.styles.ts | 1 + .../CreateProposalModal.tsx | 11 ++-- .../GovernanceDetailInfo.styles.ts | 24 +++++++-- .../GovernanceDetailInfo.tsx | 19 +++++-- .../governance-detail/GovernanceDetail.tsx | 16 ++++-- .../governance-summary/GovernanceSummary.tsx | 6 ++- .../proposal-detail/ProposalDetail.styles.ts | 22 +++++--- .../ProposalDetailSekeleton.tsx | 32 +++++++++++ .../proposals-list/ProposalList.tsx | 26 ++++++--- .../ViewProposalModal.styles.ts | 18 ++++--- .../view-proposal-modal/ViewProposalModal.tsx | 20 ++++--- .../GovernanceContainer.tsx | 25 ++++----- .../ProposalListContainer.tsx | 14 ++++- .../web/src/hooks/common/use-lock-body.tsx | 54 +++++++++++++++++++ .../GovernanceLayout.styles.ts | 48 +++++++++++++++-- .../governance-layout/GovernanceLayout.tsx | 6 ++- 17 files changed, 280 insertions(+), 64 deletions(-) create mode 100644 packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx create mode 100644 packages/web/src/hooks/common/use-lock-body.tsx diff --git a/README.md b/README.md index 1b51bccbf..819055957 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Gnoswap Interface +# Gnoswap Interface Welcome to the open source interface for Gnoswap, the first decentralized exchange (DEX) powered by Gnoland, designed to simplify concentrated liquidity experience and increase capital efficiency for traders. _Note: Gnoswap is in active development and not yet in production, and we welcome your contributions! Please check our [contribution guidelines](https://github.com/gnoswap-labs/gnoswap-interface#contributing--support) and the [latest release](https://github.com/gnoswap-labs/gnoswap-interface/releases) to see the current development status._ diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts b/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts index a812034c6..e77b7ea5c 100644 --- a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts +++ b/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.styles.ts @@ -48,6 +48,7 @@ export const CreateProposalModalWrapper = styled.div` padding: 24px 24px 5px 24px; overflow: scroll; gap: 16px; + height: 800px; max-height: calc(100lvh - 100px); .header { ${mixins.flexbox("row", "center", "space-between")}; diff --git a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx b/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx index f35bcca33..6b10782f7 100644 --- a/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx +++ b/packages/web/src/components/governance/create-proposal-modal/CreateProposalModal.tsx @@ -30,6 +30,7 @@ import { CreateProposalModalWrapper, IconButton, } from "./CreateProposalModal.styles"; +import useLockedBody from "@hooks/common/use-lock-body"; interface Props { breakpoint: DEVICE_TYPE; @@ -101,6 +102,7 @@ const CreateProposalModal: React.FC = ({ } }; + useLockedBody(true); useEscCloseModal(() => setIsShowCreateProposal(false)); useEffect(() => { @@ -257,7 +259,8 @@ const CreateProposalModal: React.FC = ({ errors?.variable ? (errors?.variable as any)[index]?.subspace ?.message || - (errors?.variable as any)[index]?.key?.message || + (errors?.variable as any)[index]?.key + ?.message || (errors?.variable as any)[index]?.value?.message : undefined } @@ -309,14 +312,16 @@ const CreateProposalModal: React.FC = ({ fullWidth: true, textColor: "text09", fontType: breakpoint !== DEVICE_TYPE.MOBILE ? "body7" : "body9", - hierarchy: isDisableSubmit ? undefined : ButtonHierarchy.Primary, + hierarchy: isDisableSubmit + ? undefined + : ButtonHierarchy.Primary, bgColor: isDisableSubmit ? "background17" : undefined, }} /> - setIsShowCreateProposal(false)}/> + setIsShowCreateProposal(false)} /> ); }; diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts b/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts index 551472659..f0125837f 100644 --- a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts +++ b/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.styles.ts @@ -8,7 +8,8 @@ export const GovernanceDetailInfoWrapper = styled.div` width: 100%; padding: 24px 36px; gap: 16px; - &:nth-of-type(1), &:nth-of-type(2) { + &:nth-of-type(1), + &:nth-of-type(2) { padding: 24px 0 24px 36px; min-width: 275px; } @@ -16,14 +17,16 @@ export const GovernanceDetailInfoWrapper = styled.div` ${mixins.flexbox("column", "flex-start", "flex-start")}; padding: 24px; - &:nth-of-type(1), &:nth-of-type(2) { + &:nth-of-type(1), + &:nth-of-type(2) { min-width: 258px; } } @media (max-width: 968px) { ${mixins.flexbox("row", "center", "space-between")}; width: 100%; - &:nth-of-type(1), &:nth-of-type(2) { + &:nth-of-type(1), + &:nth-of-type(2) { padding: 12px; } padding: 12px; @@ -59,6 +62,21 @@ export const GovernanceDetailInfoWrapper = styled.div` } } + .value-wrapper-skeleton { + height: 40px; + width: 100%; + ${mixins.flexbox("column", "start", "center")}; + ${media.tablet} { + height: 31px; + } + + > span { + display: block; + height: 20px; + width: 150px; + } + } + .value-wrapper { ${mixins.flexbox("row", "flex-end", "flex-start")}; @media (max-width: 968px) { diff --git a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx b/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx index 11555dc1a..799d8ada6 100644 --- a/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx +++ b/packages/web/src/components/governance/governance-detail-info/GovernanceDetailInfo.tsx @@ -6,12 +6,14 @@ import { GovernanceDetailInfoWrapper, } from "./GovernanceDetailInfo.styles"; import { Global, css, type Theme } from "@emotion/react"; +import { SHAPE_TYPES, skeletonTokenDetail } from "@constants/skeleton.constant"; interface GovernanceDetailInfoProps { title: string; - value: string; + value?: string; tooltip?: string; currency?: string; + loading?: boolean; } const ToolTipGlobalStyle = () => { @@ -37,6 +39,7 @@ const GovernanceDetailInfo: React.FC = ({ value, tooltip, currency, + loading, }) => { return ( @@ -46,10 +49,16 @@ const GovernanceDetailInfo: React.FC = ({ )} -
- {value} - {currency && {currency}} -
+ {loading ? ( +
+ +
+ ) : ( +
+ {value} + {currency && {currency}} +
+ )} ); diff --git a/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx b/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx index 36f494d4c..a793d411b 100644 --- a/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx +++ b/packages/web/src/components/governance/governance-detail/GovernanceDetail.tsx @@ -3,38 +3,44 @@ import { GovernanceDetailInfoProps } from "@containers/governance-container/Gove import GovernanceDetailInfo from "../governance-detail-info/GovernanceDetailInfo"; interface GovernanceDetailProps { - governanceDetailInfo: GovernanceDetailInfoProps; + governanceDetailInfo?: GovernanceDetailInfoProps; + loading?: boolean; } const GovernanceDetail: React.FC = ({ governanceDetailInfo, + loading, }) => ( ); diff --git a/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx b/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx index 8ddd22cb2..6e7d26c64 100644 --- a/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx +++ b/packages/web/src/components/governance/governance-summary/GovernanceSummary.tsx @@ -3,14 +3,16 @@ import { GovernanceDetailInfoProps } from "@containers/governance-container/Gove import GovernanceDetail from "../governance-detail/GovernanceDetail"; interface GovernanceSummaryProps { - governanceDetailInfo: GovernanceDetailInfoProps; + governanceDetailInfo?: GovernanceDetailInfoProps; + loading?: boolean; } const GovernanceSummary: React.FC = ({ governanceDetailInfo, + loading, }) => ( - + ); diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts b/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts index 33d07300d..b09a624ae 100644 --- a/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts +++ b/packages/web/src/components/governance/proposal-detail/ProposalDetail.styles.ts @@ -18,6 +18,7 @@ export const ProposalDetailWrapper = styled.div` } .header { ${mixins.flexbox("row", "center", "space-between")}; + flex-wrap: nowrap; width: 100%; gap: 8px; span { @@ -26,13 +27,20 @@ export const ProposalDetailWrapper = styled.div` .title { ${fonts.body5}; color: ${({ theme }) => theme.color.text02}; + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + } + + .content { + white-space: nowrap; } } ${media.mobile} { - padding: 12px 12px 24px 12px; - gap: 24px; + padding: 12px; + gap: 12px; .header { - ${mixins.flexbox("column", "flex-start", "flex-start")}; .title { ${fonts.body11}; } @@ -43,6 +51,7 @@ export const ProposalDetailWrapper = styled.div` gap: 12px; ${mixins.flexbox("row", "center", "center")}; ${media.mobile} { + gap: 8px; ${mixins.flexbox("column", "flex-start", "flex-start")}; } } @@ -65,7 +74,7 @@ export const ProposalDetailWrapper = styled.div` fill: ${({ theme }) => theme.color.red01}; } .passed-icon * { - fill: ${({ theme }) => theme.color.point}; + fill: ${({ theme }) => theme.color.background04}; } .cancelled-icon * { fill: ${({ theme }) => theme.color.icon03}; @@ -78,7 +87,7 @@ export const ProposalDetailWrapper = styled.div` color: ${({ theme }) => theme.color.red01}; } .passed { - color: ${({ theme }) => theme.color.point}; + color: ${({ theme }) => theme.color.background04}; } .cancelled { color: ${({ theme }) => theme.color.icon03}; @@ -104,6 +113,7 @@ export const ProgressWrapper = styled.div` } } ${media.mobile} { + ${mixins.flexbox("column", "start", "start")}; gap: 8px; .progress-value { ${fonts.p6}; @@ -158,7 +168,7 @@ export const ProgressBar = styled.div` background-color: ${({ theme }) => theme.color.background12}; } ${media.mobile} { - min-width: calc(100% - 120px); + width: 100%; height: 10px; } `; diff --git a/packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx b/packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx new file mode 100644 index 000000000..d1dd3c66a --- /dev/null +++ b/packages/web/src/components/governance/proposal-detail/ProposalDetailSekeleton.tsx @@ -0,0 +1,32 @@ +import { ProposalDetailWrapper } from "./ProposalDetail.styles"; +import { SHAPE_TYPES, skeletonTokenDetail } from "@constants/skeleton.constant"; + +const ProposalDetailSkeleton = () => { + return ( + +
+
+
+
+
+
+
+
+
+ + ); +}; + +export default ProposalDetailSkeleton; diff --git a/packages/web/src/components/governance/proposals-list/ProposalList.tsx b/packages/web/src/components/governance/proposals-list/ProposalList.tsx index 520bb87e6..1fe89ccad 100644 --- a/packages/web/src/components/governance/proposals-list/ProposalList.tsx +++ b/packages/web/src/components/governance/proposals-list/ProposalList.tsx @@ -6,6 +6,7 @@ import ViewProposalModal from "../view-proposal-modal/ViewProposalModal"; import { ProposalListWrapper } from "./ProposalList.styles"; import { Dispatch, SetStateAction } from "react"; import CreateProposalModal from "../create-proposal-modal/CreateProposalModal"; +import ProposalDetailSkeleton from "../proposal-detail/ProposalDetailSekeleton"; interface ProposalListProps { proposalList: ProposalDetailProps[]; isShowCancelled: boolean; @@ -20,6 +21,7 @@ interface ProposalListProps { isConnected: boolean; isSwitchNetwork: boolean; handleSelectVote: () => void; + loading?: boolean; } const ProposalList: React.FC = ({ @@ -36,6 +38,7 @@ const ProposalList: React.FC = ({ isConnected, isSwitchNetwork, handleSelectVote, + loading, }) => ( = ({ isConnected={isConnected} isSwitchNetwork={isSwitchNetwork} /> - {proposalList.map((proposalDetail: ProposalDetailProps) => ( - - ))} + {loading ? ( + Array.from({ length: 3 }).map((_, idx) => ( + + )) + ) : ( + <> + {proposalList.map((proposalDetail: ProposalDetailProps) => ( + + ))} + + )} + {isShowProposalModal && ( theme.color.green02}; + fill: ${({ theme }) => theme.color.green01}; } .failed-icon * { - fill: ${({ theme }) => theme.color.red02}; + fill: ${({ theme }) => theme.color.red01}; } .passed-icon * { - fill: ${({ theme }) => theme.color.point}; + fill: ${({ theme }) => theme.color.background04}; } .cancelled-icon * { fill: ${({ theme }) => theme.color.icon03}; @@ -123,13 +123,13 @@ export const ModalHeaderWrapper = styled.div` } .success { - color: ${({ theme }) => theme.color.green02}; + color: ${({ theme }) => theme.color.green01}; } .failed { - color: ${({ theme }) => theme.color.red02}; + color: ${({ theme }) => theme.color.red01}; } .passed { - color: ${({ theme }) => theme.color.point}; + color: ${({ theme }) => theme.color.background04}; } .cancelled { color: ${({ theme }) => theme.color.icon03}; @@ -223,7 +223,7 @@ export const ProgressBar = styled.div` }}; height: 100%; border-radius: 8px; - background-color: ${({ theme }) => theme.color.point}; + background-color: ${({ theme }) => theme.color.background04}; } .progress-bar-no-of-quorum { z-index: 2; @@ -284,6 +284,10 @@ export const BoxQuorumWrapper = styled.div` > div { ${fonts.body11} } + + > div:first-of-type { + ${fonts.body12} + } } &:hover { background-color: ${({ theme }) => theme.color.background05Hover}; diff --git a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx b/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx index a330ed7b8..40de21734 100644 --- a/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx +++ b/packages/web/src/components/governance/view-proposal-modal/ViewProposalModal.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @next/next/no-img-element */ import Badge, { BADGE_TYPE } from "@components/common/badge/Badge"; import Button, { ButtonHierarchy } from "@components/common/button/Button"; import IconClose from "@components/common/icons/IconCancel"; @@ -34,6 +35,7 @@ import dayjs from "dayjs"; import relative from "dayjs/plugin/relativeTime"; import { Overlay } from "@components/common/modal/Modal.styles"; import useEscCloseModal from "@hooks/common/use-esc-close-modal"; +import useLockedBody from "@hooks/common/use-lock-body"; dayjs.extend(relative); @@ -173,6 +175,7 @@ const ViewProposalModal: React.FC = ({ const [optionVote, setOptionVote] = useState(""); const modalRef = useRef(null); + useLockedBody(true); const handleResize = () => { if (typeof window !== "undefined" && modalRef.current) { @@ -199,6 +202,7 @@ const ViewProposalModal: React.FC = ({ const handleSelectVoting = useCallback(() => { handleSelectVote(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [optionVote, handleSelectVote]); const disableButton = useMemo(() => { @@ -209,7 +213,7 @@ const ViewProposalModal: React.FC = ({ return false; } return optionVote === ""; - },[isConnected, isSwitchNetwork, optionVote]); + }, [isConnected, isSwitchNetwork, optionVote]); const textButton = useMemo(() => { if (!isConnected) { @@ -223,7 +227,7 @@ const ViewProposalModal: React.FC = ({ : optionVote === "" ? "Select Voting Option" : "Vote"; - },[isConnected, isSwitchNetwork, proposalDetail, optionVote]); + }, [isConnected, isSwitchNetwork, proposalDetail, optionVote]); if (!proposalDetail) return null; @@ -328,11 +332,15 @@ const ViewProposalModal: React.FC = ({ style={{ fullWidth: true, height: breakpoint !== DEVICE_TYPE.MOBILE ? 57 : 41, - fontType: breakpoint !== DEVICE_TYPE.MOBILE ? "body7" : "body9", + fontType: + breakpoint !== DEVICE_TYPE.MOBILE ? "body7" : "body9", textColor: "text09", bgColor: "background17", - width: breakpoint !== DEVICE_TYPE.MOBILE ? undefined : "304px", - hierarchy: disableButton ? undefined : ButtonHierarchy.Primary, + width: + breakpoint !== DEVICE_TYPE.MOBILE ? undefined : "304px", + hierarchy: disableButton + ? undefined + : ButtonHierarchy.Primary, }} onClick={handleSelectVoting} /> @@ -341,7 +349,7 @@ const ViewProposalModal: React.FC = ({
- setIsShowProposalModal(false)}/> + setIsShowProposalModal(false)} /> ); }; diff --git a/packages/web/src/containers/governance-container/GovernanceContainer.tsx b/packages/web/src/containers/governance-container/GovernanceContainer.tsx index 38c9069ae..521e1578b 100644 --- a/packages/web/src/containers/governance-container/GovernanceContainer.tsx +++ b/packages/web/src/containers/governance-container/GovernanceContainer.tsx @@ -19,26 +19,27 @@ const initialGovernanceDetailInfo: GovernanceDetailInfoProps = { }; async function fetchGovernanceDetailInfo(): Promise { - return Promise.resolve({ - totalXGnosIssued: "59,144,225", - communityPool: "2,412,148", - passedProposals: "42", - activeProposals: "2", - }); + return new Promise(resolve => setTimeout(resolve, 2000)).then( + () => initialGovernanceDetailInfo, + ); } const GovernanceContainer: React.FC = () => { - const { - data: governanceDetailInfo, - } = useQuery({ + const { data: governanceDetailInfo, isFetching } = useQuery< + GovernanceDetailInfoProps, + Error + >({ queryKey: ["governanceDetailInfo"], queryFn: () => { return fetchGovernanceDetailInfo(); }, - initialData: initialGovernanceDetailInfo, }); - - return ; + return ( + + ); }; export default GovernanceContainer; diff --git a/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx b/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx index 58ba11ac5..a505eea09 100644 --- a/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx +++ b/packages/web/src/containers/proposal-list-container/ProposalListContainer.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback } from "react"; +import React, { useState, useCallback, useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import ProposalList from "@components/governance/proposals-list/ProposalList"; import { useWindowSize } from "@hooks/common/use-window-size"; @@ -76,7 +76,16 @@ const ProposalListContainer: React.FC = () => { const [isShowCreateProposal, setIsShowCreateProposal] = useState(false); const { isSwitchNetwork, connected, switchNetwork } = useWallet(); const { breakpoint } = useWindowSize(); - const { openModal } = useConnectWalletModal(); + const { openModal } = useConnectWalletModal(); + + const [loading, setLoading] = useState(true); + + useEffect(() => { + const timeout = setTimeout(() => { + setLoading(false); + }, 2000); + return () => clearTimeout(timeout); + }, []); const { data: proposalList = [] } = useQuery({ queryKey: ["proposalList", isShowCancelled], @@ -124,6 +133,7 @@ const ProposalListContainer: React.FC = () => { return ( void]; + +export function useLockedBody( + initialLocked = false, + rootId = "__next", +): UseLockedBodyOutput { + const [locked, setLocked] = useState(initialLocked); + + // Do the side effect before render + useEffect(() => { + if (!locked) { + return; + } + + // Save initial body style + const originalOverflow = document.body.style.overflow; + const originalPaddingRight = document.body.style.paddingRight; + + // Lock body scroll + document.body.style.overflow = "hidden"; + + // Get the scrollBar width + const root = document.getElementById(rootId); // or root + const scrollBarWidth = root ? root.offsetWidth - root.scrollWidth : 0; + + // Avoid width reflow + if (scrollBarWidth) { + document.body.style.paddingRight = `${scrollBarWidth}px`; + } + + return () => { + document.body.style.overflow = originalOverflow; + + if (scrollBarWidth) { + document.body.style.paddingRight = originalPaddingRight; + } + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [locked]); + + // Update state if initialValue changes + useEffect(() => { + if (locked !== initialLocked) { + setLocked(initialLocked); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [initialLocked]); + + return [locked, setLocked]; +} + +export default useLockedBody; diff --git a/packages/web/src/layouts/governance-layout/GovernanceLayout.styles.ts b/packages/web/src/layouts/governance-layout/GovernanceLayout.styles.ts index b06f4aa50..daadf2d47 100644 --- a/packages/web/src/layouts/governance-layout/GovernanceLayout.styles.ts +++ b/packages/web/src/layouts/governance-layout/GovernanceLayout.styles.ts @@ -12,17 +12,17 @@ export const GovernanceLayoutWrapper = styled.div` ${mixins.flexbox("column", "center", "flex-start")}; max-width: ${ContainerWidth.WEB_SECTION_CONTAINER}; width: 100%; - padding: 100px 0px; + padding-top: 100px; gap: 36px; @media (max-width: 1180px) { max-width: ${ContainerWidth.TABLET_CONTAINER}; - padding: 60px 0px; + padding-top: 60px; gap: 24px; } ${media.mobile} { max-width: ${ContainerWidth.MOBILE_CONTAINER}; width: 100%; - padding: 24px 16px 48px 16px; + padding: 24px 16px 0px 16px; gap: 12px; } } @@ -96,7 +96,46 @@ export const GovernanceLayoutWrapper = styled.div` } } + .list-wrapper { + margin-top: 60px; + width: 100%; + padding-top: 100px; + padding-bottom: 48px; + background: linear-gradient( + 180deg, + rgba(20, 26, 41, 0.5) 0%, + rgba(20, 26, 41, 0) 100% + ); + + ${media.tablet} { + padding-top: 60px; + margin-top: 40px; + } + + ${media.mobile} { + padding-top: 24px; + margin-top: 24px; + } + } + + .list-container { + margin: 0 auto; + ${mixins.flexbox("column", "flex-start", "flex-start")}; + max-width: ${ContainerWidth.WEB_CONTAINER}; + width: 100%; + padding: 0px 40px; + gap: 22px; + @media (max-width: 1180px) { + gap: 16px; + } + + ${media.mobile} { + padding: 0px 16px; + } + } + .summary-container { + margin: 0 auto; ${mixins.flexbox("column", "flex-start", "flex-start")}; max-width: ${ContainerWidth.WEB_CONTAINER}; width: 100%; @@ -105,6 +144,7 @@ export const GovernanceLayoutWrapper = styled.div` @media (max-width: 1180px) { gap: 16px; } + ${media.mobile} { padding: 12px 0px 24px 0px; } @@ -119,8 +159,10 @@ export const LinkButton = styled.div` color: ${({ theme }) => theme.color.text04}; ${media.mobile} { ${fonts.p3}; + flex-direction: column; } a { + display: block; ${mixins.flexbox("row", "center", "center")}; color: ${({ theme }) => theme.color.text07}; &:hover { diff --git a/packages/web/src/layouts/governance-layout/GovernanceLayout.tsx b/packages/web/src/layouts/governance-layout/GovernanceLayout.tsx index e083786a0..11340b82e 100644 --- a/packages/web/src/layouts/governance-layout/GovernanceLayout.tsx +++ b/packages/web/src/layouts/governance-layout/GovernanceLayout.tsx @@ -36,14 +36,16 @@ const GovernanceLayout: React.FC = ({
{summary} - Stake GNS/GNOT Positions to earn xGNOS +
Stake GNS/GNOT Positions to earn xGNOS
Click here - {list}
+
+
{list}
+
{footer} {isShowLearnMoreModal && (