Skip to content

Commit 89d310e

Browse files
corwintinescorwintines
authored
Merge pull request #15164 from TylerAPfledderer/refactor/refine-dashboard-page-design
refactor(resources): refine page design to Figma spec
2 parents 70a1ea4 + 686c45a commit 89d310e

File tree

4 files changed

+153
-101
lines changed

4 files changed

+153
-101
lines changed

‎src/components/Resources/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ export const ResourceItem = ({
3131
"flex gap-2 border-b p-3 text-body no-underline last-of-type:border-0 hover:bg-background-highlight hover:text-body",
3232
className
3333
)}
34+
customEventOptions={{
35+
eventCategory: "dashboard",
36+
eventAction: "links",
37+
eventName: title,
38+
}}
3439
hideArrow
3540
>
3641
<div className="my-1 size-[18px] shrink-0">

‎src/intl/en/page-resources.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,12 @@
7676
"page-resources-hero-title": "Resources",
7777
"page-resources-hero-header": "Ethereum Dashboards",
7878
"page-resources-hero-description": "Discover a list of community-curated resources to stay updated on all major Ethereum ecosystem developments.",
79-
"page-resources-find-more": "Find more great resources on <a href=\"https://ethereumdashboards.com\" target=\"_blank\">ethereumdashboards.com</a>",
79+
"page-resources-find-more": "Find more great resources on",
8080
"page-resources-contribute-title": "Contribute",
8181
"page-resources-contribute-description": "This dashboard is a living page that requires frequent updates. Help find the best resources to give an overview of the Ethereum ecosystem.",
8282
"page-resources-suggest-resource": "Suggest a resource",
8383
"page-resources-found-bug": "Found a bug",
8484
"page-resources-whats-on-this-page": "What's on this page",
8585
"page-resources-banner-notification-message": "Resources dashboard is new!",
8686
"page-resources-share-feedback": "Please share your feedback with us"
87-
}
87+
}

