vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-31 21:50:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 19

fix(stats): refine newsletter modal

Browse source
This commit is contained in:
Adam 2026-05-29 08:07:09 -05:00
parent 76dbe10ad7
commit bccebb8a36
No known key found for this signature in database
GPG key ID: 9CB48779AF150E75
2 changed files with 69 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

84
packages/stats/app/src/routes/index.css
View file

@ -474,12 +474,13 @@
position: relative;
z-index: 1;
width: min(374px, calc(100vw - 16px));
overflow: hidden;
background: var(--stats-layer);
max-height: calc(100dvh - 16px);
overflow: auto;
background: #fafafa;
box-shadow:
0 0 0 0.5px #00000024,
0 16px 32px #0000001f,
0 8px 16px #00000014;
0 0 0 0.5px #0000001f,
0 4px 8px #00000014,
0 8px 16px #0000000a;
}
[data-page="stats"] [data-slot="modal-brand"] {
@ -487,7 +488,7 @@
display: flex;
align-items: center;
justify-content: center;
min-height: 122px;
height: 122px;
background: #242424;
color: #ffffff;
}
@ -512,7 +513,7 @@
border-radius: 0;
appearance: none;
background: transparent;
color: #ffffff;
color: #808080;
cursor: pointer;
}
@ -524,17 +525,17 @@
display: grid;
gap: 24px;
padding: 24px 12px 12px;
background: var(--stats-layer);
background: #fafafa;
}
[data-page="stats"] [data-slot="modal-intro"] {
display: grid;
gap: 8px;
gap: 4px;
text-align: center;
}
[data-page="stats"] [data-slot="modal-intro"] h2 {
color: var(--stats-text);
color: #161616;
font-size: 16px;
font-weight: 500;
line-height: 24px;
@ -542,7 +543,7 @@
}
[data-page="stats"] [data-slot="modal-intro"] p {
color: var(--stats-muted);
color: #5c5c5c;
font-size: 16px;
font-weight: 400;
line-height: 24px;
@ -550,7 +551,7 @@
[data-page="stats"] [data-slot="subscribe-form"] {
display: grid;
gap: 8px;
gap: 12px;
}
[data-page="stats"] [data-slot="subscribe-form"] input,
@ -568,24 +569,49 @@
[data-page="stats"] [data-slot="subscribe-form"] input {
padding: 0 12px;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
color: var(--stats-text);
border: 0;
background: #ffffff;
color: #161616;
box-shadow:
0 0 0 0.5px #00000024,
0 1px 1.5px #0000001a;
}
[data-page="stats"] [data-slot="subscribe-form"] input::placeholder {
color: var(--stats-faint);
color: #808080;
}
[data-page="stats"] [data-slot="subscribe-form"] button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 0;
background: #242424;
color: #ffffff;
font-weight: 500;
cursor: pointer;
box-shadow:
0 0 0 0.5px #3a3a3a,
0 1px 1.5px #00000033,
inset 0 -1px 2px #0000000f,
inset 0 1px 2px #ffffff24;
}
[data-page="stats"] [data-slot="subscribe-form"] button::before {
position: absolute;
top: 0.25px;
right: 0;
left: 0;
height: 20px;
pointer-events: none;
content: "";
background: linear-gradient(180deg, #ffffff00 0%, #ffffff12 100%);
}
[data-page="stats"] [data-slot="subscribe-form"] button span {
position: relative;
}
[data-page="stats"] [data-slot="subscribe-form"] button:disabled {
@ -2245,6 +2271,20 @@
0 2px 6px #00000052;
}
[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:hover [data-slot="leader-watermark"],
[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:focus-visible [data-slot="leader-watermark"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:hover
[data-slot="leader-watermark"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:focus-visible
[data-slot="leader-watermark"] {
color: var(--stats-line-strong);
opacity: 0.78;
}
[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="neutral"],
[data-page="stats"][data-theme="dark"] [data-slot="menu-button"],
:root[data-stats-theme="dark"]
@ -2355,6 +2395,18 @@
0 2px 6px #00000052;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:hover
[data-slot="leader-watermark"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:focus-visible
[data-slot="leader-watermark"] {
color: var(--stats-line-strong);
opacity: 0.78;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="neutral"],

2
packages/stats/app/src/routes/index.tsx
View file

@ -1672,7 +1672,7 @@ function SubscribeModal(props: { onClose: () => void }) {
>
<input ref={input} type="email" name="email" placeholder="Email address" required />
<button type="submit" disabled={status() === "pending"}>
{status() === "pending" ? "Subscribing..." : "Subscribe"}
<span>{status() === "pending" ? "Subscribing..." : "Subscribe"}</span>
</button>
</form>
<div data-slot="subscribe-feedback" aria-live="polite">