From 7cc68d004e8488f1dbbc399e02a6e73b6821e1c1 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Wed, 23 Oct 2024 02:59:45 +0300 Subject: [PATCH 1/9] fix: Make the CCIP responsive --- src/components/CCIP/Cards/NetworkCard.css | 2 +- src/components/CCIP/Cards/TokenCard.css | 12 +- src/components/CCIP/Chain/Chain.astro | 12 +- src/components/CCIP/ChainHero/ChainHero.css | 29 ++- src/components/CCIP/Drawer/LaneDrawer.tsx | 212 +++++++-------- src/components/CCIP/Drawer/TokenDrawer.tsx | 242 +++++++++--------- .../CCIP/Landing/ccip-landing.astro | 14 +- src/components/CCIP/Tables/ChainTable.tsx | 146 +++++------ src/components/CCIP/Tables/Table.css | 14 + .../CCIP/Tables/TokenChainsTable.tsx | 2 +- .../DocsNavigationMobile.tsx | 3 +- 11 files changed, 369 insertions(+), 319 deletions(-) diff --git a/src/components/CCIP/Cards/NetworkCard.css b/src/components/CCIP/Cards/NetworkCard.css index ca133e32929..70446a6e715 100644 --- a/src/components/CCIP/Cards/NetworkCard.css +++ b/src/components/CCIP/Cards/NetworkCard.css @@ -2,7 +2,7 @@ display: flex; padding: var(--space-6x); gap: var(--space-3x); - + width: 100%; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--space-1x); diff --git a/src/components/CCIP/Cards/TokenCard.css b/src/components/CCIP/Cards/TokenCard.css index 533203d5437..5e3c56fb1ee 100644 --- a/src/components/CCIP/Cards/TokenCard.css +++ b/src/components/CCIP/Cards/TokenCard.css @@ -1,7 +1,8 @@ .token-card__container { display: flex; - width: 137px; - height: 124px; + width: 95%; + height: 110px; + margin: 0 auto; flex-direction: column; align-items: center; text-align: center; @@ -38,3 +39,10 @@ text-overflow: ellipsis; /* Add ellipsis (…) when the text is truncated */ width: 200px; /* Adjust the width as needed */ } + +@media (min-width: 992px) { + .token-card__container { + width: 137px; + height: 124px; + } +} diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro index 681037ee6b7..e9ca002220e 100644 --- a/src/components/CCIP/Chain/Chain.astro +++ b/src/components/CCIP/Chain/Chain.astro @@ -80,8 +80,8 @@ const searchLanes = getSearchLanes({ environment }) --gutter: var(--space-6x); --doc-padding: 2rem; margin: var(--space-8x) auto; - display: grid; - grid-template-columns: 1fr; + display: flex; + flex-direction: column; gap: var(--gutter); padding: var(--doc-padding); } @@ -110,13 +110,13 @@ const searchLanes = getSearchLanes({ environment }) .networks__grid { display: grid; grid-template-columns: 1fr; - gap: var(--space-8x); + gap: var(--space-1x); } .tokens__grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-8x); + grid-template-columns: 33% 33% 33%; + gap: var(--space-1x); } @media (min-width: 50em) { @@ -127,7 +127,7 @@ const searchLanes = getSearchLanes({ environment }) @media (min-width: 992px) { .layout { - grid-template-columns: 1fr 1fr; + flex-direction: row; gap: var(--space-24x); } diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index 8caa8ca4d74..8ad82397b3d 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/src/components/CCIP/ChainHero/ChainHero.css @@ -54,9 +54,10 @@ .ccip-chain-hero__top { display: flex; + flex-direction: column-reverse; justify-content: space-between; - align-items: center; - gap: var(--space-16x); + align-items: start; + gap: var(--space-8x); } .ccip-chain-hero__chainSearch { @@ -66,7 +67,7 @@ .ccip-chain-hero__details { display: grid; gap: var(--space-4x); - grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-columns: 1fr; } .ccip-chain-hero__details__label { @@ -82,12 +83,14 @@ .ccip-chain-hero__feeTokens__list { display: flex; - align-items: center; - gap: var(--space-20x); + align-items: start; + flex-direction: column; + gap: var(--space-4x); } .ccip-chain-hero__feeTokens__item { display: flex; + align-items: center; gap: var(--space-2x); color: var(--gray-900); @@ -137,6 +140,22 @@ } @media (min-width: 992px) { + .ccip-chain-hero__top { + flex-direction: row; + gap: var(--space-16x); + align-items: center; + } + + .ccip-chain-hero__details { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + } + + .ccip-chain-hero__feeTokens__list { + align-items: center; + flex-direction: row; + gap: var(--space-20x); + } + .ccip-chain-hero__content { grid-template-columns: 1fr 1fr; padding-left: var(--space-10x); diff --git a/src/components/CCIP/Drawer/LaneDrawer.tsx b/src/components/CCIP/Drawer/LaneDrawer.tsx index dcb7ece1cf5..d8975861ab3 100644 --- a/src/components/CCIP/Drawer/LaneDrawer.tsx +++ b/src/components/CCIP/Drawer/LaneDrawer.tsx @@ -67,112 +67,114 @@ function LaneDrawer({ - - - - - - - - - - - - - {lane.supportedTokens && - Object.keys(lane.supportedTokens) - ?.filter((token) => token.toLowerCase().includes(search.toLowerCase())) - .map((token, index) => { - const data = getTokenData({ - environment, - version: Version.V1_2_0, - tokenSymbol: token || "", - }) - if (!Object.keys(data).length) return null - const logo = getTokenIconUrl(token) - return ( - - - - - - - - + + + + + + + ) + })} + +
TickerToken address (Source)DecimalsMechanism - Rate limit capacity - - - Rate limit refil rate - -
- -
- {`${token} { - currentTarget.onerror = null // prevents looping - currentTarget.src = fallbackTokenIconUrl - }} - /> - {token} -
- - 		-
-
{data[sourceNetwork.key].decimals}{data[sourceNetwork.key].poolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"} - {lane.supportedTokens && - displayCapacity( - String( - lane.supportedTokens[token]?.rateLimiterConfig?.[ - inOutbound === LaneFilter.Inbound ? "in" : "out" - ]?.capacity || 0 - ), - data[sourceNetwork.key].decimals - )}{" "} - {token} - - {lane.supportedTokens && ( - + + + + + + + + + + + + + {lane.supportedTokens && + Object.keys(lane.supportedTokens) + ?.filter((token) => token.toLowerCase().includes(search.toLowerCase())) + .map((token, index) => { + const data = getTokenData({ + environment, + version: Version.V1_2_0, + tokenSymbol: token || "", + }) + if (!Object.keys(data).length) return null + const logo = getTokenIconUrl(token) + return ( + + + - - ) - })} - -
TickerToken address (Source)DecimalsMechanism + Rate limit capacity + + + Rate limit refil rate + +
+ +
+ {`${token} { + currentTarget.onerror = null // prevents looping + currentTarget.src = fallbackTokenIconUrl + }} + /> + {token} +
+ + 		+
- )} -
+ 		{data[sourceNetwork.key].decimals}{data[sourceNetwork.key].poolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"} + {lane.supportedTokens && + displayCapacity( + String( + lane.supportedTokens[token]?.rateLimiterConfig?.[ + inOutbound === LaneFilter.Inbound ? "in" : "out" + ]?.capacity || 0 + ), + data[sourceNetwork.key].decimals + )}{" "} + {token} + + {lane.supportedTokens && ( + + )} +
+
{lane.supportedTokens && Object.keys(lane.supportedTokens)?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())) diff --git a/src/components/CCIP/Drawer/TokenDrawer.tsx b/src/components/CCIP/Drawer/TokenDrawer.tsx index 32c29624805..bac80ebe6db 100644 --- a/src/components/CCIP/Drawer/TokenDrawer.tsx +++ b/src/components/CCIP/Drawer/TokenDrawer.tsx @@ -84,122 +84,124 @@ function TokenDrawer({
- - - - - - - - {/* */} - - - - {Object.keys(destinationLanes) - ?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())) - .map((lane, index) => { - const networkDetails = getNetwork({ - filter: environment, - chain: lane, - }) - const laneData = getLane({ - sourceChain: network?.key as SupportedChain, - destinationChain: lane as SupportedChain, - environment, - version: Version.V1_2_0, - }) +
+ {" "} +
{inOutbound === LaneFilter.Inbound ? "Source" : "Destination"} network - Rate limit capacity - - - Rate limit refil rate - - - Mechanism - - Status
+ + + + + + + {/* */} + + + + {Object.keys(destinationLanes) + ?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())) + .map((lane, index) => { + const networkDetails = getNetwork({ + filter: environment, + chain: lane, + }) + const laneData = getLane({ + sourceChain: network?.key as SupportedChain, + destinationChain: lane as SupportedChain, + environment, + version: Version.V1_2_0, + }) - if (!laneData) return null + if (!laneData) return null - return ( - - - - - - {/* + + + + + {/* */} - - ) - })} - -
{inOutbound === LaneFilter.Inbound ? "Source" : "Destination"} network + Rate limit capacity + + + Rate limit refil rate + + + Mechanism + + Status
-
{ - drawerContentStore.set(() => ( - - )) - }} - > - {networkDetails?.name} - {networkDetails?.name} -
- 		- {displayCapacity( - String( - destinationLanes[lane].rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"] - ?.capacity || 0 - ), - network.decimals - )}{" "} - {token.name} - - - {network.tokenPoolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"} + return ( +
+
{ + drawerContentStore.set(() => ( + + )) + }} + > + {networkDetails?.name} + {networkDetails?.name} +
+ 		+ {displayCapacity( + String( + destinationLanes[lane].rateLimiterConfig?.[inOutbound === LaneFilter.Inbound ? "in" : "out"] + ?.capacity || 0 + ), + network.decimals + )}{" "} + {token.name} + + + {network.tokenPoolType === "lockRelease" ? "Lock/Release" : "Burn/Mint"}
+ + ) + })} + + + +
{Object.keys(destinationLanes)?.filter((lane) => lane.toLowerCase().includes(search.toLowerCase())).length === 0 && <>No lanes found} diff --git a/src/components/CCIP/Landing/ccip-landing.astro b/src/components/CCIP/Landing/ccip-landing.astro index 55f43b3ee62..ef79a5c16d1 100644 --- a/src/components/CCIP/Landing/ccip-landing.astro +++ b/src/components/CCIP/Landing/ccip-landing.astro @@ -89,10 +89,9 @@ const searchLanes = getSearchLanes({ environment }) .layout { --gutter: var(--space-6x); --doc-padding: 2rem; - /* margin-bottom: 0; */ margin: var(--space-8x) auto; - display: grid; - grid-template-columns: 1fr; + display: flex; + flex-direction: column; gap: var(--gutter); padding: var(--doc-padding); } @@ -121,13 +120,13 @@ const searchLanes = getSearchLanes({ environment }) .networks__grid { display: grid; grid-template-columns: 1fr; - gap: var(--space-8x); + gap: var(--space-1x); } .tokens__grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: var(--space-8x); + grid-template-columns: 33% 33% 33%; + gap: var(--space-1x); } @media (min-width: 50em) { @@ -138,7 +137,8 @@ const searchLanes = getSearchLanes({ environment }) @media (min-width: 992px) { .layout { - grid-template-columns: 1fr 1fr; + --doc-padding: 2rem; + flex-direction: row; gap: var(--space-24x); } diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx index 145adcffea1..ef2902e909f 100644 --- a/src/components/CCIP/Tables/ChainTable.tsx +++ b/src/components/CCIP/Tables/ChainTable.tsx @@ -54,80 +54,82 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro />
- - - - - - - - - - {lanes - ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())) - .map((network, index) => ( - - + + ))} + +
{inOutbound === LaneFilter.Outbound ? "Destination" : "Source"} network{inOutbound === LaneFilter.Outbound ? "OnRamp" : "OffRamp"} addressStatus
-
{ - const laneData = getLane({ - sourceChain: sourceNetwork.key as SupportedChain, - destinationChain: network.key as SupportedChain, - environment, - version: Version.V1_2_0, - }) +
+ + + + + + + + + + {lanes + ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())) + .map((network, index) => ( + + + + - - - - ))} - -
{inOutbound === LaneFilter.Outbound ? "Destination" : "Source"} network{inOutbound === LaneFilter.Outbound ? "OnRamp" : "OffRamp"} addressStatus
+
{ + const laneData = getLane({ + sourceChain: sourceNetwork.key as SupportedChain, + destinationChain: network.key as SupportedChain, + environment, + version: Version.V1_2_0, + }) - drawerContentStore.set(() => ( - ( + + )) + }} + > + {network.name} + {network.name} +
+ 		+
+
+ + + - )) - }} - > - {network.name} - {network.name} - - -
-
- - - - - {network.status || "N/A"} - -
+ + {network.status || "N/A"} + +
+
{lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && ( diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css index eaf6880793b..ff7a6d1c5e4 100644 --- a/src/components/CCIP/Tables/Table.css +++ b/src/components/CCIP/Tables/Table.css @@ -8,6 +8,15 @@ border: none; } +.ccip-table__wrapper { + overflow-x: auto; +} + +.ccip-table th, +.ccip-table td { + width: 200px; +} + .ccip-table__drawer-container { padding: var(--space-6x); } @@ -157,4 +166,9 @@ .ccip-table__drawer-container { padding: var(--space-10x); } + + .ccip-table th, + .ccip-table td { + width: auto; + } } diff --git a/src/components/CCIP/Tables/TokenChainsTable.tsx b/src/components/CCIP/Tables/TokenChainsTable.tsx index 3b9df4a54cf..83d3686303b 100644 --- a/src/components/CCIP/Tables/TokenChainsTable.tsx +++ b/src/components/CCIP/Tables/TokenChainsTable.tsx @@ -42,7 +42,7 @@ function TokenChainsTable({ networks, token, lanes: destinationLanes, environmen
-
+
diff --git a/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx b/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx index e0bf2c4ef0c..24a405ff2fb 100644 --- a/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx +++ b/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx @@ -3,7 +3,7 @@ import { useNavBar } from "../../Header/useNavBar/useNavBar" import DocsPickerMobile from "./DocsPickerMobile" import styles from "./docsNavigationMobile.module.css" -function DocsNavigationDesktop({ pathname }: { pathname: string; children?: React.ReactNode }) { +function DocsNavigationDesktop({ pathname, children }: { pathname: string; children?: React.ReactNode }) { const { $navBarInfo } = useNavBar() return ( <> @@ -14,6 +14,7 @@ function DocsNavigationDesktop({ pathname }: { pathname: string; children?: Reac >
+ {children}
From 9ee7008a7af3ffa7c4fc5b20dcc66b4d827d6f57 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Wed, 23 Oct 2024 14:33:38 +0300 Subject: [PATCH 2/9] fix: CSS responsiveness --- src/components/CCIP/Cards/TokenCard.css | 3 +- src/components/CCIP/Chain/Chain.astro | 14 ++++--- src/components/CCIP/ChainHero/ChainHero.css | 11 +++-- .../CCIP/ChainHero/LaneDetailsHero.css | 19 ++++++++- src/components/CCIP/Drawer/Drawer.css | 1 + src/components/CCIP/Drawer/Drawer.tsx | 2 +- .../CCIP/Landing/ccip-landing.astro | 9 ++-- src/components/CCIP/Search/Search.css | 41 ++++++++++++++----- src/components/CCIP/Tables/Table.css | 7 ++++ .../CCIP/Tables/TableSearchInput.css | 10 +++++ 10 files changed, 89 insertions(+), 28 deletions(-) diff --git a/src/components/CCIP/Cards/TokenCard.css b/src/components/CCIP/Cards/TokenCard.css index 5e3c56fb1ee..5650d6efb67 100644 --- a/src/components/CCIP/Cards/TokenCard.css +++ b/src/components/CCIP/Cards/TokenCard.css @@ -1,6 +1,6 @@ .token-card__container { display: flex; - width: 95%; + width: 100%; height: 110px; margin: 0 auto; flex-direction: column; @@ -42,7 +42,6 @@ @media (min-width: 992px) { .token-card__container { - width: 137px; height: 124px; } } diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro index e9ca002220e..1e77f5b2978 100644 --- a/src/components/CCIP/Chain/Chain.astro +++ b/src/components/CCIP/Chain/Chain.astro @@ -89,7 +89,6 @@ const searchLanes = getSearchLanes({ environment }) .ccip-heading { display: flex; padding-bottom: var(--space-4x); - border-bottom: 1px solid var(--gray-200); margin-bottom: var(--space-6x); justify-content: space-between; } @@ -110,13 +109,13 @@ const searchLanes = getSearchLanes({ environment }) .networks__grid { display: grid; grid-template-columns: 1fr; - gap: var(--space-1x); + gap: var(--space-2x); } .tokens__grid { display: grid; - grid-template-columns: 33% 33% 33%; - gap: var(--space-1x); + grid-template-columns: 32% 32% 32%; + gap: var(--space-2x); } @media (min-width: 50em) { @@ -127,7 +126,8 @@ const searchLanes = getSearchLanes({ environment }) @media (min-width: 992px) { .layout { - flex-direction: row; + display: grid; + grid-template-columns: 1fr 1fr; gap: var(--space-24x); } @@ -142,5 +142,9 @@ const searchLanes = getSearchLanes({ environment }) grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-4x); } + + .ccip-heading { + border-bottom: 1px solid var(--gray-200); + } } diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index 8ad82397b3d..c9fc37fcc5a 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/src/components/CCIP/ChainHero/ChainHero.css @@ -36,7 +36,7 @@ } .ccip-chain-hero__content { - --gutter: var(--space-10x); + --gutter: var(--space-6x); --doc-padding: 2rem; gap: var(--gutter); padding-left: var(--space-4x); @@ -57,11 +57,11 @@ flex-direction: column-reverse; justify-content: space-between; align-items: start; - gap: var(--space-8x); + gap: var(--space-6x); } .ccip-chain-hero__chainSearch { - width: 358px; + width: 100%; } .ccip-chain-hero__details { @@ -146,6 +146,10 @@ align-items: center; } + .ccip-chain-hero__chainSearch { + width: 358px; + } + .ccip-chain-hero__details { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } @@ -157,6 +161,7 @@ } .ccip-chain-hero__content { + --gutter: var(--space-10x); grid-template-columns: 1fr 1fr; padding-left: var(--space-10x); padding-right: var(--space-10x); diff --git a/src/components/CCIP/ChainHero/LaneDetailsHero.css b/src/components/CCIP/ChainHero/LaneDetailsHero.css index cd58f44478a..a9e96457e75 100644 --- a/src/components/CCIP/ChainHero/LaneDetailsHero.css +++ b/src/components/CCIP/ChainHero/LaneDetailsHero.css @@ -15,15 +15,20 @@ .lane-details-hero__networks { display: flex; - align-items: center; + flex-direction: column; + align-items: start; gap: var(--space-6x); - font-style: normal; font-weight: var(--font-weight-medium); font-size: 28px; margin: var(--space-10x) 0; } +.lane-details-hero__networks svg { + transform: rotate(90deg); + margin-left: var(--space-4x); +} + .lane-details-hero__network { display: flex; align-items: center; @@ -63,4 +68,14 @@ .lane-details-hero__details { grid-template-columns: 1fr 2fr; } + + .lane-details-hero__networks { + flex-direction: row; + align-items: center; + } + + .lane-details-hero__networks svg { + transform: rotate(0deg); + margin-left: 0; + } } diff --git a/src/components/CCIP/Drawer/Drawer.css b/src/components/CCIP/Drawer/Drawer.css index 3f0566ca6cc..bd8fb9c0a38 100644 --- a/src/components/CCIP/Drawer/Drawer.css +++ b/src/components/CCIP/Drawer/Drawer.css @@ -31,6 +31,7 @@ .drawer__content { overflow-y: auto; + height: 100%; } .drawer__open .drawer__container { diff --git a/src/components/CCIP/Drawer/Drawer.tsx b/src/components/CCIP/Drawer/Drawer.tsx index 4905d8072fd..e5cc3889d50 100644 --- a/src/components/CCIP/Drawer/Drawer.tsx +++ b/src/components/CCIP/Drawer/Drawer.tsx @@ -73,7 +73,7 @@ function Drawer() { - {typeof $drawerContent === "function" ? $drawerContent() : $drawerContent} +
{typeof $drawerContent === "function" ? $drawerContent() : $drawerContent}
diff --git a/src/components/CCIP/Landing/ccip-landing.astro b/src/components/CCIP/Landing/ccip-landing.astro index ef79a5c16d1..54e3850d6e3 100644 --- a/src/components/CCIP/Landing/ccip-landing.astro +++ b/src/components/CCIP/Landing/ccip-landing.astro @@ -120,13 +120,13 @@ const searchLanes = getSearchLanes({ environment }) .networks__grid { display: grid; grid-template-columns: 1fr; - gap: var(--space-1x); + gap: var(--space-2x); } .tokens__grid { display: grid; - grid-template-columns: 33% 33% 33%; - gap: var(--space-1x); + grid-template-columns: 32% 32% 32%; + gap: var(--space-2x); } @media (min-width: 50em) { @@ -138,7 +138,8 @@ const searchLanes = getSearchLanes({ environment }) @media (min-width: 992px) { .layout { --doc-padding: 2rem; - flex-direction: row; + display: grid; + grid-template-columns: 1fr 1fr; gap: var(--space-24x); } diff --git a/src/components/CCIP/Search/Search.css b/src/components/CCIP/Search/Search.css index ad9a8c912e6..f81fc71ce0e 100644 --- a/src/components/CCIP/Search/Search.css +++ b/src/components/CCIP/Search/Search.css @@ -1,6 +1,6 @@ .ccip-hero__search { background-color: white; - padding: var(--space-4x); + padding: 18px; display: flex; gap: var(--space-4x); width: 100%; @@ -31,10 +31,6 @@ z-index: 3; } -.ccip-hero__search.small { - padding: var(--space-2x); -} - .ccip-hero__search input { padding: 0; border: none; @@ -79,7 +75,6 @@ font-style: normal; font-weight: 600; font-size: var(--space-4x); - color: #000000; } @@ -99,8 +94,8 @@ padding-top: var(--space-3x); padding-bottom: var(--space-3x); cursor: pointer; - padding-left: var(--space-10x); - padding-right: var(--space-10x); + padding-left: var(--space-6x); + padding-right: var(--space-6x); } .ccip-hero__search-results--small a { @@ -134,12 +129,36 @@ font-size: 18px; line-height: 24px; color: var(--gray-500); - padding-left: var(--space-10x); - padding-right: var(--space-10x); + padding-left: var(--space-6x); + padding-right: var(--space-6x); padding-top: var(--space-6x); - padding-bottom: var(--space-2x); } .ccip-hero__search-results__no-result { padding-bottom: var(--space-6x); } + +@media (min-width: 992px) { + .ccip-hero__search.small { + padding: var(--space-2x); + } + + .ccip-hero__search-results li a { + display: flex; + gap: var(--space-4x); + align-items: center; + padding-top: var(--space-3x); + padding-bottom: var(--space-3x); + cursor: pointer; + padding-left: var(--space-10x); + padding-right: var(--space-10x); + } + + .ccip-hero__search-results__title, + .ccip-hero__search-results__no-result { + padding-left: var(--space-10x); + padding-right: var(--space-10x); + padding-top: var(--space-6x); + padding-bottom: var(--space-2x); + } +} diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css index ff7a6d1c5e4..4c2e70c5352 100644 --- a/src/components/CCIP/Tables/Table.css +++ b/src/components/CCIP/Tables/Table.css @@ -10,6 +10,8 @@ .ccip-table__wrapper { overflow-x: auto; + max-width: 80vw; + margin: 0 auto; } .ccip-table th, @@ -129,6 +131,7 @@ .ccip-table__filters { display: flex; + flex-wrap: wrap-reverse; justify-content: space-between; align-items: center; gap: var(--space-4x); @@ -167,6 +170,10 @@ padding: var(--space-10x); } + .ccip-table__wrapper { + max-width: 100%; + } + .ccip-table th, .ccip-table td { width: auto; diff --git a/src/components/CCIP/Tables/TableSearchInput.css b/src/components/CCIP/Tables/TableSearchInput.css index 16f89a3bd8a..f46d5b8b55d 100644 --- a/src/components/CCIP/Tables/TableSearchInput.css +++ b/src/components/CCIP/Tables/TableSearchInput.css @@ -10,8 +10,18 @@ gap: var(--space-4x); } +.tableSearchInput:has(input) { + width: 100%; +} + .tableSearchInput input { padding: 0; border: none; outline: none; } + +@media (min-width: 768px) { + .tableSearchInput:has(input) { + width: auto; + } +} From 727568b5a171a7b7430991911524ffa95917b608 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Wed, 23 Oct 2024 16:10:35 +0300 Subject: [PATCH 3/9] fix: typo --- .../DocsNavigationMobile/DocsNavigationMobile.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx b/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx index 24a405ff2fb..064bb6a3f10 100644 --- a/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx +++ b/src/components/DocsNavigation/DocsNavigationMobile/DocsNavigationMobile.tsx @@ -3,7 +3,7 @@ import { useNavBar } from "../../Header/useNavBar/useNavBar" import DocsPickerMobile from "./DocsPickerMobile" import styles from "./docsNavigationMobile.module.css" -function DocsNavigationDesktop({ pathname, children }: { pathname: string; children?: React.ReactNode }) { +function DocsNavigationMobile({ pathname, children }: { pathname: string; children?: React.ReactNode }) { const { $navBarInfo } = useNavBar() return ( <> @@ -21,4 +21,4 @@ function DocsNavigationDesktop({ pathname, children }: { pathname: string; child ) } -export default DocsNavigationDesktop +export default DocsNavigationMobile From 8fed7c66d15ce0beb61c274b37908731ac794d20 Mon Sep 17 00:00:00 2001 From: "Mark S. Shenouda" Date: Wed, 23 Oct 2024 16:36:17 +0300 Subject: [PATCH 4/9] fix: minor css issues --- src/components/CCIP/Chain/Chain.astro | 11 +++++++++-- src/components/CCIP/ChainHero/ChainHero.css | 7 ++++--- src/components/CCIP/Landing/ccip-landing.astro | 4 ++-- src/components/CCIP/Token/Token.astro | 2 +- src/layouts/DocsLayout.astro | 2 +- 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro index 1e77f5b2978..40aa2cf286a 100644 --- a/src/components/CCIP/Chain/Chain.astro +++ b/src/components/CCIP/Chain/Chain.astro @@ -48,7 +48,14 @@ const searchLanes = getSearchLanes({ environment }) - +
.layout { --gutter: var(--space-6x); - --doc-padding: 2rem; + --doc-padding: var(--space-6x); margin: var(--space-8x) auto; display: flex; flex-direction: column; diff --git a/src/components/CCIP/ChainHero/ChainHero.css b/src/components/CCIP/ChainHero/ChainHero.css index c9fc37fcc5a..c9ce4cba1ae 100644 --- a/src/components/CCIP/ChainHero/ChainHero.css +++ b/src/components/CCIP/ChainHero/ChainHero.css @@ -37,7 +37,7 @@ .ccip-chain-hero__content { --gutter: var(--space-6x); - --doc-padding: 2rem; + --doc-padding: var(--space-6x); gap: var(--gutter); padding-left: var(--space-4x); padding-right: var(--space-4x); @@ -66,7 +66,7 @@ .ccip-chain-hero__details { display: grid; - gap: var(--space-4x); + gap: var(--space-6x); grid-template-columns: 1fr; } @@ -77,7 +77,7 @@ font-weight: 600; font-size: 14px; line-height: 22px; - padding-bottom: var(--space-4x); + padding-bottom: var(--space-2x); color: var(--gray-500); } @@ -152,6 +152,7 @@ .ccip-chain-hero__details { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + gap: var(--space-4x); } .ccip-chain-hero__feeTokens__list { diff --git a/src/components/CCIP/Landing/ccip-landing.astro b/src/components/CCIP/Landing/ccip-landing.astro index 54e3850d6e3..b30e0605f72 100644 --- a/src/components/CCIP/Landing/ccip-landing.astro +++ b/src/components/CCIP/Landing/ccip-landing.astro @@ -88,7 +88,7 @@ const searchLanes = getSearchLanes({ environment })