Skip to content

Commit 9377e24

Browse files
kevinjosethomaskevinjosethomas
committed
style: make download model modal glassmorphic
1 parent 2877a52 commit 9377e24

1 file changed

Lines changed: 98 additions & 79 deletions

File tree

‎src/components/Common/DownloadModelModal.tsx‎

Lines changed: 98 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -67,98 +67,117 @@ export const DownloadModelModal: React.FC<Props> = ({
6767
}
6868
return (
6969
<motion.div
70-
className="absolute left-0 top-0 z-20 flex h-screen w-screen flex-col items-center justify-center bg-black/90 px-4 md:px-0"
70+
className="fixed inset-0 z-50 flex items-center justify-center px-4 md:px-0"
7171
initial={{ opacity: 0 }}
7272
animate={{ opacity: 1 }}
7373
exit={{ opacity: 0 }}
7474
transition={{ duration: 0.1 }}
7575
data-testid="download-modal"
7676
onTouchMove={(e) => e.preventDefault()}
7777
>
78+
<div className="pointer-events-auto absolute inset-0 bg-black/80 backdrop-blur-sm" />
79+
80+
<div
81+
className="pointer-events-none absolute inset-0"
82+
style={{
83+
background:
84+
'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
85+
}}
86+
/>
7887
<motion.div
79-
className="flex w-full flex-col gap-5 rounded-md border border-background-1 bg-backdrop p-5 md:w-[min(750px,50vw)] md:p-8"
88+
className="relative z-10 w-full max-w-[min(750px,50vw)]"
8089
initial={{ y: 10, opacity: 0 }}
8190
animate={{ y: 0, opacity: 1 }}
8291
exit={{ y: 10, opacity: 0 }}
83-
transition={{ duration: 0.6 }}
92+
transition={{ duration: 0.2 }}
8493
>
85-
<div className="flex items-center gap-2">
86-
<span className="material-symbols-outlined text-2xl md:text-3xl">
87-
auto_awesome
88-
</span>
89-
<h1 className="text-2xl font-bold md:text-3xl">
90-
Download Our New Model
91-
</h1>
92-
</div>
93-
<div className="flex flex-col gap-3 text-sm md:text-base">
94-
<p className="text-primary/80">
95-
Our newest model, Maia 2, provides richer and more in-depth
96-
analysis, allowing for:
97-
</p>
98-
<ul className="flex list-inside flex-col gap-1.5 pl-2 text-primary/80">
99-
<li>
100-
✨ Detailed move evaluations tailored to different rating levels
101-
</li>
102-
<li>
103-
🧠 Insights into how players of various strengths approach the
104-
game
105-
</li>
106-
<li>
107-
⚡ Faster, local analysis without needing to send data to a server
108-
</li>
109-
</ul>
110-
<p className="text-primary/80">
111-
Maia 2 will run entirely on your device but requires a one-time 90mb
112-
download.
113-
</p>
114-
</div>
115-
<div className="mt-6 flex w-full flex-col items-end justify-end gap-2 md:flex-row">
116-
{progress ? (
117-
<div className="relative order-2 flex h-8 w-full items-center justify-start overflow-hidden rounded bg-human-4/20 px-3 md:order-1 md:h-10 md:w-auto md:flex-1">
118-
<p className="z-10 text-xs text-primary md:text-base">
119-
{Math.round(progress)}%
120-
</p>
121-
<div
122-
className="absolute left-0 top-0 z-0 h-10 rounded-l bg-human-4/80 transition-all duration-500 ease-out"
123-
style={{ width: `${progress}%` }}
124-
/>
125-
</div>
126-
) : null}
127-
<div className="order-1 flex flex-row gap-2 md:order-2">
128-
<Link
129-
href="/"
130-
className="order-2 flex h-8 cursor-pointer select-none items-center gap-1 self-end rounded bg-background-2 px-3 text-sm transition duration-200 hover:bg-background-3 md:order-3 md:h-10 md:px-4 md:text-base"
131-
>
132-
<p>Return Home</p>
133-
</Link>
134-
<div
135-
tabIndex={0}
136-
role="button"
137-
className={`order-2 flex h-8 select-none items-center gap-1 self-end rounded px-3 text-sm transition duration-200 md:order-3 md:h-10 md:px-4 md:text-base ${
138-
isDownloading || progress >= 100
139-
? 'cursor-not-allowed bg-human-4/50'
140-
: 'cursor-pointer bg-human-4 hover:bg-human-4/90'
141-
}`}
142-
onClick={handleDownload}
143-
onKeyDown={(e) => {
144-
if (e.key === 'Enter' || e.key === ' ') {
145-
handleDownload()
146-
}
147-
}}
148-
>
149-
{isDownloading ? (
150-
<span className="material-symbols-outlined animate-spin text-lg md:text-xl">
151-
progress_activity
152-
</span>
153-
) : (
154-
<span className="material-symbols-outlined text-lg md:text-xl">
155-
download
94+
<div className="group relative flex w-full flex-col gap-5 overflow-hidden rounded-lg border border-glassBorder bg-glass p-5 text-left text-white backdrop-blur-xl transition-all duration-300 md:p-8">
95+
<div className="flex items-center gap-3">
96+
<span className="material-symbols-outlined material-symbols-filled text-3xl text-white/90">
97+
auto_awesome
98+
</span>
99+
<h1 className="text-2xl font-bold text-white md:text-3xl">
100+
Download Our New Model
101+
</h1>
102+
</div>
103+
104+
<div className="flex flex-col gap-3 text-sm md:text-base">
105+
<p className="text-white/80">
106+
Our newest model, Maia 2, provides richer and more in-depth
107+
analysis, allowing for:
108+
</p>
109+
<ul className="flex list-inside flex-col gap-1.5 pl-2 text-white/80">
110+
<li>
111+
✨ Detailed move evaluations tailored to different rating levels
112+
</li>
113+
<li>
114+
🧠 Insights into how players of various strengths approach the
115+
game
116+
</li>
117+
<li>
118+
⚡ Faster, local analysis without needing to send data to a
119+
server
120+
</li>
121+
</ul>
122+
<p className="text-white/80">
123+
Maia 2 runs entirely on your device and requires a one-time 90mb
124+
download.
125+
</p>
126+
</div>
127+
128+
<div className="mt-4 flex w-full flex-col items-end justify-end gap-2 md:mt-6 md:flex-row">
129+
{progress ? (
130+
<div className="relative order-2 flex h-8 w-full items-center overflow-hidden rounded-md border border-glassBorder bg-[rgb(var(--color-surface-2))] px-3 md:order-1 md:h-10 md:flex-1">
131+
<p className="z-10 text-xs text-white/90 md:text-sm">
132+
{Math.round(progress)}%
133+
</p>
134+
<div
135+
className="absolute left-0 top-0 z-0 h-full rounded-l-md bg-human-4 transition-all duration-500 ease-out"
136+
style={{ width: `${progress}%` }}
137+
/>
138+
</div>
139+
) : null}
140+
141+
<div className="order-1 flex flex-row gap-2 md:order-2">
142+
<Link
143+
href="/"
144+
className="group flex h-8 cursor-pointer select-none items-center gap-2 rounded-md border border-glassBorder bg-[rgb(var(--color-surface-2))] px-3 text-sm text-white/90 transition-all duration-200 hover:bg-[rgb(var(--color-surface))] md:h-10 md:px-4"
145+
>
146+
<span className="material-symbols-outlined text-base text-white/70 group-hover:text-white/90 md:text-lg">
147+
home
156148
</span>
157-
)}
158-
<p>
159-
{isDownloading ? 'Downloading...' : 'Download Maia 2'}{' '}
160-
<span className="text-xs text-primary/60">(90mb)</span>
161-
</p>
149+
<p>Return Home</p>
150+
</Link>
151+
152+
<div
153+
tabIndex={0}
154+
role="button"
155+
className={`flex h-8 select-none items-center gap-2 rounded-md px-3 text-sm text-white transition-all duration-200 md:h-10 md:px-4 ${
156+
isDownloading || progress >= 100
157+
? 'cursor-not-allowed border border-human-4/30 bg-human-4/50'
158+
: 'cursor-pointer border border-human-4/30 bg-human-4 hover:border-human-4/50 hover:bg-human-4/90'
159+
}`}
160+
onClick={handleDownload}
161+
onKeyDown={(e) => {
162+
if (e.key === 'Enter' || e.key === ' ') {
163+
handleDownload()
164+
}
165+
}}
166+
>
167+
{isDownloading ? (
168+
<span className="material-symbols-outlined animate-spin text-lg md:text-xl">
169+
progress_activity
170+
</span>
171+
) : (
172+
<span className="material-symbols-outlined text-lg md:text-xl">
173+
download
174+
</span>
175+
)}
176+
<p className="font-medium">
177+
{isDownloading ? 'Downloading...' : 'Download Maia 2'}{' '}
178+
<span className="text-xs text-white/70">(90mb)</span>
179+
</p>
180+
</div>
162181
</div>
163182
</div>
164183
</div>

0 commit comments

Comments
 (0)