Skip to content

Commit 69282f4

Browse files
MohamedH1998ask-bonk[bot]
MohamedH1998
and
ask-bonk[bot]
authored
style: improve sidebar item layout, focus style, and spacing (#29078)
* style: improve sidebar item layout, focus style, and spacing * fix: change icon path * fix: revert icon path * fix: fix build error * style: PR comment fixes * style: refine sidebar * style: show active state in parents of nested items * fix: ci failure * style: improve theming * fix: improve animation * Update src/components/overrides/SidebarSublist.astro Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> * style: header design improvements (#29123) * style: header design tweaks * fix: align vertically * style: toc design improvements (#29124) * style: toc design improvements * fix: keyboard nav in feedback form * fix: decrease textarea rows * fix: vertical alignment of the toc * Update src/components/overrides/TableOfContents.astro Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --------- Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --------- Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com> --------- Co-authored-by: ask-bonk[bot] <249159057+ask-bonk[bot]@users.noreply.github.com>
1 parent bc9b76d commit 69282f4

File tree

13 files changed

+622
-282
lines changed

13 files changed

+622
-282
lines changed

‎astro.config.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,12 @@ export default defineConfig({
214214
"../components/Page.astro": fileURLToPath(
215215
new URL("./src/components/overrides/Page.astro", import.meta.url),
216216
),
217+
"./SidebarSublist.astro": fileURLToPath(
218+
new URL(
219+
"./src/components/overrides/SidebarSublist.astro",
220+
import.meta.url,
221+
),
222+
),
217223
},
218224
},
219225
},

‎src/components/FeedbackPrompt.tsx‎

Lines changed: 66 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { useState } from "react";
2+
import {
3+
MdOutlineThumbUp,
4+
MdOutlineThumbDown,
5+
MdCheckCircleOutline,
6+
} from "react-icons/md";
27
import { Turnstile } from "@marsidev/react-turnstile";
3-
import { MdOutlineThumbUp, MdOutlineThumbDown } from "react-icons/md";
48
import { track } from "~/util/zaraz";
59

610
type SetState<T> = React.Dispatch<React.SetStateAction<T>>;
@@ -30,26 +34,28 @@ function Buttons({
3034
setOption: SetState<"yes" | "no" | undefined>;
3135
}) {
3236
return (
33-
<>
37+
<div className="mt-3 flex gap-2">
3438
<button
3539
onClick={() => {
3640
setTitle("What did you like?");
3741
setOption("yes");
3842
}}
39-
className="cursor-pointer bg-transparent"
43+
className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-[var(--sl-color-bg-nav)] px-3 text-[13px] font-medium text-[var(--sl-color-text)] shadow-none ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] dark:hover:bg-[var(--color-cl1-gray-2)]"
4044
>
41-
<MdOutlineThumbUp className="text-sl hover:text-accent text-2xl" />
45+
<MdOutlineThumbUp size={18} className="opacity-70" />
46+
<span>Yes</span>
4247
</button>
4348
<button
4449
onClick={() => {
4550
setTitle("What went wrong?");
4651
setOption("no");
4752
}}
48-
className="cursor-pointer bg-transparent"
53+
className="inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-lg border-0 bg-[var(--sl-color-bg-nav)] px-3 text-[13px] font-medium text-[var(--sl-color-text)] shadow-none ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] dark:hover:bg-[var(--color-cl1-gray-2)]"
4954
>
50-
<MdOutlineThumbDown className="text-sl hover:text-accent text-2xl" />
55+
<MdOutlineThumbDown size={18} className="opacity-70" />
56+
<span>No</span>
5157
</button>
52-
</>
58+
</div>
5359
);
5460
}
5561