‎src/pages/[locale]/index.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,11 @@ const HomePage = ({
371371
href="/resources/"
372372
isSecondary
373373
variant="outline"
374+
customEventOptions={{
375+
eventCategory: eventCategory,
376+
eventAction: "ethereum_activity",
377+
eventName: "ethereum_activity",
378+
}}
374379
>
375380
{t("page-index:page-index-activity-action")} <ChevronNext />
376381
</ButtonLink>

‎src/pages/[locale]/resources.tsx

Lines changed: 141 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { ResourceItem, ResourcesContainer } from "@/components/Resources"
1313
import { useResources } from "@/components/Resources/useResources"
1414
import Translation from "@/components/Translation"
1515
import { ButtonLink } from "@/components/ui/buttons/Button"
16+
import { Stack, VStack } from "@/components/ui/flex"
1617
import Link from "@/components/ui/Link"
1718
import { Section } from "@/components/ui/section"
1819

@@ -36,6 +37,8 @@ import loadNamespaces from "@/i18n/loadNamespaces"
3637
import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
3738
import heroImg from "@/public/images/heroes/guides-hub-hero.jpg"
3839

40+
const EVENT_CATEGORY = "dashboard"
41+
3942
// In seconds
4043
const REVALIDATE_TIME = BASE_TIME_UNIT * 1
4144

@@ -103,6 +106,11 @@ const ResourcesPage = ({ txCostsMedianUsd }) => {
103106
GITHUB_REPO_URL
104107
).toString()}
105108
className="visited:text-white"
109+
customEventOptions={{
110+
eventCategory: EVENT_CATEGORY,
111+
eventAction: "links",
112+
eventName: "Ethereum.org Github Page Feedback",
113+
}}
106114
>
107115
{t("page-resources-share-feedback")}
108116
</Link>
@@ -114,112 +122,146 @@ const ResourcesPage = ({ txCostsMedianUsd }) => {
114122
description={t("page-resources-hero-description")}
115123
heroImg={heroImg}
116124
/>
117-
118-
<div className="sticky top-1 my-8 flex flex-col items-center gap-3 py-4 text-center md:top-6 md:px-2">
119-
<div className="my-2 text-body-medium">
120-
{t("page-resources-whats-on-this-page")}
121-
</div>
122-
<nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
123-
{resourceSections.map(({ key, title, icon }) => (
124-
<ButtonLink
125-
key={key}
126-
href={`#${key}`}
127-
variant="ghost"
128-
isSecondary
129-
className={cn(
130-
"relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
131-
activeSection === key && "!text-primary"
132-
)}
133-
>
134-
{activeSection === key && (
135-
<motion.div
136-
layoutId="active-section-highlight"
137-
className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
138-
/>
139-
)}
140-
{icon && <span className="z-10 text-lg">{icon}</span>}
141-
<span className="relative z-10">{title}</span>
142-
</ButtonLink>
143-
))}
144-
</nav>
145-
</div>
146-
147-
{resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
148-
<section id={key} key={key} className="mb-16 scroll-mt-40">
149-
<div className="group flex w-full items-center gap-3 border-b bg-transparent px-4 py-6">
150-
<div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
151-
{icon || <StackIcon />}
152-
</div>
153-
<h2 className="flex-1 text-start font-black">{sectionTitle}</h2>
125+
<Stack className="gap-4 px-2 py-6 md:gap-8 md:px-4 lg:px-8 xl:gap-11">
126+
<div className="sticky top-5 flex flex-col items-center gap-3 text-center md:top-6 md:px-2">
127+
<div className="my-2 text-body-medium">
128+
{t("page-resources-whats-on-this-page")}
154129
</div>
155-
<div className="grid grid-cols-1 gap-8 px-4 pb-12 pt-8 md:pb-12 md:pt-8 lg:grid-cols-2">
156-
{boxes.map(({ title, metric, items, className }) => (
157-
<div
130+
<nav className="z-sticky mx-4 flex max-w-full gap-1 overflow-x-auto bg-background p-2 shadow md:max-w-[calc(100%-2rem)] md:rounded-2xl md:border md:p-0.5 md:shadow-lg">
131+
{resourceSections.map(({ key, title, icon }) => (
132+
<ButtonLink
133+
key={key}
134+
href={`#${key}`}
135+
variant="ghost"
136+
isSecondary
158137
className={cn(
159-
"overflow-hidden rounded-2xl border shadow-lg",
160-
className
138+
"relative text-nowrap rounded-xl px-4 py-2 text-sm [&_svg]:shrink-0 [&_svg]:text-sm",
139+
activeSection === key && "!text-primary"
161140
)}
162-
key={title}
141+
customEventOptions={{
142+
eventCategory: EVENT_CATEGORY,
143+
eventAction: "whats_on_this_page",
144+
eventName: key,
145+
}}
163146
>
164-
<div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
165-
{title}
147+
{activeSection === key && (
148+
<motion.div
149+
layoutId="active-section-highlight"
150+
className="absolute inset-0 z-0 rounded-xl bg-primary-low-contrast"
151+
/>
152+
)}
153+
{icon && <span className="z-10 text-lg">{icon}</span>}
154+
<span className="relative z-10">{title}</span>
155+
</ButtonLink>
156+
))}
157+
</nav>
158+
</div>
159+
<Stack className="gap-11 pt-12 md:gap-16 lg:gap-24">
160+
{resourceSections.map(({ key, icon, title: sectionTitle, boxes }) => (
161+
<Stack key={key} asChild>
162+
<section id={key} className="scroll-mt-40 gap-8 md:gap-6">
163+
<div className="group flex w-full items-center gap-4 border-b bg-transparent px-2 py-4">
164+
<div className="grid size-12 place-items-center rounded-lg border border-border-low-contrast text-2xl [&_svg]:shrink-0">
165+
{icon || <StackIcon />}
166+
</div>
167+
<h2 className="flex-1 text-start font-black">
168+
{sectionTitle}
169+
</h2>
166170
</div>
167-
<div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
168-
{metric && metric}
169-
<ResourcesContainer>
170-
{items.map((item) => (
171-
<ResourceItem item={item} key={item.title} />
172-
))}
173-
</ResourcesContainer>
171+
<div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-y-6">
172+
{boxes.map(({ title, metric, items, className }) => (
173+
<div
174+
className={cn(
175+
"overflow-hidden rounded-2xl border shadow-lg",
176+
className
177+
)}
178+
key={title}
179+
>
180+
<div className="border-b bg-[#ffffff] px-6 py-4 font-bold dark:bg-[#171717]">
181+
{title}
182+
</div>
183+
<div className="h-full bg-background bg-gradient-to-br from-white to-primary/10 px-2 py-6 dark:from-transparent dark:to-primary/10">
184+
{metric && metric}
185+
<ResourcesContainer>
186+
{items.map((item) => (
187+
<ResourceItem item={item} key={item.title} />
188+
))}
189+
</ResourcesContainer>
190+
</div>
191+
</div>
192+
))}
174193
</div>
175-
</div>
176-
))}
177-
</div>
178-
</section>
179-
))}
180-
181-
<div className="mb-20 text-center">
182-
<Translation id="page-resources:page-resources-find-more" />
183-
</div>
184-
185-
<Section
186-
id="contribute"
187-
className={cn(
188-
"before:absolute before:-inset-px before:bottom-0 before:z-hide before:rounded-[calc(theme(borderRadius.4xl)+1px)] before:content-['']", // Border/gradient positioning
189-
"before:bg-gradient-to-b before:from-primary-hover/[0.24] before:to-primary-hover/[0.08] before:dark:from-primary-hover/40 before:dark:to-primary-hover/20", // Border/gradient coloring
190-
"relative inset-0 rounded-4xl bg-background" // Paint background color over card portion
191-
)}
192-
>
193-
<div className="mb-12 flex flex-col gap-y-8 rounded-4xl bg-radial-a px-8 py-12 lg:mb-32 xl:mb-36">
194-
<div className="flex flex-col gap-y-4 text-center">
195-
<h2>{t("page-resources-contribute-title")}</h2>
196-
<p>{t("page-resources-contribute-description")}</p>
197-
</div>
198-
<div className="mx-auto grid grid-cols-1 gap-16 md:grid-cols-2">
199-
{/* TODO: Add issue template for resource listing and redirect to new template */}
200-
<ButtonLink
201-
href={new URL(
202-
"issues/new?template=feature_request.yaml",
203-
GITHUB_REPO_URL
204-
).toString()}
205-
variant="outline"
206-
isSecondary
207-
>
208-
{t("page-resources-suggest-resource")}
209-
</ButtonLink>
210-
<ButtonLink
211-
href={new URL(
212-
"issues/new?template=bug_report.yaml",
213-
GITHUB_REPO_URL
214-
).toString()}
215-
variant="outline"
216-
isSecondary
217-
>
218-
<FaGithub /> {t("page-resources-found-bug")}
219-
</ButtonLink>
194+
</section>
195+
</Stack>
196+
))}
197+
</Stack>
198+
199+
<VStack className="gap-4 py-16">
200+
<div className="text-center font-bold">
201+
<Translation id="page-resources:page-resources-find-more" />
220202
</div>
221-
</div>
222-
</Section>
203+
<ButtonLink
204+
href="https://ethereumdashboards.com"
205+
size="lg"
206+
customEventOptions={{
207+
eventCategory: EVENT_CATEGORY,
208+
eventAction: "links",
209+
eventName: "ethereumdashboards.com",
210+
}}
211+
>
212+
ethereumdashboards.com
213+
</ButtonLink>
214+
</VStack>
215+
216+
<Section
217+
id="contribute"
218+
className="relative rounded-4xl border border-body/5 bg-background"
219+
>
220+
<VStack className="rounded-4xl bg-radial-a px-4 py-6 md:py-12">
221+
<Stack className="max-w-xl gap-y-10 py-6 lg:max-w-[700px]">
222+
<div className="flex flex-col gap-y-4 text-center">
223+
<h2>{t("page-resources-contribute-title")}</h2>
224+
<p className="text-lg">
225+
{t("page-resources-contribute-description")}
226+
</p>
227+
</div>
228+
<div className="mx-auto grid grid-cols-1 gap-x-3 gap-y-4 md:grid-cols-2">
229+
{/* TODO: Add issue template for resource listing and redirect to new template */}
230+
<ButtonLink
231+
href={new URL(
232+
"issues/new?template=feature_request.yaml",
233+
GITHUB_REPO_URL
234+
).toString()}
235+
variant="outline"
236+
isSecondary
237+
customEventOptions={{
238+
eventCategory: EVENT_CATEGORY,
239+
eventAction: "links",
240+
eventName: "Ethereum.org Github Feature Request",
241+
}}
242+
>
243+
{t("page-resources-suggest-resource")}
244+
</ButtonLink>
245+
<ButtonLink
246+
href={new URL(
247+
"issues/new?template=bug_report.yaml",
248+
GITHUB_REPO_URL
249+
).toString()}
250+
variant="outline"
251+
isSecondary
252+
customEventOptions={{
253+
eventCategory: EVENT_CATEGORY,
254+
eventAction: "links",
255+
eventName: "Ethereum.org Github Bug Report",
256+
}}
257+
>
258+
<FaGithub /> {t("page-resources-found-bug")}
259+
</ButtonLink>
260+
</div>
261+
</Stack>
262+
</VStack>
263+
</Section>
264+
</Stack>
223265
</MainArticle>
224266
)
225267
}

0 commit comments

Comments
 (0)