CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improved hover effects throughout

Browse Source
This commit is contained in:
Madison 2025-07-02 12:18:11 -05:00
parent ffbdae7ac9
commit 1d94119100
5 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/src/components/layout/custom-search-dialog.tsx
View File

@ -300,7 +300,7 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
className={cn(
"text-xs px-3 py-1.5 rounded-md transition-colors flex items-center gap-2",
"text-xs px-3 py-1.5 rounded-md flex items-center gap-2",
dropdownOpen ? "bg-fd-primary text-fd-primary-foreground" : "bg-fd-muted text-fd-muted-foreground hover:bg-fd-muted/80"
)}
>
@ -326,7 +326,7 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro
setDropdownOpen(false);
}}
className={cn(
"w-full text-left px-3 py-2 text-xs hover:bg-fd-muted transition-colors flex items-center gap-2",
"w-full text-left px-3 py-2 text-xs hover:bg-fd-muted flex items-center gap-2",
selectedPlatformFilter === platform && "bg-fd-primary/10 text-fd-primary"
)}
>
@ -344,7 +344,7 @@ export function CustomSearchDialog({ open, onOpenChange }: CustomSearchDialogPro
</div>
<button
onClick={() => onOpenChange(false)}
className="ml-3 p-1 hover:bg-fd-muted rounded-md transition-colors"
className="ml-3 p-1 hover:bg-fd-muted rounded-md"
>
<X className="w-4 h-4 text-fd-muted-foreground" />
</button>

8
docs/src/components/layout/sidebar.tsx
View File

@ -73,7 +73,7 @@ const itemVariants = cva(
active: {
true: 'bg-fd-primary/10 text-fd-primary font-medium shadow-sm',
false:
'text-fd-muted-foreground transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80',
'text-fd-muted-foreground hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80',
},
},
},
@ -345,7 +345,7 @@ export function SidebarFolderTrigger({
<ChevronDown
data-icon
className={cn(
'ms-auto transition-transform duration-200 opacity-70 group-hover:opacity-100',
'ms-auto',
!open && '-rotate-90'
)}
/>
@ -393,7 +393,7 @@ export function SidebarFolderLink(props: LinkProps) {
<ChevronDown
data-icon
className={cn(
'ms-auto transition-transform duration-200 opacity-70 group-hover:opacity-100',
'ms-auto',
!open && '-rotate-90'
)}
/>
@ -442,7 +442,7 @@ export function SidebarCollapseTrigger(props: ComponentProps<'button'>) {
data-collapsed={collapsed}
{...props}
className={cn(
'transition-all hover:scale-105 active:scale-95 bg-fd-card rounded-full p-1.5 shadow-sm',
'hover:scale-105 active:scale-95 bg-fd-card rounded-full p-1.5 shadow-sm',
props.className
)}
onClick={() => {

6
docs/src/components/layouts/api/api-sidebar.tsx
View File

@ -76,7 +76,7 @@ function ApiSidebarLink({
return (
<Link
href={href}
className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-xs transition-colors ${
className={`flex items-center gap-2 px-2 py-1.5 rounded-md text-xs ${
isActive
? 'bg-fd-primary/10 text-fd-primary font-medium'
: 'text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/50'
@ -120,7 +120,7 @@ function CollapsibleSection({
<div className="space-y-1">
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-2 w-full text-left px-2 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-foreground transition-colors"
className="flex items-center gap-2 w-full text-left px-2 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-foreground"
>
{isOpen ? (
<ChevronDown className="h-3 w-3" />
@ -237,7 +237,7 @@ export function ApiSidebarContent({ pages = [] }: { pages?: PageData[] }) {
<ScrollViewport className="p-4 space-y-1">
<Link
href="/docs"
className="flex items-center gap-2 px-2 py-1.5 mb-2 text-sm text-fd-muted-foreground hover:text-fd-foreground transition-colors"
className="flex items-center gap-2 px-2 py-1.5 mb-2 text-sm text-fd-muted-foreground hover:text-fd-foreground"
>
<ArrowLeft className="h-3 w-3" />
Back to docs

17
docs/src/components/mdx/sdk-components.tsx
View File

@ -47,7 +47,7 @@ function ClickableCodeblock({
useEffect(() => {
const savedLightTheme = localStorage.getItem('stack-docs-light-theme');
const savedDarkTheme = localStorage.getItem('stack-docs-dark-theme');
if (savedLightTheme) {
setSelectedLightTheme(savedLightTheme);
}
@ -159,12 +159,12 @@ function ClickableCodeblock({
const updateHighlightedCode = async () => {
try {
// Detect if we're in dark mode by checking CSS custom properties or document class
const isDarkMode = document.documentElement.classList.contains('dark') ||
const isDarkMode = document.documentElement.classList.contains('dark') ||
getComputedStyle(document.documentElement).getPropertyValue('--fd-background').includes('0 0% 3.9%');
// Use selected themes instead of hardcoded ones
const themeToUse = isDarkMode ? selectedDarkTheme : selectedLightTheme;
const html = await codeToHtml(code, {
lang: language,
theme: themeToUse,
@ -233,7 +233,7 @@ function ClickableCodeblock({
<div className="relative">
<button
onClick={() => setIsThemeSwitcherOpen(!isThemeSwitcherOpen)}
className="p-1.5 rounded-md bg-fd-muted/80 hover:bg-fd-muted text-fd-muted-foreground hover:text-fd-foreground transition-colors border border-fd-border/50 group"
className="p-1.5 rounded-md bg-fd-muted/80 hover:bg-fd-muted text-fd-muted-foreground hover:text-fd-foreground border border-fd-border/50 group"
title="Choose code syntax highlighting theme for better readability and accessibility"
aria-label="Code theme selector for accessibility"
>
@ -251,7 +251,6 @@ function ClickableCodeblock({
<div className="text-xs font-medium text-fd-foreground mb-2 pb-1 border-b border-fd-border/30">
Code Theme
</div>
{/* Current mode indicator */}
<div>
<div className="flex items-center gap-1.5 text-xs text-fd-muted-foreground mb-1.5">
@ -272,8 +271,8 @@ function ClickableCodeblock({
setIsThemeSwitcherOpen(false);
}}
className={`w-full flex items-center justify-between px-2 py-1 rounded text-xs transition-all duration-150 ${
isSelected
? 'bg-fd-primary text-fd-primary-foreground font-medium'
isSelected
? 'bg-fd-primary text-fd-primary-foreground font-medium'
: 'hover:bg-fd-accent hover:text-fd-accent-foreground text-fd-foreground'
}`}
style={{ height: '24px' }}
@ -487,7 +486,7 @@ export function ParamField({
export function Accordion({ title, children }: { title: React.ReactNode, children: React.ReactNode }) {
return (
<details className="group mb-3 border border-fd-border/30 rounded-lg bg-fd-card/20">
<summary className="flex items-center justify-between px-3 py-2 cursor-pointer text-fd-foreground hover:bg-fd-accent/30 rounded-lg list-none [&::-webkit-details-marker]:hidden transition-colors">
<summary className="flex items-center justify-between px-3 py-2 cursor-pointer text-fd-foreground hover:bg-fd-accent/30 rounded-lg list-none [&::-webkit-details-marker]:hidden">
<span className="text-sm font-medium">{title}</span>
<svg
className="w-4 h-4 transition-transform group-open:rotate-180 text-fd-muted-foreground"

8
docs/src/components/ui/method-layout.tsx
View File

@ -43,7 +43,7 @@ export function MethodSection({
{title && (
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center justify-between px-3 py-0.5 text-left hover:bg-fd-accent/5 transition-colors rounded-t-lg"
className="w-full flex items-center justify-between px-3 py-0.5 text-left hover:bg-fd-accent/5 rounded-t-lg"
>
<span className="font-medium text-fd-foreground text-sm leading-none">{title}</span>
{isOpen ? (
@ -251,7 +251,8 @@ export function CollapsibleMethodSection({
)}>
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-fd-accent/5 transition-colors rounded-t-lg"
className="w-full flex items-center justify-between px-3 py-0.5 text-left hover:bg-fd-accent/5 rounded-t-lg"
data-testid="collapsible-method-trigger"
>
<div className="flex items-center gap-1.5">
<div id={anchorId} className="text-m font-medium text-fd-foreground font-mono scroll-mt-20 leading-none">
@ -388,7 +389,8 @@ export function CollapsibleTypesSection({
)}>
<button
onClick={() => setIsOpen(!isOpen)}
className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-fd-accent/5 transition-colors rounded-t-lg"
className="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-fd-accent/5 rounded-t-lg"
data-testid="collapsible-method-trigger"
>
<div className="flex items-center gap-1.5">
<div id={anchorId} className="text-m font-medium text-fd-foreground font-mono scroll-mt-20 leading-none">