Skip to content

Commit 9328f18

Browse files
cprussincprussin
committed
feat(staking): more mobile improvements
1 parent 9109f5f commit 9328f18

File tree

8 files changed

+29
-26
lines changed

8 files changed

+29
-26
lines changed

‎apps/staking/src/components/Dashboard/index.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -141,13 +141,13 @@ export const Dashboard = ({
141141
<Tabs
142142
selectedKey={tab}
143143
onSelectionChange={setTab}
144-
className="group border-neutral-600/50 data-[empty]:mb-20 data-[empty]:mt-6 data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 sm:p-4 data-[empty]:md:border-0 data-[empty]:md:bg-transparent data-[empty]:md:p-0"
144+
className="group border-neutral-600/50 data-[empty]:my-[5dvh] data-[empty]:border data-[empty]:bg-white/10 data-[empty]:p-4 sm:p-4 data-[empty]:sm:my-0 data-[empty]:sm:border-0 data-[empty]:sm:bg-transparent data-[empty]:sm:p-0"
145145
{...(tab === TabIds.Empty && { "data-empty": true })}
146146
>
147-
<h1 className="my-4 hidden text-center text-3xl/tight font-light group-data-[empty]:block md:mb-14 md:mt-8 md:text-5xl">
147+
<h1 className="my-4 hidden text-center text-xl/tight font-light group-data-[empty]:block sm:mb-6 sm:text-3xl lg:my-14 lg:text-5xl">
148148
Choose Your Journey
149149
</h1>
150-
<TabList className="sticky top-header-height z-10 flex flex-row items-stretch justify-center group-data-[empty]:mx-auto group-data-[empty]:max-w-7xl group-data-[empty]:flex-col group-data-[empty]:gap-2 group-data-[empty]:md:flex-row">
150+
<TabList className="sticky top-header-height z-10 flex flex-row items-stretch justify-center group-data-[empty]:mx-auto group-data-[empty]:max-w-7xl group-data-[empty]:flex-col group-data-[empty]:gap-2 group-data-[empty]:sm:flex-row">
151151
<Tab id={TabIds.Empty} className="hidden" />
152152
<Journey
153153
longText="Oracle Integrity Staking (OIS)"
@@ -236,24 +236,24 @@ const Journey = ({
236236
}: JourneyProps) => (
237237
<Tab
238238
className={clsx(
239-
"group/tab flex flex-1 cursor-pointer flex-col items-center bg-pythpurple-800 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default group-data-[empty]:md:bg-transparent",
239+
"group/tab flex flex-1 cursor-pointer flex-col items-center bg-pythpurple-800 focus:outline-none focus-visible:ring-1 focus-visible:ring-pythpurple-400 selected:cursor-default group-data-[empty]:sm:bg-transparent",
240240
className,
241241
)}
242242
{...props}
243243
>
244-
<div className="relative hidden w-4/5 opacity-30 transition group-hover/tab:opacity-100 group-data-[empty]:md:block">
245-
<div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
246-
<Image src={image} alt="" className="size-full" />
247-
<div className="absolute inset-0 top-16 text-center text-2xl text-pythpurple-800 lg:text-3xl">
248-
{children}
249-
</div>
250-
</div>
251-
<div className="grid size-full place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 md:p-4 md:text-lg">
244+
<div className="grid size-full flex-none basis-0 place-content-center border border-neutral-600/50 bg-pythpurple-800 p-2 text-center font-semibold transition group-hover/tab:bg-pythpurple-600/30 group-selected/tab:border-pythpurple-400/60 group-selected/tab:bg-pythpurple-600/60 group-hover/tab:group-selected/tab:bg-pythpurple-600/60 sm:p-4 sm:text-lg">
252245
<span className="hidden group-data-[empty]:inline sm:inline">
253246
{longText}
254247
</span>
255248
<span className="group-data-[empty]:hidden sm:hidden">{shortText}</span>
256249
</div>
250+
<div className="relative hidden max-h-[40dvh] w-4/5 flex-none overflow-hidden opacity-30 transition group-hover/tab:opacity-100 group-data-[empty]:sm:block">
251+
<div className="absolute inset-0 bg-[#E6DAFE] mix-blend-color" />
252+
<Image src={image} alt="" className="size-full object-cover object-top" />
253+
<div className="absolute inset-0 top-16 text-center text-xl text-pythpurple-800 md:text-2xl lg:text-3xl">
254+
{children}
255+
</div>
256+
</div>
257257
</Tab>
258258
);
259259

‎apps/staking/src/components/Footer/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ export const Footer = ({
3838
}: Omit<HTMLAttributes<HTMLElement>, "children">) => (
3939
<footer
4040
className={clsx(
41-
"mt-4 text-xs font-light sm:sticky sm:bottom-0 lg:px-4",
41+
"text-xs font-light sm:sticky sm:bottom-0 lg:px-4",
4242
className,
4343
)}
4444
{...props}
4545
>
4646
<div className="border-t border-neutral-600/50 bg-pythpurple-800 lg:border-x">
47-
<MaxWidth className="flex flex-col items-center gap-10 py-8 sm:h-16 sm:flex-row sm:justify-between lg:-mx-4">
47+
<MaxWidth className="flex h-48 flex-col items-center justify-between overflow-hidden py-8 sm:h-16 sm:flex-row sm:gap-10 lg:-mx-4">
4848
<div className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 md:gap-8">
4949
<Link href="https://www.pyth.network" target="_blank">
5050
<Logo className="h-10 sm:h-8" />

‎apps/staking/src/components/Guide/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@ export const Guide = ({ title, description, steps, ...props }: Props) => {
5151

5252
return (
5353
<ModalDialog title={title} {...props}>
54-
<div className="my-12 max-w-prose opacity-60">{description}</div>
54+
<div className="mb-6 max-w-prose opacity-60 md:mb-12">{description}</div>
5555
<Tabs className="lg:bg-black/40">
5656
<div ref={scrollTarget} />
5757
<TabList
5858
items={stepsWithIndices}
59-
className="top-[calc(-1_*_(2rem_+_1px))] z-10 flex flex-col bg-[#100E21] sm:top-[calc(-1_*_(4rem_+_1px))] md:sticky md:flex-row lg:flex-row"
59+
className="top-[calc(-1_*_(2rem_+_1px))] z-10 flex flex-col bg-[#100E21] xs:top-[calc(-1_*_(4rem_+_1px))] sm:top-[calc(-1_*_(8rem_+_1px))] md:sticky md:flex-row lg:flex-row"
6060
>
6161
{({ title, icon: Icon, index }) => (
6262
<Tab

‎apps/staking/src/components/Header/index.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,7 @@ export const Header = ({
1212
className,
1313
...props
1414
}: Omit<HTMLAttributes<HTMLElement>, "children">) => (
15-
<header
16-
className={clsx("sticky top-0 mb-4 w-full lg:px-4", className)}
17-
{...props}
18-
>
15+
<header className={clsx("sticky top-0 w-full lg:px-4", className)} {...props}>
1916
<div className="border-b border-neutral-600/50 bg-pythpurple-800 lg:border-x">
2017
<MaxWidth className="flex h-header items-center justify-between gap-2 lg:-mx-4">
2118
<Logo className="hidden max-h-full py-4 text-pythpurple-100 sm:block" />

‎apps/staking/src/components/ModalDialog/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,16 @@ export const ModalDialog = ({
5353
</Button>
5454
<Heading
5555
className={clsx("mr-10 text-3xl font-light", {
56-
"mb-10": description === undefined,
56+
"mb-4 md:mb-10": description === undefined,
5757
})}
5858
slot="title"
5959
>
6060
{title}
6161
</Heading>
6262
{description && (
63-
<p className="mb-10 mt-2 max-w-96 opacity-60">{description}</p>
63+
<p className="mb-4 mt-2 max-w-96 opacity-60 md:mb-10">
64+
{description}
65+
</p>
6466
)}
6567
{typeof children === "function" ? children(options) : children}
6668
{closeButtonText !== undefined && (

‎apps/staking/src/components/NoWalletHome/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const NoWalletHome = () => {
4545

4646
return (
4747
<main className="flex flex-col items-center">
48-
<div className="mb-20 mt-12 flex flex-col gap-12 text-center">
48+
<div className="mb-10 mt-6 flex flex-col gap-6 text-center md:mb-20 md:mt-12 md:gap-12">
4949
<div className="text-sm/normal tracking-[0.5rem]">
5050
WELCOME
5151
<br />

‎apps/staking/src/components/ProgramSection/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,9 @@ export const ProgramSection = ({
4040
<div className="mx-auto flex max-w-4xl flex-col gap-2 px-2 pb-6 sm:px-6 sm:py-10">
4141
<div className="flex flex-row items-start gap-8">
4242
<div className="grow">
43-
<h1 className="text-xl font-light sm:mb-2 sm:text-3xl">{name}</h1>
43+
<h1 className="text-lg font-light xs:text-xl sm:mb-2 sm:text-2xl md:text-3xl">
44+
{name}
45+
</h1>
4446
<div className="text-sm opacity-60 sm:text-lg md:font-semibold md:opacity-100">
4547
{tagline}
4648
</div>
@@ -244,7 +246,7 @@ const Position = ({
244246
}: PositionProps) => (
245247
<div
246248
className={clsx(
247-
"flex w-full flex-col overflow-hidden border border-neutral-600/50 bg-white/5 p-4 lg:max-w-64 lg:bg-pythpurple-800 lg:p-6",
249+
"mx-auto flex w-full max-w-64 flex-col overflow-hidden border border-neutral-600/50 bg-white/5 p-4 md:mx-0 lg:bg-pythpurple-800 lg:p-6",
248250
className,
249251
)}
250252
>

‎apps/staking/src/components/Root/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@ export const Root = ({ children }: Props) => (
6666
>
6767
<body className="grid min-h-dvh grid-rows-[auto_1fr_auto] text-pythpurple-100 [background:radial-gradient(20rem_50rem_at_50rem_10rem,_rgba(119,_49,_234,_0.20)_0%,_rgba(17,_15,_35,_0.00)_100rem),_#0A0814] selection:bg-pythpurple-600/60">
6868
<Header className="z-10" />
69-
<MaxWidth className="z-0 my-4">{children}</MaxWidth>
69+
<MaxWidth className="z-0 min-h-[calc(100dvh_-_var(--header-height))] py-8 sm:min-h-0">
70+
{children}
71+
</MaxWidth>
7072
<Footer className="z-10" />
7173
</body>
7274
{GOOGLE_ANALYTICS_ID && (

0 commit comments

Comments
 (0)