@@ -89,51 +95,84 @@ function Form({
8995
}
9096

9197
return (
92-
<form action={submit}>
93-
{questions[option].map(([label, value]) => (
94-
<label key={value} className="mb-2 block text-xs">
95-
<input
96-
type="radio"
97-
name="reason"
98-
value={value}
99-
onChange={() => setSelectedReason(true)}
100-
className="mr-2 align-middle"
101-
/>
102-
{label}
103-
</label>
104-
))}
98+
<form action={submit} className="mt-3 flex flex-col gap-2">
99+
<fieldset className="m-0 border-0 p-0">
100+
<legend className="sr-only">
101+
{option === "yes" ? "What did you like?" : "What went wrong?"}
102+
</legend>
103+
<div className="flex flex-col gap-1.5">
104+
{questions[option].map(([label, value]) => (
105+
<label
106+
key={value}
107+
className="relative flex cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-2 text-[13px] text-[var(--sl-color-text)] ring-1 ring-[var(--sl-color-hairline)] transition-colors duration-150 select-none hover:bg-[var(--color-cl1-gray-9)] hover:ring-[var(--sl-color-gray-3)] has-[:checked]:ring-[var(--sl-color-text-accent)] has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--sl-color-text-accent)] has-[:focus-visible]:outline-none dark:hover:bg-[var(--color-cl1-gray-2)]"
108+
>
109+
<input
110+
type="radio"
111+
name="reason"
112+
value={value}
113+
onChange={() => setSelectedReason(true)}
114+
className="peer absolute top-0 left-0 h-full w-full cursor-pointer opacity-0"
115+
/>
116+
{/* Outer ring — becomes accent-colored when checked or focused */}
117+
<span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full ring-1 ring-[var(--sl-color-gray-3)] transition-all duration-150 peer-checked:ring-2 peer-checked:ring-[var(--sl-color-text-accent)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--sl-color-text-accent)]">
118+
{/* Inner dot — visible when checked or focused */}
119+
<span className="h-2 w-2 scale-0 rounded-full bg-[var(--sl-color-text-accent)] transition-transform duration-150 [label:has(:checked)_&]:scale-100 [label:has(:focus-visible)_&]:scale-100" />
120+
</span>
121+
<span className="leading-tight">{label}</span>
122+
</label>
123+
))}
124+
</div>
125+
</fieldset>
105126
<textarea
106127
name="info"
128+
rows={2}
107129
placeholder="Tell us more about your experience."
108-
className="mb-2 block resize-none text-xs"
130+
className="mt-1 w-full resize-none rounded-lg border-0 bg-white px-3 py-2 text-[13px] text-[var(--sl-color-text)] ring-1 ring-[var(--sl-color-hairline)] transition-all duration-150 outline-none placeholder:text-[var(--sl-color-gray-3)] focus:ring-2 focus:ring-[var(--sl-color-text-accent)] dark:bg-[var(--sl-color-bg-nav)]"
109131
/>
110132
<Turnstile
111133
siteKey="0x4AAAAAAA645TGhxiBMQ7Gu"
112134
options={{ size: "compact" }}
113135
onSuccess={() => setPassedTurnstile(true)}
114136
/>
115-
<input
137+
<button
116138
type="submit"
117-
value="Submit"
118139
disabled={!selectedReason || !passedTurnstile}
119-
className="mt-2"
120-
/>
140+
className="mt-1 inline-flex h-8 w-max cursor-pointer items-center justify-center rounded-lg border-0 bg-[var(--sl-color-text-accent)] px-4 text-[13px] font-medium text-white shadow-none transition-colors duration-150 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
141+
>
142+
Submit
143+
</button>
121144
</form>
122145
);
123146
}
124147

148+
function SuccessState() {
149+
return (
150+
<div className="mt-3 flex items-center gap-2 rounded-lg bg-[var(--color-cl1-green-9)] px-3 py-2.5 text-[13px] text-[var(--color-cl1-green-5)] dark:bg-[var(--color-cl1-green-0)] dark:text-[var(--color-cl1-green-7)]">
151+
<MdCheckCircleOutline size={16} />
152+
<span>Thank you for your feedback!</span>
153+
</div>
154+
);
155+
}
156+
125157
export default function FeedbackPrompt() {
126158
const [title, setTitle] = useState("Was this helpful?");
127159
const [option, setOption] = useState<"yes" | "no">();
128160
const [submitted, setSubmitted] = useState(false);
129161

130162
return (
131163
<div id="feedback-form">
132-
<h2>{title}</h2>
133-
{!option && <Buttons setTitle={setTitle} setOption={setOption} />}
164+
{!submitted && (
165+
<p className="m-0 text-[11px] font-semibold tracking-widest text-[var(--sl-color-gray-3)] uppercase">
166+
{title}
167+
</p>
168+
)}
169+
{!option && !submitted && (
170+
<Buttons setTitle={setTitle} setOption={setOption} />
171+
)}
134172
{!submitted && (
135173
<Form setTitle={setTitle} setSubmitted={setSubmitted} option={option} />
136174
)}
175+
{submitted && <SuccessState />}
137176
</div>
138177
);
139178
}

‎src/components/HeaderDropdowns.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
3434
const { refs, floatingStyles, context } = useFloating({
3535
open: isOpen,
3636
onOpenChange: setIsOpen,
37-
middleware: [shift(), offset(5)],
37+
middleware: [shift(), offset(8)],
3838
whileElementsMounted: autoUpdate,
3939
});
4040

@@ -51,23 +51,23 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
5151
<button
5252
ref={refs.setReference}
5353
{...getReferenceProps()}
54-
className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex cursor-pointer items-center justify-center gap-2 rounded-sm bg-transparent p-2 font-medium hover:shadow-md"
54+
className="flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-transparent px-3 text-sm font-medium text-[var(--color-header-text)] transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
5555
>
5656
{label}
57-
<PiCaretDownBold />
57+
<PiCaretDownBold className="size-2.5 text-[var(--color-header-text-subtle)]" />
5858
</button>
5959
{isOpen && (
6060
<ul
6161
ref={refs.setFloating}
6262
style={floatingStyles}
6363
{...getFloatingProps()}
64-
className="border-cl1-gray-8 bg-cl1-white dark:border-cl1-gray-1 dark:bg-cl1-gray-0 max-w-80 min-w-60 list-none rounded-sm border pl-0 shadow-md"
64+
className="max-w-64 min-w-44 list-none rounded-lg border border-[var(--color-header-overlay-line)] bg-[var(--color-header-overlay-bg)] p-1 shadow-[0_4px_16px_var(--color-header-overlay-shadow)]"
6565
>
6666
{pages.map((page) => (
67-
<li key={page.href}>
67+
<li key={page.href} className="list-none">
6868
<a
6969
href={page.href}
70-
className="8 hover:bg-cl1-gray-9 dark:hover:bg-cl1-gray-1 block p-3 text-black no-underline"
70+
className="block rounded-md px-2.5 py-1.5 text-sm text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
7171
target={page.href.startsWith("https") ? "_blank" : undefined}
7272
>
7373
{page.label}
@@ -82,12 +82,12 @@ function Dropdown({ dropdown }: { dropdown: (typeof dropdowns)[number] }) {
8282

8383
export default function HeaderDropdownsComponent() {
8484
return (
85-
<div className="flex gap-2 leading-6 text-nowrap">
85+
<div className="flex items-center gap-0.5 text-nowrap">
8686
{links.map(({ label, href }) => (
8787
<a
8888
key={href}
8989
href={href}
90-
className="hover:bg-cl1-white dark:hover:bg-cl1-gray-0 flex items-center justify-center rounded-sm p-2 font-medium text-black no-underline hover:shadow-md"
90+
className="flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-[var(--color-header-text)] no-underline transition-colors duration-150 hover:bg-[var(--color-header-fill)] hover:text-[var(--color-header-hover-text)]"
9191
>
9292
{label}
9393
</a>

‎src/components/changelog/Header.astro‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ const products = directory.filter(
1919
);
2020
2121
const filteredGroups = groups.filter((group) => {
22-
const groupProducts = directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
22+
const groupProducts =
23+
directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
2324
return groupProducts.some((p) => changelogProductIds.includes(p.id));
2425
});
2526
@@ -43,16 +44,18 @@ const currentPath = Astro.url.pathname;
4344
icon="right-caret"
4445
/>
4546
</div>
46-
{showProductSelect && (
47-
<div class="not-content">
48-
<ProductSelect
49-
client:load
50-
products={products}
51-
groups={filteredGroups}
52-
currentPath={currentPath}
53-
/>
54-
</div>
55-
)}
47+
{
48+
showProductSelect && (
49+
<div class="not-content">
50+
<ProductSelect
51+
client:load
52+
products={products}
53+
groups={filteredGroups}
54+
currentPath={currentPath}
55+
/>
56+
</div>
57+
)
58+
}
5659
</div>
5760
<Image
5861
src={HeroImage}

‎src/components/overrides/Footer.astro‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -165,14 +165,6 @@ if (
165165
.feedback-prompt {
166166
padding-top: 2rem;
167167
margin-bottom: 2rem;
168-
169-
h2 {
170-
color: var(--sl-color-white);
171-
font-size: var(--sl-text-h5);
172-
font-weight: 600;
173-
line-height: var(--sl-line-height-headings);
174-
margin-bottom: 0.5rem;
175-
}
176168
}
177169

178170
.starlight-footer-section {

0 commit comments

Comments
 (0)